[TASK] About modules: add two-column layout 16/41716/8
authorJosef Glatz <jousch@gmail.com>
Sun, 19 Jul 2015 12:30:29 +0000 (14:30 +0200)
committerMarkus Klein <markus.klein@typo3.org>
Mon, 20 Jul 2015 10:24:04 +0000 (12:24 +0200)
Remove max width of the content. Add a fluid two-column
layout and add more vertical space between the submodules.
Get rid of the unneeded css file.

Resolves: #63476
Releases: master
Change-Id: Ibdbe64959ee5815e32116d54f822303c32eecf76
Reviewed-on: http://review.typo3.org/41716
Reviewed-by: Frederic Gaus <frederic.gaus@flagbit.de>
Tested-by: Frederic Gaus <frederic.gaus@flagbit.de>
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>
typo3/sysext/aboutmodules/Resources/Private/Less/styles.less
typo3/sysext/aboutmodules/Resources/Private/Templates/Modules/Index.html
typo3/sysext/aboutmodules/Resources/Public/Css/styles.css
typo3/sysext/aboutmodules/Resources/Public/Css/visual/styles.css [deleted file]

index 14624a4..7ff3be6 100644 (file)
@@ -16,7 +16,6 @@ Help > About modules
 - - - - - - - - - - - - - - - - - - - - - */
 
 .typo3-aboutmodules-inner-docbody {
-       max-width: 700px;
 
        a {
                text-decoration: underline;
@@ -25,4 +24,14 @@ Help > About modules
        .end-text {
                padding-top: 3em;
        }
+
+       h2 {
+               margin-bottom: 1em;
+       }
+
+       .submodule {
+               padding-bottom: 3em;
+       }
 }
+
+
index 644ffc0..6b95447 100644 (file)
        {warningMessages -> f:format.raw()}
 
        <f:for each="{modules}" as="mainModule">
-        <h2>{mainModule.label}</h2>
+               <h2>{mainModule.label}</h2>
+               <div class="container-fuid">
+                       <div class="row">
+                               <f:for each="{mainModule.subModules}" as="subModule" iteration="subModuleIterator">
+                                       <div class="col-xs-12 col-sm-6">
+                                               <div class="submodule media clearfix">
+                                                       <a
+                                                               href="#"
+                                                               onclick="top.goToModule('{mainModule.name}_{subModule.name}'); return false;"
+                                                               title="{subModule.shortDescription}"
+                                                               class="pull-left"
+                                                       >
+                                                               <span class="typo3-app-icon">
+                                                                       <span>
+                                                                               <span>
+                                                                                       <img src="../{subModule.icon}" alt="{subModule.label}" class="media-object" />
+                                                                               </span>
+                                                                       </span>
+                                                               </span>
+                                                       </a>
 
-               <f:for each="{mainModule.subModules}" as="subModule" iteration="subModuleIterator">
-                       <div class="media clearfix">
-                               <a
-                                       href="#"
-                                       onclick="top.goToModule('{mainModule.name}_{subModule.name}'); return false;"
-                                       title="{subModule.shortDescription}"
-                                       class="pull-left"
-                               >
-                                       <span class="typo3-app-icon">
-                                               <span>
-                                                       <span>
-                                                               <img src="../{subModule.icon}" alt="{subModule.label}" class="media-object" />
-                                                       </span>
-                                               </span>
-                                       </span>
-                               </a>
+                                                       <div class="media-body">
+                                                               <strong>
+                                                                       <a
+                                                                               href="#"
+                                                                               onclick="top.goToModule('{mainModule.name}_{subModule.name}'); return false;"
+                                                                               title="{subModule.shortDescription}"
+                                                                               >{subModule.label}</a>
+                                                               </strong><br>
 
-                               <div class="media-body">
-                                       <strong>
-                                               <a
-                                                       href="#"
-                                                       onclick="top.goToModule('{mainModule.name}_{subModule.name}'); return false;"
-                                                       title="{subModule.shortDescription}"
-                                               >{subModule.label}</a>
-                                       </strong><br>
+                                                               <f:if condition="{subModule.shortDescription}">
+                                                                       <small class="text-muted">{subModule.shortDescription}</small><br>
+                                                               </f:if>
 
-                                       <f:if condition="{subModule.shortDescription}">
-                                               <small class="text-muted">{subModule.shortDescription}</small><br>
-                                       </f:if>
+                                                               {subModule.longDescription -> f:format.raw()}
+                                                       </div>
+                                               </div>
+                                       </div>
 
-                                       {subModule.longDescription -> f:format.raw()}
-                               </div>
+                                       <f:if condition="{subModuleIterator.isEven}">
+                                               <f:if condition="{subModuleIterator.isLast} == 0">
+                                                       </div><div class="row">
+                                               </f:if>
+                                       </f:if>
+                               </f:for>
                        </div>
-
-               </f:for>
+               </div>
        </f:for>
 
        <p class="end-text text-info">
index 9694d15..ffe1162 100644 (file)
 /* - - - - - - - - - - - - - - - - - - - - -
 Help > About modules
 - - - - - - - - - - - - - - - - - - - - - */
-.typo3-aboutmodules-inner-docbody {
-  max-width: 700px;
-}
 .typo3-aboutmodules-inner-docbody a {
   text-decoration: underline;
 }
 .typo3-aboutmodules-inner-docbody .end-text {
   padding-top: 3em;
 }
+.typo3-aboutmodules-inner-docbody h2 {
+  margin-bottom: 1em;
+}
+.typo3-aboutmodules-inner-docbody .submodule {
+  padding-bottom: 3em;
+}
diff --git a/typo3/sysext/aboutmodules/Resources/Public/Css/visual/styles.css b/typo3/sysext/aboutmodules/Resources/Public/Css/visual/styles.css
deleted file mode 100644 (file)
index 5006fee..0000000
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * This file is part of the TYPO3 CMS project.
- *
- * It is free software; you can redistribute it and/or modify it under
- * the terms of the GNU General Public License, either version 2
- * of the License, or any later version.
- *
- * For the full copyright and license information, please read the
- * LICENSE.txt file that was distributed with this source code.
- *
- * The TYPO3 project - inspiring people to share!
- */
-/* - - - - - - - - - - - - - - - - - - - - -
-Help > About modules
-- - - - - - - - - - - - - - - - - - - - - */
-.typo3-aboutmodules-inner-docbody {
-  max-width: 700px;
-}
-.typo3-aboutmodules-inner-docbody a {
-  text-decoration: underline;
-}
-.typo3-aboutmodules-inner-docbody .end-text {
-       padding-top: 3em;
-}
-.typo3-aboutmodules-inner-docbody .media .typo3-app-icon img.media-object {
-       max-height: 64px;
-       max-width: 64px;
-}