From 906571969c7bfc6a023c42ad9910097aa4a1fe35 Mon Sep 17 00:00:00 2001
From: Dragos <cojocaru.dragos@gmail.com>
Date: Thu, 10 Jun 2021 18:24:28 +0300
Subject: [PATCH] removed help + small screen improvements

---
 app/src/app/account/account.component.html                | 4 ++--
 app/src/app/catalog/images/images.component.html          | 4 ++--
 app/src/app/components/nav-menu/nav-menu.component.html   | 4 ++--
 .../machine-history/machine-history.component.html        | 8 ++------
 app/src/app/machines/machines.component.html              | 6 +++---
 app/src/app/machines/machines.component.scss              | 3 ++-
 .../firewall-rules/firewall-rules.component.html          | 6 +++---
 app/src/app/networking/networks/networks.component.html   | 2 +-
 app/src/app/volumes/volumes.component.html                | 6 +++---
 app/src/styles/styles.scss                                | 8 ++++++++
 10 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/app/src/app/account/account.component.html b/app/src/app/account/account.component.html
index 4bf3795..ab3fb6e 100644
--- a/app/src/app/account/account.component.html
+++ b/app/src/app/account/account.component.html
@@ -37,7 +37,7 @@
           </fieldset>
         </div>
 
-        <div class="col-sm-6">
+        <div class="col-sm-6 mt-3 mt-sm-0">
           <fieldset>
             <legend>
               {{ 'account.myKeys' | translate }}
@@ -49,7 +49,7 @@
 
             <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">
-                <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 }}"
                         (click)="deleteSshKey(userKey.name)">
diff --git a/app/src/app/catalog/images/images.component.html b/app/src/app/catalog/images/images.component.html
index 6455333..5388e39 100644
--- a/app/src/app/catalog/images/images.component.html
+++ b/app/src/app/catalog/images/images.component.html
@@ -12,7 +12,7 @@
           </button>
         </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>
             Sort by
             <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 === 'state'">status</span>
           </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">
               <button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'name'" (click)="setSortProperty('name')">
                 Name
diff --git a/app/src/app/components/nav-menu/nav-menu.component.html b/app/src/app/components/nav-menu/nav-menu.component.html
index ea9bc6c..312e5d6 100644
--- a/app/src/app/components/nav-menu/nav-menu.component.html
+++ b/app/src/app/components/nav-menu/nav-menu.component.html
@@ -38,12 +38,12 @@
         {{ 'navbar.menu.images' | translate }}
       </a>
     </li>
-    <li class="dropdown-divider"></li>
+    <!-- <li class="dropdown-divider"></li>
     <li class="nav-item">
       <a class="nav-link" [routerLink]="['./help']" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }">
         <fa-icon [fixedWidth]="true" icon="question-circle"></fa-icon>
         {{ 'navbar.menu.help' | translate }}
       </a>
-    </li>
+    </li> -->
   </ul>
 </nav>
diff --git a/app/src/app/machines/machine-history/machine-history.component.html b/app/src/app/machines/machine-history/machine-history.component.html
index 639849c..75137da 100644
--- a/app/src/app/machines/machine-history/machine-history.component.html
+++ b/app/src/app/machines/machine-history/machine-history.component.html
@@ -19,8 +19,7 @@
             <tr>
               <th>Action</th>
               <th>Time</th>
-              <th>Finished</th>
-              <th>User</th>
+              <th class="text-end">Finished</th>
             </tr>
           </thead>
           <tbody>
@@ -29,14 +28,11 @@
                 <b>{{ info.action }}</b>
               </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'">
                   {{ info.success }}
                 </span>
               </td>
-              <td>
-                <div class="text-truncate">{{ info.caller.keyId }}</div>
-              </td>
             </tr>
           </tbody>
         </table>
diff --git a/app/src/app/machines/machines.component.html b/app/src/app/machines/machines.component.html
index e50f214..5236c62 100644
--- a/app/src/app/machines/machines.component.html
+++ b/app/src/app/machines/machines.component.html
@@ -42,7 +42,7 @@
           <button class="btn btn-outline-info dropdown-toggle" dropdownToggle>
             Sort by <b>{{ editorForm.get('sortProperty').value }}</b>
           </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">
               <button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'name'"
                       (click)="setSortProperty('name')">
@@ -174,8 +174,8 @@
                                  placement="top" [adaptivePosition]="false"></fa-icon>
                       </button>
 
