From 079d076221a0745352d3123ba9c777c0d373172d Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Wed, 23 Jan 2019 15:19:02 +0100
Subject: [PATCH] CSS fix.

---
 .../assets/pages/assets-page.component.html   | 10 ++++----
 .../pages/content/content-page.component.html | 24 ++++++++++---------
 .../contents/contents-page.component.html     | 10 ++++----
 .../pages/rules/rules-page.component.html     | 24 ++++++++++---------
 .../pages/schema/schema-page.component.html   | 12 ++++++----
 .../pages/backups/backups-page.component.html | 12 ++++++----
 .../pages/clients/clients-page.component.html | 18 +++++++-------
 .../contributors-page.component.html          | 18 +++++++-------
 .../languages/languages-page.component.html   | 18 +++++++-------
 .../patterns/patterns-page.component.html     | 18 +++++++-------
 .../pages/plans/plans-page.component.html     | 12 ++++++----
 .../pages/roles/roles-page.component.html     | 18 +++++++-------
 src/Squidex/app/theme/_panels.scss            |  8 +++++++
 13 files changed, 117 insertions(+), 85 deletions(-)

diff --git a/src/Squidex/app/features/assets/pages/assets-page.component.html b/src/Squidex/app/features/assets/pages/assets-page.component.html
index ebe1665b1..36e9e5e3d 100644
--- a/src/Squidex/app/features/assets/pages/assets-page.component.html
+++ b/src/Squidex/app/features/assets/pages/assets-page.component.html
@@ -52,11 +52,13 @@
     </ng-container>
 
     <ng-container sidebar>   
-        <sqx-tooltip position="leftTop" [target]="filtersLink">Filters</sqx-tooltip>
+        <div class="panel-nav">
+            <sqx-tooltip position="leftTop" [target]="filtersLink">Filters</sqx-tooltip>
 
-        <a class="panel-link" routerLink="filters" routerLinkActive="active" #filtersLink>
-            <i class="icon-filter"></i>
-        </a>         
+            <a class="panel-link" routerLink="filters" routerLinkActive="active" #filtersLink>
+                <i class="icon-filter"></i>
+            </a>    
+        </div> 
     </ng-container>
 </sqx-panel>
 
diff --git a/src/Squidex/app/features/content/pages/content/content-page.component.html b/src/Squidex/app/features/content/pages/content/content-page.component.html
index e18ddf801..bef584f93 100644
--- a/src/Squidex/app/features/content/pages/content/content-page.component.html
+++ b/src/Squidex/app/features/content/pages/content/content-page.component.html
@@ -124,21 +124,23 @@
         </ng-container>
 
         <ng-container sidebar>
-            <sqx-tooltip position="leftTop" [target]="historyLink">commentsLink</sqx-tooltip>
+            <div class="panel-nav">
+                <sqx-tooltip position="leftTop" [target]="historyLink">commentsLink</sqx-tooltip>
 
-            <a class="panel-link" routerLink="comments" routerLinkActive="active" #commentsLink>
-                <i class="icon-comments"></i>
-            </a>
+                <a class="panel-link" routerLink="comments" routerLinkActive="active" #commentsLink>
+                    <i class="icon-comments"></i>
+                </a>
 
-            <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+                <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
 
-            <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
-                <i class="icon-time"></i>
-            </a>
+                <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
+                    <i class="icon-time"></i>
+                </a>
 
-            <sqx-onboarding-tooltip helpId="history" [for]="historyLink" position="leftTop" after="120000">
-                The sidebar navigation contains useful context specific links. Here you can view the history how this schema has changed over time.
-            </sqx-onboarding-tooltip>
+                <sqx-onboarding-tooltip helpId="history" [for]="historyLink" position="leftTop" after="120000">
+                    The sidebar navigation contains useful context specific links. Here you can view the history how this schema has changed over time.
+                </sqx-onboarding-tooltip>
+            </div>
         </ng-container>
     </sqx-panel>
 </form>
diff --git a/src/Squidex/app/features/content/pages/contents/contents-page.component.html b/src/Squidex/app/features/content/pages/contents/contents-page.component.html
index afd7dbe55..dc771f257 100644
--- a/src/Squidex/app/features/content/pages/contents/contents-page.component.html
+++ b/src/Squidex/app/features/content/pages/contents/contents-page.component.html
@@ -125,11 +125,13 @@
     </ng-container>    
 
     <ng-container sidebar>
-        <sqx-tooltip position="leftTop" [target]="filtersLink">Filters</sqx-tooltip>
+        <div class="panel-nav">
+            <sqx-tooltip position="leftTop" [target]="filtersLink">Filters</sqx-tooltip>
 
