Merge pull request #11 from RuslanaLogosha/our-team

Our team

mukomelov.md

@@ -1,30 +1,20 @@
 Changelog
 
-- удалил темплейтовые картинки
-- удалил main.css файл (видимо остался с прошлого проекта)
-- убрал (закомментировал, но лучше удалить) скрипты кпопки вверх и модалки
-- !предложение! удалить js кнопки и модалки чтоб не путали (файлы с прошлого
-  проекта)
+- Устанавливает плагин basiclightbox
+- Добавляет модалку с членами команды через basiclightbox
+- Добавляет классы в элемент футера для зацепки через js и минимальной
+  стилизации (подчеркивание, тип курсора - подсказка пользователю о
+  кликабельности элемента)
+- js добавлен в оба корневых файла - index.js, library.js (иначе не
+  подхватывает)
 
-scss
+---
 
-- добавлены переменные (\_variables)
-
-html
-
-- создана страница library.html
-
-js
+чтоб не забыть:
 
 - создан library.js как входной файл для раздачи css на отдельную страницу.
   нюанс парсела, в то время как сборка js шерится между страницами, но css нет.
   В страницу библиотеки подключен library как обходной путь для привязки css,
   index должен раздавать js на обе страницы. проверим.
   https://github.com/parcel-bundler/parcel/issues/2340
   - то же самое по modal.html
-
-задачи по проекту
-
-- реализована адаптивная верстка и стилизация хедеров основной страницы,
-  библиотеки, модального окна
-- modal.html создано временно для визуализации отрисовки хедера на модалке.

package.json

@@ -21,13 +21,12 @@
     "url": "https://github.com/goitacademy/parcel-project-template/issues"
   },
   "devDependencies": {
+    "basiclightbox": "^5.0.3",
     "gh-pages": "^3.1.0",
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-handlebars-precompile": "^1.0.2",
     "posthtml-include": "^1.6.0",
     "sass": "^1.26.9"
   },
-  "dependencies": {
-    "basiclightbox": "^5.0.3"
-  }
+  "dependencies": {}
 }

src/index.js

@@ -1,5 +1,8 @@
-import "./sass/main.scss";
-import "./js/modalFilmCard.js";
-import "./js/modalOpen.js";
-import "./js/cardFetc.js";
+import './sass/main.scss';
+import './js/modalFilmCard.js';
+import './js/modalOpen.js';
+import './js/cardFetc.js';
+import './js/teamLightbox';
 import "./js/pagination.js";
+import '../node_modules/basiclightbox/dist/basicLightbox.min.css';
+

src/js/teamLightbox.js

@@ -0,0 +1,87 @@
+import * as basicLightbox from 'basiclightbox';
+import ruslanaUrl from '../images/team-ruslana.jpeg';
+import olgaUrl from '../images/team-olga.jpg';
+import dariaUrl from '../images/team-daria.jpeg';
+import denisUrl from '../images/team-denis.jpeg';
+import ihorUrl from '../images/team-ihor.jpg';
+import katyaUrl from '../images/team-katya.jpg';
+import vladymyrUrl from '../images/team-vladymyr.jpeg';
+import aleksandrUrl from '../images/team-aleksandr.jpg';
+import spriteUrl from '../images/sprite.svg';
+
+const markup = `<div class="team-wrapper"><div class="team-card">
+    <img src="${ruslanaUrl}" alt="Ruslana" class="team-image">
+    <p class="team-name">Ruslana</p>
+    <p class="team-role">Team Leader</p>
+    <a href="https://github.com/RuslanaLogosha" target="_blank" class="team-git"><svg class="logo__icon" width="24" height="24">
+      <use href="${spriteUrl}#github"></use>
+    </svg></a>
+</div>
+<div class="team-card">
+    <img src="${olgaUrl}" alt="Olga" class="team-image">
+    <p class="team-name">Olga</p>
+    <p class="team-role">Scrum Master</p>
+    <a href="https://github.com/levshukova" target="_blank" class="team-git"><svg class="logo__icon" width="24" height="24">
+      <use href="${spriteUrl}#github"></use>
+    </svg></a>
+</div>
+<div class="team-card">
+    <img src="${dariaUrl}" alt="Daria" class="team-image">
+    <p class="team-name">Daria</p>
+    <p class="team-role">Developer</p>
+    <a href="https://github.com/Daria-Churkina" target="_blank" class="team-git"><svg class="logo__icon" width="24" height="24">
+      <use href="${spriteUrl}#github"></use>
+    </svg></a>
+</div>
+<div class="team-card">
+    <img src="${denisUrl}" alt="Denis" class="team-image">
+    <p class="team-name">Denis</p>
+    <p class="team-role">Developer</p>
+    <a href="https://github.com/" target="_blank" class="team-git"><svg class="logo__icon" width="24" height="24">
+      <use href="${spriteUrl}#github"></use>
+    </svg></a>
+</div>
+<div class="team-card">
+    <img src="${ihorUrl}" alt="Ihor" class="team-image">
+    <p class="team-name">Ihor</p>
+    <p class="team-role">Developer</p>
+    <a href="https://github.com/taraiihor" target="_blank" class="team-git"><svg class="logo__icon" width="24" height="24">
+      <use href="${spriteUrl}#github"></use>
+    </svg></a>
+</div>
+<div class="team-card">
+    <img src="${katyaUrl}" alt="Katya" class="team-image">
+    <p class="team-name">Katya</p>
+    <p class="team-role">Developer</p>
+    <a href="https://github.com/Kateryna-Urbanovych" target="_blank" class="team-git"><svg class="logo__icon" width="24" height="24">
+      <use href="${spriteUrl}#github"></use>
+    </svg></a>
+</div>
+<div class="team-card">
+    <img src="${vladymyrUrl}" alt="Vladymyr" class="team-image">
+    <p class="team-name">Vladymyr</p>
+    <p class="team-role">Developer</p>
+    <a href="https://github.com/created-with-love" target="_blank" class="team-git"><svg class="logo__icon" width="24" height="24">
+      <use href="${spriteUrl}#github"></use>
+    </svg></a>
+</div>
+<div class="team-card">
+    <img src="${aleksandrUrl}" alt="Aleksandr" class="team-image">
+    <p class="team-name">Aleksandr</p>
+    <p class="team-role">Developer</p>
+    <a href="https://github.com/AleksMkm" target="_blank" class="team-git"><svg class="logo__icon" width="24" height="24">
+      <use href="${spriteUrl}#github"></use>
+    </svg></a>
+</div></div>`;
+const container = document.querySelector('.js-team-modal');
+const markup2 = `<img src="${katyaUrl}"/>`;
+
+container.addEventListener('click', openModal);
+
+function teamModalWindow(data) {
+  return basicLightbox.create(data);
+}
+
+function openModal(e) {
+  teamModalWindow(markup).show();
+}

