From 32d2a0ff67cfbf544a1ba47d7afbc7f5dce1bb6a Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Wed, 6 Sep 2023 11:24:54 +0300 Subject: [PATCH] mobile --- .../_modules/auth/login/login.component.scss | 2 +- .../companies/company/company.component.scss | 2 +- .../member/company-member.component.scss | 2 +- .../layout/footer/footer.component.scss | 19 +- .../layout/header/header.component.html | 19 +- .../layout/header/header.component.scss | 262 ++++++------------ .../user-bar/header-user-bar.component.scss | 9 +- .../home/intro/homepage-intro.component.scss | 2 +- .../_modules/pages/page/page.component.scss | 6 + .../tk-structure-page.component.scss | 2 +- .../images/images-section.component.scss | 3 - .../entries/registry-entries.component.scss | 2 +- .../users/profile/user-profile.component.scss | 2 +- src/assets/css/basics.scss | 4 +- src/assets/css/main-menu.scss | 125 +++++---- src/assets/images/icons/burger_blue_40dp.svg | 5 + src/assets/images/logo_vniigaz_wt_280x110.svg | 107 +++---- .../images/logo_vniigaz_wt_280x110_old.svg | 50 ++++ 18 files changed, 333 insertions(+), 290 deletions(-) create mode 100644 src/assets/images/icons/burger_blue_40dp.svg create mode 100644 src/assets/images/logo_vniigaz_wt_280x110_old.svg diff --git a/src/app/_modules/auth/login/login.component.scss b/src/app/_modules/auth/login/login.component.scss index c3b0c6d..ccd1f46 100644 --- a/src/app/_modules/auth/login/login.component.scss +++ b/src/app/_modules/auth/login/login.component.scss @@ -130,7 +130,7 @@ } } -@media screen and (max-width: 960px) { +@media screen and (max-width: 1264px) { .authentication { flex-direction: column; justify-content: center; diff --git a/src/app/_modules/companies/company/company.component.scss b/src/app/_modules/companies/company/company.component.scss index 8e5f381..afbb1e1 100644 --- a/src/app/_modules/companies/company/company.component.scss +++ b/src/app/_modules/companies/company/company.component.scss @@ -137,7 +137,7 @@ } } -@media screen and (max-width: 960px) { +@media screen and (max-width: 1264px) { .main { .left { margin-right: 0; diff --git a/src/app/_modules/companies/members/member/company-member.component.scss b/src/app/_modules/companies/members/member/company-member.component.scss index ab0596d..2c04be5 100644 --- a/src/app/_modules/companies/members/member/company-member.component.scss +++ b/src/app/_modules/companies/members/member/company-member.component.scss @@ -47,7 +47,7 @@ } -@media screen and (max-width: 960px) { +@media screen and (max-width: 1264px) { .member { .left { .avatar { diff --git a/src/app/_modules/layout/footer/footer.component.scss b/src/app/_modules/layout/footer/footer.component.scss index 1a9079d..f4ea69b 100644 --- a/src/app/_modules/layout/footer/footer.component.scss +++ b/src/app/_modules/layout/footer/footer.component.scss @@ -14,11 +14,17 @@ color: white; } } - display: flex; + display: flex; + flex-wrap: wrap; + grid-gap: 20px; + &>div{ + padding-bottom: 40px; + } div{ display: block; flex-grow: 1; - flex-basis: 25%; + flex-basis: 196px; + flex-shrink: 0; margin-bottom: -16px; div { margin-bottom: 16px; @@ -36,7 +42,7 @@ width: 100%; height: 1px; background-color: var(--blue-1); - margin: 40px 0; + margin-bottom: 40px; } .copyright{ @@ -47,3 +53,10 @@ font-weight: 400; } } + + +@media screen and (max-width: 1264px){ + .footer{ + padding: 40px 24px; + } +} diff --git a/src/app/_modules/layout/header/header.component.html b/src/app/_modules/layout/header/header.component.html index c172a83..a6b414e 100644 --- a/src/app/_modules/layout/header/header.component.html +++ b/src/app/_modules/layout/header/header.component.html @@ -1,4 +1,4 @@ -
+
-
- -
+ +
+ +
+ +
+ +
+ АИС СЦ ВНИИГАЗ
-
+
+
diff --git a/src/app/_modules/layout/header/header.component.scss b/src/app/_modules/layout/header/header.component.scss index c48b60c..8c26831 100644 --- a/src/app/_modules/layout/header/header.component.scss +++ b/src/app/_modules/layout/header/header.component.scss @@ -1,66 +1,99 @@ -.header { - position: relative; - .top { - background-color: var(--white); - .limiter { - .logos { +@media screen and (max-width: 1264px){ +:host{ + display: flex; +} +.header{ + flex-grow: 1; + padding: 12px 24px; + background-color: #FFF; + min-height: 100%; + .bottom{ + display: flex; + align-items: stretch; + justify-content: space-between; + .main-menu-btn{ + button{ + width: 40px; + height: 40px; + background: url('~src/assets/images/icons/burger_blue_40dp.svg') no-repeat center;; } } - } - .top { - padding: 20px 0; - .limiter { - display: flex; - flex-direction: row; - align-items: center; - } - .logos { - display: flex; - flex-direction: row; - align-items: center; - gap: 40px; - .fcs { - width: 190px; - height: 64px; - background-repeat: no-repeat; - background-position: center; - } - .minstroy { - width: 155px; - height: 64px; - background-repeat: no-repeat; - background-position: center; - } - } - .menu { - display: flex; - flex-direction: row; - align-items: center; - gap: 24px; - .icon { - padding: 0; - min-width: 24px; - height: 24px; - background-position: center; - background-repeat: no-repeat; - background-color: transparent; - background-size: auto; - transition: transform 0.2s; - &:hover { - transform: scale(1.5); + .logo{ + width: 114px; + height: 80px; + background: url('~src/assets/images/logo_vniigaz_1163x816.svg') no-repeat center;; + background-size: contain; + header-user-bar{ + position: absolute; + top:144px; + right: 24px; + *{ + display: none; } } } + .fog{ + flex-grow: 1; + } + + .hidemobile{ + display: none; + } + + } + &.showmobile{ + position:fixed; + padding: 0; + width: 100dvw; + height: 100dvh; + background-color:rgba(45, 45, 45, 0.63); + z-index:100; + overflow-y: scroll; + .grid-menu{ + background: var(--blue-3); + color: white; + width: 480px; + min-height: 100dvh; + padding: 32px 40px; + button.close{ + width: 24px; + height: 24px; + padding: 0; + border: none; + border-radius: 0; + background: transparent url('~src/assets/images/icons/close_white_24dp.svg') no-repeat center; + } + .ais{ + display: block; + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid rgba(255, 255, 255, 0.63); + } + } + } + + } + .right{ + display: none; + } + } -@media screen and (min-width: 961px){ + +@media screen and (min-width: 1264px){ .header{ + position: relative; .top{ + padding: 20px 0; + background-color: var(--white); .limiter{ + display: flex; + flex-direction: row; + align-items: center; .main-menu-btn{ display: none; width: 24px; @@ -68,6 +101,10 @@ } .menu{ margin-left: auto; + display: flex; + flex-direction: row; + align-items: center; + gap: 24px; } } } @@ -87,13 +124,18 @@ background-image: url('~src/assets/images/logo_vniigaz_1163x816.svg'); background-size: contain; flex-shrink: 0; - ; + header-user-bar{ + display: none; + } } .grid-menu{ display: flex; .close{ display: none; } + >a{ + display: none; + } } .main-menu { overflow: hidden; @@ -127,123 +169,3 @@ bottom: -96px; } } - - - - -@media screen and (max-width: 960px) { - - .header { - .top { - padding: 12px 0; - background-color: var(--grey-4); - .limiter { - display: flex; - justify-content: space-between; - padding: 0 24px; - .main-menu-btn{ - flex-grow: 1; - flex-basis: 40px; - button{ - width: 48px; - height: 48px; - margin: 0 0 0 -12px; - background: url('~src/assets/images/icons/burger_white_24dp.svg') no-repeat center; - } - } - - .logos { - .minstroy { - display: none; - } - } - .menu { - display: flex; - justify-content: flex-end; - align-items: center; - flex-grow: 1; - flex-basis: 40px; - .goggles, .dial-pad, .search, .login{ - display: none; - } - } - } - } - - .showmobile{ - display:flex; - } - .hidemobile{ - display: none; - } - - .bottom { - position:fixed; - align-items: flex-start; - top:0; - border: none; - width: 100vw; - z-index: 210; - overflow-y:scroll; - - .grid-menu{ - width: 100%; - min-height:100%; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: normal; - align-items: stretch; - align-content: normal; - background-color: rgba(62, 61, 64, 0.70); - } - - .limiter { - display: block; - flex-grow: 1; - flex-shrink: 0; - flex-basis: 360px; - align-self: auto; - order: 0; - margin:0; - background-color: #3E3D40; - padding-left: 24px; - padding-top: 16px; - animation: slide-from-left 0.3s; - .close{ - width: 24px; - height: 24px; - background: transparent; - padding: 0; - background: url('~src/assets/images/icons/close_white_24dp.svg') center no-repeat; - } - } - } - .front{ - z-index: 210; - } - .back{ - - display: block; - flex-grow: 1; - flex-shrink: 1; - flex-basis: auto; - align-self: stretch; - flex-basis: 100vw; - } - .ftr{ - color: #FFF; - font-family: Open Sans; - font-size: 16px; - font-style: normal; - font-weight: 700; - line-height: 24px; - - border-top: 1px solid rgba(255, 255, 255, 0.75); - div{ - margin: 16px 0; - cursor: pointer; - } - } - } -} \ No newline at end of file diff --git a/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss b/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss index 52edac7..4812d19 100644 --- a/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss +++ b/src/app/_modules/layout/header/user-bar/header-user-bar.component.scss @@ -94,10 +94,17 @@ } } -@media screen and (max-width: 960px) { +@media screen and (max-width: 1264px) { .user { .avatar { background-color: var(--white); + margin-right: 18px; + } + .name{ + display: none; } } + } + + diff --git a/src/app/_modules/pages/home/intro/homepage-intro.component.scss b/src/app/_modules/pages/home/intro/homepage-intro.component.scss index 469d06e..f6af8e1 100644 --- a/src/app/_modules/pages/home/intro/homepage-intro.component.scss +++ b/src/app/_modules/pages/home/intro/homepage-intro.component.scss @@ -41,7 +41,7 @@ height: 500px; } } -@media screen and (max-width: 960px) { +@media screen and (max-width: 1264px) { .row { flex-direction: column; .tagline { diff --git a/src/app/_modules/pages/page/page.component.scss b/src/app/_modules/pages/page/page.component.scss index 79ce12d..c9e5f00 100644 --- a/src/app/_modules/pages/page/page.component.scss +++ b/src/app/_modules/pages/page/page.component.scss @@ -64,6 +64,12 @@ padding: 16px 0; } + @media screen and (max-width: 1264px) { + .nav-info{ + display: none; + } + } + .holder { margin-bottom: 32px; } diff --git a/src/app/_modules/pages/page/types/tk-structure/tk-structure-page.component.scss b/src/app/_modules/pages/page/types/tk-structure/tk-structure-page.component.scss index 9d47b97..d19fcf0 100644 --- a/src/app/_modules/pages/page/types/tk-structure/tk-structure-page.component.scss +++ b/src/app/_modules/pages/page/types/tk-structure/tk-structure-page.component.scss @@ -117,7 +117,7 @@ } } } -@media screen and (max-width: 960px) { +@media screen and (max-width: 1264px) { .title { span { font-size: 1rem !important; diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss index 90774ac..342a124 100644 --- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss +++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss @@ -84,9 +84,6 @@ height: auto; } } - &.tiles { - - } } } diff --git a/src/app/_modules/registries/registry/entries/registry-entries.component.scss b/src/app/_modules/registries/registry/entries/registry-entries.component.scss index b4cf463..3c542a4 100644 --- a/src/app/_modules/registries/registry/entries/registry-entries.component.scss +++ b/src/app/_modules/registries/registry/entries/registry-entries.component.scss @@ -22,7 +22,7 @@ pagination { } } -@media screen and (max-width: 960px) { +@media screen and (max-width: 1264px) { registry-entry { padding: 16px 0; } diff --git a/src/app/_modules/users/profile/user-profile.component.scss b/src/app/_modules/users/profile/user-profile.component.scss index 69e7ab1..97d140e 100644 --- a/src/app/_modules/users/profile/user-profile.component.scss +++ b/src/app/_modules/users/profile/user-profile.component.scss @@ -58,7 +58,7 @@ } } } -@media screen and (max-width: 960px) { +@media screen and (max-width: 1264px) { .profile { padding: 24px 0; .user { diff --git a/src/assets/css/basics.scss b/src/assets/css/basics.scss index 8a97a7c..0239850 100644 --- a/src/assets/css/basics.scss +++ b/src/assets/css/basics.scss @@ -149,7 +149,7 @@ html-section ul{ } -@media screen and (min-width: 1240px) { +@media screen and (min-width: 1264px) { .fullwidth { width: 100vw; margin-left: calc((1160px - 100vw) / 2); @@ -186,7 +186,7 @@ html-section ul{ } -@media screen and (max-width: 960px) { +@media screen and (max-width: 1264px) { .limiter { padding: 0 24px; } diff --git a/src/assets/css/main-menu.scss b/src/assets/css/main-menu.scss index 65198e4..c5d0792 100644 --- a/src/assets/css/main-menu.scss +++ b/src/assets/css/main-menu.scss @@ -1,39 +1,77 @@ -@media screen and (max-width: 960px){ +@media screen and (max-width: 1264px){ - .main-menu { + .grid-menu { + a{ + color: #FFF; + font-size: 20px; + font-weight: 700; + } + + // level 1 - &>pages-menu{ - display: block; - + pages-menu{ + display: flex; + flex-direction: column; + flex-wrap: nowrap; + align-items: stretch; + align-content: normal; + grid-gap: 20px; + margin-top: 20px; + + pages-menu-item { + display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; - align-items: stretch; - align-content: flex-start; + align-items: flex-start; + align-content: flex-start; + a { + flex-basis:50%; + flex-grow: 1; + + flex-grow: 1; + flex-shrink: 1; + align-self: auto; + order: 0; + } + + pages-menu{ + padding-left: 40px; + flex-basis: 100%; + &.hide-children{display: none;} + pages-menu-item { + + a{ + font-weight: 400; + + } + pages-menu{ + pages-menu-item { + a{ + color: rgba(255, 255, 255, 0.63); + } + } + } + } + - font-size: 16px; - font-style: normal; - font-weight: 700; - line-height: 24px; - margin: 16px 0; - :last-child{ - margin-bottom: 0; } .expand{ - - width:24px; + flex-shrink: 0; + flex-basis:24px; height: 24px; - display: inline-block; + display: inline-block; + margin-right: 16px; } .toggle{ background: url('~src/assets/images/icons/expand_less_24.svg') center no-repeat; @@ -44,41 +82,30 @@ transform: rotateZ(180deg); } - a { - color: #FFF; - display: block; - flex-grow: 1; - flex-shrink: 1; - flex-basis: calc(100% - 24px); - align-self: auto; - order: 0; - padding-left: 4px; - } + a.active-mob span{ - border-bottom: 2px solid #F9B417; + border-bottom: 2px solid rgba(255, 255, 255, 0.63); } - :host-context(.active){ - border-bottom: none !important; - } - pages-menu.hide-children{ - display: none; - } - // level 2 and below - pages-menu{ - flex-grow: 1; - flex-shrink: 0; - flex-basis: 100%; - align-self: auto; - order: 0; + // :host-context(.active){ + // border-bottom: none !important; + // } + + // // level 2 and below + // pages-menu{ + // flex-grow: 1; + // flex-shrink: 0; + // flex-basis: 100%; + // align-self: auto; + // order: 0; - pages-menu-item { - color: rgba(255, 255, 255, 0.75); - /* 16-24/Regular */ - font-weight: 400; - margin-left: 28px; - } - } + // pages-menu-item { + // color: rgba(255, 255, 255, 0.75); + // /* 16-24/Regular */ + // font-weight: 400; + // margin-left: 28px; + // } + // } } } } @@ -86,7 +113,7 @@ -@media screen and (min-width: 961px){ +@media screen and (min-width: 1264px){ pages-menu { diff --git a/src/assets/images/icons/burger_blue_40dp.svg b/src/assets/images/icons/burger_blue_40dp.svg new file mode 100644 index 0000000..551081d --- /dev/null +++ b/src/assets/images/icons/burger_blue_40dp.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/images/logo_vniigaz_wt_280x110.svg b/src/assets/images/logo_vniigaz_wt_280x110.svg index dff9775..9c22671 100644 --- a/src/assets/images/logo_vniigaz_wt_280x110.svg +++ b/src/assets/images/logo_vniigaz_wt_280x110.svg @@ -1,50 +1,57 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + background + + + + Layer 1 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/logo_vniigaz_wt_280x110_old.svg b/src/assets/images/logo_vniigaz_wt_280x110_old.svg new file mode 100644 index 0000000..dff9775 --- /dev/null +++ b/src/assets/images/logo_vniigaz_wt_280x110_old.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +