projects
/
oweals
/
peertube.git
/ commitdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
| commitdiff |
tree
raw
|
patch
|
inline
| side by side (parent:
51892fe
)
Improve channel and account display on medium devices
author
Rigel Kent
<sendmemail@rigelk.eu>
Fri, 3 Apr 2020 12:13:24 +0000
(14:13 +0200)
committer
Rigel Kent
<sendmemail@rigelk.eu>
Fri, 3 Apr 2020 12:13:28 +0000
(14:13 +0200)
client/src/app/+accounts/accounts.component.scss
patch
|
blob
|
history
client/src/app/+admin/users/user-edit/user-edit.component.html
patch
|
blob
|
history
client/src/app/+admin/users/user-edit/user-password.component.html
patch
|
blob
|
history
client/src/app/+video-channels/video-channels.component.scss
patch
|
blob
|
history
client/src/app/shared/user-subscription/subscribe-button.component.scss
patch
|
blob
|
history
client/src/sass/application.scss
patch
|
blob
|
history
client/src/sass/bootstrap.scss
patch
|
blob
|
history
diff --git
a/client/src/app/+accounts/accounts.component.scss
b/client/src/app/+accounts/accounts.component.scss
index 96484c9d3d8ab5b45ad42e3cd0268499860c4a45..d0187fe309821f89c03c52035ebfd80965eb9494 100644
(file)
--- a/
client/src/app/+accounts/accounts.component.scss
+++ b/
client/src/app/+accounts/accounts.component.scss
@@
-1,3
+1,9
@@
+// 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';
@import '_variables';
@import '_mixins';
@@
-13,7
+19,16
@@
display: flex;
height: max-content;
margin-left: auto;
display: flex;
height: max-content;
margin-left: auto;
- margin-top: 20px;
+ margin-top: 10px;
+
+ @include media-breakpoint-down(lg) {
+ flex-flow: column-reverse;
+
+ a {
+ margin-top: 0.25rem;
+ margin-right: 0 !important;
+ }
+ }
a {
@include peertube-button-outline;
a {
@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 070695e575afc3debd27d251ed092a27cc44485f..51db100e97f23589b50aba6703028ffa6063dc72 100644
(file)
--- 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
@@
<div class="form-group">
<label i18n for="role">Role</label>
<div class="peertube-select-container">
<div class="form-group">
<label i18n for="role">Role</label>
<div class="peertube-select-container">
- <select id="role" formControlName="role">
+ <select id="role" formControlName="role"
class="form-control"
>
<option *ngFor="let role of roles" [value]="role.value">
{{ role.label }}
</option>
<option *ngFor="let role of roles" [value]="role.value">
{{ role.label }}
</option>
@@
-138,7
+138,7
@@
<div class="form-group">
<label i18n for="videoQuota">Video quota</label>
<div class="peertube-select-container">
<div class="form-group">
<label i18n for="videoQuota">Video quota</label>
<div class="peertube-select-container">
- <select id="videoQuota" formControlName="videoQuota">
+ <select id="videoQuota" formControlName="videoQuota"
class="form-control"
>
<option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
{{ videoQuotaOption.label }}
</option>
<option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
{{ videoQuotaOption.label }}
</option>
@@
-154,7
+154,7
@@
<div class="form-group">
<label i18n for="videoQuotaDaily">Daily video quota</label>
<div class="peertube-select-container">
<div class="form-group">
<label i18n for="videoQuotaDaily">Daily video quota</label>
<div class="peertube-select-container">
- <select id="videoQuotaDaily" formControlName="videoQuotaDaily">
+ <select id="videoQuotaDaily" formControlName="videoQuotaDaily"
class="form-control"
>
<option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
{{ videoQuotaDailyOption.label }}
</option>
<option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
{{ videoQuotaDailyOption.label }}
</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 a1e1f62163b6e4ada59d0eebd8c733cc132d2e31..1238d18398cdeac02a61e2b6dc450226ab0f8f3b 100644
(file)
--- 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
@@
<div class="form-group">
<div class="input-group">
<div class="form-group">
<div class="input-group">
- <input id="password" [attr.type]="showPassword ? 'text' : 'password'"
+ <input id="password" [attr.type]="showPassword ? 'text' : 'password'"
class="form-control"
formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
>
<div class="input-group-append">
formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
>
<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 6470629f853d200beb805158b52f39d25cc515b9..a8e823b40eb63288bdf170a2e146e96ff798f4b3 100644
(file)
--- a/
client/src/app/+video-channels/video-channels.component.scss
+++ b/
client/src/app/+video-channels/video-channels.component.scss
@@
-1,3
+1,9
@@
+// 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';
@import '_variables';
@import '_mixins';
@@
-14,7
+20,7
@@
grid-template-rows: 1fr auto / 1fr auto;
grid-template-areas: "name buttons" "lower buttons";
grid-template-rows: 1fr auto / 1fr auto;
grid-template-areas: "name buttons" "lower buttons";
- @
media screen and (max-width: #{map-get($grid-breakpoints, lg)}
) {
+ @
include media-breakpoint-down(lg
) {
grid-template-areas: "name name" "lower buttons";
}
}
grid-template-areas: "name name" "lower buttons";
}
}
@@
-38,11
+44,20
@@
display: flex;
height: max-content;
margin-left: auto;
display: flex;
height: max-content;
margin-left: auto;
- margin-top:
2
0px;
+ margin-top:
1
0px;
grid-row: buttons-start / span buttons-end;
grid-column: buttons-start;
grid-row: buttons-start / span buttons-end;
grid-column: buttons-start;
+ @include media-breakpoint-down(lg) {
+ flex-flow: column-reverse;
+
+ a {
+ margin-top: 0.25rem;
+ margin-right: 0 !important;
+ }
+ }
+
a {
@include peertube-button-outline;
line-height: 1.8;
a {
@include peertube-button-outline;
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 114a12f0636a3abeae5ad64073929e38cde41255..5283a6cc3775ab8ea6ca08415b348f80236677aa 100644
(file)
--- 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
@@
font-size: 15px;
}
font-size: 15px;
}
+ &:not(.big) {
+ white-space: nowrap;
+ }
+
&.big {
height: 35px;
&.big {
height: 35px;
+ & > button:first-child {
+ width: 175px;
+ }
+
button .extra-text {
span:first-child {
line-height: 80%;
button .extra-text {
span:first-child {
line-height: 80%;
diff --git
a/client/src/sass/application.scss
b/client/src/sass/application.scss
index c8966d22be0a25dee99ec133611a7d51ddb49c21..11e5c16c3fe45f8f9232e8e88e434c2a521d7d70 100644
(file)
--- a/
client/src/sass/application.scss
+++ b/
client/src/sass/application.scss
@@
-77,10
+77,6
@@
input, textarea {
color: var(--mainForegroundColor);
}
color: var(--mainForegroundColor);
}
-.btn-outline-secondary {
- border-color: $input-border-color;
-}
-
label {
font-weight: $font-bold;
font-size: 15px;
label {
font-weight: $font-bold;
font-size: 15px;
@@
-108,7
+104,7
@@
label {
}
.row {
}
.row {
- margin: 0;
+ margin: 0
!important
;
}
.main-col {
}
.main-col {
@@
-280,6
+276,7
@@
table {
.sub-menu {
padding-left: 50px;
.sub-menu {
padding-left: 50px;
+ padding-right: 50px;
.title-page {
font-size: 17px;
.title-page {
font-size: 17px;
diff --git
a/client/src/sass/bootstrap.scss
b/client/src/sass/bootstrap.scss
index e8c4528f43601d87096d60b74516bb19e538b015..e13e0bff6e2d433509bcaaa988446ad5cc1bbe92 100644
(file)
--- a/
client/src/sass/bootstrap.scss
+++ b/
client/src/sass/bootstrap.scss
@@
-221,10
+221,23
@@
ngb-tooltip-window {
z-index: z(tooltip) !important;
}
z-index: z(tooltip) !important;
}
+.btn-outline-secondary {
+ border-color: $input-border-color;
+
+ &:focus-within,
+ &:focus,
+ &:hover {
+ color: #fff;
+ background-color: #6c757d;
+ }
+}
+
.btn-outline-tertiary {
color: var(--secondaryColor);
border-color: var(--secondaryColor);
.btn-outline-tertiary {
color: var(--secondaryColor);
border-color: var(--secondaryColor);
+ &:focus-within,
+ &:focus,
&:hover {
color: var(--mainBackgroundColor);
background-color: var(--secondaryColor);
&:hover {
color: var(--mainBackgroundColor);
background-color: var(--secondaryColor);
@@
-247,3
+260,7
@@
ngb-tooltip-window {
}
}
}
}
}
}
+
+.input-group > .form-control {
+ flex: initial;
+}