diff --git a/mukomelov.md b/mukomelov.md index 4da8c48..fbf3ea3 100644 --- a/mukomelov.md +++ b/mukomelov.md @@ -1,20 +1,16 @@ Changelog -- удалил темплейтовые картинки -- удалил main.css файл (видимо остался с прошлого проекта) -- убрал (закомментировал, но лучше удалить) скрипты кпопки вверх и модалки -- !предложение! удалить js кнопки и модалки чтоб не путали (файлы с прошлого - проекта) +- Устанавливает плагин basiclightbox +- Добавляет модалку с членами команды через basiclightbox +- Добавляет классы в элемент футера для зацепки через js и минимальной + стилизации (подчеркивание, тип курсора - подсказка пользователю о + кликабельности элемента) +- js добавлен в оба корневых файла - index.js, library.js (иначе не + подхватывает) -scss +--- -- добавлены переменные (\_variables) - -html - -- создана страница library.html - -js +чтоб не забыть: - создан library.js как входной файл для раздачи css на отдельную страницу. нюанс парсела, в то время как сборка js шерится между страницами, но css нет. @@ -22,9 +18,3 @@ js index должен раздавать js на обе страницы. проверим. https://github.com/parcel-bundler/parcel/issues/2340 - то же самое по modal.html - -задачи по проекту - -- реализована адаптивная верстка и стилизация хедеров основной страницы, - библиотеки, модального окна -- modal.html создано временно для визуализации отрисовки хедера на модалке. diff --git a/package-lock.json b/package-lock.json index 7bbad9c..832fd5e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1521,7 +1521,8 @@ "basiclightbox": { "version": "5.0.3", "resolved": "https://registry.npmjs.org/basiclightbox/-/basiclightbox-5.0.3.tgz", - "integrity": "sha512-COJH2kwhXJrOD3FH+aF25SKykH5PwDNng1U2QpKfZgGjaUI3O2ExB3tsXphrDo4tSfAuCn5jSKCq7DNp4iHQlQ==" + "integrity": "sha512-COJH2kwhXJrOD3FH+aF25SKykH5PwDNng1U2QpKfZgGjaUI3O2ExB3tsXphrDo4tSfAuCn5jSKCq7DNp4iHQlQ==", + "dev": true }, "bcrypt-pbkdf": { "version": "1.0.2", diff --git a/package.json b/package.json index 0e1ad79..662f7c0 100644 --- a/package.json +++ b/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": {} } diff --git a/src/images/sprite.svg b/src/images/sprite.svg index 3e5f0ae..a440b23 100644 --- a/src/images/sprite.svg +++ b/src/images/sprite.svg @@ -6,5 +6,6 @@ + diff --git a/src/images/team-aleksandr.jpg b/src/images/team-aleksandr.jpg new file mode 100644 index 0000000..4df57cc Binary files /dev/null and b/src/images/team-aleksandr.jpg differ diff --git a/src/images/team-daria.jpeg b/src/images/team-daria.jpeg new file mode 100644 index 0000000..20d6033 Binary files /dev/null and b/src/images/team-daria.jpeg differ diff --git a/src/images/team-denis.jpeg b/src/images/team-denis.jpeg new file mode 100644 index 0000000..ceb603c Binary files /dev/null and b/src/images/team-denis.jpeg differ diff --git a/src/images/team-ihor.jpg b/src/images/team-ihor.jpg new file mode 100644 index 0000000..d90fb66 Binary files /dev/null and b/src/images/team-ihor.jpg differ diff --git a/src/images/team-katya.jpg b/src/images/team-katya.jpg new file mode 100644 index 0000000..d90fb66 Binary files /dev/null and b/src/images/team-katya.jpg differ diff --git a/src/images/team-olga.jpg b/src/images/team-olga.jpg new file mode 100644 index 0000000..d90fb66 Binary files /dev/null and b/src/images/team-olga.jpg differ diff --git a/src/images/team-ruslana.jpeg b/src/images/team-ruslana.jpeg new file mode 100644 index 0000000..ba83a67 Binary files /dev/null and b/src/images/team-ruslana.jpeg differ diff --git a/src/images/team-vladymyr.jpeg b/src/images/team-vladymyr.jpeg new file mode 100644 index 0000000..586362c Binary files /dev/null and b/src/images/team-vladymyr.jpeg differ diff --git a/src/index.js b/src/index.js index 337415e..bc2e4c7 100644 --- a/src/index.js +++ b/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'; + diff --git a/src/js/teamLightbox.js b/src/js/teamLightbox.js new file mode 100644 index 0000000..e07451f --- /dev/null +++ b/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 = `
+ Ruslana +

Ruslana

+

Team Leader

+ + + +
+
+ Olga +

Olga

+

Scrum Master

+ + + +
+
+ Daria +

Daria

+

Developer

+ + + +
+
+ Denis +

Denis

+

Developer

+ + + +
+
+ Ihor +

Ihor

+

Developer

+ + + +
+
+ Katya +

Katya

+

Developer

+ + + +
+
+ Vladymyr +

Vladymyr

+

Developer

+ + + +
+
+ Aleksandr +

Aleksandr

+

Developer

+ + + +
`; +const container = document.querySelector('.js-team-modal'); +const markup2 = ``; + +container.addEventListener('click', openModal); + +function teamModalWindow(data) { + return basicLightbox.create(data); +} + +function openModal(e) { + teamModalWindow(markup).show(); +} diff --git a/src/library.html b/src/library.html index e4c561d..779a8ae 100644 --- a/src/library.html +++ b/src/library.html @@ -12,6 +12,7 @@ + diff --git a/src/library.js b/src/library.js index 9ba0492..f722916 100644 --- a/src/library.js +++ b/src/library.js @@ -1 +1,3 @@ import './sass/main.scss'; +import './js/teamLightbox'; +import '../node_modules/basiclightbox/dist/basicLightbox.min.css'; diff --git a/src/partials/footer.html b/src/partials/footer.html index 86579fc..baec920 100644 --- a/src/partials/footer.html +++ b/src/partials/footer.html @@ -1,13 +1,16 @@ \ No newline at end of file + + diff --git a/src/sass/components/_team-modal.scss b/src/sass/components/_team-modal.scss new file mode 100644 index 0000000..c797eae --- /dev/null +++ b/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; +} diff --git a/src/sass/main.scss b/src/sass/main.scss index 094022e..c0e1e10 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -15,5 +15,4 @@ @import './components/pagination'; @import './components/modalFilmCard'; @import './components/backdrop'; - - +@import './components/team-modal';