Refactor log level choice

This commit is contained in:
Chocobozzz 2021-10-20 13:49:34 +02:00
parent d94b8ecf7d
commit 1243729899
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
2 changed files with 26 additions and 26 deletions

View File

@ -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>
<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>
<span class="level-choice" [ngClass]="levelChoice.id">&#11044;</span> {{ levelChoice.label }}
</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>

View File

@ -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;
}
}
}
}