-        <a class="panel-link" routerLink="filters" routerLinkActive="active" #filtersLink>
-            <i class="icon-filter"></i>
-        </a>
+            <a class="panel-link" routerLink="filters" routerLinkActive="active" #filtersLink>
+                <i class="icon-filter"></i>
+            </a>
+        </div>
     </ng-container>
 </sqx-panel>
 
diff --git a/src/Squidex/app/features/rules/pages/rules/rules-page.component.html b/src/Squidex/app/features/rules/pages/rules/rules-page.component.html
index 0ef0e6c51..7e2636362 100644
--- a/src/Squidex/app/features/rules/pages/rules/rules-page.component.html
+++ b/src/Squidex/app/features/rules/pages/rules/rules-page.component.html
@@ -76,21 +76,23 @@
     </ng-container>
 
     <ng-container sidebar>
-        <sqx-tooltip position="leftTop" [target]="historyLink">Events</sqx-tooltip>
+        <div class="panel-nav">
+            <sqx-tooltip position="leftTop" [target]="historyLink">Events</sqx-tooltip>
 
-        <a class="panel-link panel-link-gray" routerLink="events" routerLinkActive="active" #historyLink>
-            <i class="icon-time"></i>
-        </a>
+            <a class="panel-link panel-link-gray" routerLink="events" routerLinkActive="active" #historyLink>
+                <i class="icon-time"></i>
+            </a>
 
-        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+            <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
 
-        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
-            <i class="icon-help"></i>
-        </a>
+            <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
+                <i class="icon-help"></i>
+            </a>
 
-        <sqx-onboarding-tooltip helpId="help" [for]="helpLink" position="leftTop" after="180000">
-            Click the help icon to show a context specific help page. Go to <a href="https://docs.squidex.io" sqxExternalLink>https://docs.squidex.io</a> for the full documentation.
-        </sqx-onboarding-tooltip>
+            <sqx-onboarding-tooltip helpId="help" [for]="helpLink" position="leftTop" after="180000">
+                Click the help icon to show a context specific help page. Go to <a href="https://docs.squidex.io" sqxExternalLink>https://docs.squidex.io</a> for the full documentation.
+            </sqx-onboarding-tooltip>
+        </div>
     </ng-container>
 </sqx-panel>
 
diff --git a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
index 140df0be3..5caebdf85 100644
--- a/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
+++ b/src/Squidex/app/features/schemas/pages/schema/schema-page.component.html
@@ -82,11 +82,13 @@
     </ng-container>
 
     <ng-container sidebar>
-        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
-
-        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
-            <i class="icon-help"></i>
-        </a>
+        <div class="panel-nav">
+            <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+        
+            <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
+                <i class="icon-help"></i>
+            </a>
+        </div>
     </ng-container>
 </sqx-panel>
 
diff --git a/src/Squidex/app/features/settings/pages/backups/backups-page.component.html b/src/Squidex/app/features/settings/pages/backups/backups-page.component.html
index af6a1917f..7e9ef4470 100644
--- a/src/Squidex/app/features/settings/pages/backups/backups-page.component.html
+++ b/src/Squidex/app/features/settings/pages/backups/backups-page.component.html
@@ -93,11 +93,13 @@
     </ng-container>
 
     <ng-container sidebar>
-        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
-
-        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
-            <i class="icon-help"></i>
-        </a>
+        <div class="panel-nav">
+            <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+        
+            <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
+                <i class="icon-help"></i>
+            </a>
+        </div>
     </ng-container>
 </sqx-panel>
 
diff --git a/src/Squidex/app/features/settings/pages/clients/clients-page.component.html b/src/Squidex/app/features/settings/pages/clients/clients-page.component.html
index 5ba08be65..732589bf2 100644
--- a/src/Squidex/app/features/settings/pages/clients/clients-page.component.html
+++ b/src/Squidex/app/features/settings/pages/clients/clients-page.component.html
@@ -47,17 +47,19 @@
     </ng-container>
 
     <ng-container sidebar>
-        <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+        <div class="panel-nav">
+            <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
 
-        <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
-            <i class="icon-time"></i>
-        </a>
+            <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
+                <i class="icon-time"></i>
+            </a>
 
-        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+            <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
 
-        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
-            <i class="icon-help"></i>
-        </a>
+            <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
+                <i class="icon-help"></i>
+            </a>
+        </div>
     </ng-container>
 </sqx-panel>
 
diff --git a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html
index fef4da276..4fcace09b 100644
--- a/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html
+++ b/src/Squidex/app/features/settings/pages/contributors/contributors-page.component.html
@@ -73,17 +73,19 @@
     </ng-container>
 
     <ng-container sidebar>
-        <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+        <div class="panel-nav">
+            <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
 
-        <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
-            <i class="icon-time"></i>
-        </a>
+            <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
+                <i class="icon-time"></i>
+            </a>
 
-        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+            <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
 
-        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
-            <i class="icon-help"></i>
-        </a>
+            <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
+                <i class="icon-help"></i>
+            </a>
+        </div>
     </ng-container>
 </sqx-panel>
 
