[BUGFIX] Re-enable styling for workspace preview bar 95/50795/5
authorBenni Mack <benni@typo3.org>
Mon, 28 Nov 2016 16:24:17 +0000 (17:24 +0100)
committerAndreas Fernandez <typo3@scripting-base.de>
Mon, 19 Dec 2016 14:28:05 +0000 (15:28 +0100)
The workspace preview functionality (comparing versions etc)
is broken due to missing stylings since TYPO3 8.4

The patch fixes the CSS styles.

Resolves: #78820
Releases: master
Change-Id: I6ede8ee1913e91c0095d695ce2e5d90c16dbd5f7
Reviewed-on: https://review.typo3.org/50795
Reviewed-by: Benjamin Kott <info@bk2k.info>
Tested-by: Benjamin Kott <info@bk2k.info>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
typo3/sysext/workspaces/Resources/Private/Less/preview.less
typo3/sysext/workspaces/Resources/Private/Templates/Preview/Index.html
typo3/sysext/workspaces/Resources/Public/Css/preview.css

index a10257a..0b3156d 100644 (file)
+//
+// Workspace Preview
+// =================
+//
+
+
+//
+// Variables
+//
+@workspace-topbar-height: 50px;
+@workspace-topbar-color: #fff;
+@workspace-topbar-line-height: 26px;
+@workspace-topbar-bg: #333;
+
+@workspace-topbar-logo-height: 22px;
+@workspace-topbar-logo-width: 22px;
+
+
+//
+// General Styling
+//
+.module {
+       overflow: hidden;
+}
 .module-body {
        padding: 0;
+       font-size: 11px;
 }
-
-.typo3-topbar-workspace-actions {
-       float: right;
+#typo3-topbar {
+       color: @workspace-topbar-color;
+       background-color: @workspace-topbar-bg;
+       min-height: @workspace-topbar-height;
+       padding-left: 1em;
+       padding-right: 1em;
+       &:after {
+               clear: both;
+               display: table;
+               content: '';
+       }
+}
+.typo3-topbar-container {
+       position: relative;
        height: 100%;
-       display: table;
 }
