removed help + small screen improvements

This commit is contained in:
Dragos 2021-06-10 18:24:28 +03:00
parent 340580184f
commit 906571969c
10 changed files with 28 additions and 23 deletions

View File

@ -37,7 +37,7 @@
</fieldset> </fieldset>
</div> </div>
<div class="col-sm-6"> <div class="col-sm-6 mt-3 mt-sm-0">
<fieldset> <fieldset>
<legend> <legend>
{{ 'account.myKeys' | translate }} {{ 'account.myKeys' | translate }}
@ -49,7 +49,7 @@
<ol class="list-group list-group-flush"> <ol class="list-group list-group-flush">
<li class="list-group-item pt-0 d-flex justify-content-between align-items-center" *ngFor="let userKey of userKeys"> <li class="list-group-item pt-0 d-flex justify-content-between align-items-center" *ngFor="let userKey of userKeys">
<span>{{ userKey.name }}: <b class="text-uppercase">{{ userKey.fingerprint }}</b></span> <span class="text-truncate">{{ userKey.name }}: <b class="text-uppercase">{{ userKey.fingerprint }}</b></span>
<button class="btn btn-sm btn-link text-danger" tooltip="{{ 'account.removeKey' | translate }}" <button class="btn btn-sm btn-link text-danger" tooltip="{{ 'account.removeKey' | translate }}"
(click)="deleteSshKey(userKey.name)"> (click)="deleteSshKey(userKey.name)">

View File

@ -12,7 +12,7 @@
</button> </button>
</div> </div>
<div class="btn-group flex-grow-1 flex-grow-sm-0 w-sm-auto w-100" dropdown placement="bottom left"> <div class="btn-group flex-grow-1 flex-grow-sm-0 w-sm-auto w-100 mt-3 mt-sm-0" dropdown placement="bottom left">
<button class="btn btn-outline-info dropdown-toggle" dropdownToggle> <button class="btn btn-outline-info dropdown-toggle" dropdownToggle>
Sort by Sort by
<span *ngIf="editorForm.get('sortProperty').value === 'name'">name</span> <span *ngIf="editorForm.get('sortProperty').value === 'name'">name</span>
@ -21,7 +21,7 @@
<span *ngIf="editorForm.get('sortProperty').value === 'type'">type</span> <span *ngIf="editorForm.get('sortProperty').value === 'type'">type</span>
<span *ngIf="editorForm.get('sortProperty').value === 'state'">status</span> <span *ngIf="editorForm.get('sortProperty').value === 'state'">status</span>
</button> </button>
<ul id="dropdown-split" *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu"> <ul id="dropdown-split" *dropdownMenu class="dropdown-menu dropdown-menu-right w-100 w-sm-auto" role="menu">
<li role="menuitem"> <li role="menuitem">
<button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'name'" (click)="setSortProperty('name')"> <button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'name'" (click)="setSortProperty('name')">
Name Name

View File

@ -38,12 +38,12 @@
{{ 'navbar.menu.images' | translate }} {{ 'navbar.menu.images' | translate }}
</a> </a>
</li> </li>
<li class="dropdown-divider"></li> <!-- <li class="dropdown-divider"></li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" [routerLink]="['./help']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }"> <a class="nav-link" [routerLink]="['./help']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
<fa-icon [fixedWidth]="true" icon="question-circle"></fa-icon> <fa-icon [fixedWidth]="true" icon="question-circle"></fa-icon>
{{ 'navbar.menu.help' | translate }} {{ 'navbar.menu.help' | translate }}
</a> </a>
</li> </li> -->
</ul> </ul>
</nav> </nav>

View File

@ -19,8 +19,7 @@
<tr> <tr>
<th>Action</th> <th>Action</th>
<th>Time</th> <th>Time</th>
<th>Finished</th> <th class="text-end">Finished</th>
<th>User</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -29,14 +28,11 @@
<b>{{ info.action }}</b> <b>{{ info.action }}</b>
</td> </td>
<td>{{ info.time | timeago }}</td> <td>{{ info.time | timeago }}</td>
<td> <td class="text-end">
<span class="badge border text-uppercase" [ngClass]="info.success === 'yes' ? 'text-success border-success' : 'text-danger border-danger'"> <span class="badge border text-uppercase" [ngClass]="info.success === 'yes' ? 'text-success border-success' : 'text-danger border-danger'">
{{ info.success }} {{ info.success }}
</span> </span>
</td> </td>
<td>
<div class="text-truncate">{{ info.caller.keyId }}</div>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

