aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-05-07 14:08:35 +0200
committerChocobozzz <me@florianbigard.com>2021-05-07 14:08:35 +0200
commitce4b4495ff3607045dc6d5656f72ebf5eb28cb73 (patch)
tree8d9a323073170b4e28105655340f465a0968732d
parenta1bb73f9b591686b2ddfeb3291f305dae9f7fc6c (diff)
downloadPeerTube-ce4b4495ff3607045dc6d5656f72ebf5eb28cb73.tar.gz
PeerTube-ce4b4495ff3607045dc6d5656f72ebf5eb28cb73.tar.zst
PeerTube-ce4b4495ff3607045dc6d5656f72ebf5eb28cb73.zip
Refactor video edit css
-rw-r--r--client/src/app/+admin/plugins/plugin-search/plugin-search.component.html2
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-edit.component.html2
-rw-r--r--client/src/app/+videos/+video-edit/shared/video-edit.component.scss119
3 files changed, 47 insertions, 76 deletions
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 6900e8717..8d8f12c48 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -20,7 +20,7 @@
20 <my-global-icon iconName="search"></my-global-icon> 20 <my-global-icon iconName="search"></my-global-icon>
21 21
22 <ng-container i18n> 22 <ng-container i18n>
23 {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for {{ search }}" 23 {{ pagination.totalItems }} {pagination.totalItems, plural, =1 {result} other {results}} for "{{ search }}"
24 </ng-container> 24 </ng-container>
25 </ng-container> 25 </ng-container>
26</div> 26</div>
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}