src/library.html

@@ -12,6 +12,7 @@
   </head>
   <body>
     <include src="./partials/header-library.html"></include>
+    <include src="./partials/footer.html"></include>
     <script src="./library.js"></script>
   </body>
 </html>

src/library.js

@@ -1 +1,3 @@
 import './sass/main.scss';
+import './js/teamLightbox';
+import '../node_modules/basiclightbox/dist/basicLightbox.min.css';

src/partials/footer.html

@@ -1,13 +1,16 @@
 <footer>
-    <div class="container">
-        <div class="page__footer">
-            <p class="copyright">&copy; 2020 | All Rights Reserved |&nbsp; </p>
-            <div class=developers>
-                <p>Developed with</p>
-<img src='./images/orange-heart.svg' alt='иконка сердечка' class="footer__image">      
-   <p>by GoIT Students</p>
-            </div>
-        </div>
+  <div class="container">
+    <div class="page__footer">
+      <p class="copyright">&copy; 2020 | All Rights Reserved |&nbsp;</p>
+      <div class="developers">
+        <p>Developed with</p>
+        <img
+          src="./images/orange-heart.svg"
+          alt="иконка сердечка"
+          class="footer__image"
+        />
+        <p class="js-team-modal team-modal">by GoIT Students</p>
+      </div>
     </div>
-
-</footer>
+  </div>
+</footer>

src/sass/components/_team-modal.scss

@@ -0,0 +1,110 @@
+.basicLightbox {
+  overflow: scroll;
+}
+
+.team-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+
+  margin: -20px;
+
+  @media screen and (max-width: ($tablet - 1)) {
+    margin-top: 70px;
+  }
+
+  width: 240px;
+
+  background-color: $white;
+  border-radius: 15px;
+
+  @media screen and (min-width: $tablet) {
+    width: 600px;
+
+    border-radius: 25px;
+  }
+
+  @media screen and (min-width: $desktop) {
+    margin: -30px;
+
+    width: 800px;
+  }
+}
+
+.team-card {
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  margin: 20px;
+
+  width: calc((100% - 80px) / 2);
+
+  @media screen and (min-width: $tablet) {
+    width: calc((100% - 160px) / 4);
+  }
+
+  @media screen and (min-width: $desktop) {
+    margin: 30px;
+
+    width: calc((100% - 240px) / 4);
+  }
+}
+
+.team-image {
+  margin-bottom: 10px;
+
+  width: 100%;
+
+  border-radius: 50%;
+  box-shadow: 5px 5px 11px -2px $dark;
+}
+
+.team-name {
+  margin-bottom: 5px;
+
+  font-family: $mainFont;
+  font-weight: 700;
+}
+
+.team-role {
+  font-family: $mainFont;
+
+  @media screen and (max-width: ($tablet - 1)) {
+    font-size: 14px;
+  }
+
+  color: $accentColor;
+}
+
+.team-git {
+  position: absolute;
+
+  top: 65px;
+  right: -10px;
+
+  @media screen and (min-width: $tablet) {
+    top: 100px;
+  }
+
+  @media screen and (min-width: $desktop) {
+    top: 120px;
+  }
+
+  transform: scale(1);
+  @include transition(transform);
+
+  &:hover,
+  &:focus {
+    transform: scale(1.5);
+  }
+}
+
+// footer
+
+.team-modal {
+  text-decoration: underline;
+
+  cursor: pointer;
+}

src/sass/main.scss

@@ -15,5 +15,4 @@
 @import './components/pagination';
 @import './components/modalFilmCard';
 @import './components/backdrop';
-
-
+@import './components/team-modal';