Cleanup plugins admin CSS

client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html

@@ -23,13 +23,17 @@
         </a>
 
         <div class="buttons">
-          <my-edit-button *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
+          <my-edit-button
+            *ngIf="!isTheme(plugin)" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label
+            [responsiveLabel]="true"
+          ></my-edit-button>
 
-          <my-button class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
-                     [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)"
+          <my-button
+            class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
+            [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" [responsiveLabel]="true"
           ></my-button>
 
-          <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label></my-delete-button>
+          <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label [responsiveLabel]="true"></my-delete-button>
         </div>
       </div>
 

client/src/app/+admin/plugins/plugin-search/plugin-search.component.html

@@ -48,10 +48,15 @@
         <span *ngIf="plugin.installed" class="badge badge-success">Installed</span>
 
         <div class="buttons">
-          <my-edit-button *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
+          <my-edit-button
+            *ngIf="plugin.installed === true && !isThemeSearch()" [routerLink]="getShowRouterLink(plugin)"
+            label="Settings" i18n-label [responsiveLabel]="true"
+          ></my-edit-button>
 
-          <my-button class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)" [loading]="isInstalling(plugin)"
-                     label="Install" icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
+          <my-button
+            class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)"
+            [loading]="isInstalling(plugin)" label="Install" [responsiveLabel]="true"
+            icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
           ></my-button>
         </div>
       </div>

client/src/app/+admin/plugins/plugins.component.scss

@@ -1,28 +0,0 @@
-@import '_variables';
-@import '_mixins';
-
-@media screen and (max-width: $small-view) {
-  ::ng-deep .plugins .plugin .first-row {
-    flex-wrap: wrap;
-
-    .plugin-name,
-    .plugin-version,
-    .plugin-icon {
-      margin-bottom: 10px;
-    }
-
-    .buttons {
-      my-edit-button,
-      my-delete-button,
-      my-button {
-        .action-button {
-          padding: 0 13px;
-        }
-
-        .button-label {
-          display: none;
-        }
-      }
-    }
-  }
-}

client/src/app/+admin/plugins/plugins.component.ts

@@ -1,8 +1,7 @@
 import { Component } from '@angular/core'
 
 @Component({
-  templateUrl: './plugins.component.html',
-  styleUrls: [ './plugins.component.scss' ]
+  templateUrl: './plugins.component.html'
 })
 export class PluginsComponent {
 }

client/src/app/+admin/plugins/shared/plugin-list.component.scss

@@ -36,6 +36,7 @@
   .buttons {
     margin-left: auto;
     width: max-content;
+
     > *:not(:last-child) {
       margin-right: 10px;
     }
@@ -57,3 +58,14 @@
   @include peertube-button-link;
   @include button-with-icon(21px, 0, -2px);
 }
+
+@media screen and (max-width: $small-view) {
+  .first-row {
+    flex-wrap: wrap;
+
+    .buttons {
+      flex-basis: 100%;
+      margin-top: 10px;
+    }
+  }
+}

client/src/app/shared/shared-main/buttons/button.component.scss

@@ -1,6 +1,16 @@
 @import '_variables';
 @import '_mixins';
 
+@mixin responsive-label {
+  .action-button {
+    padding: 0 13px;
+  }
+
+  .button-label {
+    display: none;
+  }
+}
+
 :host {
   outline: none;
 }
@@ -46,12 +56,12 @@ span[class$=-button] {
 // In a table, try to minimize the space taken by this button
 @media screen and (max-width: 1400px) {
   :host-context(td) {
-    .action-button {
-      padding: 0 13px;
-    }
-
-    .button-label {
-      display: none;
-    }
+    @include responsive-label;
+  }
+}
+
+@media screen and (max-width: $small-view) {
+  .responsive-label {
+    @include responsive-label;
   }
 }

client/src/app/shared/shared-main/buttons/button.component.ts

@@ -3,7 +3,7 @@ import { GlobalIconName } from '@app/shared/shared-icons'
 
 @Component({
   selector: 'my-button',
-  styleUrls: ['./button.component.scss'],
+  styleUrls: [ './button.component.scss' ],
   templateUrl: './button.component.html'
 })
 
@@ -14,6 +14,7 @@ export class ButtonComponent {
   @Input() title: string = undefined
   @Input() loading = false
   @Input() disabled = false
+  @Input() responsiveLabel = false
 
   getTitle () {
     return this.title || this.label
@@ -22,7 +23,8 @@ export class ButtonComponent {
   getClasses () {
     return {
       [this.className]: true,
-      disabled: this.disabled
+      disabled: this.disabled,
+      'responsive-label': this.responsiveLabel
     }
   }
 }

client/src/app/shared/shared-main/buttons/delete-button.component.html

@@ -1,4 +1,7 @@
-<span class="action-button action-button-delete grey-button" [ngbTooltip]="title" role="button" tabindex="0">
+<span
+  class="action-button action-button-delete grey-button"
+  [ngClass]="{ 'responsive-label': responsiveLabel }" [ngbTooltip]="title" role="button" tabindex="0"
+>
   <my-global-icon iconName="delete" aria-hidden="true"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>

client/src/app/shared/shared-main/buttons/delete-button.component.ts

@@ -9,6 +9,7 @@ import { Component, Input, OnInit } from '@angular/core'
 export class DeleteButtonComponent implements OnInit {
   @Input() label: string
   @Input() title: string
+  @Input() responsiveLabel = false
 
   ngOnInit () {
     // <my-delete-button /> No label

client/src/app/shared/shared-main/buttons/edit-button.component.html

@@ -1,4 +1,7 @@
-<a class="action-button action-button-edit grey-button" [routerLink]="routerLink" [ngbTooltip]="title">
+<a
+  class="action-button action-button-edit grey-button"
+  [ngClass]="{ 'responsive-label': responsiveLabel }" [routerLink]="routerLink" [ngbTooltip]="title"
+>
   <my-global-icon iconName="edit" aria-hidden="true"></my-global-icon>
 
   <span class="button-label" *ngIf="label">{{ label }}</span>

client/src/app/shared/shared-main/buttons/edit-button.component.ts

@@ -5,11 +5,11 @@ import { Component, Input, OnInit } from '@angular/core'
   styleUrls: [ './button.component.scss' ],
   templateUrl: './edit-button.component.html'
 })
-
 export class EditButtonComponent implements OnInit {
   @Input() label: string
   @Input() title: string
   @Input() routerLink: string[] | string = []
+  @Input() responsiveLabel = false
 
   ngOnInit () {
     // <my-edit-button /> No label