[BUGFIX] Correct overflow behavior of sitename in topbar 34/50234/3
authorBenjamin Kott <benjamin.kott@wfp2.com>
Sun, 16 Oct 2016 15:29:05 +0000 (17:29 +0200)
committerJigal van Hemert <jigal.van.hemert@typo3.org>
Sun, 16 Oct 2016 17:14:55 +0000 (19:14 +0200)
Resolves: #78234
Releases: master
Change-Id: I10f10b717f7e852a4ef8c1bf15702287737b28ba
Reviewed-on: https://review.typo3.org/50234
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Reviewed-by: Jigal van Hemert <jigal.van.hemert@typo3.org>
Tested-by: Jigal van Hemert <jigal.van.hemert@typo3.org>
Build/Resources/Public/Less/Scaffold/_toolbar.less
Build/Resources/Public/Less/Scaffold/_topbar.less
typo3/sysext/backend/Resources/Private/Templates/Backend/Main.html
typo3/sysext/backend/Resources/Public/Css/backend.css
typo3/sysext/backend/Resources/Public/JavaScript/Viewport.js
typo3/sysext/install/Resources/Public/Css/install.css

index ff0460e..b9bd6cf 100644 (file)
@@ -33,6 +33,7 @@
        padding: 8px;
        @media (min-width: @scaffold-breakpoint) {
                padding: 0;
+               background-color: @scaffold-topbar-bg;
        }
        &:after {
                clear: both;
        list-style: none;
        padding: 0;
        margin: 0;
+       &:after {
+               clear: both;
+               display: table;
+               content: '';
+       }
 }
 
 // Toolbar Item
index fb5d404..6ea0164 100644 (file)
 //
 .topbar-header {
        padding-left: @topbar-button-width * 2;
-       padding-right: @topbar-button-width * 2;
+       @media (max-width: @scaffold-breakpoint-max) {
+               padding-right: (@topbar-button-width * 2)!important;
+       }
 }
 .topbar-header-site {
+       overflow: hidden;
        position: relative;
        display: block;
-       @media (min-width: @scaffold-breakpoint) {
-               display: inline-block;
-       }
        max-width: 100%;
        height: @topbar-height;
        line-height: @topbar-height;
                width: 1em;
        }
        &:before {
-               left: 0;
-               background: linear-gradient(to right, fade(@topbar-bg, 100%) 0%, fade(@topbar-bg, 0%) 100%);
+               right: 0;
+               background: @topbar-bg;
        }
        &:after {
-               right: 0;
+               right: 1em;
                background: linear-gradient(to right, fade(@topbar-bg, 0%) 0%, fade(@topbar-bg, 100%) 100%);
        }
 }
        .topbar-header-site {
                background-color: @topbar-workspace-bg;
                &:before {
-                       background: linear-gradient(to right, fade(@topbar-workspace-bg, 100%) 0%, fade(@topbar-workspace-bg, 0%) 100%);
+                       background: @topbar-workspace-bg;
                }
                &:after {
                        background: linear-gradient(to right, fade(@topbar-workspace-bg, 0%) 0%, fade(@topbar-workspace-bg, 100%) 100%);
index 4300e71..a24ff78 100644 (file)
@@ -3,14 +3,14 @@
        <div class="scaffold-topbar t3js-scaffold-topbar">
 
                <div class="topbar">
-                       <div class="topbar-header">
+                       <div class="topbar-header t3js-topbar-header">
                                <button class="topbar-button topbar-button-modulemenu t3js-topbar-button-modulemenu">
                                        <core:icon identifier="actions-move-move" alternativeMarkupIdentifier="inline" />
                                </button>
                                <button class="topbar-button topbar-button-navigationcomponent t3js-topbar-button-navigationcomponent">
                                        <core:icon identifier="apps-pagetree-category-collapse-all" alternativeMarkupIdentifier="inline" />
                                </button>
-                               <a href="{logoLink}" class="topbar-header-site" target="_blank">
+                               <a href="{logoLink}" class="topbar-header-site" target="_blank" title="{siteName} - {applicationVersion}">
                                        <span class="topbar-header-site-logo">
                                                <img src="{logoUrl}" width="{logoWidth}" height="{logoHeight}" title="TYPO3 Content Management System" alt="" />
                                        </span>
index ab7732c..366cf61 100644 (file)
@@ -7348,9 +7348,14 @@ body {
 }
 .topbar-header {
   padding-left: 80px;
-  padding-right: 80px;
+}
+@media (max-width: 991px) {
+  .topbar-header {
+    padding-right: 80px !important;
+  }
 }
 .topbar-header-site {
+  overflow: hidden;
   position: relative;
   display: block;
   max-width: 100%;
@@ -7360,11 +7365,6 @@ body {
   padding-right: 1em;
   white-space: nowrap;
 }
-@media (min-width: 992px) {
-  .topbar-header-site {
-    display: inline-block;
-  }
-}
 .topbar-header-site:before,
 .topbar-header-site:after {
   display: block;
@@ -7375,18 +7375,18 @@ body {
   width: 1em;
 }
 .topbar-header-site:before {
-  left: 0;
-  background: linear-gradient(to right, #1f1f1e 0%, rgba(31, 31, 30, 0) 100%);
+  right: 0;
+  background: #1f1f1e;
 }
 .topbar-header-site:after {
-  right: 0;
+  right: 1em;
   background: linear-gradient(to right, rgba(31, 31, 30, 0) 0%, #1f1f1e 100%);
 }
 .typo3-in-workspace .topbar-header-site {
   background-color: #6d860d;
 }
 .typo3-in-workspace .topbar-header-site:before {
-  background: linear-gradient(to right, #6d860d 0%, rgba(109, 134, 13, 0) 100%);
+  background: #6d860d;
 }
 .typo3-in-workspace .topbar-header-site:after {
   background: linear-gradient(to right, rgba(109, 134, 13, 0) 0%, #6d860d 100%);
@@ -7418,6 +7418,7 @@ body {
 @media (min-width: 992px) {
   .toolbar {
     padding: 0;
+    background-color: #1f1f1e;
   }
 }
 .toolbar:after {
@@ -7430,6 +7431,11 @@ body {
   padding: 0;
   margin: 0;
 }
+.toolbar-list:after {
+  clear: both;
+  display: table;
+  content: '';
+}
 .toolbar-item {
   padding: 4px;
   position: relative;
index f7a9703..dd34c8a 100644 (file)
@@ -35,6 +35,7 @@ define(
                        doLayout: function () {
                                TYPO3.Backend.NavigationContainer.cleanup();
                                TYPO3.Backend.NavigationContainer.calculateScrollbar();
+                               $('.t3js-topbar-header').css('padding-right', $('.t3js-scaffold-toolbar').outerWidth());
                                if (typeof Ext.getCmp('typo3-pagetree') !== 'undefined') {
                                        Ext.getCmp('typo3-pagetree').doLayout();
                                }
index fc2513f..f439051 100644 (file)
@@ -7339,9 +7339,14 @@ body {
 }
 .topbar-header {
   padding-left: 80px;
-  padding-right: 80px;
+}
+@media (max-width: 991px) {
+  .topbar-header {
+    padding-right: 80px !important;
+  }
 }
 .topbar-header-site {
+  overflow: hidden;
   position: relative;
   display: block;
   max-width: 100%;
@@ -7351,11 +7356,6 @@ body {
   padding-right: 1em;
   white-space: nowrap;
 }
-@media (min-width: 992px) {
-  .topbar-header-site {
-    display: inline-block;
-  }
-}
 .topbar-header-site:before,
 .topbar-header-site:after {
   display: block;
@@ -7366,18 +7366,18 @@ body {
   width: 1em;
 }
 .topbar-header-site:before {
-  left: 0;
-  background: linear-gradient(to right, #1f1f1e 0%, rgba(31, 31, 30, 0) 100%);
+  right: 0;
+  background: #1f1f1e;
 }
 .topbar-header-site:after {
-  right: 0;
+  right: 1em;
   background: linear-gradient(to right, rgba(31, 31, 30, 0) 0%, #1f1f1e 100%);
 }
 .typo3-in-workspace .topbar-header-site {
   background-color: #6d860d;
 }
 .typo3-in-workspace .topbar-header-site:before {
-  background: linear-gradient(to right, #6d860d 0%, rgba(109, 134, 13, 0) 100%);
+  background: #6d860d;
 }
 .typo3-in-workspace .topbar-header-site:after {
   background: linear-gradient(to right, rgba(109, 134, 13, 0) 0%, #6d860d 100%);
@@ -7409,6 +7409,7 @@ body {
 @media (min-width: 992px) {
   .toolbar {
     padding: 0;
+    background-color: #1f1f1e;
   }
 }
 .toolbar:after {
@@ -7421,6 +7422,11 @@ body {
   padding: 0;
   margin: 0;
 }
+.toolbar-list:after {
+  clear: both;
+  display: table;
+  content: '';
+}
 .toolbar-item {
   padding: 4px;
   position: relative;