Refactor log level choice

client/src/app/+admin/system/logs/logs.component.html

@@ -24,10 +24,7 @@
     *ngIf="!isAuditLog()"
   >
     <ng-option *ngFor="let levelChoice of levelChoices" [value]="levelChoice.id">
-      <ng-container *ngIf="levelChoice.id === 'debug'"><span style="font-size:80%;color:lightgray;vertical-align:text-top;">&#11044;</span> {{ levelChoice.label }}</ng-container>
+      <span class="level-choice" [ngClass]="levelChoice.id">&#11044;</span> {{ levelChoice.label }}
-      <ng-container *ngIf="levelChoice.id === 'info'"><span style="font-size:80%;color:lightskyblue;vertical-align:text-top;">&#11044;</span> {{ levelChoice.label }}</ng-container>
-      <ng-container *ngIf="levelChoice.id === 'warn'"><span style="font-size:80%;color:orange;vertical-align:text-top;">&#11044;</span> {{ levelChoice.label }}</ng-container>
-      <ng-container *ngIf="levelChoice.id === 'error'"><span style="font-size:80%;color:red;vertical-align:text-top;">&#11044;</span> {{ levelChoice.label }}</ng-container>
     </ng-option>
   </ng-select>
 
@@ -38,6 +35,8 @@
   <div *ngIf="loading" i18n>Loading...</div>
 
   <div #logsElement>
+    <div *ngIf="!loading && logs.length === 0" i18n>No log.</div>
+
     <div *ngFor="let log of logs" class="log-row" [ngClass]="{ error: log.level === 'error', warn: log.level === 'warn' }">
       <span class="log-level">{{ log.level }}</span>
 

client/src/app/+admin/system/logs/logs.component.scss

@@ -59,7 +59,29 @@
   }
 }
 
-@media screen and (max-width: $small-view) {
+.level-choice {
+  font-size: 80%;
+  vertical-align: text-top;
+
+  &.debug {
+    color: rgb(197, 197, 197);
+  }
+
+  &.info {
+    color: rgb(136, 204, 247);
+  }
+
+  &.warn {
+    color: rgb(252, 166, 7);
+  }
+
+  &.error {
+    color: rgb(250, 5, 5);
+  }
+
+}
+
+@include on-small-main-col {
   .header {
     flex-direction: column;
 
@@ -77,24 +99,3 @@
     }
   }
 }
-
-@media screen and (max-width: #{$small-view + $menu-width}) {
-  :host-context(.main-col:not(.expanded)) {
-    .header {
-      flex-direction: column;
-
-      .peertube-select-container,
-      ng-select,
-      my-button {
-        @include margin-left(0 !important);
-
-        width: 100% !important;
-        margin-bottom: 10px !important;
-      }
-
-      my-button {
-        text-align: center;
-      }
-    }
-  }
-}