From 5b0ec7cddb1ae6dbd2057f067382866f846b882c Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 15 Jun 2022 14:59:25 +0200 Subject: Increase global font size --- .../abuse-message-modal.component.scss | 5 -- .../actor-avatar-edit.component.scss | 1 - .../shared-actor-image/actor-avatar.component.html | 4 +- .../shared-actor-image/actor-avatar.component.ts | 24 +++---- .../shared/shared-forms/input-text.component.scss | 2 - .../shared-forms/markdown-textarea.component.scss | 1 - .../shared-forms/peertube-checkbox.component.html | 4 +- .../shared-forms/peertube-checkbox.component.scss | 14 ++--- .../shared-forms/timestamp-input.component.scss | 1 - .../shared/shared-icons/global-icon.component.scss | 5 ++ .../instance-about-accordion.component.scss | 1 - .../instance-features-table.component.scss | 1 - .../buttons/action-dropdown.component.html | 2 +- .../buttons/action-dropdown.component.ts | 2 +- .../shared-main/buttons/button.component.html | 6 +- .../shared-main/buttons/button.component.scss | 1 - .../shared/shared-main/buttons/button.component.ts | 10 +-- .../shared-main/buttons/edit-button.component.ts | 4 -- .../misc/channels-setup-message.component.scss | 34 +++++----- .../misc/simple-search-input.component.html | 10 +-- .../shared-main/users/user-quota.component.scss | 5 -- .../account-blocklist.component.html | 2 +- .../server-blocklist.component.html | 2 +- .../user-ban-modal.component.scss | 1 - .../shared-moderation/video-block.component.scss | 1 - .../shared-share-modal/video-share.component.scss | 5 +- .../user-interface-settings.component.scss | 5 -- .../user-video-settings.component.html | 2 +- .../user-video-settings.component.scss | 5 -- .../subscribe-button.component.html | 14 ++--- .../subscribe-button.component.scss | 14 ++--- .../video-download.component.scss | 1 - .../video-filters-header.component.scss | 2 - .../video-miniature.component.scss | 4 ++ .../videos-list.component.scss | 2 +- .../video-add-to-playlist.component.html | 10 ++- .../video-add-to-playlist.component.scss | 45 +++++-------- ...video-playlist-element-miniature.component.scss | 73 ++++++++++++---------- .../video-playlist-miniature.component.scss | 2 +- 39 files changed, 134 insertions(+), 193 deletions(-) (limited to 'client/src/app/shared') diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss index d77e44a9d..3b43a4a4d 100644 --- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss +++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss @@ -25,7 +25,6 @@ textarea { .no-messages { display: flex; - font-size: 15px; justify-content: center; } @@ -45,10 +44,6 @@ textarea { color: var(--mainForegroundColor); background-color: var(--greyBackgroundColor); - .content { - font-size: 15px; - } - .date { font-size: 13px; color: var(--greyForegroundColor); diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss index 7fd9f057e..b8e6136fb 100644 --- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss +++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss @@ -30,7 +30,6 @@ my-actor-avatar { } .actor-info-followers { - font-size: 15px; padding-bottom: .5rem; } diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.html b/client/src/app/shared/shared-actor-image/actor-avatar.component.html index c285b6cc3..ba025da4d 100644 --- a/client/src/app/shared/shared-actor-image/actor-avatar.component.html +++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.html @@ -1,7 +1,7 @@ - + -
+
{{ initial }}
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts index 600984aa2..fa4f1e51f 100644 --- a/client/src/app/shared/shared-actor-image/actor-avatar.component.ts +++ b/client/src/app/shared/shared-actor-image/actor-avatar.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core' +import { Component, Input, OnChanges } from '@angular/core' import { VideoChannel } from '../shared-main' import { Account } from '../shared-main/account/account.model' @@ -15,7 +15,7 @@ export type ActorAvatarSize = '18' | '25' | '28' | '32' | '34' | '35' | '36' | ' styleUrls: [ './actor-avatar.component.scss' ], templateUrl: './actor-avatar.component.html' }) -export class ActorAvatarComponent { +export class ActorAvatarComponent implements OnChanges { private _title: string @Input() account: ActorInput @@ -42,6 +42,8 @@ export class ActorAvatarComponent { return '' } + classes: string[] = [] + get alt () { if (this.account) return $localize`Account avatar` if (this.channel) return $localize`Channel avatar` @@ -68,20 +70,18 @@ export class ActorAvatarComponent { return name.slice(0, 1) } - getClass (type: 'avatar' | 'initial') { - const base = [ 'avatar' ] + ngOnChanges () { + this.classes = [ 'avatar' ] - if (this.size) base.push(`avatar-${this.size}`) + if (this.size) this.classes.push(`avatar-${this.size}`) - if (this.channel) base.push('channel') - else base.push('account') + if (this.channel) this.classes.push('channel') + else this.classes.push('account') - if (type === 'initial' && this.initial) { - base.push('initial') - base.push(this.getColorTheme()) + if (!this.avatarUrl && this.initial) { + this.classes.push('initial') + this.classes.push(this.getColorTheme()) } - - return base } hasActor () { diff --git a/client/src/app/shared/shared-forms/input-text.component.scss b/client/src/app/shared/shared-forms/input-text.component.scss index 8baeec21d..ae8bf5fec 100644 --- a/client/src/app/shared/shared-forms/input-text.component.scss +++ b/client/src/app/shared/shared-forms/input-text.component.scss @@ -9,8 +9,6 @@ input { .btn { @include button-with-icon(18px); - - font-size: 15px; } .copy-text { diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss index 5939bb999..421c8cbcc 100644 --- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss +++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss @@ -102,7 +102,6 @@ $input-border-radius: 3px; min-height: 75px; padding: $base-padding; overflow-y: auto; - font-size: 15px; word-wrap: break-word; } diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.html b/client/src/app/shared/shared-forms/peertube-checkbox.component.html index 38a48a2a5..cd06e75ba 100644 --- a/client/src/app/shared/shared-forms/peertube-checkbox.component.html +++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.html @@ -34,9 +34,9 @@
- +
- +
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss index 5fe20c3a5..ac9127677 100644 --- a/client/src/app/shared/shared-forms/peertube-checkbox.component.scss +++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.scss @@ -6,12 +6,7 @@ label { display: flex; - align-items: center; - - .label-text { - font-weight: $font-regular; - margin: 0; - } + font-size: $form-input-font-size; input { @include peertube-checkbox(1px); @@ -23,12 +18,11 @@ } my-help { - position: relative; - top: 2px; + line-height: 17px; } - small { - font-size: 90%; + .form-group-description { + margin-top: 2px; } .wrapper:empty { diff --git a/client/src/app/shared/shared-forms/timestamp-input.component.scss b/client/src/app/shared/shared-forms/timestamp-input.component.scss index 27d6fa173..e69a06947 100644 --- a/client/src/app/shared/shared-forms/timestamp-input.component.scss +++ b/client/src/app/shared/shared-forms/timestamp-input.component.scss @@ -4,7 +4,6 @@ p-inputmask { ::ng-deep input { width: 80px; - font-size: 15px; &:focus-within, &:focus { diff --git a/client/src/app/shared/shared-icons/global-icon.component.scss b/client/src/app/shared/shared-icons/global-icon.component.scss index 6795d6628..10180829f 100644 --- a/client/src/app/shared/shared-icons/global-icon.component.scss +++ b/client/src/app/shared/shared-icons/global-icon.component.scss @@ -3,4 +3,9 @@ width: inherit; height: inherit; } + + .feather-flag { + margin-left: -1px; + } } + diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss index 0da7aede9..c8e288462 100644 --- a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss +++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss @@ -12,6 +12,5 @@ } .block { - font-size: 15px; margin-bottom: 15px; } diff --git a/client/src/app/shared/shared-instance/instance-features-table.component.scss b/client/src/app/shared/shared-instance/instance-features-table.component.scss index 105a7681f..bfae0c112 100644 --- a/client/src/app/shared/shared-instance/instance-features-table.component.scss +++ b/client/src/app/shared/shared-instance/instance-features-table.component.scss @@ -33,7 +33,6 @@ table { caption { caption-side: top; - font-size: 15px; font-weight: $font-semibold; color: pvar(--mainForegroundColor); } diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html index 10dae68f0..017355bd0 100644 --- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html +++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html @@ -39,7 +39,7 @@
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts index 67ac6e1aa..749773f8a 100644 --- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts +++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.ts @@ -48,7 +48,7 @@ export class ActionDropdownComponent { return actions.some(a => { if (Array.isArray(a)) return this.areActionsDisplayed(a, entry) - return a.isDisplayed === undefined || a.isDisplayed(entry) + return a.isHeader !== true && (a.isDisplayed === undefined || a.isDisplayed(entry)) }) } } diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html index 3e558bbb8..3e3728623 100644 --- a/client/src/app/shared/shared-main/buttons/button.component.html +++ b/client/src/app/shared/shared-main/buttons/button.component.html @@ -1,8 +1,8 @@ - +
- +
- + diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss index cdd75d525..7f0cdf1ed 100644 --- a/client/src/app/shared/shared-main/buttons/button.component.scss +++ b/client/src/app/shared/shared-main/buttons/button.component.scss @@ -16,7 +16,6 @@ } :host { - outline: none; display: inline-block; } diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts index 476057823..10d67831f 100644 --- a/client/src/app/shared/shared-main/buttons/button.component.ts +++ b/client/src/app/shared/shared-main/buttons/button.component.ts @@ -1,4 +1,4 @@ -import { Component, Input } from '@angular/core' +import { Component, Input, OnChanges } from '@angular/core' import { GlobalIconName } from '@app/shared/shared-icons' @Component({ @@ -7,7 +7,7 @@ import { GlobalIconName } from '@app/shared/shared-icons' templateUrl: './button.component.html' }) -export class ButtonComponent { +export class ButtonComponent implements OnChanges { @Input() label = '' @Input() className = 'grey-button' @Input() icon: GlobalIconName = undefined @@ -17,8 +17,10 @@ export class ButtonComponent { @Input() disabled = false @Input() responsiveLabel = false - getClasses () { - return { + classes: { [id: string]: boolean } = {} + + ngOnChanges () { + this.classes = { [this.className]: true, disabled: this.disabled, 'icon-only': !this.label, diff --git a/client/src/app/shared/shared-main/buttons/edit-button.component.ts b/client/src/app/shared/shared-main/buttons/edit-button.component.ts index 0049dfa64..28aacbbff 100644 --- a/client/src/app/shared/shared-main/buttons/edit-button.component.ts +++ b/client/src/app/shared/shared-main/buttons/edit-button.component.ts @@ -25,10 +25,6 @@ export class EditButtonComponent implements OnInit { // Use default label if (this.label === '') { this.label = $localize`Update` - - if (!this.title) { - this.title = this.label - } } } } diff --git a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss index 7dcba2ca5..2aa176e1b 100644 --- a/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss +++ b/client/src/app/shared/shared-main/misc/channels-setup-message.component.scss @@ -5,28 +5,24 @@ display: flex; align-items: center; justify-content: center; +} - my-global-icon { - width: 32px; - align-self: flex-start; +my-global-icon { + @include apply-svg-color(pvar(--mainColor)); - ::ng-deep { - svg { - fill: #0c5460; - } - } + width: 32px; + align-self: flex-start; - + div { - margin-left: 10px; - text-align: center; + + div { + margin-left: 10px; + text-align: center; + } +} - a.channels-settings-link { - @include peertube-button-link; - @include grey-button; +.channels-settings-link { + @include peertube-button-link; + @include grey-button; - height: fit-content; - margin-top: 10px; - } - } - } + height: fit-content; + margin-top: 10px; } diff --git a/client/src/app/shared/shared-main/misc/simple-search-input.component.html b/client/src/app/shared/shared-main/misc/simple-search-input.component.html index ae57ca5b7..386d26116 100644 --- a/client/src/app/shared/shared-main/misc/simple-search-input.component.html +++ b/client/src/app/shared/shared-main/misc/simple-search-input.component.html @@ -1,13 +1,7 @@
- diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss index 70571bde6..f3e86ce78 100644 --- a/client/src/app/shared/shared-main/users/user-quota.component.scss +++ b/client/src/app/shared/shared-main/users/user-quota.component.scss @@ -1,11 +1,6 @@ @use '_variables' as *; @use '_mixins' as *; -label { - font-weight: $font-regular; - font-size: 100%; -} - .user-quota { label { @include margin-right(5px); diff --git a/client/src/app/shared/shared-moderation/account-blocklist.component.html b/client/src/app/shared/shared-moderation/account-blocklist.component.html index 15632f654..131110318 100644 --- a/client/src/app/shared/shared-moderation/account-blocklist.component.html +++ b/client/src/app/shared/shared-moderation/account-blocklist.component.html @@ -48,7 +48,7 @@ - +
No account found matching current filters. No account found. diff --git a/client/src/app/shared/shared-moderation/server-blocklist.component.html b/client/src/app/shared/shared-moderation/server-blocklist.component.html index cabf0e9dd..bc47bf26f 100644 --- a/client/src/app/shared/shared-moderation/server-blocklist.component.html +++ b/client/src/app/shared/shared-moderation/server-blocklist.component.html @@ -50,7 +50,7 @@ - +
No server found matching current filters. No server found. diff --git a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss index 2c46c3d03..376fb1693 100644 --- a/client/src/app/shared/shared-moderation/user-ban-modal.component.scss +++ b/client/src/app/shared/shared-moderation/user-ban-modal.component.scss @@ -2,7 +2,6 @@ @use '_mixins' as *; .description { - font-size: 15px; margin-bottom: 15px; } diff --git a/client/src/app/shared/shared-moderation/video-block.component.scss b/client/src/app/shared/shared-moderation/video-block.component.scss index 3061bbf15..7726eca11 100644 --- a/client/src/app/shared/shared-moderation/video-block.component.scss +++ b/client/src/app/shared/shared-moderation/video-block.component.scss @@ -6,6 +6,5 @@ textarea { } .live-info { - font-size: 15px; margin: 40px 0 20px; } diff --git a/client/src/app/shared/shared-share-modal/video-share.component.scss b/client/src/app/shared/shared-share-modal/video-share.component.scss index 611291981..456309d2d 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.scss +++ b/client/src/app/shared/shared-share-modal/video-share.component.scss @@ -34,6 +34,10 @@ my-input-text { margin-top: 20px; } +.alert-private { + margin-top: 0; +} + .filters { margin-top: 30px; @@ -46,7 +50,6 @@ my-input-text { justify-content: center; align-items: center; margin-top: 20px; - font-size: 16px; font-weight: $font-semibold; cursor: pointer; } diff --git a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss index 2fc245ace..da8202594 100644 --- a/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss +++ b/client/src/app/shared/shared-user-settings/user-interface-settings.component.scss @@ -1,11 +1,6 @@ @use '_variables' as *; @use '_mixins' as *; -label { - font-weight: $font-regular; - font-size: 100%; -} - input[type=submit] { @include peertube-button; @include orange-button; diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.html b/client/src/app/shared/shared-user-settings/user-video-settings.component.html index ccd7f8f4b..85b27a4ff 100644 --- a/client/src/app/shared/shared-user-settings/user-video-settings.component.html +++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.html @@ -42,7 +42,7 @@ i18n-labelText labelText="Help share videos being played" > - The sharing system implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load. + The sharing system implies that some technical information about your system (such as a public IP address) can be sent to other peers, but greatly helps to reduce server load.
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss index a39e7cf1f..163c899d3 100644 --- a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss +++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss @@ -1,11 +1,6 @@ @use '_variables' as *; @use '_mixins' as *; -label { - font-weight: $font-regular; - font-size: 100%; -} - input[type=submit] { @include peertube-button; @include orange-button; diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html index a6d851315..0e09c2697 100644 --- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html +++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html @@ -1,5 +1,5 @@
@@ -20,17 +20,11 @@ - - @@ -43,7 +37,7 @@ class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right bottom-left bottom auto" role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label > -
-
-
Start at
-
Stop at
-
+
Start at
+
Stop at
-
+ -
+
diff --git a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss index 7db469d7c..de2f1032b 100644 --- a/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss @@ -1,10 +1,6 @@ @use '_variables' as *; @use '_mixins' as *; -$optional-rows-checkbox-width: 34px; -$timestamp-width: 50px; -$timestamp-margin-right: 10px; - .header, .dropdown-item, .input-container { @@ -52,12 +48,12 @@ $timestamp-margin-right: 10px; } } -.primary-row, -.optional-rows > div { +.primary-row { display: flex; my-peertube-checkbox { @include margin-right(10px); + align-self: center; } @@ -84,41 +80,30 @@ $timestamp-margin-right: 10px; height: 19px; } } - - my-timestamp-input { - @include margin-right($timestamp-margin-right); - - ::ng-deep .ui-inputtext { - padding: 0; - width: $timestamp-width; - } - } } .optional-rows { - > div { - padding: 8px 5px 5px 10px; - } + display: grid; + grid-template-columns: 35px 80px 80px; + row-gap: 3px; + column-gap: 10px; + align-items: center; my-peertube-checkbox { - @include margin-right(0 !important); - - display: block; - width: $optional-rows-checkbox-width; + @include margin-left(auto); } - .labels { - @include margin-left($optional-rows-checkbox-width); - + .header-label { font-size: 13px; color: pvar(--greyForegroundColor); - padding-top: 5px; - padding-bottom: 0; + padding-left: 2px; - div { - @include margin-right($timestamp-margin-right); + &:nth-child(1) { + grid-column: 2; + } - width: $timestamp-width; + &:nth-child(2) { + grid-column: 3; } } } diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss index c0cf2d1da..e6b01d33d 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss @@ -75,40 +75,6 @@ my-video-thumbnail, left: -2px; } } - - .video-info { - display: flex; - flex-direction: column; - align-self: flex-start; - min-width: 0; - - .video-info-header { - display: flex; - align-items: baseline; - - a { - width: auto; - padding-right: 5px; - } - - .pt-badge { - @include margin-right(5px); - } - } - - .video-info-account, - .video-info-timestamp { - color: pvar(--greyForegroundColor); - } - } - } - - .video-info-name { - @include ellipsis; - - font-size: 18px; - font-weight: $font-semibold; - display: inline-block; } .more, @@ -139,6 +105,45 @@ my-video-thumbnail, } } +.video-info-name { + @include ellipsis; + + font-size: 18px; + font-weight: $font-semibold; + display: inline-block; +} + +.video-info { + display: flex; + flex-direction: column; + align-self: flex-start; + min-width: 0; + + .video-info-header { + display: flex; + align-items: baseline; + + a { + width: auto; + padding-right: 5px; + } + + .pt-badge { + @include margin-right(5px); + } + } + + .video-info-account, + .video-info-timestamp { + color: pvar(--greyForegroundColor); + } +} + +.video-info-account, +.video-miniature-created-at-views { + font-size: 14px; +} + .dropdown-menu { .dropdown-item { diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss index 3956d9282..d43afad28 100644 --- a/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss +++ b/client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss @@ -53,7 +53,7 @@ .privacy-date { margin-top: 5px; - font-size: 13px; + font-size: 14px; .privacy { font-weight: $font-semibold; -- cgit v1.2.3