View File

@ -42,7 +42,7 @@
<button class="btn btn-outline-info dropdown-toggle" dropdownToggle> <button class="btn btn-outline-info dropdown-toggle" dropdownToggle>
Sort by <b>{{ editorForm.get('sortProperty').value }}</b> Sort by <b>{{ editorForm.get('sortProperty').value }}</b>
</button> </button>
<ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu"> <ul *dropdownMenu class="dropdown-menu dropdown-menu-right w-100 w-sm-auto" role="menu">
<li role="menuitem"> <li role="menuitem">
<button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'name'" <button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'name'"
(click)="setSortProperty('name')"> (click)="setSortProperty('name')">
@ -174,8 +174,8 @@
placement="top" [adaptivePosition]="false"></fa-icon> placement="top" [adaptivePosition]="false"></fa-icon>
</button> </button>
<button class="btn btn-link text-info" [popover]="machineContextMenu" container="body" (click)="machine.contextMenu = true" <button class="btn btn-link text-info" [popover]="machineContextMenu" (click)="machine.contextMenu = true"
[popoverContext]="{ machine: machine }" placement="bottom left" containerClass="menu-dropdown" [popoverContext]="{ machine: machine }" placement="bottom right" containerClass="menu-dropdown"
[outsideClick]="true" triggers="" [isOpen]="machine.contextMenu" (onHidden)="machine.contextMenu = false"> [outsideClick]="true" triggers="" [isOpen]="machine.contextMenu" (onHidden)="machine.contextMenu = false">
<fa-icon icon="ellipsis-v" [fixedWidth]="true" size="sm"></fa-icon> <fa-icon icon="ellipsis-v" [fixedWidth]="true" size="sm"></fa-icon>
</button> </button>

View File

