diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-04-02 17:55:03 +0200 |
---|---|---|
committer | Rigel Kent <sendmemail@rigelk.eu> | 2020-04-02 17:55:03 +0200 |
commit | 6f02515e2aff2a8750ad3515b23b345f01c64ab2 (patch) | |
tree | 829f556ea78c5f981fabfdc4819c716bb0ead773 /client/src/app/videos/+video-edit/shared | |
parent | 9f77adb8fe9be0064599c183bb8f221ebbc5ede5 (diff) | |
download | PeerTube-6f02515e2aff2a8750ad3515b23b345f01c64ab2.tar.gz PeerTube-6f02515e2aff2a8750ad3515b23b345f01c64ab2.tar.zst PeerTube-6f02515e2aff2a8750ad3515b23b345f01c64ab2.zip |
Enlarge right column in video-edit on small screens
Diffstat (limited to 'client/src/app/videos/+video-edit/shared')
-rw-r--r-- | client/src/app/videos/+video-edit/shared/video-edit.component.html | 4 | ||||
-rw-r--r-- | client/src/app/videos/+video-edit/shared/video-edit.component.scss | 59 |
2 files changed, 58 insertions, 5 deletions
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 @@ | |||
6 | 6 | ||
7 | <ng-template ngbNavContent> | 7 | <ng-template ngbNavContent> |
8 | <div class="row"> | 8 | <div class="row"> |
9 | <div class="col-md-8"> | 9 | <div class="col-video-edit"> |
10 | <div class="form-group"> | 10 | <div class="form-group"> |
11 | <label i18n for="name">Title</label> | 11 | <label i18n for="name">Title</label> |
12 | <input type="text" id="name" class="form-control" formControlName="name" /> | 12 | <input type="text" id="name" class="form-control" formControlName="name" /> |
@@ -54,7 +54,7 @@ | |||
54 | </div> | 54 | </div> |
55 | </div> | 55 | </div> |
56 | 56 | ||
57 | <div class="col-md-4"> | 57 | <div class="col-video-edit"> |
58 | <div class="form-group"> | 58 | <div class="form-group"> |
59 | <label i18n>Channel</label> | 59 | <label i18n>Channel</label> |
60 | <div class="peertube-select-container"> | 60 | <div class="peertube-select-container"> |
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 @@ | |||
1 | @import '_variables'; | 1 | // Bootstrap grid utilities require functions, variables and mixins |
2 | @import '_mixins'; | 2 | @import 'node_modules/bootstrap/scss/functions'; |
3 | @import 'node_modules/bootstrap/scss/variables'; | ||
4 | @import 'node_modules/bootstrap/scss/mixins'; | ||
5 | @import 'node_modules/bootstrap/scss/grid'; | ||
6 | |||
7 | @import 'variables'; | ||
8 | @import 'mixins'; | ||
3 | 9 | ||
4 | label { | 10 | label { |
5 | font-weight: $font-regular; | 11 | font-weight: $font-regular; |
@@ -54,6 +60,7 @@ my-peertube-checkbox { | |||
54 | 60 | ||
55 | .captions-header { | 61 | .captions-header { |
56 | text-align: right; | 62 | text-align: right; |
63 | margin-bottom: 1rem; | ||
57 | 64 | ||
58 | .create-caption { | 65 | .create-caption { |
59 | @include create-button; | 66 | @include create-button; |
@@ -68,6 +75,7 @@ my-peertube-checkbox { | |||
68 | a.caption-entry-label { | 75 | a.caption-entry-label { |
69 | @include disable-default-a-behaviour; | 76 | @include disable-default-a-behaviour; |
70 | 77 | ||
78 | flex-grow: 1; | ||
71 | color: #000; | 79 | color: #000; |
72 | 80 | ||
73 | &:hover { | 81 | &:hover { |
@@ -153,4 +161,49 @@ p-calendar { | |||
153 | } | 161 | } |
154 | } | 162 | } |
155 | 163 | ||
156 | @include ng2-tags | 164 | ::ng-deep my-markdown-textarea { |
165 | .root { | ||
166 | @include media-breakpoint-down(xl) { | ||
167 | flex-direction: column !important; | ||
168 | } | ||
169 | |||
170 | textarea { | ||
171 | max-width: 100%; | ||
172 | } | ||
173 | } | ||
174 | } | ||
175 | |||
176 | @include ng2-tags; | ||
177 | |||
178 | // columns for the video | ||
179 | .col-video-edit { | ||
180 | @include make-col-ready(); | ||
181 | |||
182 | @include media-breakpoint-up(md) { | ||
183 | @include make-col(7); | ||
184 | |||
185 | & + .col-video-edit { | ||
186 | @include make-col(5); | ||
187 | } | ||
188 | } | ||
189 | |||
190 | @include media-breakpoint-up(xl) { | ||
191 | @include make-col(8); | ||
192 | |||
193 | & + .col-video-edit { | ||
194 | @include make-col(4); | ||
195 | } | ||
196 | } | ||
197 | } | ||
198 | |||
199 | :host-context(.expanded) { | ||
200 | .col-video-edit { | ||
201 | @include media-breakpoint-up(md) { | ||
202 | @include make-col(8); | ||
203 | |||
204 | & + .col-video-edit { | ||
205 | @include make-col(4); | ||
206 | } | ||
207 | } | ||
208 | } | ||
209 | } | ||