-                      <button class="btn btn-link text-info" [popover]="machineContextMenu" container="body" (click)="machine.contextMenu = true"
-                              [popoverContext]="{ machine: machine }" placement="bottom left" containerClass="menu-dropdown"
+                      <button class="btn btn-link text-info" [popover]="machineContextMenu" (click)="machine.contextMenu = true"
+                              [popoverContext]="{ machine: machine }" placement="bottom right" containerClass="menu-dropdown"
                               [outsideClick]="true" triggers="" [isOpen]="machine.contextMenu" (onHidden)="machine.contextMenu = false">
                         <fa-icon icon="ellipsis-v" [fixedWidth]="true" size="sm"></fa-icon>
                       </button>
diff --git a/app/src/app/machines/machines.component.scss b/app/src/app/machines/machines.component.scss
index 4363ec5..b9566d8 100644
--- a/app/src/app/machines/machines.component.scss
+++ b/app/src/app/machines/machines.component.scss
@@ -108,7 +108,8 @@
 
 .filters
 {
-  width: 240px;
+  width: 100%;
+  min-width: 240px;
 
   .btn-group + *
   {
diff --git a/app/src/app/networking/firewall-rules/firewall-rules.component.html b/app/src/app/networking/firewall-rules/firewall-rules.component.html
index c7b2570..8ccaadb 100644
--- a/app/src/app/networking/firewall-rules/firewall-rules.component.html
+++ b/app/src/app/networking/firewall-rules/firewall-rules.component.html
@@ -10,7 +10,7 @@
       <span class="d-none d-sm-block flex-grow-1"></span>
 
       <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_-]+$">
           <button class="btn btn-outline-info" type="button" (click)="clearSearch()" [disabled]="!editorForm.get('searchTerm').value"
                   tooltip="Clear search" container="body" placement="top" [adaptivePosition]="false">
@@ -18,14 +18,14 @@
           </button>
         </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>
             Sort by
             <span *ngIf="editorForm.get('sortProperty').value === 'action'">action</span>
             <span *ngIf="editorForm.get('sortProperty').value === 'enabled'">status</span>
             <span *ngIf="editorForm.get('sortProperty').value === 'description'">description</span>
           </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">
               <button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'action'" (click)="setSortProperty('action')">
                 Action
diff --git a/app/src/app/networking/networks/networks.component.html b/app/src/app/networking/networks/networks.component.html
index fb991ea..42502df 100644
--- a/app/src/app/networking/networks/networks.component.html
+++ b/app/src/app/networking/networks/networks.component.html
@@ -22,7 +22,7 @@
           <button class="btn btn-outline-info dropdown-toggle" dropdownToggle>
             Sort by {{ editorForm.get('sortProperty').value === 'vlan_id' ? 'id' : editorForm.get('sortProperty').value }}
           </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">
               <button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'vlan_id'" (click)="setSortProperty('vlan_id')">
                 Id
diff --git a/app/src/app/volumes/volumes.component.html b/app/src/app/volumes/volumes.component.html
index 45d42b1..b7fb3cd 100644
--- a/app/src/app/volumes/volumes.component.html
+++ b/app/src/app/volumes/volumes.component.html
@@ -10,7 +10,7 @@
       <span class="d-none d-sm-block flex-grow-1"></span>
 
       <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_-]+$">
           <button class="btn btn-outline-info" type="button" (click)="clearSearch()" [disabled]="!editorForm.get('searchTerm').value"
                   tooltip="Clear search" container="body" placement="top" [adaptivePosition]="false">
@@ -18,11 +18,11 @@
           </button>
         </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>
             Sort by {{ editorForm.get('sortProperty').value === 'vlan_id' ? 'id' : editorForm.get('sortProperty').value }}
           </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">
               <button class="dropdown-item" [class.active]="editorForm.get('sortProperty').value === 'name'" (click)="setSortProperty('name')">
                 Name
diff --git a/app/src/styles/styles.scss b/app/src/styles/styles.scss
index bb68123..aca8195 100644
--- a/app/src/styles/styles.scss
+++ b/app/src/styles/styles.scss
@@ -280,6 +280,14 @@ accordion
   overflow: auto;
 }
 
+@media (max-width: 576px)
+{
+  .dropdown-menu, .menu-popover, .menu-dropdown
+  {
+    width: calc(100% - 3.5rem);
+  }
+}
+
 .dropdown-header
 {
   color: #11182b;