@ -108,7 +108,8 @@
.filters .filters
{ {
width: 240px; width: 100%;
min-width: 240px;
.btn-group + * .btn-group + *
{ {

View File

@ -10,7 +10,7 @@
<span class="d-none d-sm-block flex-grow-1"></span> <span class="d-none d-sm-block flex-grow-1"></span>
<ng-container *ngIf="firewallRules && firewallRules.length"> <ng-container *ngIf="firewallRules && firewallRules.length">
<div class="input-group input-group-pill flex-grow-1 flex-grow-sm-0 me-sm-3 w-sm-auto w-100"> <div class="input-group input-group-pill flex-grow-1 flex-grow-sm-0 me-sm-3 w-sm-auto w-100 mt-3 mt-sm-0">
<input type="text" class="form-control" placeholder="Search by description..." formControlName="searchTerm" appAlphaOnly="^[A-Za-z0-9_-]+$"> <input type="text" class="form-control" placeholder="Search by description..." formControlName="searchTerm" appAlphaOnly="^[A-Za-z0-9_-]+$">
<button class="btn btn-outline-info" type="button" (click)="clearSearch()" [disabled]="!editorForm.get('searchTerm').value" <button class="btn btn-outline-info" type="button" (click)="clearSearch()" [disabled]="!editorForm.get('searchTerm').value"
tooltip="Clear search" container="body" placement="top" [adaptivePosition]="false"> tooltip="Clear search" container="body" placement="top" [adaptivePosition]="false">
@ -18,14 +18,14 @@
</button> </button>
</div> </div>
<div class="btn-group flex-grow-1 flex-grow-sm-0 w-sm-auto w-100" dropdown placement="bottom right"> <div class="btn-group flex-grow-1 flex-grow-sm-0 w-sm-auto w-100 mt-3 mt-sm-0" dropdown placement="bottom right">
<button class="btn btn-outline-info dropdown-toggle" dropdownToggle> <button class="btn btn-outline-info dropdown-toggle" dropdownToggle>
Sort by Sort by
<span *ngIf="editorForm.get('sortProperty').value === 'action'">action</span> <span *ngIf="editorForm.get('sortProperty').value === 'action'">action</span>
<span *ngIf="editorForm.get('sortProperty').value === 'enabled'">status</span> <span *ngIf="editorForm.get('sortProperty').value === 'enabled'">status</span>
<span *ngIf="editorForm.get('sortProperty').value === 'description'">description</span> <span *ngIf="editorForm.get('sortProperty').value === 'description'">description</span>
</button> </button>
<ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu"> <ul *dropdownMenu class="dropdown-menu dropdown-menu-right w-100 w-sm-auto" role="menu">
<li role="menuitem"> <li role="menuitem">
<button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'action'" (click)="setSortProperty('action')"> <button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'action'" (click)="setSortProperty('action')">
Action Action

View File

@ -22,7 +22,7 @@
<button class="btn btn-outline-info dropdown-toggle" dropdownToggle> <button class="btn btn-outline-info dropdown-toggle" dropdownToggle>
Sort by {{ editorForm.get('sortProperty').value === 'vlan_id' ? 'id' : editorForm.get('sortProperty').value }} Sort by {{ editorForm.get('sortProperty').value === 'vlan_id' ? 'id' : editorForm.get('sortProperty').value }}
</button> </button>
<ul id="dropdown-split" *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu"> <ul id="dropdown-split" *dropdownMenu class="dropdown-menu dropdown-menu-right w-100 w-sm-auto" role="menu">
<li role="menuitem"> <li role="menuitem">
<button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'vlan_id'" (click)="setSortProperty('vlan_id')"> <button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'vlan_id'" (click)="setSortProperty('vlan_id')">
Id Id

View File

@ -10,7 +10,7 @@
<span class="d-none d-sm-block flex-grow-1"></span> <span class="d-none d-sm-block flex-grow-1"></span>
<ng-container *ngIf="volumes && volumes.length"> <ng-container *ngIf="volumes && volumes.length">
<div class="input-group input-group-pill flex-grow-1 flex-grow-sm-0 me-sm-3 w-sm-auto w-100"> <div class="input-group input-group-pill flex-grow-1 flex-grow-sm-0 me-sm-3 w-sm-auto w-100 mt-3 mt-sm-0">
<input type="text" class="form-control" placeholder="Search by name..." formControlName="searchTerm" appAlphaOnly="^[A-Za-z0-9_-]+$"> <input type="text" class="form-control" placeholder="Search by name..." formControlName="searchTerm" appAlphaOnly="^[A-Za-z0-9_-]+$">
<button class="btn btn-outline-info" type="button" (click)="clearSearch()" [disabled]="!editorForm.get('searchTerm').value" <button class="btn btn-outline-info" type="button" (click)="clearSearch()" [disabled]="!editorForm.get('searchTerm').value"
tooltip="Clear search" container="body" placement="top" [adaptivePosition]="false"> tooltip="Clear search" container="body" placement="top" [adaptivePosition]="false">
@ -18,11 +18,11 @@
</button> </button>
</div> </div>
<div class="btn-group flex-grow-1 flex-grow-sm-0 w-sm-auto w-100" dropdown placement="bottom left"> <div class="btn-group flex-grow-1 flex-grow-sm-0 w-sm-auto w-100 mt-3 mt-sm-0" dropdown placement="bottom left">
<button class="btn btn-outline-info dropdown-toggle" dropdownToggle> <button class="btn btn-outline-info dropdown-toggle" dropdownToggle>
Sort by {{ editorForm.get('sortProperty').value === 'vlan_id' ? 'id' : editorForm.get('sortProperty').value }} Sort by {{ editorForm.get('sortProperty').value === 'vlan_id' ? 'id' : editorForm.get('sortProperty').value }}
</button> </button>
<ul id="dropdown-split" *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu"> <ul id="dropdown-split" *dropdownMenu class="dropdown-menu dropdown-menu-right w-100 w-sm-auto" role="menu">
<li role="menuitem"> <li role="menuitem">
<button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'name'" (click)="setSortProperty('name')"> <button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'name'" (click)="setSortProperty('name')">
Name Name

View File

@ -280,6 +280,14 @@ accordion
overflow: auto; overflow: auto;
} }
@media (max-width: 576px)
{
.dropdown-menu, .menu-popover, .menu-dropdown
{
width: calc(100% - 3.5rem);
}
}
.dropdown-header .dropdown-header
{ {
color: #11182b; color: #11182b;