Rework doc details nav

scroll doc details nav on mobile

Update styles.scss

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html

@@ -1,5 +1,5 @@
 <div ngbDropdown #fieldDropdown="ngbDropdown" (openChange)="onOpenClose()">
-    <button class="btn btn-sm btn-outline-primary me-2" id="customFieldsDropdown" [disabled]="disabled" ngbDropdownToggle>
+    <button class="btn btn-sm btn-outline-primary" id="customFieldsDropdown" [disabled]="disabled" ngbDropdownToggle>
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#ui-radios" />
       </svg>

src-ui/src/app/components/common/page-header/page-header.component.scss

@@ -1,9 +1,9 @@
-.h2 {
+h3 {
     min-height: calc(1.325rem + 0.9vw);
 }
 
 @media (min-width: 1200px) {
-    .h2 {
+    h3 {
         min-height: 2.8rem;
     }
 }

src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html

@@ -1,5 +1,5 @@
 <div ngbDropdown>
-    <button class="btn btn-sm btn-outline-primary me-2" id="shareLinksDropdown" [disabled]="disabled" ngbDropdownToggle>
+    <button class="btn btn-sm btn-outline-primary" id="shareLinksDropdown" [disabled]="disabled" ngbDropdownToggle>
       <svg class="toolbaricon" fill="currentColor">
         <use xlink:href="assets/bootstrap-icons.svg#link" />
       </svg>

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -26,7 +26,7 @@
         </div>
     </div>
 
-    <div ngbDropdown>
+    <div class="ms-auto" ngbDropdown>
         <button class="btn btn-sm btn-outline-primary me-2" id="actionsDropdown" ngbDropdownToggle>
           <svg class="toolbaricon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#three-dots" />
@@ -49,6 +49,7 @@
     </div>
 
     <pngx-custom-fields-dropdown
+        class="me-2"
         [documentId]="documentId"
         [disabled]="!userIsOwner"
         [existingFields]="document?.custom_fields"
@@ -56,20 +57,47 @@
     </pngx-custom-fields-dropdown>
 
     <pngx-share-links-dropdown [documentId]="documentId" [disabled]="!userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }"></pngx-share-links-dropdown>
-
 </pngx-page-header>
 
-
 <div class="row">
     <div class="col-md-6 col-xl-4 mb-4">
 
         <form [formGroup]='documentForm' (ngSubmit)="save()">
 
-            <ul ngbNav #nav="ngbNav" class="nav-tabs" (navChange)="onNavChange($event)" [(activeId)]="activeNavID">
+            <div class="btn-toolbar mb-1 pb-3 border-bottom">
+                <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Close" (click)="close()">
+                        <svg class="buttonicon" fill="currentColor">
+                            <use xlink:href="assets/bootstrap-icons.svg#x" />
+                        </svg>
+                    </button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary" i18n-title title="Previous" (click)="previousDoc()" [disabled]="!hasPrevious()">
+                        <svg class="buttonicon" fill="currentColor">
+                            <use xlink:href="assets/bootstrap-icons.svg#arrow-left" />
+                        </svg>
+                    </button>
+                    <button type="button" class="btn btn-sm btn-outline-secondary"  i18n-title title="Next" (click)="nextDoc()" [disabled]="!hasNext()">
+                        <svg class="buttonicon" fill="currentColor">
+                            <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
+                        </svg>
+                    </button>
+                </div>
+
+                <div class="btn-group ms-auto">
+                    <button type="button" class="btn btn-sm btn-outline-secondary" (click)="discard()" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Discard</button>
+                    <ng-container *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
+                        <button *ngIf="hasNext()" type="button" class="btn btn-sm btn-outline-primary" (click)="saveEditNext()" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save &amp; next</button>
+                        <button *ngIf="!hasNext()" type="button" class="btn btn-sm btn-outline-primary" (click)="save(true)" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save &amp; close</button>
+                        <button type="submit" class="btn btn-sm btn-primary" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save</button>
+                    </ng-container>
+                </div>
+            </div>
+
+            <ul ngbNav #nav="ngbNav" class="nav-underline flex-nowrap flex-md-wrap overflow-x-scroll" (navChange)="onNavChange($event)" [(activeId)]="activeNavID">
                 <li [ngbNavItem]="DocumentDetailNavIDs.Details">
                     <a ngbNavLink i18n>Details</a>
                     <ng-template ngbNavContent>
-                        <div class="my-3">
+                        <div>
                             <pngx-input-text #inputTitle i18n-title title="Title" formControlName="title" [horizontal]="true" (keyup)="titleKeyUp($event)" [error]="error?.title"></pngx-input-text>
                             <pngx-input-number i18n-title title="Archive serial number" [error]="error?.archive_serial_number" [horizontal]="true" formControlName='archive_serial_number'></pngx-input-number>
                             <pngx-input-date i18n-title title="Date created" formControlName="created_date" [suggestions]="suggestions?.dates" [showFilter]="true" [horizontal]="true" (filterDocuments)="filterDocuments($event)"
@@ -98,7 +126,7 @@
                 <li [ngbNavItem]="DocumentDetailNavIDs.Content">
                     <a ngbNavLink i18n>Content</a>
                     <ng-template ngbNavContent>
-                        <div class="mb-3">
+                        <div>
                             <textarea class="form-control" id="content" rows="20" formControlName='content' [class.rtl]="isRTL"></textarea>
                         </div>
                     </ng-template>
@@ -196,36 +224,8 @@
                 </li>
             </ul>
 
-            <div [ngbNavOutlet]="nav" class="mt-2"></div>
+            <div [ngbNavOutlet]="nav" class="mt-3"></div>
 
-            <div class="btn-toolbar mt-4">
-                <div class="btn-group">
-                    <button type="button" class="btn btn-outline-secondary" i18n-title title="Close" (click)="close()">
-                        <svg class="buttonicon" fill="currentColor">
-                            <use xlink:href="assets/bootstrap-icons.svg#x" />
-                        </svg>
-                    </button>
-                    <button type="button" class="btn btn-outline-secondary" i18n-title title="Previous" (click)="previousDoc()" [disabled]="!hasPrevious()">
-                        <svg class="buttonicon" fill="currentColor">
-                            <use xlink:href="assets/bootstrap-icons.svg#arrow-left" />
-                        </svg>
-                    </button>
-                    <button type="button" class="btn btn-outline-secondary"  i18n-title title="Next" (click)="nextDoc()" [disabled]="!hasNext()">
-                        <svg class="buttonicon" fill="currentColor">
-                            <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
-                        </svg>
-                    </button>
-                </div>
-
-                <div class="btn-group ms-auto">
-                    <button type="button" class="btn btn-outline-secondary" (click)="discard()" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Discard</button>
-                    <ng-container *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.Document }">
-                        <button *ngIf="hasNext()" type="button" class="btn btn-outline-primary" (click)="saveEditNext()" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save &amp; next</button>
-                        <button *ngIf="!hasNext()" type="button" class="btn btn-outline-primary" (click)="save(true)" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save &amp; close</button>
-                        <button type="submit" class="btn btn-primary" i18n [disabled]="!userCanEdit || networkActive || (isDirty$ | async) !== true">Save</button>
-                    </ng-container>
-                </div>
-            </div>
         </form>
     </div>
 

src-ui/src/styles.scss

@@ -384,6 +384,14 @@ ul.pagination {
   }
 }
 
+.nav-underline {
+  .nav-link {
+    &.active, &:hover, &:focus {
+      color: var(--bs-primary);
+    }
+  }
+}
+
 .ng-select-container,
 .ng-select.ng-select-opened > .ng-select-container,
 .ng-dropdown-panel,