From 2e34ce4bc51c2b466466d807041bf88c6ac134c8 Mon Sep 17 00:00:00 2001 From: Boris Voropaev Date: Mon, 28 Aug 2023 09:50:18 +0300 Subject: [PATCH] header --- .../layout/header/header.component.html | 24 +- .../layout/header/header.component.scss | 65 +- src/assets/css/buttons.scss | 33 +- src/assets/css/fonts.scss | 16 + src/assets/css/main-menu.scss | 189 ++-- src/assets/images/logo_fcs_48x48.svg | 9 - src/assets/images/logo_fcs_black.svg | 55 -- src/assets/images/logo_fcs_white.svg | 55 -- src/assets/images/logo_fcs_white_218x60.svg | 55 -- src/assets/images/logo_minstroy_black.svg | 813 ------------------ src/assets/images/logo_minstroy_white.svg | 813 ------------------ .../images/logo_minstroy_white_179x72.svg | 813 ------------------ src/assets/images/logo_vniigaz_114x80.svg | 9 + src/environments/environment.ts | 2 +- 14 files changed, 185 insertions(+), 2766 deletions(-) delete mode 100644 src/assets/images/logo_fcs_48x48.svg delete mode 100644 src/assets/images/logo_fcs_black.svg delete mode 100644 src/assets/images/logo_fcs_white.svg delete mode 100644 src/assets/images/logo_fcs_white_218x60.svg delete mode 100644 src/assets/images/logo_minstroy_black.svg delete mode 100644 src/assets/images/logo_minstroy_white.svg delete mode 100644 src/assets/images/logo_minstroy_white_179x72.svg create mode 100644 src/assets/images/logo_vniigaz_114x80.svg diff --git a/src/app/_modules/layout/header/header.component.html b/src/app/_modules/layout/header/header.component.html index a591516..b4dbbcd 100644 --- a/src/app/_modules/layout/header/header.component.html +++ b/src/app/_modules/layout/header/header.component.html @@ -1,5 +1,5 @@
-
+
+
-
- -
- -
-
-
Телефонный справочник
-
Поиск
-
Вход в личный кабинет
-
-
-
-
+ + +
+
+ +
diff --git a/src/app/_modules/layout/header/header.component.scss b/src/app/_modules/layout/header/header.component.scss index ed8239f..39d08c2 100644 --- a/src/app/_modules/layout/header/header.component.scss +++ b/src/app/_modules/layout/header/header.component.scss @@ -1,18 +1,9 @@ .header { - background: var(--grey-4); position: relative; .top { background-color: var(--white); .limiter { .logos { - .fcs { background-image: url('~src/assets/images/logo_fcs_black.svg');} - .minstroy { background-image: url('~src/assets/images/logo_minstroy_black.svg');} - } - .menu { - .goggles { background-image: url('~src/assets/images/icons/glasses_24dp.svg');} - .dial-pad { background-image: url('~src/assets/images/icons/dialpad_24dp.svg');} - .search { background-image: url('~src/assets/images/icons/search_24dp.svg');} - .login { background-image: url('~src/assets/images/icons/login_24dp.svg');} } } } @@ -61,18 +52,6 @@ } } } - .bottom { - position: relative; - background-color: rgba(62, 61, 64, 40%); - border-top: 1px solid #BFBFBF; - .limiter { - .main-menu { - &.hidden { - display: none; - } - } - } - } } @@ -92,18 +71,51 @@ } } } - .bottom { - .limiter { - .close{ - display: none; + .bottom { display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: normal; + align-items: stretch; + align-content: stretch; + padding: 0 calc( (100% - 1440px) / 2); + position: relative; + .logo { + width:114px; + height: 80px; + margin: 12px 24px 12px 40px; + background-image: url('~src/assets/images/logo_vniigaz_114x80.svg'); + background-size: contain; + ; + } + + + .grid-menu{ + display: flex; + .close{ + display: none; + } } .main-menu { overflow: hidden; + &.hidden { + display: none; + } } - } + + .ftr{ display: none; } + .right{ + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + align-content: stretch; + flex-grow: 1; + flex-shrink: 1; + margin-right: 40px; + } } } } @@ -133,7 +145,6 @@ } .logos { - .fcs { background-image: url('~src/assets/images/logo_fcs_white.svg');} .minstroy { display: none; } diff --git a/src/assets/css/buttons.scss b/src/assets/css/buttons.scss index 1326d33..485aaeb 100644 --- a/src/assets/css/buttons.scss +++ b/src/assets/css/buttons.scss @@ -1,11 +1,34 @@ button { + display: inline-flex; + padding: 8px 24px; + justify-content: center; + align-items: center; + gap: 10px; cursor: pointer; - border:none; - font-family: "Open Sans"; - border-radius: 6px; - font-size: 0.875rem; + border-radius: 12px; + border: 1px solid#0070BA; + background:#0070BA; + color: #FFF; + font-family: PT Sans Narrow; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: 32px; /* 133.333% */ + letter-spacing: 0.24px; + + &:hover{ + border: 1px solid #005799; + background: #005799; + } + + &:active{ + border: 1px solid #004077; + background: #004077; + } + &[disabled] { - opacity: 0.5; + border: 1px solid #A1CAE5; + background: #A1CAE5; } } diff --git a/src/assets/css/fonts.scss b/src/assets/css/fonts.scss index 87c8e61..f4a2e87 100644 --- a/src/assets/css/fonts.scss +++ b/src/assets/css/fonts.scss @@ -117,3 +117,19 @@ font-weight: 300; font-style: normal; } + +@font-face { + font-family: 'PT Sans Narrow'; + src: url('../fonts/ptsans/PT_Sans-Web-Regular.ttf'); + font-style: normal; + font-weight: 400; + font-display: swap; +} + +@font-face { + font-family: 'PT Sans Narrow'; + src: url('../fonts/ptsans/PT_Sans-Web-Bold.ttf'); + font-style: normal; + font-weight: 700; + font-display: swap; +} diff --git a/src/assets/css/main-menu.scss b/src/assets/css/main-menu.scss index 650464e..61ca5dc 100644 --- a/src/assets/css/main-menu.scss +++ b/src/assets/css/main-menu.scss @@ -86,19 +86,12 @@ - - - - @media screen and (min-width: 961px){ - .main-menu { + pages-menu { - display: none; - animation: slide-from-bottom-and-fade-in 0.2s; + animation: slide-from-top-and-fade-in 0.2s; pages-menu-item { a { - font-size: 0.875rem; - color: var(--grey-7); transition: all 0.3s; } &:hover { @@ -110,37 +103,57 @@ } // level 1 - &>pages-menu { + pages-menu { width: 100%; display: flex; - justify-content: space-between; + align-items: stretch; overflow: hidden; - + margin: 0 4px; + + &>pages-menu-item { - flex-grow: 1; - flex-shrink: 1; - flex-basis: 0; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + align-items: stretch; + + flex-grow: 0; + flex-shrink: 0; text-align: center; - &>a { - display: block; - padding: 21px 24px; - color: white; - font-size: 1.125rem; - font-weight: 700; - line-height: 1rem; - border-right: #F9B417 solid 1px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &.active, &:hover { - background-color: #3E3D40; - text-decoration: none; + padding: 0 20px; + margin: 0 -4px; + + &:hover { + background-color: #004077; + a{ + color: #FFF; } } + + + + + &>a { + + display: flex; + flex-direction: column; + justify-content: center; + color: #0070BA; + + font-family: PT Sans; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 32px; + - &:first-child { - &>a {border-left: #F9B417 solid 1px;} + &:hover { + text-decoration: none; + color: white; + background: #004077; + + } } &>:hover { @@ -148,114 +161,80 @@ display: flex; } } + + &>pages-menu:first-child { + &>pages-menu { + display: flex; + } + } // level 2 &>pages-menu { display: none; justify-content: center; - align-items: center; + align-items: stretch; position: absolute; top: 100%; left: 0; - width: 100%; - background-color: #ffffff; - border-bottom: #E8E8E8 solid 1px; - box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); + max-width: 100%; + background-color: #004077; z-index: 1000; - align-items: stretch; + padding: 24px calc( (100% - 1400px) / 2);; + margin: 0; + &>pages-menu-item { - position: relative; display: flex; + flex-direction: column; align-items: stretch; + flex-grow: 0; + flex-shrink: 1; + text-align: left; - &.hidden {display: none;} + // &.hidden {display: none;} &>a { - position: relative; - display: flex; - align-items: center; - justify-content: center; - padding: 23px 20px; - min-width: 118px; - max-width: 200px; - font-weight: bold; - text-align: center; + font-family: PT Sans; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: 32px; /* 160% */ + color: white; &>span { display: block; overflow: hidden; } - &:after { - position: absolute; - width: 64px; - height: 4px; - bottom: 0; - left: calc(50% - 32px); - background-color: #F9B417; - content: ''; - opacity: 0; - transition: opacity 0.3s; - } - - &:hover { - background-color: #F5F4F4; - text-decoration: none; - } + &:hover, &.active { &:after { opacity: 1; } } } - - &:first-child { - &>pages-menu { - left: 0; - right: -100px; - } - } - &:last-child { - &>pages-menu { - left: -100px; - right: 0; - } - } - + // level 3 &>pages-menu { - position: absolute; - top: 100%; - left: -50px; - right: -50px; - padding: 8px 24px; - background-color: #ffffff; - border: #dedede solid 1px; - box-shadow: 0 0 6px rgba(0, 0, 0, 0.25); - z-index: 990; - &>pages-menu-item { - display: block; - &>a { + position: relative; + padding: 0; + top: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: left; + &>pages-menu-item { + position: relative; display: block; - padding: 8px 0; - &:hover, &.active { - color: #F9B417; - text-decoration: none; - } + padding: 0; + margin:0; + opacity: 0.63; } - } - } - &:hover { - &>pages-menu { - display: block; - text-decoration: none; - } - } + } + } } } } - } } \ No newline at end of file diff --git a/src/assets/images/logo_fcs_48x48.svg b/src/assets/images/logo_fcs_48x48.svg deleted file mode 100644 index 6a776f1..0000000 --- a/src/assets/images/logo_fcs_48x48.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/images/logo_fcs_black.svg b/src/assets/images/logo_fcs_black.svg deleted file mode 100644 index a63d8a2..0000000 --- a/src/assets/images/logo_fcs_black.svg +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/logo_fcs_white.svg b/src/assets/images/logo_fcs_white.svg deleted file mode 100644 index 7f51c50..0000000 --- a/src/assets/images/logo_fcs_white.svg +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/logo_fcs_white_218x60.svg b/src/assets/images/logo_fcs_white_218x60.svg deleted file mode 100644 index 0e74bca..0000000 --- a/src/assets/images/logo_fcs_white_218x60.svg +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/logo_minstroy_black.svg b/src/assets/images/logo_minstroy_black.svg deleted file mode 100644 index 4e7da58..0000000 --- a/src/assets/images/logo_minstroy_black.svg +++ /dev/null @@ -1,813 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/logo_minstroy_white.svg b/src/assets/images/logo_minstroy_white.svg deleted file mode 100644 index 8d19df6..0000000 --- a/src/assets/images/logo_minstroy_white.svg +++ /dev/null @@ -1,813 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/logo_minstroy_white_179x72.svg b/src/assets/images/logo_minstroy_white_179x72.svg deleted file mode 100644 index e90c2b6..0000000 --- a/src/assets/images/logo_minstroy_white_179x72.svg +++ /dev/null @@ -1,813 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/images/logo_vniigaz_114x80.svg b/src/assets/images/logo_vniigaz_114x80.svg new file mode 100644 index 0000000..6c67f96 --- /dev/null +++ b/src/assets/images/logo_vniigaz_114x80.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/environments/environment.ts b/src/environments/environment.ts index a9ad094..561dc7a 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -6,7 +6,7 @@ export const environment = { production: false, apiUrl: 'http://api.faufcc.lc', clientId: 2, - clientSecret: 'isgoZEMxLrRukQX2WAKHMBnzNIjXWzttmttOWguq', + clientSecret: 'SmnyQ492ZRhPX4tQKCg9VHyXK6dP1qrawnFhy8aM', }; /*