From 6f02515e2aff2a8750ad3515b23b345f01c64ab2 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Thu, 2 Apr 2020 17:55:03 +0200 Subject: Enlarge right column in video-edit on small screens --- .../src/app/search/search-filters.component.scss | 2 +- .../shared/images/preview-upload.component.html | 6 +-- .../shared/images/preview-upload.component.scss | 6 ++- .../app/shared/images/preview-upload.component.ts | 16 +++++- .../+video-edit/shared/video-edit.component.html | 4 +- .../+video-edit/shared/video-edit.component.scss | 59 ++++++++++++++++++++-- .../video-add-components/video-send.scss | 6 --- .../video-upload.component.html | 3 +- 8 files changed, 80 insertions(+), 22 deletions(-) (limited to 'client/src') diff --git a/client/src/app/search/search-filters.component.scss b/client/src/app/search/search-filters.component.scss index edd85bc70..a88a1c0b0 100644 --- a/client/src/app/search/search-filters.component.scss +++ b/client/src/app/search/search-filters.component.scss @@ -66,4 +66,4 @@ input[type=submit] { white-space: nowrap; } -@include ng2-tags +@include ng2-tags; diff --git a/client/src/app/shared/images/preview-upload.component.html b/client/src/app/shared/images/preview-upload.component.html index 5e1d5211b..7c3a2b588 100644 --- a/client/src/app/shared/images/preview-upload.component.html +++ b/client/src/app/shared/images/preview-upload.component.html @@ -1,13 +1,11 @@
- -
(extensions: {{ allowedExtensionsMessage }}, max size: {{ maxVideoImageSize | bytes }})
diff --git a/client/src/app/shared/images/preview-upload.component.scss b/client/src/app/shared/images/preview-upload.component.scss index 257060239..8f3522115 100644 --- a/client/src/app/shared/images/preview-upload.component.scss +++ b/client/src/app/shared/images/preview-upload.component.scss @@ -16,11 +16,13 @@ } .preview { - border: 2px solid grey; + object-fit: cover; border-radius: 4px; + max-width: 100%; &.no-image { - background-color: #ececec; + border: 2px solid grey; + background-color: var(--mainBackgroundColor); } } } diff --git a/client/src/app/shared/images/preview-upload.component.ts b/client/src/app/shared/images/preview-upload.component.ts index 85a2173e9..7519734ba 100644 --- a/client/src/app/shared/images/preview-upload.component.ts +++ b/client/src/app/shared/images/preview-upload.component.ts @@ -3,6 +3,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser' import { ServerService } from '@app/core' import { ServerConfig } from '@shared/models' +import { BytesPipe } from 'ngx-pipes' +import { I18n } from '@ngx-translate/i18n-polyfill' @Component({ selector: 'my-preview-upload', @@ -24,14 +26,20 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor { imageSrc: SafeResourceUrl allowedExtensionsMessage = '' + maxSizeText: string private serverConfig: ServerConfig + private bytesPipe: BytesPipe private file: Blob constructor ( private sanitizer: DomSanitizer, - private serverService: ServerService - ) {} + private serverService: ServerService, + private i18n: I18n + ) { + this.bytesPipe = new BytesPipe() + this.maxSizeText = this.i18n('max size') + } get videoImageExtensions () { return this.serverConfig.video.image.extensions @@ -41,6 +49,10 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor { return this.serverConfig.video.image.size.max } + get maxVideoImageSizeInBytes () { + return this.bytesPipe.transform(this.maxVideoImageSize) + } + ngOnInit () { this.serverConfig = this.serverService.getTmpConfig() this.serverService.getConfig() diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html index 152b069d2..d59394538 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html @@ -6,7 +6,7 @@
-
+
@@ -54,7 +54,7 @@
-
+
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss index 1b7bc56b4..de800b03f 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss @@ -1,5 +1,11 @@ -@import '_variables'; -@import '_mixins'; +// Bootstrap grid utilities require functions, variables and mixins +@import 'node_modules/bootstrap/scss/functions'; +@import 'node_modules/bootstrap/scss/variables'; +@import 'node_modules/bootstrap/scss/mixins'; +@import 'node_modules/bootstrap/scss/grid'; + +@import 'variables'; +@import 'mixins'; label { font-weight: $font-regular; @@ -54,6 +60,7 @@ my-peertube-checkbox { .captions-header { text-align: right; + margin-bottom: 1rem; .create-caption { @include create-button; @@ -68,6 +75,7 @@ my-peertube-checkbox { a.caption-entry-label { @include disable-default-a-behaviour; + flex-grow: 1; color: #000; &:hover { @@ -153,4 +161,49 @@ p-calendar { } } -@include ng2-tags +::ng-deep my-markdown-textarea { + .root { + @include media-breakpoint-down(xl) { + flex-direction: column !important; + } + + textarea { + max-width: 100%; + } + } +} + +@include ng2-tags; + +// columns for the video +.col-video-edit { + @include make-col-ready(); + + @include media-breakpoint-up(md) { + @include make-col(7); + + & + .col-video-edit { + @include make-col(5); + } + } + + @include media-breakpoint-up(xl) { + @include make-col(8); + + & + .col-video-edit { + @include make-col(4); + } + } +} + +:host-context(.expanded) { + .col-video-edit { + @include media-breakpoint-up(md) { + @include make-col(8); + + & + .col-video-edit { + @include make-col(4); + } + } + } +} diff --git a/client/src/app/videos/+video-edit/video-add-components/video-send.scss b/client/src/app/videos/+video-edit/video-add-components/video-send.scss index 1979d0061..ebe14c59e 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-send.scss +++ b/client/src/app/videos/+video-edit/video-add-components/video-send.scss @@ -43,10 +43,4 @@ $width-size: 190px; .button-file { @include peertube-button-file(max-content); } - - .button-file-extension { - display: block; - font-size: 12px; - margin-top: 5px; - } } diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html index be3a9662b..b4e1ceeca 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html +++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html @@ -2,11 +2,10 @@
-
+
Select the file to upload
- ({{ videoExtensions }})
-- cgit v1.2.3