-
+.typo3-topbar-site,
+.typo3-topbar-tabs,
+.typo3-topbar-workspace-actions,
 .workspace-action {
-       display: table-cell;
-       vertical-align: middle;
-       padding: 0 4px;
+       margin-top: ceil((@workspace-topbar-height - @workspace-topbar-line-height) / 2);
+       margin-bottom: ceil((@workspace-topbar-height - @workspace-topbar-line-height) / 2);
+}
+.typo3-topbar-site {
+       line-height: @workspace-topbar-line-height;
+       float: left;
+       font-size: 12px;
+       position: relative;
+       margin-right: 2em;
+}
+.typo3-topbar-site-logo {
+       padding-top: 1px;
+       padding-right: 0.25em;
+       display: inline-block;
+       vertical-align: top;
+       img {
+               display: block;
+               height: @workspace-topbar-logo-height;
+               width: @workspace-topbar-logo-width;
+       }
+}
+.typo3-topbar-site-name {
+       vertical-align: top;
+}
+.typo3-topbar-tabs {
+       margin-right: 2em;
+       float: left;
+       position: relative;
+       .nav-tabs {
+               overflow: hidden;
+               border-radius: 2px;
+               border: none;
+               background: none;
+               > li {
+                       + li {
+                               margin-left: 0;
+                               border-left: 1px solid rgba(0,0,0,0.5);
+                       }
+                       margin-bottom: 0px;
+                       &.active > a {
+                               background-color: #fff;
+                       }
+                       > a {
+                               padding-top: 0;
+                               padding-bottom: 0;
+                               line-height: @workspace-topbar-line-height;
+                               background-color: #ccc;
+                               border: none!important;
+                               border-radius: 0;
+                       }
 
-       &:last-child {
-               padding-right: 16px;
+               }
        }
+}
 
+.typo3-topbar-workspace-actions {
+       clear: none;
+       float: left;
+       .workspace-action {
+               margin-top: 0;
+               margin-bottom: 0;
+               float: left;
+               margin-right: 2em;
+       }
+}
+@media (max-width: 920px) {
+       .typo3-topbar-workspace-actions {
+               clear: left;
+               margin-top: 0;
+               .workspace-action {
+                       display: block;
+                       float: none;
+                       margin-right: 0;
+                       height: auto;
+                       margin-bottom: 0.75em;
+                       &:after {
+                               content: '';
+                               display: table;
+                       }
+               }
+               .dropdown-menu-right {
+                       right: auto;
+                       left: 0;
+               }
+               .btn {
+                       margin-top: 1px;
+               }
+       }
+}
+.workspace-action {
+       height: @workspace-topbar-height - ceil(@workspace-topbar-height - @workspace-topbar-line-height);
+       display: block;
+       line-height: @workspace-topbar-line-height;
+       &:after {
+               content: '';
+               clear: both;
+               display: table;
+       }
        .active-preview-mode {
                display: inline-block;
                text-align: left;
        }
-
+       .btn-group {
+               vertical-align: top;
+       }
+       .btn-sm {
+               vertical-align: top;
+               line-height: @workspace-topbar-line-height;
+               padding: 0 0.5em;
+               border: none!important;
+       }
        .slider-wrapper {
+               display: block;
                .slider {
                        float: left;
                }
-
-               b {
-                       margin: 7px 10px;
+               .slider-horizontal {
+                       margin-left: 1.5em;
+                       margin-right: 1.5em;
+                       height: @workspace-topbar-line-height;
+               }
+               span {
                        display: block;
                        float: left;
                }
        }
 }
-
 .workspaces {
        position: relative;
-
        iframe {
                border: 0;
        }
 }
-
 .preview-mode- {
        &slider {
                iframe {
                        position: absolute;
                        top: 0;
+                       left: 0;
                        z-index: 100;
+                       width: 100%;
+                       height: calc(~"100vh - " @workspace-topbar-height);
                }
                #live-view {
                        border-bottom: 2px solid #c83c3c;
                        z-index: 200;
                }
        }
-
        &vbox iframe {
                width: 50%;
                height: 100%;
                float: left;
        }
-
        &hbox iframe {
                width: 100%;
                height: 50%;
        }
-}
\ No newline at end of file
+}
+#list iframe {
+       height: calc(~"100vh - " @workspace-topbar-height)!important;
+       width: 100%
+}
index 60a1162..bdfcd6c 100644 (file)
@@ -10,8 +10,8 @@
                                </a>
                                <span class="typo3-topbar-site-name">{activeWorkspace}</span>
                        </div>
-                       <div class="typo3-topbar-tabs t3js-workspace-tabs" style="float: left; height: 100%;">
-                               <ul class="nav nav-tabs" role="tablist" style="position: absolute; bottom: 0">
+                       <div class="typo3-topbar-tabs t3js-workspace-tabs">
+                               <ul class="nav nav-tabs" role="tablist">
                                        <li role="presentation" class="active"><a href="#visual" aria-controls="visual" role="tab" data-toggle="tab" data-actions="true"><f:translate key="preview.visualPreview" /></a></li>
                                        <li role="presentation"><a href="#list" aria-controls="list" role="tab" data-toggle="tab" data-actions="false"><f:translate key="preview.listView" /></a></li>
                                </ul>
                        <div class="typo3-topbar-workspace-actions t3js-workspace-actions">
                                <div class="workspace-action">
                                        <div class="slider-wrapper">
-                                               <b>Live</b><div
+                                               <span>Published Version</span><div
                                                id="workspace-stage-slider"
                                                data-slider-min="0"
                                                data-slider-max="100"
                                                data-slider-value="100"
+                                               data-slider-tooltip="hide"
                                                style="width: 150px;"
                                        ></div>
-                                               <b>Workspace</b>
+                                               <span>Staged Version</span>
                                        </div>
                                </div>
                                <div class="workspace-action t3js-stage-buttons">
index 257bca2..076170e 100644 (file)
  *
  * The TYPO3 project - inspiring people to share!
  */
+.module {
+  overflow: hidden;
+}
 .module-body {
   padding: 0;
+  font-size: 11px;
 }
-.typo3-topbar-workspace-actions {
-  float: right;
-  height: 100%;
+#typo3-topbar {
+  color: #fff;
+  background-color: #333;
+  min-height: 50px;
+  padding-left: 1em;
+  padding-right: 1em;
+}
+#typo3-topbar:after {
+  clear: both;
   display: table;
+  content: '';
 }
+.typo3-topbar-container {
+  position: relative;
+  height: 100%;
+}
+.typo3-topbar-site,
+.typo3-topbar-tabs,
+.typo3-topbar-workspace-actions,
 .workspace-action {
-  display: table-cell;
-  vertical-align: middle;
-  padding: 0 4px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+.typo3-topbar-site {
+  line-height: 26px;
+  float: left;
+  font-size: 12px;
+  position: relative;
+  margin-right: 2em;
+}
+.typo3-topbar-site-logo {
+  padding-top: 1px;
+  padding-right: 0.25em;
+  display: inline-block;
+  vertical-align: top;
+}
+.typo3-topbar-site-logo img {
+  display: block;
+  height: 22px;
+  width: 22px;
+}
+.typo3-topbar-site-name {
+  vertical-align: top;
+}
+.typo3-topbar-tabs {
+  margin-right: 2em;
+  float: left;
+  position: relative;
+}
+.typo3-topbar-tabs .nav-tabs {
+  overflow: hidden;
+  border-radius: 2px;
+  border: none;
+  background: none;
+}
+.typo3-topbar-tabs .nav-tabs > li {
+  margin-bottom: 0px;
+}
+.typo3-topbar-tabs .nav-tabs > li + li {
+  margin-left: 0;
+  border-left: 1px solid rgba(0, 0, 0, 0.5);
 }
-.workspace-action:last-child {
-  padding-right: 16px;
+.typo3-topbar-tabs .nav-tabs > li.active > a {
+  background-color: #fff;
+}
+.typo3-topbar-tabs .nav-tabs > li > a {
+  padding-top: 0;
+  padding-bottom: 0;
+  line-height: 26px;
+  background-color: #ccc;
+  border: none!important;
+  border-radius: 0;
+}
+.typo3-topbar-workspace-actions {
+  clear: none;
+  float: left;
+}
+.typo3-topbar-workspace-actions .workspace-action {
+  margin-top: 0;
+  margin-bottom: 0;
+  float: left;
+  margin-right: 2em;
+}
+@media (max-width: 920px) {
+  .typo3-topbar-workspace-actions {
+    clear: left;
+    margin-top: 0;
+  }
+  .typo3-topbar-workspace-actions .workspace-action {
+    display: block;
+    float: none;
+    margin-right: 0;
+    height: auto;
+    margin-bottom: 0.75em;
+  }
+  .typo3-topbar-workspace-actions .workspace-action:after {
+    content: '';
+    display: table;
+  }
+  .typo3-topbar-workspace-actions .dropdown-menu-right {
+    right: auto;
+    left: 0;
+  }
+  .typo3-topbar-workspace-actions .btn {
+    margin-top: 1px;
+  }
+}
+.workspace-action {
+  height: 26px;
+  display: block;
+  line-height: 26px;
+}
+.workspace-action:after {
+  content: '';
+  clear: both;
+  display: table;
 }
 .workspace-action .active-preview-mode {
   display: inline-block;
   text-align: left;
 }
+.workspace-action .btn-group {
+  vertical-align: top;
+}
+.workspace-action .btn-sm {
+  vertical-align: top;
+  line-height: 26px;
+  padding: 0 0.5em;
+  border: none!important;
+}
+.workspace-action .slider-wrapper {
+  display: block;
+}
 .workspace-action .slider-wrapper .slider {
   float: left;
 }
-.workspace-action .slider-wrapper b {
-  margin: 7px 10px;
+.workspace-action .slider-wrapper .slider-horizontal {
+  margin-left: 1.5em;
+  margin-right: 1.5em;
+  height: 26px;
+}
+.workspace-action .slider-wrapper span {
   display: block;
   float: left;
 }
 .preview-mode-slider iframe {
   position: absolute;
   top: 0;
+  left: 0;
   z-index: 100;
+  width: 100%;
+  height: calc(100vh -  50px);
 }
 .preview-mode-slider #live-view {
   border-bottom: 2px solid #c83c3c;
   width: 100%;
   height: 50%;
 }
+#list iframe {
+  height: calc(100vh -  50px) !important;
+  width: 100%;
+}