diff --git a/src/Squidex/app/features/settings/pages/languages/languages-page.component.html b/src/Squidex/app/features/settings/pages/languages/languages-page.component.html
index b84fa4de9..d7d9981e9 100644
--- a/src/Squidex/app/features/settings/pages/languages/languages-page.component.html
+++ b/src/Squidex/app/features/settings/pages/languages/languages-page.component.html
@@ -43,17 +43,19 @@
     </ng-container>
 
     <ng-container sidebar>
-        <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+        <div class="panel-nav">
+            <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
 
-        <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
-            <i class="icon-time"></i>
-        </a>
+            <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
+                <i class="icon-time"></i>
+            </a>
 
-        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+            <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
 
-        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
-            <i class="icon-help"></i>
-        </a>
+            <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
+                <i class="icon-help"></i>
+            </a>
+        </div>
     </ng-container>
 </sqx-panel>
 
diff --git a/src/Squidex/app/features/settings/pages/patterns/patterns-page.component.html b/src/Squidex/app/features/settings/pages/patterns/patterns-page.component.html
index f66ffd241..10db7f418 100644
--- a/src/Squidex/app/features/settings/pages/patterns/patterns-page.component.html
+++ b/src/Squidex/app/features/settings/pages/patterns/patterns-page.component.html
@@ -25,17 +25,19 @@
     </ng-container>
 
     <ng-container sidebar>
-        <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+        <div class="panel-nav">
+            <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
 
-        <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
-            <i class="icon-time"></i>
-        </a>
+            <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
+                <i class="icon-time"></i>
+            </a>
 
-        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+            <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
 
-        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
-            <i class="icon-help"></i>
-        </a>
+            <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
+                <i class="icon-help"></i>
+            </a>
+        </div>
     </ng-container>
 </sqx-panel>
 
diff --git a/src/Squidex/app/features/settings/pages/plans/plans-page.component.html b/src/Squidex/app/features/settings/pages/plans/plans-page.component.html
index 58a86d10d..34f456c26 100644
--- a/src/Squidex/app/features/settings/pages/plans/plans-page.component.html
+++ b/src/Squidex/app/features/settings/pages/plans/plans-page.component.html
@@ -79,11 +79,13 @@
     </ng-container>
 
     <ng-container sidebar>
-        <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
-
-        <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
-            <i class="icon-time"></i>
-        </a>
+        <div class="panel-nav">
+            <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+        
+            <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
+                <i class="icon-time"></i>
+            </a>
+        </div>
     </ng-container>
 </sqx-panel>
 
diff --git a/src/Squidex/app/features/settings/pages/roles/roles-page.component.html b/src/Squidex/app/features/settings/pages/roles/roles-page.component.html
index 380d06a76..1a0e1a884 100644
--- a/src/Squidex/app/features/settings/pages/roles/roles-page.component.html
+++ b/src/Squidex/app/features/settings/pages/roles/roles-page.component.html
@@ -38,17 +38,19 @@
     </ng-container>
 
     <ng-container sidebar>
-        <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
+        <div class="panel-nav">
+            <sqx-tooltip position="leftTop" [target]="historyLink">History</sqx-tooltip>
 
-        <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
-            <i class="icon-time"></i>
-        </a>
+            <a class="panel-link" routerLink="history" routerLinkActive="active" #historyLink>
+                <i class="icon-time"></i>
+            </a>
 
-        <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
+            <sqx-tooltip position="leftTop" [target]="helpLink">Help</sqx-tooltip>
 
-        <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
-            <i class="icon-help"></i>
-        </a>
+            <a class="panel-link" routerLink="help" routerLinkActive="active" #helpLink>
+                <i class="icon-help"></i>
+            </a>
+        </div>
     </ng-container>
 </sqx-panel>
 
diff --git a/src/Squidex/app/theme/_panels.scss b/src/Squidex/app/theme/_panels.scss
index 9cd70cdad..4e3d6fc4c 100644
--- a/src/Squidex/app/theme/_panels.scss
+++ b/src/Squidex/app/theme/_panels.scss
@@ -40,6 +40,7 @@
         height: 100%;
         background: $color-background;
         border-right: 1px solid $color-border;
+        position: relative;
     }
 
     // First row of the panel with the header. Fixed height.
@@ -74,6 +75,7 @@
         @include flex-box;
         @include flex-flow(row);
         @include flex-grow(1);
+        overflow: hidden;
     }
 
     // First column of the main row (second row) with the main content.
@@ -157,6 +159,12 @@
             max-width: 16rem;
         }
 
+        & .panel-nav {
+            min-width: $panel-sidebar;
+            max-width: $panel-sidebar;
+            position: absolute;
+        }
+
         & .panel-link {
             & {
                 @include transition(background-color .3s ease);