[TASK] Install Tool: Collapse main menu on small screens 19/44619/8
authorJohannes Kasberger <johannes.kasberger@reelworx.at>
Sun, 8 Nov 2015 20:50:15 +0000 (21:50 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Mon, 9 Nov 2015 20:13:35 +0000 (21:13 +0100)
Resolves: #71382
Releases: master
Change-Id: Ib089bf196cbefae911a93a4cd76aa9f73afe8bbf
Reviewed-on: https://review.typo3.org/44619
Reviewed-by: Frank Nägler <frank.naegler@typo3.org>
Tested-by: Frank Nägler <frank.naegler@typo3.org>
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Build/Resources/Public/Less/InstallTool.less
typo3/sysext/install/Resources/Private/Layouts/ToolAuthenticated.html
typo3/sysext/install/Resources/Private/Partials/Action/Common/Head.html
typo3/sysext/install/Resources/Private/Partials/Action/Common/Left.html
typo3/sysext/install/Resources/Private/Partials/Action/Common/MenuLink.html [new file with mode: 0644]
typo3/sysext/install/Resources/Public/Css/InstallTool.css
typo3/sysext/install/Resources/Public/JavaScript/Install.js

index 1d9b702..e2ae48d 100644 (file)
@@ -16,6 +16,8 @@
 //
 @import "_variables.less";
 
+@grid-float-breakpoint: @screen-md-min;
+
 .content-area > h3 {
        margin-top: 0;
 }
@@ -91,6 +93,17 @@ h1:first-child {
        padding: 1em;
 }
 
+.list-group-item {
+       a {
+               display: block;
+       }
+       &.active {
+               a {
+                       color: #fff;
+               }
+       }
+}
+
 @media (min-width: @screen-md-min) {
        .affix-bottom {
                position: absolute;
@@ -138,4 +151,12 @@ hr {
                position: relative!important;
                margin-bottom: 30px;
        }
-}
\ No newline at end of file
+}
+
+#install-menu-button {
+       .navbar-toggle {
+               .icon-bar {
+                       background-color: black;
+               }
+       }
+}
index e491ea0..080be0a 100644 (file)
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
        <head>
                <title>Install tool on site {siteName}</title>
                <f:render partial="Action/Common/Headers" arguments="{_all}" />
                        </f:else>
                </f:if>
                <div class="row">
-                       <div class="col-sm-12 col-md-3 leftNavigation">
-                               <f:render partial="Action/Common/Left" arguments="{_all}" />
+                       <div class="col-sm-12">
+                               <div id="install-menu-button">
+                                       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobileMenuWrapper">
+                                               <span class="sr-only">Toggle navigation</span>
+                                               <span class="icon-bar"></span>
+                                               <span class="icon-bar"></span>
+                                               <span class="icon-bar"></span>
+                                       </button>
+                               </div>
+                       </div>
+               </div>
+               <div class="row hidden-md hidden-lg">
+                       <div class="col-sm-12">
+                               <div id="mobileMenuWrapper" class="collapse">
+                                       <f:render partial="Action/Common/Left" arguments="{_all}" />
+                               </div>
+                       </div>
+               </div>
+               <div class="row">
+                       <div class="col-md-3 leftNavigation hidden-xs hidden-sm">
+                               <div id="menuWrapper" data-spy="affix" data-offset-top="60" data-offset-bottom="190">
+                                       <f:render partial="Action/Common/Left" arguments="{_all}" />
+                               </div>
                        </div>
                        <div class="col-sm-12 col-md-9 content-area">
                                <f:render section="Content" />
index 699e5f9..fe77834 100644 (file)
@@ -1,3 +1,3 @@
 <div class="page-header">
        <h1 class="logo-pageheader"><img src="../Resources/Public/Images/typo3_orange.svg" width="130" class="logo" /> Install tool on site: {siteName} <small>TYPO3 CMS {typo3Version}</small></h1>
