From 5d43dae3699d088698560851cb6f35f3dbc70c69 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 11 Mar 2021 10:40:59 +0100 Subject: [PATCH] Try to reduce CSS size --- .../notification/peertube-socket.service.ts | 7 +- client/src/app/menu/menu.component.scss | 365 +++++++++--------- .../assets/images/feather/cloud-download.svg | 2 +- .../assets/images/feather/subscriptions.svg | 19 - client/src/assets/images/misc/language.svg | 8 +- client/src/assets/images/misc/npm.svg | 2 +- client/src/assets/images/misc/peertube-x.svg | 25 +- .../src/assets/images/misc/playlist-add.svg | 4 +- client/src/assets/images/misc/support.svg | 4 +- client/src/assets/images/misc/video-lang.svg | 2 +- client/src/sass/include/_mixins.scss | 25 -- 11 files changed, 207 insertions(+), 256 deletions(-) delete mode 100644 client/src/assets/images/feather/subscriptions.svg diff --git a/client/src/app/core/notification/peertube-socket.service.ts b/client/src/app/core/notification/peertube-socket.service.ts index bc3f7b893..eab1c63f2 100644 --- a/client/src/app/core/notification/peertube-socket.service.ts +++ b/client/src/app/core/notification/peertube-socket.service.ts @@ -58,12 +58,11 @@ export class PeerTubeSocket { this.notificationSocket = this.io(environment.apiUrl + '/user-notifications', { query: { accessToken: this.auth.getAccessToken() } }) - - this.notificationSocket.on('new-notification', (n: UserNotificationServer) => { - this.ngZone.run(() => this.dispatchNotificationEvent('new', n)) - }) }) + this.notificationSocket.on('new-notification', (n: UserNotificationServer) => { + this.ngZone.run(() => this.dispatchNotificationEvent('new', n)) + }) } private async initLiveVideosSocket () { diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 2ea66e57d..aa247d268 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -3,6 +3,7 @@ $menu-link-icon-size: 22px; $menu-link-icon-margin-right: 18px; +$footer-links-base-opacity: .8; @mixin menu-link { display: flex; @@ -91,168 +92,168 @@ menu { align-items: center; justify-content: left; - .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); - } - - @mixin display-hints($is-mobile: false) { - background-color: rgba(255, 255, 255, 0.15); - - @if $is-mobile { - .dropdown-toggle-indicator { - display: inherit !important; - } - .dropdown-toggle:first-child { - padding-right: 30px !important; - } - } - } - - &:hover { - @include display-hints; - } - - /* smartphones and touchscreens */ - @media (hover: none) and (pointer: coarse) { - @include display-hints($is-mobile: true); - - /* 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 { - position: relative; - width: 0; - display: none; - - span { - position: absolute; - right: -35px; - top: -8px; - color: grey; - width: $main-radius; - } - } - - .dropdown-toggle { - &::after { - border: none; - } - } - - .dropdown-toggle:first-child { - display: flex; - align-items: center; - padding: 5px 7px; - border-radius: $main-radius; - } - - img { - @include avatar(34px); - - 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 { - font-size: 16px; - font-weight: $font-semibold; - color: pvar(--menuForegroundColor); - - @include disable-default-a-behaviour; - } - - .logged-in-username { - font-size: 13px; - color: #C6C6C6; - margin-top: 3px; - } - } - } - my-notification { margin-left: auto; margin-right: 15px; } } +} - .logged-in-menu { +.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); + } + + @mixin display-hints($is-mobile: false) { + background-color: rgba(255, 255, 255, 0.15); + + @if $is-mobile { + .dropdown-toggle-indicator { + display: inherit !important; + } + .dropdown-toggle:first-child { + padding-right: 30px !important; + } + } + } + + &:hover { + @include display-hints; + } + + /* smartphones and touchscreens */ + @media (hover: none) and (pointer: coarse) { + @include display-hints($is-mobile: true); + + /* 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 { + position: relative; + width: 0; + display: none; + + span { + position: absolute; + right: -35px; + top: -8px; + color: grey; + width: $main-radius; + } + } + + .dropdown-toggle { + &::after { + border: none; + } + } + + .dropdown-toggle:first-child { display: flex; - flex-direction: column; - align-items: flex-start; - border-top: 1px solid var(--greyForegroundColor); - line-height: $line-height-normal; + align-items: center; + padding: 5px 7px; + border-radius: $main-radius; + } - a { - @include menu-link; - @include disable-default-a-behaviour; + img { + @include avatar(34px); - $icon-size: 13px; - $additional-margin: ($menu-link-icon-size - $icon-size) / 2; + margin-right: 10px; + } +} - font-size: 14px; - width: 100%; - min-height: 35px; +.logged-in-info { + max-width: 105px; + + flex-grow: 1; + + .logged-in-display-name, + .logged-in-username { + @include ellipsis; + } + + .logged-in-display-name { + font-size: 16px; + font-weight: $font-semibold; + color: pvar(--menuForegroundColor); + + @include disable-default-a-behaviour; + } + + .logged-in-username { + font-size: 13px; + color: #C6C6C6; + margin-top: 3px; + } +} + +.logged-in-menu { + display: flex; + flex-direction: column; + align-items: flex-start; + border-top: 1px solid var(--greyForegroundColor); + 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; + + font-size: 14px; + width: 100%; + min-height: 35px; + + my-global-icon { + width: $icon-size; + height: $icon-size; + + // Keep aligned with other icons + margin-left: $additional-margin; + + &[iconName="channel"] { + margin-top: -2px; + } + } + + &.active, + &:hover, + &:focus-visible { + my-global-icon { + @include apply-svg-color(var(--menuForegroundColor)); + } + } + + &.active { + $border-left-width: 4px; + + font-weight: $font-semibold; + border-left: $border-left-width solid var(--mainColor); my-global-icon { - width: $icon-size; - height: $icon-size; - - // Keep aligned with other icons - margin-left: $additional-margin; - - &[iconName="channel"] { - margin-top: -2px; - } - } - - &.active, - &:hover, - &:focus-visible { - my-global-icon { - @include apply-svg-color(var(--menuForegroundColor)); - } - } - - &.active { - $border-left-width: 4px; - - font-weight: $font-semibold; - border-left: $border-left-width solid var(--mainColor); - - my-global-icon { - margin-left: $additional-margin - $border-left-width; - } + margin-left: $additional-margin - $border-left-width; } } } @@ -333,50 +334,48 @@ menu { flex-direction: column; padding: 0 $menu-lateral-padding; } +} - $footer-links-base-opacity: .8; +.footer-links { + &, > div { + display: flex; + flex-wrap: wrap; + } - .footer-links { - &, > div { - display: flex; - flex-wrap: wrap; - } + a, span[role=button] { + display: inline-block; + text-decoration: none; + color: pvar(--menuForegroundColor); + opacity: $footer-links-base-opacity; + white-space: nowrap; + font-size: 90%; + font-weight: 500; + line-height: 1.4rem; + margin-right: 8px; - a, span[role=button] { - display: inline-block; - text-decoration: none; - color: pvar(--menuForegroundColor); - opacity: $footer-links-base-opacity; + &.inline-global-icon { + display: inline-flex; + align-items: center; white-space: nowrap; - font-size: 90%; - font-weight: 500; - line-height: 1.4rem; - margin-right: 8px; + height: 1.4rem; - &.inline-global-icon { - display: inline-flex; - align-items: center; - white-space: nowrap; - height: 1.4rem; + my-global-icon { + @include apply-svg-color(pvar(--menuForegroundColor)); - my-global-icon { - @include apply-svg-color(pvar(--menuForegroundColor)); - - display: flex; - width: auto; - height: 90%; - margin-right: .2rem; - } + display: flex; + width: auto; + height: 90%; + margin-right: .2rem; } } } +} - .footer-copyleft small a { - @include disable-default-a-behaviour; +.footer-copyleft small a { + @include disable-default-a-behaviour; - color: pvar(--menuForegroundColor); - opacity: $footer-links-base-opacity - .2; - } + color: pvar(--menuForegroundColor); + opacity: $footer-links-base-opacity - .2; } .dropdown { diff --git a/client/src/assets/images/feather/cloud-download.svg b/client/src/assets/images/feather/cloud-download.svg index 3a4e58df1..16526d338 100644 --- a/client/src/assets/images/feather/cloud-download.svg +++ b/client/src/assets/images/feather/cloud-download.svg @@ -1,6 +1,6 @@ - + diff --git a/client/src/assets/images/feather/subscriptions.svg b/client/src/assets/images/feather/subscriptions.svg deleted file mode 100644 index c7216352a..000000000 --- a/client/src/assets/images/feather/subscriptions.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/client/src/assets/images/misc/language.svg b/client/src/assets/images/misc/language.svg index 8fd1d0ba8..204136f0b 100644 --- a/client/src/assets/images/misc/language.svg +++ b/client/src/assets/images/misc/language.svg @@ -1,7 +1,7 @@ - - - - + + + + diff --git a/client/src/assets/images/misc/npm.svg b/client/src/assets/images/misc/npm.svg index 1d1d82784..8a4869f12 100644 --- a/client/src/assets/images/misc/npm.svg +++ b/client/src/assets/images/misc/npm.svg @@ -1,5 +1,5 @@ - + diff --git a/client/src/assets/images/misc/peertube-x.svg b/client/src/assets/images/misc/peertube-x.svg index 0099e627d..30ab665e7 100644 --- a/client/src/assets/images/misc/peertube-x.svg +++ b/client/src/assets/images/misc/peertube-x.svg @@ -1,20 +1,17 @@ - - - - diff --git a/client/src/assets/images/misc/video-lang.svg b/client/src/assets/images/misc/video-lang.svg index 5ffed18da..6bcaeb9be 100644 --- a/client/src/assets/images/misc/video-lang.svg +++ b/client/src/assets/images/misc/video-lang.svg @@ -1,7 +1,7 @@ - + diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index ca11488cb..cf5ac8fd8 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -41,9 +41,6 @@ word-break: break-word; word-wrap: break-word; overflow-wrap: break-word; - -webkit-hyphens: auto; - -ms-hyphens: auto; - -moz-hyphens: auto; hyphens: auto; } @@ -52,28 +49,6 @@ ::ng-deep .material { color: $color; } - - ::ng-deep svg { - path[fill="#000"], - g[fill="#000"], - rect[fill="#000"], - circle[fill="#000"], - polygon[fill="#000"] { - fill: $color; - } - - path[stroke="#000"], - g[stroke="#000"], - rect[stroke="#000"], - circle[stroke="#000"], - polygon[stroke="#000"] { - stroke: $color; - } - - stop[stop-color="#000"] { - stop-color: $color; - } - } } @mixin fill-svg-color ($color) {