Improve channel and account display on medium devices

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';
 
@@ -13,7 +19,16 @@
   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;

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">
-            <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>
@@ -138,7 +138,7 @@
       <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>
@@ -154,7 +154,7 @@
       <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>

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">
-      <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">

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';
 
@@ -14,7 +20,7 @@
     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";
     }
   }
@@ -38,11 +44,20 @@
   display: flex;
   height: max-content;
   margin-left: auto;
-  margin-top: 20px;
+  margin-top: 10px;
 
   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;

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;
   }
 
+  &:not(.big) {
+    white-space: nowrap;
+  }
+
   &.big {
     height: 35px;
 
+    & > button:first-child {
+      width: 175px;
+    }
+
     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);
 }
 
-.btn-outline-secondary {
-  border-color: $input-border-color;
-}
-
 label {
   font-weight: $font-bold;
   font-size: 15px;
@@ -108,7 +104,7 @@ label {
 }
 
 .row {
-  margin: 0;
+  margin: 0 !important;
 }
 
 .main-col {
@@ -280,6 +276,7 @@ table {
 
       .sub-menu {
         padding-left: 50px;
+        padding-right: 50px;
 
         .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;
 }
 
+.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);
 
+  &:focus-within,
+  &:focus,
   &:hover {
     color: var(--mainBackgroundColor);
     background-color: var(--secondaryColor);
@@ -247,3 +260,7 @@ ngb-tooltip-window {
     }
   }
 }
+
+.input-group > .form-control {
+  flex: initial;
+}