-</div>
\ No newline at end of file
+</div>
index 7358c3d..94f6a90 100644 (file)
@@ -1,41 +1,24 @@
-<div id="menuWrapper" data-spy="affix" data-offset-top="60" data-offset-bottom="190">
-       <div class="list-group" id="t3-install-left">
-               <a href="Install.php?install[action]=importantActions&install[context]={context}&install[controller]=tool" class="list-group-item {f:if(condition:'{action} == \'importantActions\'', then:'active')}">
-                       Important actions
-               </a>
-               <a href="Install.php?install[action]=configuration&install[context]={context}&install[controller]=tool" class="list-group-item {f:if(condition:'{action} == \'configuration\'', then:'active')}">
-                       Configuration Presets
-               </a>
-               <a href="Install.php?install[action]=allConfiguration&install[context]={context}&install[controller]=tool" class="list-group-item {f:if(condition:'{action} == \'allConfiguration\'', then:'active')}">
-                       All configuration
-               </a>
-               <a href="Install.php?install[action]=upgradeWizard&install[context]={context}&install[controller]=tool" class="list-group-item {f:if(condition:'{action} == \'upgradeWizard\'', then:'active')}">
-                       Upgrade Wizard
-               </a>
-               <a href="Install.php?install[action]=systemEnvironment&install[context]={context}&install[controller]=tool" id="t3-install-menu-systemEnvironment" class="list-group-item {f:if(condition:'{action} == \'systemEnvironment\'', then:'active')}">
-                       System environment
-               </a>
-               <a href="Install.php?install[action]=folderStructure&install[context]={context}&install[controller]=tool" id="t3-install-menu-folderStructure" class="list-group-item {f:if(condition:'{action} == \'folderStructure\'', then:'active')}">
-                       Folder structure
-               </a>
-               <a href="Install.php?install[action]=testSetup&install[context]={context}&install[controller]=tool" class="list-group-item {f:if(condition:'{action} == \'testSetup\'', then:'active')}">
-                       Test setup
-               </a>
-               <a href="Install.php?install[action]=cleanUp&install[context]={context}&install[controller]=tool" class="list-group-item {f:if(condition:'{action} == \'cleanUp\'', then:'active')}">
-                       Clean up
-               </a>
-               <a href="Install.php?install[action]=about&install[context]={context}&install[controller]=tool" class="list-group-item {f:if(condition:'{action} == \'about\'', then:'active')}">
-                       About
-               </a>
-       </div>
-       <hr>
-       <a href="Install.php?install[action]=logout&install[context]={context}&install[controller]=tool" class="btn btn-warning btn-block">Logout from Install Tool</a>
-       <f:if condition="{contextService.backendContext}">
-               <f:then></f:then>
-               <f:else>
-                       <hr>
-                       <a href="../../../index.php" class="btn btn-default btn-block">Backend admin</a><br>
+<div class="t3js-list-group-wrapper" xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
+       <ul class="list-group">
+               <f:render partial="Action/Common/MenuLink" arguments="{action: action, context: context, action_name: 'importantActions', label: 'Important actions'}" />
+               <f:render partial="Action/Common/MenuLink" arguments="{action: action, context: context, action_name: 'configuration', label: 'Configuration Presets'}" />
+               <f:render partial="Action/Common/MenuLink" arguments="{action: action, context: context, action_name: 'allConfiguration', label: 'All configuration'}" />
+               <f:render partial="Action/Common/MenuLink" arguments="{action: action, context: context, action_name: 'upgradeWizard', label: 'Upgrade Wizard'}" />
+               <f:render partial="Action/Common/MenuLink" arguments="{action: action, context: context, action_name: 'systemEnvironment', label: 'System environment'}" />
+               <f:render partial="Action/Common/MenuLink" arguments="{action: action, context: context, action_name: 'folderStructure', label: 'Folder structure'}" />
+               <f:render partial="Action/Common/MenuLink" arguments="{action: action, context: context, action_name: 'testSetup', label: 'Test setup'}" />
+               <f:render partial="Action/Common/MenuLink" arguments="{action: action, context: context, action_name: 'cleanUp', label: 'Clean up'}" />
+               <f:render partial="Action/Common/MenuLink" arguments="{action: action, context: context, action_name: 'about', label: 'About'}" />
+       </ul>
+
+       <div>
+               <a href="Install.php?install[action]=logout&install[context]={context}&install[controller]=tool" class="btn btn-warning btn-block">Logout from Install Tool</a>
+               <f:if condition="{contextService.backendContext}">
+                       <f:then></f:then>
+                       <f:else>
+                       <a href="../../../index.php" class="btn btn-default btn-block">Backend admin</a>
                        <a href="../../../../index.php" class="btn btn-default btn-block">Frontend website</a>
-               </f:else>
-       </f:if>
+                       </f:else>
+               </f:if>
+       </div>
 </div>
diff --git a/typo3/sysext/install/Resources/Private/Partials/Action/Common/MenuLink.html b/typo3/sysext/install/Resources/Private/Partials/Action/Common/MenuLink.html
new file mode 100644 (file)
index 0000000..251bfbc
--- /dev/null
@@ -0,0 +1,5 @@
+<li class="list-group-item{f:if(condition:'{action} == {action_name}', then:' active')}">
+  <a class="t3js-install-menu-{action_name}" href="Install.php?install[action]={action_name}&install[context]={context}&install[controller]=tool">
+    {label}
+  </a>
+</li>
index 814f1b0..95e4b9a 100644 (file)
@@ -2623,7 +2623,7 @@ dt {
 dd {
   margin-left: 0;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .dl-horizontal dt {
     float: left;
     width: 70px;
@@ -4829,7 +4829,7 @@ tbody.collapse.in {
   bottom: 100%;
   margin-bottom: 2px;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .navbar-right .dropdown-menu {
     left: auto;
     right: 0;
@@ -5359,12 +5359,12 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   margin-bottom: 18px;
   border: 1px solid transparent;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .navbar {
     border-radius: 2px;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .navbar-header {
     float: left;
   }
@@ -5380,7 +5380,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .navbar-collapse.in {
   overflow-y: auto;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .navbar-collapse {
     width: auto;
     border-top: 0;
@@ -5419,7 +5419,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   margin-right: -15px;
   margin-left: -15px;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .container > .navbar-header,
   .container-fluid > .navbar-header,
   .container > .navbar-collapse,
@@ -5432,7 +5432,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   z-index: 1000;
   border-width: 0 0 1px;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .navbar-static-top {
     border-radius: 0;
   }
@@ -5444,7 +5444,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   left: 0;
   z-index: 1030;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .navbar-fixed-top,
   .navbar-fixed-bottom {
     border-radius: 0;
@@ -5473,7 +5473,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .navbar-brand > img {
   display: block;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .navbar > .container .navbar-brand,
   .navbar > .container-fluid .navbar-brand {
     margin-left: -15px;
@@ -5503,7 +5503,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
 .navbar-toggle .icon-bar + .icon-bar {
   margin-top: 4px;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .navbar-toggle {
     display: none;
   }
@@ -5516,7 +5516,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   padding-bottom: 10px;
   line-height: 18px;
 }
-@media (max-width: 767px) {
+@media (max-width: 991px) {
   .navbar-nav .open .dropdown-menu {
     position: static;
     float: none;
@@ -5538,7 +5538,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     background-image: none;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .navbar-nav {
     float: left;
     margin: 0;
@@ -5611,7 +5611,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     top: 0;
   }
 }
-@media (max-width: 767px) {
+@media (max-width: 991px) {
   .navbar-form .form-group {
     margin-bottom: 5px;
   }
@@ -5619,7 +5619,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
     margin-bottom: 0;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .navbar-form {
     width: auto;
     border: 0;
@@ -5658,14 +5658,14 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   margin-top: 13.5px;
   margin-bottom: 13.5px;
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .navbar-text {
     float: left;
     margin-left: 15px;
     margin-right: 15px;
   }
 }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
   .navbar-left {
     float: left;
     float: left !important;
@@ -5734,7 +5734,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   background-color: #dfdfdf;
   color: #555555;
 }
-@media (max-width: 767px) {
+@media (max-width: 991px) {
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
     color: #777777;
   }
@@ -5830,7 +5830,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
   background-color: #323232;
   color: #ffffff;
 }
-@media (max-width: 767px) {
+@media (max-width: 991px) {
   .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
     border-color: none;
   }
@@ -8288,6 +8288,12 @@ h1:first-child {
 .item .item-body {
   padding: 1em;
 }
+.list-group-item a {
+  display: block;
+}
+.list-group-item.active a {
+  color: #fff;
+}
 @media (min-width: 992px) {
   .affix-bottom {
     position: absolute;
@@ -8327,3 +8333,6 @@ hr {
     margin-bottom: 30px;
   }
 }
+#install-menu-button .navbar-toggle .icon-bar {
+  background-color: black;
+}
index 1b93834..e1a94ff 100644 (file)
@@ -223,7 +223,7 @@ TYPO3.Install.Status = {
                        cache: false,
                        success: function(data) {
                                if (data > 0) {
-                                       $('#t3-install-menu-folderStructure').append('<span class="badge badge-danger">' + data + '</span>');
+                                       $('.t3js-install-menu-folderStructure').append('<span class="badge badge-danger">' + data + '</span>');
                                }
                        }
                });
@@ -235,7 +235,7 @@ TYPO3.Install.Status = {
                        cache: false,
                        success: function(data) {
                                if (data > 0) {
-                                       $('#t3-install-menu-systemEnvironment').append('<span class="badge badge-danger">' + data + '</span>');
+                                       $('.t3js-install-menu-systemEnvironment').append('<span class="badge badge-danger">' + data + '</span>');
                                }
                        }
                });
@@ -599,7 +599,7 @@ $(function() {
                }));
        }
 
-       var $installLeft = $('#t3-install-left');
+       var $installLeft = $('.t3js-list-group-wrapper');
        if ($installLeft.length > 0) {
                TYPO3.Install.Status.getFolderStatus();
                TYPO3.Install.Status.getEnvironmentStatus();
@@ -619,12 +619,13 @@ $(function() {
 
        // Define width of fixed menu
        var $menuWrapper = $('#menuWrapper');
+       var $menuListGroup = $menuWrapper.children('.t3js-list-group-wrapper');
        $menuWrapper.on('affixed.bs.affix', function() {
-               $('#t3-install-left').width($(this).parent().width());
+               $menuListGroup.width($(this).parent().width());
        });
-       $installLeft.width($menuWrapper.parent().width());
+       $menuListGroup.width($menuWrapper.parent().width());
        $(window).resize(function(){
-               $('#t3-install-left').width($('#menuWrapper').parent().width());
+               $menuListGroup.width($('#menuWrapper').parent().width());
        });
        var $collapse = $('.collapse');
        $collapse.on('shown.bs.collapse', function() {