aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2020-04-03 14:13:24 +0200
committerRigel Kent <sendmemail@rigelk.eu>2020-04-03 14:13:28 +0200
commit947d01023d53b5b79174775abfd27823678e597b (patch)
treebab7c1ec1b8716c564a28067500e8fb3d2a37ed6
parent51892fe0429e237bff956143630b295aa358f811 (diff)
downloadPeerTube-947d01023d53b5b79174775abfd27823678e597b.tar.gz
PeerTube-947d01023d53b5b79174775abfd27823678e597b.tar.zst
PeerTube-947d01023d53b5b79174775abfd27823678e597b.zip
Improve channel and account display on medium devices
-rw-r--r--client/src/app/+accounts/accounts.component.scss17
-rw-r--r--client/src/app/+admin/users/user-edit/user-edit.component.html6
-rw-r--r--client/src/app/+admin/users/user-edit/user-password.component.html2
-rw-r--r--client/src/app/+video-channels/video-channels.component.scss19
-rw-r--r--client/src/app/shared/user-subscription/subscribe-button.component.scss8
-rw-r--r--client/src/sass/application.scss7
-rw-r--r--client/src/sass/bootstrap.scss17
7 files changed, 64 insertions, 12 deletions
diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss
index 96484c9d3..d0187fe30 100644
--- a/client/src/app/+accounts/accounts.component.scss
+++ b/client/src/app/+accounts/accounts.component.scss
@@ -1,3 +1,9 @@
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
1@import '_variables'; 7@import '_variables';
2@import '_mixins'; 8@import '_mixins';
3 9
@@ -13,7 +19,16 @@
13 display: flex; 19 display: flex;
14 height: max-content; 20 height: max-content;
15 margin-left: auto; 21 margin-left: auto;
16 margin-top: 20px; 22 margin-top: 10px;
23
24 @include media-breakpoint-down(lg) {
25 flex-flow: column-reverse;
26
27 a {
28 margin-top: 0.25rem;
29 margin-right: 0 !important;
30 }
31 }
17 32
18 a { 33 a {
19 @include peertube-button-outline; 34 @include peertube-button-outline;
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
index 070695e57..51db100e9 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -123,7 +123,7 @@
123 <div class="form-group"> 123 <div class="form-group">
124 <label i18n for="role">Role</label> 124 <label i18n for="role">Role</label>
125 <div class="peertube-select-container"> 125 <div class="peertube-select-container">
126 <select id="role" formControlName="role"> 126 <select id="role" formControlName="role" class="form-control">
127 <option *ngFor="let role of roles" [value]="role.value"> 127 <option *ngFor="let role of roles" [value]="role.value">
128 {{ role.label }} 128 {{ role.label }}
129 </option> 129 </option>
@@ -138,7 +138,7 @@
138 <div class="form-group"> 138 <div class="form-group">
139 <label i18n for="videoQuota">Video quota</label> 139 <label i18n for="videoQuota">Video quota</label>
140 <div class="peertube-select-container"> 140 <div class="peertube-select-container">
141 <select id="videoQuota" formControlName="videoQuota"> 141 <select id="videoQuota" formControlName="videoQuota" class="form-control">
142 <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value"> 142 <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
143 {{ videoQuotaOption.label }} 143 {{ videoQuotaOption.label }}
144 </option> 144 </option>
@@ -154,7 +154,7 @@
154 <div class="form-group"> 154 <div class="form-group">
155 <label i18n for="videoQuotaDaily">Daily video quota</label> 155 <label i18n for="videoQuotaDaily">Daily video quota</label>
156 <div class="peertube-select-container"> 156 <div class="peertube-select-container">
157 <select id="videoQuotaDaily" formControlName="videoQuotaDaily"> 157 <select id="videoQuotaDaily" formControlName="videoQuotaDaily" class="form-control">
158 <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value"> 158 <option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
159 {{ videoQuotaDailyOption.label }} 159 {{ videoQuotaDailyOption.label }}
160 </option> 160 </option>
diff --git a/client/src/app/+admin/users/user-edit/user-password.component.html b/client/src/app/+admin/users/user-edit/user-password.component.html
index a1e1f6216..1238d1839 100644
--- a/client/src/app/+admin/users/user-edit/user-password.component.html
+++ b/client/src/app/+admin/users/user-edit/user-password.component.html
@@ -2,7 +2,7 @@
2 <div class="form-group"> 2 <div class="form-group">
3 3
4 <div class="input-group"> 4 <div class="input-group">
5 <input id="password" [attr.type]="showPassword ? 'text' : 'password'" 5 <input id="password" [attr.type]="showPassword ? 'text' : 'password'" class="form-control"
6 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" 6 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
7 > 7 >
8 <div class="input-group-append"> 8 <div class="input-group-append">
diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss
index 6470629f8..a8e823b40 100644
--- a/client/src/app/+video-channels/video-channels.component.scss
+++ b/client/src/app/+video-channels/video-channels.component.scss
@@ -1,3 +1,9 @@
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
1@import '_variables'; 7@import '_variables';
2@import '_mixins'; 8@import '_mixins';
3 9
@@ -14,7 +20,7 @@
14 grid-template-rows: 1fr auto / 1fr auto; 20 grid-template-rows: 1fr auto / 1fr auto;
15 grid-template-areas: "name buttons" "lower buttons"; 21 grid-template-areas: "name buttons" "lower buttons";
16 22
17 @media screen and (max-width: #{map-get($grid-breakpoints, lg)}) { 23 @include media-breakpoint-down(lg) {
18 grid-template-areas: "name name" "lower buttons"; 24 grid-template-areas: "name name" "lower buttons";
19 } 25 }
20 } 26 }
@@ -38,11 +44,20 @@
38 display: flex; 44 display: flex;
39 height: max-content; 45 height: max-content;
40 margin-left: auto; 46 margin-left: auto;
41 margin-top: 20px; 47 margin-top: 10px;
42 48
43 grid-row: buttons-start / span buttons-end; 49 grid-row: buttons-start / span buttons-end;
44 grid-column: buttons-start; 50 grid-column: buttons-start;
45 51
52 @include media-breakpoint-down(lg) {
53 flex-flow: column-reverse;
54
55 a {
56 margin-top: 0.25rem;
57 margin-right: 0 !important;
58 }
59 }
60
46 a { 61 a {
47 @include peertube-button-outline; 62 @include peertube-button-outline;
48 line-height: 1.8; 63 line-height: 1.8;
diff --git a/client/src/app/shared/user-subscription/subscribe-button.component.scss b/client/src/app/shared/user-subscription/subscribe-button.component.scss
index 114a12f06..5283a6cc3 100644
--- a/client/src/app/shared/user-subscription/subscribe-button.component.scss
+++ b/client/src/app/shared/user-subscription/subscribe-button.component.scss
@@ -13,9 +13,17 @@
13 font-size: 15px; 13 font-size: 15px;
14 } 14 }
15 15
16 &:not(.big) {
17 white-space: nowrap;
18 }
19
16 &.big { 20 &.big {
17 height: 35px; 21 height: 35px;
18 22
23 & > button:first-child {
24 width: 175px;
25 }
26
19 button .extra-text { 27 button .extra-text {
20 span:first-child { 28 span:first-child {
21 line-height: 80%; 29 line-height: 80%;
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index c8966d22b..11e5c16c3 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -77,10 +77,6 @@ input, textarea {
77 color: var(--mainForegroundColor); 77 color: var(--mainForegroundColor);
78} 78}
79 79
80.btn-outline-secondary {
81 border-color: $input-border-color;
82}
83
84label { 80label {
85 font-weight: $font-bold; 81 font-weight: $font-bold;
86 font-size: 15px; 82 font-size: 15px;
@@ -108,7 +104,7 @@ label {
108} 104}
109 105
110.row { 106.row {
111 margin: 0; 107 margin: 0 !important;
112} 108}
113 109
114.main-col { 110.main-col {
@@ -280,6 +276,7 @@ table {
280 276
281 .sub-menu { 277 .sub-menu {
282 padding-left: 50px; 278 padding-left: 50px;
279 padding-right: 50px;
283 280
284 .title-page { 281 .title-page {
285 font-size: 17px; 282 font-size: 17px;
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index e8c4528f4..e13e0bff6 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -221,10 +221,23 @@ ngb-tooltip-window {
221 z-index: z(tooltip) !important; 221 z-index: z(tooltip) !important;
222} 222}
223 223
224.btn-outline-secondary {
225 border-color: $input-border-color;
226
227 &:focus-within,
228 &:focus,
229 &:hover {
230 color: #fff;
231 background-color: #6c757d;
232 }
233}
234
224.btn-outline-tertiary { 235.btn-outline-tertiary {
225 color: var(--secondaryColor); 236 color: var(--secondaryColor);
226 border-color: var(--secondaryColor); 237 border-color: var(--secondaryColor);
227 238
239 &:focus-within,
240 &:focus,
228 &:hover { 241 &:hover {
229 color: var(--mainBackgroundColor); 242 color: var(--mainBackgroundColor);
230 background-color: var(--secondaryColor); 243 background-color: var(--secondaryColor);
@@ -247,3 +260,7 @@ ngb-tooltip-window {
247 } 260 }
248 } 261 }
249} 262}
263
264.input-group > .form-control {
265 flex: initial;
266}