Improve channel and account display on medium devices
This commit is contained in:
parent
51892fe042
commit
947d01023d
client/src
app
+accounts
+admin/users/user-edit
+video-channels
shared/user-subscription
sass
|
@ -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 '_variables';
|
||||||
@import '_mixins';
|
@import '_mixins';
|
||||||
|
|
||||||
|
@ -13,7 +19,16 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
height: max-content;
|
height: max-content;
|
||||||
margin-left: auto;
|
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 {
|
a {
|
||||||
@include peertube-button-outline;
|
@include peertube-button-outline;
|
||||||
|
|
|
@ -123,7 +123,7 @@
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label i18n for="role">Role</label>
|
<label i18n for="role">Role</label>
|
||||||
<div class="peertube-select-container">
|
<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">
|
<option *ngFor="let role of roles" [value]="role.value">
|
||||||
{{ role.label }}
|
{{ role.label }}
|
||||||
</option>
|
</option>
|
||||||
|
@ -138,7 +138,7 @@
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label i18n for="videoQuota">Video quota</label>
|
<label i18n for="videoQuota">Video quota</label>
|
||||||
<div class="peertube-select-container">
|
<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">
|
<option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
|
||||||
{{ videoQuotaOption.label }}
|
{{ videoQuotaOption.label }}
|
||||||
</option>
|
</option>
|
||||||
|
@ -154,7 +154,7 @@
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label i18n for="videoQuotaDaily">Daily video quota</label>
|
<label i18n for="videoQuotaDaily">Daily video quota</label>
|
||||||
<div class="peertube-select-container">
|
<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">
|
<option *ngFor="let videoQuotaDailyOption of videoQuotaDailyOptions" [value]="videoQuotaDailyOption.value">
|
||||||
{{ videoQuotaDailyOption.label }}
|
{{ videoQuotaDailyOption.label }}
|
||||||
</option>
|
</option>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
|
|
||||||
<div class="input-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'] }"
|
formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
|
||||||
>
|
>
|
||||||
<div class="input-group-append">
|
<div class="input-group-append">
|
||||||
|
|
|
@ -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 '_variables';
|
||||||
@import '_mixins';
|
@import '_mixins';
|
||||||
|
|
||||||
|
@ -14,7 +20,7 @@
|
||||||
grid-template-rows: 1fr auto / 1fr auto;
|
grid-template-rows: 1fr auto / 1fr auto;
|
||||||
grid-template-areas: "name buttons" "lower buttons";
|
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;
|
display: flex;
|
||||||
height: max-content;
|
height: max-content;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-top: 20px;
|
margin-top: 10px;
|
||||||
|
|
||||||
grid-row: buttons-start / span buttons-end;
|
grid-row: buttons-start / span buttons-end;
|
||||||
grid-column: buttons-start;
|
grid-column: buttons-start;
|
||||||
|
|
||||||
|
@include media-breakpoint-down(lg) {
|
||||||
|
flex-flow: column-reverse;
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@include peertube-button-outline;
|
@include peertube-button-outline;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
|
|
|
@ -13,9 +13,17 @@
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:not(.big) {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
&.big {
|
&.big {
|
||||||
height: 35px;
|
height: 35px;
|
||||||
|
|
||||||
|
& > button:first-child {
|
||||||
|
width: 175px;
|
||||||
|
}
|
||||||
|
|
||||||
button .extra-text {
|
button .extra-text {
|
||||||
span:first-child {
|
span:first-child {
|
||||||
line-height: 80%;
|
line-height: 80%;
|
||||||
|
|
|
@ -77,10 +77,6 @@ input, textarea {
|
||||||
color: var(--mainForegroundColor);
|
color: var(--mainForegroundColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-outline-secondary {
|
|
||||||
border-color: $input-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
label {
|
||||||
font-weight: $font-bold;
|
font-weight: $font-bold;
|
||||||
font-size: 15px;
|
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 {
|
.sub-menu {
|
||||||
padding-left: 50px;
|
padding-left: 50px;
|
||||||
|
padding-right: 50px;
|
||||||
|
|
||||||
.title-page {
|
.title-page {
|
||||||
font-size: 17px;
|
font-size: 17px;
|
||||||
|
|
|
@ -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 {
|
.btn-outline-tertiary {
|
||||||
color: var(--secondaryColor);
|
color: var(--secondaryColor);
|
||||||
border-color: var(--secondaryColor);
|
border-color: var(--secondaryColor);
|
||||||
|
|
||||||
|
&:focus-within,
|
||||||
|
&:focus,
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--mainBackgroundColor);
|
color: var(--mainBackgroundColor);
|
||||||
background-color: var(--secondaryColor);
|
background-color: var(--secondaryColor);
|
||||||
|
@ -247,3 +260,7 @@ ngb-tooltip-window {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-group > .form-control {
|
||||||
|
flex: initial;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue