Merge branch 'v2.0-visual-fixes' into dev

src-ui/src/app/components/admin/users-groups/users-groups.component.html

@@ -12,7 +12,6 @@
         </button>
     </h4>
     <ul class="list-group">
-
         <li class="list-group-item">
         <div class="row">
             <div class="col" i18n>Username</div>
@@ -57,7 +56,6 @@
         </button>
     </h4>
     <ul *ngIf="groups.length > 0" class="list-group">
-
         <li class="list-group-item">
         <div class="row">
             <div class="col" i18n>Name</div>

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -62,7 +62,7 @@
 
 <div class="container-fluid">
   <div class="row">
-    <nav id="sidebarMenu" class="d-md-block bg-light sidebar collapse" [ngClass]="slimSidebarEnabled ? 'slim' : 'col-md-3 col-lg-2'" [class.animating]="slimSidebarAnimating" [ngbCollapse]="isMenuCollapsed">
+    <nav id="sidebarMenu" class="d-md-block bg-light sidebar collapse" [ngClass]="slimSidebarEnabled ? 'slim' : 'col-md-3 col-lg-2 col-xxxl-1'" [class.animating]="slimSidebarAnimating" [ngbCollapse]="isMenuCollapsed">
       <button class="btn btn-sm btn-dark sidebar-slim-toggler" (click)="toggleSlimSidebar()">
         <svg class="sidebaricon-sm" fill="currentColor">
           <use *ngIf="slimSidebarEnabled" xlink:href="assets/bootstrap-icons.svg#chevron-double-right"/>
@@ -266,7 +266,7 @@
       </div>
     </nav>
 
-    <main role="main" class="ms-sm-auto px-md-4" [ngClass]="slimSidebarEnabled ? 'col-slim' : 'col-md-9 col-lg-10'">
+    <main role="main" class="ms-sm-auto px-md-4" [ngClass]="slimSidebarEnabled ? 'col-slim' : 'col-md-9 col-lg-10 col-xxxl-11'">
       <router-outlet></router-outlet>
     </main>
   </div>

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -9,7 +9,7 @@
   (dndEnd)="dndEnd.emit($event)"
 >
 
-  <a *ngIf="documents.length" class="btn-link" header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>
+  <a *ngIf="documents.length" class="btn-link text-decoration-none" header-buttons [routerLink]="[]" (click)="showAll()" i18n>Show all</a>
 
   <table *ngIf="documents.length; else empty" content class="table table-hover mb-0 align-middle">
     <thead>
@@ -22,15 +22,15 @@
     </thead>
     <tbody>
       <tr *ngFor="let doc of documents" (mouseleave)="mouseLeaveCard()">
-        <td class="py-2 py-md-3"><a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none">{{doc.created_date | customDate}}</a></td>
+        <td class="py-2 py-md-3"><a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.created_date | customDate}}</a></td>
         <td class="py-2 py-md-3">
-          <a routerLink="/documents/{{doc.id}}" title="Edit" i18n-title class="btn-link text-dark text-decoration-none">{{doc.title | documentTitle}}</a>
+          <a routerLink="/documents/{{doc.id}}" title="Edit" i18n-title class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.title | documentTitle}}</a>
         </td>
         <td class="py-2 py-md-3 d-none d-md-table-cell">
           <pngx-tag [tag]="t" *ngFor="let t of doc.tags$ | async" class="ms-1" (click)="clickTag(t, $event)"></pngx-tag>
         </td>
         <td class="position-relative py-2 py-md-3 d-none d-md-table-cell">
-          <a *ngIf="doc.correspondent !== null" class="btn-link" routerLink="/documents" [queryParams]="getCorrespondentQueryParams(doc.correspondent)">{{(doc.correspondent$ | async)?.name}}</a>
+          <a *ngIf="doc.correspondent !== null" class="btn-link text-dark text-decoration-none py-2 py-md-3" routerLink="/documents" [queryParams]="getCorrespondentQueryParams(doc.correspondent)">{{(doc.correspondent$ | async)?.name}}</a>
           <div class="btn-group position-absolute top-50 end-0 translate-middle-y">
             <a [href]="getPreviewUrl(doc)" title="View Preview" i18n-title target="_blank" class="btn px-4 btn-dark border-dark-subtle"
             [ngbPopover]="previewContent" [popoverTitle]="doc.title | documentTitle"

src-ui/src/app/components/manage/mail/mail.component.html

@@ -12,7 +12,6 @@
         </button>
     </h4>
     <ul class="list-group">
-
         <li class="list-group-item">
             <div class="row">
             <div class="col" i18n>Name</div>
@@ -46,12 +45,12 @@
             </div>
             </div>
         </li>
-
-        <div *ngIf="mailAccounts.length === 0" i18n>No mail accounts defined.</div>
     </ul>
-    </ng-container>
 
-    <ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailRule }">
+    <div *ngIf="mailAccounts.length === 0" i18n>No mail accounts defined.</div>
+</ng-container>
+
+<ng-container *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.MailRule }">
     <h4 class="mt-4">
         <ng-container i18n>Mail rules</ng-container>
         <button type="button" class="btn btn-sm btn-outline-primary ms-4" (click)="editMailRule()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.MailRule }">
@@ -62,7 +61,6 @@
         </button>
     </h4>
     <ul class="list-group">
-
         <li class="list-group-item">
             <div class="row">
             <div class="col" i18n>Name</div>
@@ -96,9 +94,9 @@
             </div>
             </div>
         </li>
-
-        <div *ngIf="mailRules.length === 0" i18n>No mail rules defined.</div>
     </ul>
+
+    <div *ngIf="mailRules.length === 0" i18n>No mail rules defined.</div>
 </ng-container>
 
 <div *ngIf="!mailAccounts || !mailRules">

src-ui/src/styles.scss

@@ -1,6 +1,16 @@
 // bs options
 $enable-negative-margins: true;
 
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+  xxxl: 2000px
+);
+
 @import "node_modules/bootstrap/scss/bootstrap";
 @import "theme";
 @import "~@ng-select/ng-select/themes/default.theme.css";
@@ -186,6 +196,12 @@ a, a:hover,
   color: var(--pngx-primary-darken-15) !important;
 }
 
+a.btn-link:hover,
+a.btn-link:active,
+a.btn-link:focus-visible {
+  color: var(--pngx-primary-darken-5) !important;
+}
+
 .form-control-dark {
   color: #fff;
   background-color: rgba(255, 255, 255, .1);