diff options
Diffstat (limited to 'client/src/app/+videos/+video-edit')
-rw-r--r-- | client/src/app/+videos/+video-edit/shared/video-edit.component.html | 2 | ||||
-rw-r--r-- | client/src/app/+videos/+video-edit/shared/video-edit.component.scss | 119 |
2 files changed, 46 insertions, 75 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 094b4d3b3..16233f9e0 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 | |||
@@ -5,7 +5,7 @@ | |||
5 | <a ngbNavLink i18n>Basic info</a> | 5 | <a ngbNavLink i18n>Basic info</a> |
6 | 6 | ||
7 | <ng-template ngbNavContent> | 7 | <ng-template ngbNavContent> |
8 | <div class="row"> | 8 | <div class="form-columns"> |
9 | <div class="col-video-edit"> | 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> |
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 bc32d7964..c1c7c686d 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,9 +1,3 @@ | |||
1 | // Bootstrap grid utilities require functions, variables and 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'; | 1 | @import 'variables'; |
8 | @import 'mixins'; | 2 | @import 'mixins'; |
9 | 3 | ||
@@ -57,65 +51,62 @@ my-peertube-checkbox { | |||
57 | } | 51 | } |
58 | } | 52 | } |
59 | 53 | ||
60 | .captions { | 54 | .captions-header { |
61 | 55 | text-align: right; | |
62 | .captions-header { | 56 | margin-bottom: 1rem; |
63 | text-align: right; | 57 | } |
64 | margin-bottom: 1rem; | ||
65 | 58 | ||
66 | .create-caption { | 59 | .create-caption { |
67 | @include create-button; | 60 | @include create-button; |
68 | } | 61 | } |
69 | } | ||
70 | 62 | ||
71 | .caption-entry { | 63 | .caption-entry { |
72 | display: flex; | 64 | display: flex; |
73 | height: 40px; | 65 | height: 40px; |
74 | align-items: center; | 66 | align-items: center; |
75 | 67 | ||
76 | a.caption-entry-label { | 68 | a.caption-entry-label { |
77 | @include disable-default-a-behaviour; | 69 | @include disable-default-a-behaviour; |
78 | 70 | ||
79 | flex-grow: 1; | 71 | flex-grow: 1; |
80 | color: #000; | 72 | color: #000; |
81 | 73 | ||
82 | &:hover { | 74 | &:hover { |
83 | opacity: 0.8; | 75 | opacity: 0.8; |
84 | } | ||
85 | } | 76 | } |
77 | } | ||
86 | 78 | ||
87 | .caption-entry-label { | 79 | .caption-entry-label { |
88 | font-size: 15px; | 80 | font-size: 15px; |
89 | font-weight: bold; | 81 | font-weight: bold; |
90 | |||
91 | margin-right: 20px; | ||
92 | width: 150px; | ||
93 | } | ||
94 | 82 | ||
95 | .caption-entry-state { | 83 | margin-right: 20px; |
96 | width: 200px; | 84 | width: 150px; |
85 | } | ||
97 | 86 | ||
98 | &.caption-entry-state-create { | 87 | .caption-entry-state { |
99 | color: #39CC0B; | 88 | width: 200px; |
100 | } | ||
101 | 89 | ||
102 | &.caption-entry-state-delete { | 90 | &.caption-entry-state-create { |
103 | color: #FF0000; | 91 | color: #39CC0B; |
104 | } | ||
105 | } | 92 | } |
106 | 93 | ||
107 | .caption-entry-delete { | 94 | &.caption-entry-state-delete { |
108 | @include peertube-button; | 95 | color: #FF0000; |
109 | @include grey-button; | ||
110 | } | 96 | } |
111 | } | 97 | } |
112 | 98 | ||
113 | .no-caption { | 99 | .caption-entry-delete { |
114 | text-align: center; | 100 | @include peertube-button; |
115 | font-size: 15px; | 101 | @include grey-button; |
116 | } | 102 | } |
117 | } | 103 | } |
118 | 104 | ||
105 | .no-caption { | ||
106 | text-align: center; | ||
107 | font-size: 15px; | ||
108 | } | ||
109 | |||
119 | .submit-container { | 110 | .submit-container { |
120 | text-align: right; | 111 | text-align: right; |
121 | 112 | ||
@@ -143,35 +134,15 @@ p-calendar { | |||
143 | } | 134 | } |
144 | } | 135 | } |
145 | 136 | ||
146 | // columns for the video | 137 | .form-columns { |
147 | .col-video-edit { | 138 | display: grid; |
148 | @include make-col-ready(); | ||
149 | 139 | ||
150 | @include media-breakpoint-up(md) { | 140 | grid-template-columns: 66% 1fr; |
151 | @include make-col(7); | 141 | grid-gap: 30px; |
152 | |||
153 | + .col-video-edit { | ||
154 | @include make-col(5); | ||
155 | } | ||
156 | } | ||
157 | |||
158 | @include media-breakpoint-up(xl) { | ||
159 | @include make-col(8); | ||
160 | |||
161 | + .col-video-edit { | ||
162 | @include make-col(4); | ||
163 | } | ||
164 | } | ||
165 | } | 142 | } |
166 | 143 | ||
167 | :host-context(.expanded) { | 144 | @include on-small-main-col { |
168 | .col-video-edit { | 145 | .form-columns { |
169 | @include media-breakpoint-up(md) { | 146 | grid-template-columns: 1fr; |
170 | @include make-col(8); | ||
171 | |||
172 | + .col-video-edit { | ||
173 | @include make-col(4); | ||
174 | } | ||
175 | } | ||
176 | } | 147 | } |
177 | } | 148 | } |