[TASK] Redesign "about modules" as start screen 49/24349/3
authorFelix Kopp <felix-source@phorax.com>
Thu, 3 Oct 2013 20:57:19 +0000 (22:57 +0200)
committerChristian Kuhn <lolli@schwarzbu.ch>
Sun, 6 Oct 2013 18:17:28 +0000 (20:17 +0200)
Adds visual containers for icons on about modules for
easier access. About Modules will be the start screen.

Also extends the width of the module.

Change-Id: Ib9edcdc6240e6b9480029d4d3c341cef9af0c844
Resolves: #52517
Releases: 6.2
Reviewed-on: https://review.typo3.org/24349
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
typo3/sysext/aboutmodules/Resources/Private/Templates/Modules/Index.html
typo3/sysext/t3skin/Resources/Public/Css/structure/module_help_about_module.css
typo3/sysext/t3skin/Resources/Public/Css/visual/module_help_about_module.css

index 2dcc793..6ebc716 100644 (file)
@@ -5,11 +5,9 @@
                <f:translate key="LLL:EXT:lang/locallang_alt_intro.xlf:introtext" />
        </h1>
 
-       <p>{copyRightNotice -> f:format.raw()}</p>
-
        {warningMessages -> f:format.raw()}
 
-       <p>
+       <p class="lead">
                <f:translate key="LLL:EXT:lang/locallang_alt_intro.xlf:introtext2" />
        </p>
 
                                                                href="#"
                                                                onclick="top.goToModule('{mainModule.name}_{subModule.name}'); return false;"
                                                                title="{subModule.shortDescription}"
+                                                               class="icon"
                                                        >
                                                                <f:image src="{subModule.icon}" alt="{subModule.label}" />
                                                        </a>
                                                </td>
-                                               <td>
-                                                       <a
-                                                               href="#"
-                                                               onclick="top.goToModule('{mainModule.name}_{subModule.name}'); return false;"
-                                                               title="{subModule.shortDescription}"
-                                                       >
-                                                               {subModule.label}
-                                                       </a>
-                                               </td>
                                                <td class="module-description">
+                                                       <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}">
-                                                               <strong>
-                                                                       <a
-                                                                               href="#"
-                                                                               onclick="top.goToModule('{mainModule.name}'); return false;"
-                                                                               title="{subModule.shortDescription}"
-                                                                       >
-                                                                               {subModule.shortDescription}
-                                                                       </a>
-                                                               </strong>
-                                                               <br />
+                                                               {subModule.shortDescription} /
                                                        </f:if>
 
                                                        {subModule.longDescription -> f:format.raw()}
                </tbody>
        </table>
 
-       <br />
-
        <p>
                <em>
                        (<f:translate key="LLL:EXT:lang/locallang_alt_intro.xlf:endText" />)
                </em>
        </p>
 
-       <br />
+       <p>{copyRightNotice -> f:format.raw()}</p>
 
 </f:section>
\ No newline at end of file
index 28dbc88..33a1d52 100644 (file)
@@ -4,7 +4,7 @@ Help > About modules
 
 /** following div#typo3-inner-docbody */
 .typo3-aboutmodules-inner-docbody {
-       width: 600px;
+       width: 700px;
 }
 
 /** TYPO3 logo floating in introduction text */
@@ -26,7 +26,17 @@ table#typo3-aboutmodules tr.c-mainitem td img {
 }
 
 table#typo3-aboutmodules tr.c-subitem-row td {
-       padding: 6px 6px 12px 6px;
+       padding: 0 12px 24px 0;
+}
+
+table#typo3-aboutmodules tr.c-subitem-row td .icon {
+       display: block;
+       text-align: center;
+       vertical-align: middle;
+       width: 50px;
+       height: 50px;
+       line-height: 50px;
+       border-radius: 1px;
 }
 
 table#typo3-aboutmodules tr.c-subitem-row td.module-description {
index 2d07998..e33c14b 100644 (file)
@@ -2,25 +2,11 @@
 Help > About modules
 - - - - - - - - - - - - - - - - - - - - - */
 
-/** Styles for the modules listing table */
-
-table#typo3-aboutmodules {
-       border-collapse: collapse;
-}
-
-table#typo3-aboutmodules tr.c-first td {
-       border-top: 1px solid #ccc;
+table#typo3-aboutmodules tr.c-subitem-row td .icon {
+       background-color: #dddddd;
+       border: 1px solid #c7c7c7;
 }
 
-table#typo3-aboutmodules tr.c-endrow td {
-       background: #ffffff;
-       border-bottom: 1px solid #ccc;
+table#typo3-aboutmodules tr.c-subitem-row:hover td .icon {
+       background-color: rgb(232, 232, 232);
 }
-
-table#typo3-aboutmodules tr.c-first,
-table#typo3-aboutmodules tr.c-endrow,
-table#typo3-aboutmodules tr.c-subitem-row {
-       background: #ffffff;
-       border-left: 1px solid #ccc;
-       border-right: 1px solid #ccc;
-}
\ No newline at end of file