From f1ac63488c0050fec1c4d713d74db4f4ea944395 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 15 Apr 2021 13:43:50 +0200 Subject: Refactor menu css --- client/src/app/+login/login.component.scss | 13 +- .../src/app/header/search-typeahead.component.scss | 3 +- client/src/app/menu/menu.component.html | 39 ++-- client/src/app/menu/menu.component.scss | 225 +++++++++------------ .../video-thumbnail.component.scss | 122 +++++------ .../video-miniature.component.html | 10 +- .../video-miniature.component.scss | 16 +- 7 files changed, 194 insertions(+), 234 deletions(-) (limited to 'client') diff --git a/client/src/app/+login/login.component.scss b/client/src/app/+login/login.component.scss index f605cbb7a..eddaff542 100644 --- a/client/src/app/+login/login.component.scss +++ b/client/src/app/+login/login.component.scss @@ -21,13 +21,6 @@ input[type=email] { } } -.modal-footer.inputs { - .action-button.action-button-cancel { - width: auto !important; - display: inline-block; - } -} - @media screen and (max-width: #{map-get($container-max-widths, sm)}) { .modal-body { #forgot-password-email { @@ -35,10 +28,8 @@ input[type=email] { } } - .modal-footer.inputs { - .action-button.action-button-cancel { - display: none; - } + .modal-footer .grey-button { + display: none; } } diff --git a/client/src/app/header/search-typeahead.component.scss b/client/src/app/header/search-typeahead.component.scss index a60aa38d6..c754a99d1 100644 --- a/client/src/app/header/search-typeahead.component.scss +++ b/client/src/app/header/search-typeahead.component.scss @@ -5,6 +5,7 @@ #search-video { @include peertube-input-text($search-input-width); + padding-left: 10px; padding-right: 40px; // For the search icon font-size: 14px; @@ -14,7 +15,7 @@ } } -.icon.icon-search { +.icon-search { @include icon(25px); height: 18px; diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index a0777660f..df5c7971d 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -40,9 +40,10 @@ - - + (click)="onActiveLinkScrollToAnchor(settingsSensitiveContentPolicy)" + > + + Sensitive: {{ nsfwPolicy }} @@ -72,17 +73,17 @@
- + My account - + My library - + Administration @@ -90,29 +91,29 @@
- - + Login + Create an account
IN MY LIBRARY
- + Videos - + Playlists - + Subscriptions - + History @@ -122,22 +123,22 @@
ON {{instanceName}}
- + Discover - + Trending - + Recently added - + Local videos @@ -146,18 +147,18 @@
- + My settings - + About
-
+
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 729dbc6ee..00d1a1f69 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -5,7 +5,9 @@ $menu-link-icon-size: 22px; $menu-link-icon-margin-right: 18px; $footer-links-base-opacity: .8; -@mixin menu-link { +.menu-link { + @include disable-default-a-behaviour; + display: flex; align-items: center; padding-left: $menu-lateral-padding; @@ -91,32 +93,15 @@ menu { display: flex; align-items: center; justify-content: left; - - my-notification { - margin-left: auto; - margin-right: 15px; - } } } -.logged-in-more { - $main-radius: 25px; - - flex: 1; - margin-left: 13px; - border-radius: $main-radius; - transition: all .1s ease-in-out; - cursor: pointer; - - *, & { - line-height: 1; - } - - &.show { - background-color: rgba(255, 255, 255, 0.20); - box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325); - } +my-notification { + margin-left: auto; + margin-right: 15px; +} +.logged-in-more { @mixin display-hints($is-mobile: false) { background-color: rgba(255, 255, 255, 0.15); @@ -130,6 +115,20 @@ menu { } } + $main-radius: 25px; + + flex: 1; + margin-left: 13px; + border-radius: $main-radius; + transition: all .1s ease-in-out; + cursor: pointer; + line-height: 1; + + &.show { + background-color: rgba(255, 255, 255, 0.20); + box-shadow: inset 0 3px 5px rgba(0, 0, 0, .325); + } + &:hover { @include display-hints; } @@ -140,13 +139,14 @@ menu { /* fill space when on mobile */ max-width: calc(100% - 80px); + .dropdown-toggle { max-width: 100%; } + .logged-in-info { max-width: calc(100% - 45px) !important; } - } .dropdown-toggle-indicator { @@ -175,35 +175,35 @@ menu { padding: 5px 7px; border-radius: $main-radius; } +} - my-account-avatar { - margin-right: 10px; - } +my-account-avatar { + margin-right: 10px; } .logged-in-info { max-width: 105px; flex-grow: 1; +} - .logged-in-display-name, - .logged-in-username { - @include ellipsis; - } +.logged-in-display-name, +.logged-in-username { + @include ellipsis; +} - .logged-in-display-name { - font-size: 16px; - font-weight: $font-semibold; - color: pvar(--menuForegroundColor); +.logged-in-display-name { + font-size: 16px; + font-weight: $font-semibold; + color: pvar(--menuForegroundColor); - @include disable-default-a-behaviour; - } + @include disable-default-a-behaviour; +} - .logged-in-username { - font-size: 13px; - color: #C6C6C6; - margin-top: 3px; - } +.logged-in-username { + font-size: 13px; + color: #C6C6C6; + margin-top: 3px; } .logged-in-menu { @@ -214,9 +214,6 @@ menu { line-height: $line-height-normal; a { - @include menu-link; - @include disable-default-a-behaviour; - $icon-size: 13px; $additional-margin: ($menu-link-icon-size - $icon-size) / 2; @@ -230,10 +227,6 @@ menu { // Keep aligned with other icons margin-left: $additional-margin; - - &[iconName="channel"] { - margin-top: -2px; - } } &.active, @@ -260,27 +253,22 @@ menu { .login-buttons-block { margin: 30px 25px 35px 25px; - .login-button { - @include peertube-button-link; - @include orange-button; - + > a { display: block; width: 100%; - margin-bottom: 10px; - } - .create-account-button { - @include peertube-button-link; - - display: block; - width: 100%; + :not(:last-child) { + margin-bottom: 10px; + } + } +} - color: #fff; - background-color: rgba(255, 255, 255, 0.25); +.create-account-button { + color: #fff; + background-color: rgba(255, 255, 255, 0.25); - &:hover { - background-color: rgba(255, 255, 255, 0.28); - } + &:hover { + background-color: rgba(255, 255, 255, 0.28); } } @@ -290,48 +278,30 @@ menu { margin-bottom: 15px; .block-title { + @include ellipsis; + text-transform: uppercase; font-weight: $font-bold; // Bold font-size: 13px; margin-bottom: 25px; margin-left: 26px; - - @include ellipsis; - margin-right: 30px; } a { - @include menu-link; - @include disable-default-a-behaviour; - min-height: 40px; - - my-global-icon { - &[iconName="playlists"] { - height: 24px; - width: 24px; - - margin-right: 16px; - } - - &[iconName="videos"] { - position: relative; - right: -1px; - } - } } } .footer { width: $menu-width; padding-bottom: 15px; +} - .bottom-links { - display: flex; - flex-direction: column; - padding: 0 $menu-lateral-padding; - } +.footer-bottom { + display: flex; + flex-direction: column; + padding: 0 $menu-lateral-padding; } .footer-links { @@ -340,7 +310,8 @@ menu { flex-wrap: wrap; } - a, span[role=button] { + a, + span[role=button] { display: inline-block; text-decoration: none; color: pvar(--menuForegroundColor); @@ -350,22 +321,6 @@ menu { font-weight: 500; line-height: 1.4rem; margin-right: 8px; - - &.inline-global-icon { - display: inline-flex; - align-items: center; - white-space: nowrap; - height: 1.4rem; - - my-global-icon { - @include apply-svg-color(pvar(--menuForegroundColor)); - - display: flex; - width: auto; - height: 90%; - margin-right: .2rem; - } - } } } @@ -395,32 +350,13 @@ menu { opacity: .4; } - my-global-icon { - &[iconName="cog"], - &[iconName="sign-out"] { - position: relative; - right: -2px; - height: 20px; - width: 20px; - } - } - - my-global-icon.not-displayed { - display: none; - } - &:hover { - my-global-icon.hover-display-toggle.not-displayed { - display: inherit; - } - my-global-icon.hover-display-toggle { + .hover-display-toggle { display: none; } - &.settings-sensitive { - my-global-icon ::ng-deep svg { - margin-top: 2px !important; - } + .hover-display-toggle[hidden] { + display: inherit !important; } } } @@ -440,7 +376,8 @@ menu { } } - .top-menu, .footer { + .top-menu, + .footer { width: 100% !important; } @@ -448,9 +385,35 @@ menu { width: calc(100vw - 30px); } - .dropdown-item:hover, .dropdown-item:active { + .dropdown-item:hover, + .dropdown-item:active { &.settings-sensitive my-global-icon ::ng-deep svg { margin-top: 0px !important; } } } + +my-global-icon { + &[iconName="playlists"] { + height: 24px; + width: 24px; + + margin-right: 16px; + } + + &[iconName="videos"] { + position: relative; + right: -1px; + } + + &[iconName="channel"] { + margin-top: -2px; + } + + &[iconName="sign-out"] { + position: relative; + right: -2px; + height: 20px; + width: 20px; + } +} diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss index 2b723a15a..ea59ab346 100644 --- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss +++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss @@ -4,82 +4,82 @@ .video-thumbnail { @include miniature-thumbnail; +} - .progress-bar { - height: 3px; - width: 100%; - position: absolute; - bottom: 0; - background-color: rgba(0, 0, 0, 0.20); +.progress-bar { + height: 3px; + width: 100%; + position: absolute; + bottom: 0; + background-color: rgba(0, 0, 0, 0.20); - div { - height: 100%; - background-color: pvar(--mainColor); - } + div { + height: 100%; + background-color: pvar(--mainColor); } +} - .video-thumbnail-watch-later-overlay, - .video-thumbnail-label-overlay, - .video-thumbnail-duration-overlay, - .video-thumbnail-live-overlay { - @include static-thumbnail-overlay; +.video-thumbnail-watch-later-overlay, +.video-thumbnail-label-overlay, +.video-thumbnail-duration-overlay, +.video-thumbnail-live-overlay { + @include static-thumbnail-overlay; - border-radius: 3px; - font-size: 12px; - font-weight: $font-semibold; - line-height: 1.1; - z-index: z(miniature); - } + border-radius: 3px; + font-size: 12px; + font-weight: $font-semibold; + line-height: 1.1; + z-index: z(miniature); +} - .video-thumbnail-label-overlay { - position: absolute; - padding: 0 5px; - left: 5px; - top: 5px; - font-weight: $font-bold; +.video-thumbnail-label-overlay { + position: absolute; + padding: 0 5px; + left: 5px; + top: 5px; + font-weight: $font-bold; - &.warning { background-color: orange; } - &.danger { background-color: red; } - } + &.warning { background-color: orange; } + &.danger { background-color: red; } +} - .video-thumbnail-duration-overlay, - .video-thumbnail-live-overlay { - position: absolute; - padding: 0 3px; - right: 5px; - bottom: 5px; - } +.video-thumbnail-duration-overlay, +.video-thumbnail-live-overlay { + position: absolute; + padding: 0 3px; + right: 5px; + bottom: 5px; +} - .video-thumbnail-live-overlay { - font-weight: $font-semibold; - color: #fff; +.video-thumbnail-live-overlay { + font-weight: $font-semibold; + color: #fff; - &:not(.live-ended) { - background-color: rgba(224, 8, 8, 0.7); - } + &:not(.live-ended) { + background-color: rgba(224, 8, 8, 0.7); } +} - .video-thumbnail-actions-overlay { - position: absolute; - display: flex; - flex-direction: column; - right: 5px; - top: 5px; - opacity: 0; +.video-thumbnail-actions-overlay { + position: absolute; + display: flex; + flex-direction: column; + right: 5px; + top: 5px; + opacity: 0; - div:not(:first-child) { - margin-top: 2px; - } + div:not(:first-child) { + margin-top: 2px; + } +} - .video-thumbnail-watch-later-overlay { - padding: 3px; +.video-thumbnail-watch-later-overlay { + padding: 3px; - my-global-icon { - width: 22px; - height: 22px; + my-global-icon { + width: 22px; + height: 22px; - @include apply-svg-color(#fff); - } - } + @include apply-svg-color(#fff); } } diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html index 9c11e7609..bc19127aa 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html @@ -10,10 +10,14 @@
- - + + - + +