Improve channel and account display on medium devices

5 files changed, 45 insertions, 7 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 @@
+// 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 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 @@
       <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 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 @@
   <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 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 @@
+// 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 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 @@
     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%;