Skip to content

R
radon
Commit b6483d4b authored by Eugene Vinokurov's avatar Eugene Vinokurov
Browse files
Options

new responsive header and footer

parent f03a44f3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 430 additions and 20 deletions
src/blocks/page-footer/page-footer.scss
View file @ b6483d4b
...@@ -6,26 +6,79 @@ ...@@ -6,26 +6,79 @@
color: #ffffff; color: #ffffff;
display: flex; display: flex;
@media (max-width: 768px) {
flex-direction: column;
.footer-left {
align-items: flex-start;
.footer-left__devs {
display: none;
}
.footer-left__heading,
.footer-left__nav,
.footer-left__subscribe {
max-width: 100%;
width: 100%;
justify-content: space-between;
.left__subscribe-form {
justify-content: space-between;
input,
button {
flex: 1 1 auto;
}
}
}
}
}
@media (max-width: 576px) {
flex-direction: column;
.footer-left {
align-items: center;
.footer-left__nav ul li {
flex: 0 1 50%;
}
}
}
.footer-left { .footer-left {
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
flex-direction: column; flex-direction: column;
flex-basis: 50%; flex-basis: 50%;
background: #f9f9f9; background: #f9f9f9;
padding: 50px 60px 0 0; padding: 50px 60px;
@media (max-width: 992px) {
padding: 50px 20px;
}
.footer-left__heading { .footer-left__heading {
max-width: 540px; max-width: 540px;
display: flex; display: flex;
flex-wrap: wrap;
.left__heading-logo { .left__heading-logo {
padding-right: 175px; padding-right: 175px;
margin-bottom: 20px;
} }
.left__heading-socials { .left__heading-socials {
display: flex; display: flex;
align-items: center; align-items: center;
li:first-child {
.heading-socials__item {
margin-left: 0;
}
}
.heading-socials__item { .heading-socials__item {
display: block; display: block;
position: relative; position: relative;
...@@ -100,6 +153,18 @@ ...@@ -100,6 +153,18 @@
} }
.left__subscribe-form { .left__subscribe-form {
display: flex;
flex-wrap: wrap;
@media (max-width: 576px) {
flex-direction: column;
input {
width: 100%;
margin-right: 0;
}
}
input { input {
background: linear-gradient(0deg, #ffffff, #ffffff); background: linear-gradient(0deg, #ffffff, #ffffff);
border: 1px solid #dcddde; border: 1px solid #dcddde;
...@@ -109,12 +174,15 @@ ...@@ -109,12 +174,15 @@
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
color: #cccdcf; color: #cccdcf;
margin-right: 30px;
margin-bottom: 15px;
} }
button { button {
max-height: 60px;
min-width: 200px;
background: #6dacde; background: #6dacde;
padding: 20px 48px; padding: 20px 48px;
margin-left: 30px;
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
color: #ffffff; color: #ffffff;
...@@ -145,10 +213,14 @@ ...@@ -145,10 +213,14 @@
} }
.footer-right { .footer-right {
padding: 50px 0 120px 100px; padding: 50px 100px 120px;
flex-basis: 50%; flex-basis: 50%;
background: #025ea1; background: #025ea1;
@media (max-width: 992px) {
padding: 50px 20px 120px;
}
.footer-right__contacts { .footer-right__contacts {
font-size: 16px; font-size: 16px;
line-height: 21px; line-height: 21px;
......
src/blocks/page-header/img/arrow-half.svg 0 → 100644
View file @ b6483d4b
<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0893 7.24652H0V5.75348H11.0893L6.30494 1.05573L7.38014 0L14 6.5L7.38014 13L6.30494 11.9443L11.0893 7.24652Z" fill="#DCDDDE"/>
</svg>
src/blocks/page-header/img/mobile-logo.svg 0 → 100644
View file @ b6483d4b
This diff is collapsed.
src/blocks/page-header/page-header.pug
View file @ b6483d4b
...@@ -112,15 +112,15 @@ mixin page-header() ...@@ -112,15 +112,15 @@ mixin page-header()
li li
a(href="#") Обеспечение безопасного хранения РАО a(href="#") Обеспечение безопасного хранения РАО
li li
a(href="#") Обследование объектов и территорий на соответствие 
требованиям радиационной безопасности a(href="#") Обследование объектов и территорий на соответствие требованиям радиационной безопасности
li li
a(href="#") Обследование радиоактивно загрязненных и потенциально 
радиоактивно загрязненных объектов и территорий a(href="#") Обследование радиоактивно загрязненных и потенциально радиоактивно загрязненных объектов и территорий
li li
a(href="#") Проведение оперативных работ по ликвидации 
радиационно-аварийных ситуаций a(href="#") Проведение оперативных работ по ликвидации радиационно-аварийных ситуаций
li li
a(href="#") Дезактивация и реабилитация радиоактивно загрязненных 
объектов и территорий a(href="#") Дезактивация и реабилитация радиоактивно загрязненных объектов и территорий
li li
a(href="#") Дезактивация радиоактивно загрязненной спецодежды, 
защитных средств и оборудования a(href="#") Дезактивация радиоактивно загрязненной спецодежды, защитных средств и оборудования
li li
a(href="#") Радиационно-экологический мониторинг объектов окружающей среды a(href="#") Радиационно-экологический мониторинг объектов окружающей среды
li li
...@@ -184,3 +184,74 @@ mixin page-header() ...@@ -184,3 +184,74 @@ mixin page-header()
a(href="#") Журналистам a(href="#") Журналистам
li li
.header-menu-bottom__search .header-menu-bottom__search
.header-menu-mobile
a(href="#").header-menu-mobile__logo
a(href="#").header-menu-mobile__button
span
span
.header-menu-mobile__more
input(type="text", placeholder="Что ищем?").mobile__more-search
ul.mobile__more-list
li.mobile__more-list__item
a(href="#") О РАДОНЕ
ul._inner-list
li._inner-list__item
a(href="#") Контроль и прием РАО и ИИИ от организаций-поставщиков
li._inner-list__item
a(href="#") Транспортирование РАО
li._inner-list__item
a(href="#") Переработка и кондиционирование РА
li._inner-list__item
a(href="#") Обеспечение безопасного хранения РАО
li._inner-list__item
a(href="#") Обследование объектов и территорий на соответствие требованиям радиационной безопасности
li._inner-list__item
a(href="#") Обследование радиоактивно загрязненных и потенциально радиоактивно загрязненных объектов и территорий
li._inner-list__item
a(href="#") Проведение оперативных работ по ликвидации радиационно-аварийных ситуаций
li._inner-list__item
a(href="#") Дезактивация и реабилитация радиоактивно загрязненных объектов и территорий
li._inner-list__item
a(href="#") Дезактивация радиоактивно загрязненной спецодежды, защитных средств и оборудования
li._inner-list__item
a(href="#") Радиационно-экологический мониторинг объектов окружающей среды
li._inner-list__item
a(href="#") Радиационный контроль изделий и материалов
li._inner-list__item
a(href="#") Радиационно-экологическое обследование территорий отводимых под строительство
li._inner-list__item
a(href="#") Ртутно-экологическое обследование помещений
li._inner-list__item
a(href="#") Индивидуальный дозиметрический контроль
li._inner-list__item
a(href="#") Испытания и аналитическое обеспечение
li._inner-list__item
a(href="#") Поверка средств измерений
li._inner-list__item
a(href="#") Формирование радиационно-гигиенических паспортов
li.mobile__more-list__item
a(href="#") ФИЛИАЛЫ
li.mobile__more-list__item
a(href="#") УСЛУГИ
li.mobile__more-list__item
a(href="#") КАРЬЕРА
li.mobile__more-list__item
a(href="#") ЖУРНАЛИСТАМ
li.mobile__more-list__item
a(href="#") НАПРАВЛЕНИЯ ДЕЯТЕЛЬНОСТИ
li.mobile__more-list__item
a(href="#") ЭКОЛОГИЯ
li.mobile__more-list__item
a(href="#") СМИ О НАС
li.mobile__more-list__item
a(href="#") НОВОСТИ
li.mobile__more-list__item
a(href="#") ОНЛАЙН-МОНИТОРИНГ
li.mobile__more-list__item
a(href="#") ФОТОГАЛЕРЕЯ
li.mobile__more-list__item
a(href="#") ВИДЕОГАЛЕРЕЯ
li.mobile__more-list__item
a(href="#") КОНТАКТЫ
a(href="#").mobile__more-switch Перейти на ПК версию
src/blocks/page-header/page-header.scss
View file @ b6483d4b
.header { .header {
padding-bottom: 40px; padding-bottom: 40px;
.col-lg-1 a {
@media (max-width: 992px) {
margin: 0 auto;
}
}
@media (max-width: 768px) {
.header-menu-top,
.header-menu-bottom,
.col-lg-1 {
display: none !important;
}
.header-menu-mobile {
display: flex;
}
}
.header-menu-mobile {
z-index: 999;
background: #003274;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 92px;
display: none;
justify-content: space-between;
align-items: center;
.header-menu-mobile__logo {
height: 100%;
width: 123px;
margin-left: 30px;
background: url("../img/mobile-logo.svg") no-repeat center;
}
.header-menu-mobile__button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 92px;
width: 92px;
&._active {
span {
width: 30px !important;
&:first-child {
transform: rotate(45deg) translateY(5px);
}
&:last-child {
margin-left: 0;
transform: rotate(-45deg) translateY(-5px);
}
}
}
span {
display: block;
height: 2px;
background: #ffffff;
transition: 0.3s ease;
&:first-child {
width: 22px;
margin-bottom: 6px;
}
&:last-child {
margin-left: 8px;
width: 30px;
}
}
}
.header-menu-mobile__more {
overflow-y: scroll;
background: #ffffff;
padding: 30px 20px;
position: fixed;
top: 92px;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
opacity: 0;
transition: 0.3s ease;
&._active {
visibility: visible;
opacity: 1;
}
.mobile__more-search {
width: 100%;
padding: 15px 0 15px 22px;
font-size: 16px;
line-height: 21px;
color: #cccdcf;
border: 1px solid #dcddde;
}
.mobile__more-list {
margin-top: 40px;
.mobile__more-list__item {
a {
position: relative;
padding: 15px 0;
display: block;
font-size: 15px;
font-weight: 700;
line-height: 19px;
color: #003274;
border-bottom: 1px solid #f9f9f9;
&::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 14px;
height: 100%;
background: url("../img/arrow-half.svg") no-repeat center;
}
}
._inner-list {
display: none;
._inner-list__item {
a {
display: block;
padding: 15px 0;
font-weight: 350;
font-size: 15px;
line-height: 22px;
color: #292929;
border-bottom: 1px solid #f9f9f9;
&::before {
content: initial;
}
}
}
&._active {
display: block;
}
}
}
}
.mobile__more-switch {
margin-top: 50px;
display: block;
font-weight: 700;
line-height: 21px;
color: #6dacde;
padding: 20px 0;
width: 100%;
}
}
}
.header-full { .header-full {
background: #ffffff; background: #ffffff;
z-index: 99; z-index: 99;
...@@ -149,16 +317,24 @@ ...@@ -149,16 +317,24 @@
.header-menu-top { .header-menu-top {
display: flex; display: flex;
flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
font-weight: 300; font-weight: 300;
> * {
flex: 1 1 auto;
}
.header-menu-top__list { .header-menu-top__list {
display: flex; display: flex;
text-decoration: underline; text-decoration: underline;
li { li {
flex: 1 1 auto;
a { a {
padding: 19px 17.5px 26px; text-align: center;
padding: 19px 0 26px;
display: block; display: block;
&:hover { &:hover {
...@@ -173,16 +349,26 @@ ...@@ -173,16 +349,26 @@
} }
.header-menu-top__link { .header-menu-top__link {
display: flex;
justify-content: flex-end;
text-align: center;
padding: 19px 0 26px; padding: 19px 0 26px;
text-decoration: underline; text-decoration: underline;
&:hover { &:hover {
color: #003274; color: #003274;
} }
@media (max-width: 992px) {
justify-content: flex-start;
padding: 19px 7px 26px;
}
} }
.header-menu-top__lang { .header-menu-top__lang {
width: 40px;
display: flex; display: flex;
justify-content: flex-end;
a { a {
display: block; display: block;
...@@ -211,12 +397,19 @@ ...@@ -211,12 +397,19 @@
.header-menu-bottom__list { .header-menu-bottom__list {
display: flex; display: flex;
justify-content: space-between;
@media (max-width: 992px) {
li a {
font-size: 13px;
}
}
li { li {
flex: 1 1 auto;
&:first-child { &:first-child {
width: 40px;
cursor: pointer; cursor: pointer;
padding: 0 22px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -252,9 +445,10 @@ ...@@ -252,9 +445,10 @@
} }
a { a {
text-align: center;
color: #ffffff; color: #ffffff;
display: block; display: block;
padding: 23px 18.5px; padding: 23px 0;
font-weight: 700; font-weight: 700;
transition: 0.3s ease; transition: 0.3s ease;
...@@ -265,7 +459,7 @@ ...@@ -265,7 +459,7 @@
} }
&:last-child { &:last-child {
padding: 0 20px; width: 40px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
......
src/img/mobile-logo.svg 0 → 100644
View file @ b6483d4b
This diff is collapsed.
src/js/script.js
View file @ b6483d4b
...@@ -128,6 +128,39 @@ class Application { ...@@ -128,6 +128,39 @@ class Application {
document.body.removeAttribute("style"); document.body.removeAttribute("style");
}); });
const mobileMenuButton = document.querySelector(
".header .header-menu-mobile .header-menu-mobile__button"
);
const mobileMenu = document.querySelector(
".header .header-menu-mobile .header-menu-mobile__more"
);
mobileMenuButton.addEventListener("click", () => {
if (mobileMenu.classList.contains("_active")) {
mobileMenu.classList.remove("_active");
mobileMenuButton.classList.remove("_active");
} else {
mobileMenu.classList.add("_active");
mobileMenuButton.classList.add("_active");
}
});
const mobileMenuList = document.querySelectorAll(
".header .header-menu-mobile .header-menu-mobile__more .mobile__more-list .mobile__more-list__item"
);
mobileMenuList.forEach((li) => {
const liMore = li.querySelector("._inner-list");
li.addEventListener("click", () => {
if (liMore.classList.contains("_active")) {
liMore.classList.remove("_active");
} else {
liMore.classList.add("_active");
}
});
});
} }
turnParallax() { turnParallax() {
......
src/scss/main.scss
View file @ b6483d4b
...@@ -12,13 +12,6 @@ ...@@ -12,13 +12,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
@media (max-width: 768px) {
.header,
.footer {
display: none !important;
}
}
body { body {
font-family: "Rosatom", "Arial", sans-serif; font-family: "Rosatom", "Arial", sans-serif;
color: #000000; color: #000000;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment