[TASK] Remove horizontal scrollers / secondary info 87/33387/3
authorFelix Kopp <felix-source@phorax.com>
Sun, 19 Oct 2014 14:44:30 +0000 (16:44 +0200)
committerWouter Wolters <typo3@wouterwolters.nl>
Thu, 23 Oct 2014 16:38:20 +0000 (18:38 +0200)
Solves problems with horizontal scrolling on small (SM)
and extra small (XS) screen within the backend.

Secondary information that is not visible in table listing
directly anymore can be accessed in edit/detail views.

Also unifies beusers tables listing.

Resolves: #62325
Releases: master
Change-Id: I4589c787103694fad4587682247619857dfd26f0
Reviewed-on: http://review.typo3.org/33387
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Reviewed-by: Ingo Pfennigstorf <i.pfennigstorf@gmail.com>
Tested-by: Ingo Pfennigstorf <i.pfennigstorf@gmail.com>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
typo3/sysext/about/Resources/Private/Styles/styles.less
typo3/sysext/about/Resources/Public/Styles/styles.css
typo3/sysext/aboutmodules/Resources/Private/Styles/styles.less
typo3/sysext/aboutmodules/Resources/Public/Styles/styles.css
typo3/sysext/beuser/Resources/Private/Partials/BackendUser/IndexListRow.html
typo3/sysext/beuser/Resources/Private/Templates/BackendUser/Index.html
typo3/sysext/documentation/Resources/Private/Templates/Document/Download.html
typo3/sysext/extensionmanager/Resources/Private/Templates/List/Index.html

index 4efb189..2ffef2f 100644 (file)
@@ -16,8 +16,9 @@ Help > About
 - - - - - - - - - - - - - - - - - - - - - */
 
 #typo3-mod-help-about-index-php-outer {
-       margin: 15px auto;
-       width: 600px;
+       padding: 15px;
+       margin: 0 auto;
+       max-width: 600px;
 
        > div {
                margin: 10px auto 20px;
index d3c026d..1832cc0 100644 (file)
@@ -14,8 +14,9 @@
 Help > About
 - - - - - - - - - - - - - - - - - - - - - */
 #typo3-mod-help-about-index-php-outer {
-  margin: 15px auto;
-  width: 600px;
+  padding: 15px;
+  margin: 0 auto;
+  max-width: 600px;
 }
 #typo3-mod-help-about-index-php-outer > div {
   margin: 10px auto 20px;
index e6faeaf..a894b22 100644 (file)
@@ -16,7 +16,7 @@ Help > About modules
 - - - - - - - - - - - - - - - - - - - - - */
 
 .typo3-aboutmodules-inner-docbody {
-       width: 700px;
+       max-width: 700px;
 
        .t3-app-icon {
                width: 16px;
index 661484f..6f1b334 100644 (file)
@@ -14,7 +14,7 @@
 Help > About modules
 - - - - - - - - - - - - - - - - - - - - - */
 .typo3-aboutmodules-inner-docbody {
-  width: 700px;
+  max-width: 700px;
 }
 .typo3-aboutmodules-inner-docbody .t3-app-icon {
   width: 16px;
index 0685ec2..c116d37 100644 (file)
@@ -41,7 +41,7 @@
                        <bu:SwitchUser backendUser="{backendUser}" emulate="TRUE" />
                </f:if>
        </td>
-       <td>
+       <td class="hidden-xs hidden-sm">
                <f:if condition="{backendUser.lastLoginDateAndTime}">
                        <f:then>
                                <f:format.date format="{dateFormat} {timeFormat}">{backendUser.lastLoginDateAndTime}</f:format.date>
index c14b07b..af0963d 100644 (file)
                Listing of all users
        </f:comment>
 
-       <f:if condition="<f:count subject='{backendUsers}' /> > 50">
-               <f:then>
-                       <f:be.widget.paginate objects="{backendUsers}" as="paginatedBackendUsers" configuration="{itemsPerPage: 50, insertAbove: 1, insertBelow: 1}">
-                               <table class="t3-table">
-                                       <thead>
-                                               <tr>
-                                                       <th>&nbsp;</th>
-                                                       <th>
-                                                               <f:translate key="userName">Username</f:translate> /
-                                                               <f:translate key="realName">Real name</f:translate>
-                                                       </th>
-                                                       <th>&nbsp;</th>
-                                                       <th>&nbsp;</th>
-                                                       <th><f:translate key="lastLogin">Last login</f:translate></th>
-                                               </tr>
-                                       </thead>
-                                       <tbody>
-                                               <f:for each="{paginatedBackendUsers}" as="backendUser">
-                                                       <f:render partial="BackendUser/IndexListRow" arguments="{demand: demand, backendUser: backendUser, dateFormat: dateFormat, timeFormat: timeFormat, returnUrl: returnUrl}" />
-                                               </f:for>
-                                               <f:comment>
-                                                       Footer row: no officially defined style yet
-                                               </f:comment>
-                                               <tr>
-                                                       <td colspan="6">
-                                                               <f:count subject="{backendUsers}" /> <f:translate key="users">Users</f:translate>
-                                                       </td>
-                                               </tr>
-                                       </tbody>
-                               </table>
-                       </f:be.widget.paginate>
-               </f:then>
-               <f:else>
-                       <table class="t3-table">
-                               <thead>
-                                       <tr>
-                                               <th>&nbsp;</th>
-                                               <th>
-                                                       <f:translate key="userName">Username</f:translate> /
-                                                       <f:translate key="realName">Real name</f:translate>
-                                               </th>
-                                               <th>&nbsp;</th>
-                                               <th>&nbsp;</th>
-                                               <th><f:translate key="lastLogin">Last login</f:translate></th>
-                                       </tr>
-                               </thead>
-                               <tbody>
-                                       <f:for each="{backendUsers}" as="backendUser">
-                                               <f:render partial="BackendUser/IndexListRow" arguments="{demand: demand, backendUser: backendUser, dateFormat: dateFormat, timeFormat: timeFormat, returnUrl: returnUrl}" />
-                                       </f:for>
-                                       <f:comment>
-                                               Footer row: no officially defined style yet
-                                       </f:comment>
-                                       <tr>
-                                               <td colspan="6">
-                                                       <f:count subject="{backendUsers}" /> <f:translate key="users">Users</f:translate>
-                                               </td>
-                                       </tr>
-                               </tbody>
-                       </table>
-               </f:else>
-       </f:if>
+       <f:be.widget.paginate objects="{backendUsers}" as="paginatedBackendUsers" configuration="{itemsPerPage: 50, insertAbove: 1, insertBelow: 1}">
+               <table class="t3-table">
+                       <thead>
+                               <tr>
+                                       <th>&nbsp;</th>
+                                       <th>
+                                               <f:translate key="userName">Username</f:translate> /
+                                               <f:translate key="realName">Real name</f:translate>
+                                       </th>
+                                       <th>&nbsp;</th>
+                                       <th>&nbsp;</th>
+                                       <th class="hidden-xs hidden-sm"><f:translate key="lastLogin">Last login</f:translate></th>
+                               </tr>
+                       </thead>
+                       <tbody>
+                               <f:for each="{paginatedBackendUsers}" as="backendUser">
+                                       <f:render partial="BackendUser/IndexListRow" arguments="{demand: demand, backendUser: backendUser, dateFormat: dateFormat, timeFormat: timeFormat, returnUrl: returnUrl}" />
+                               </f:for>
+                               <f:comment>
+                                       Footer row: no officially defined style yet
+                               </f:comment>
+                               <tr>
+                                       <td colspan="6">
+                                               <f:count subject="{backendUsers}" /> <f:translate key="users">Users</f:translate>
+                                       </td>
+                               </tr>
+                       </tbody>
+               </table>
+       </f:be.widget.paginate>
 </f:section>
\ No newline at end of file
index 6e101fa..d03f91a 100644 (file)
@@ -22,8 +22,8 @@
                <thead>
                <tr>
                        <th><f:translate key="documentation.title" /></th>
-                       <th><f:translate key="documentation.shortcut" /></th>
-                       <th><f:translate key="documentation.type" /></th>
+                       <th class="hidden-xs"><f:translate key="documentation.shortcut" /></th>
+                       <th class="hidden-xs"><f:translate key="documentation.type" /></th>
                        <th><f:translate key="documentation.actions" /></th>
                </tr>
                </thead>
@@ -34,8 +34,8 @@
                                        <img src="../{document.icon}" title="{document.title}" alt="{document.title}" />
                                        {document.title}
                                </td>
-                               <td>{document.shortcut}</td>
-                               <td>{document.type}</td>
+                               <td class="hidden-xs">{document.shortcut}</td>
+                               <td class="hidden-xs">{document.type}</td>
                                <td class="icons">
                                        <doc:link.action action="fetch" arguments="{url:document.url, key:document.key, version:document.version}" title="{f:translate(key:'documentation.actions.download')}">
                                                <span class="t3-icon t3-icon-actions t3-icon-system-extension-download">&nbsp;</span>
index 910b482..f166cf0 100644 (file)
@@ -29,8 +29,8 @@
                                <th title="{f:translate(key:'extensionList.header.title.update')}"><f:translate key="extensionList.header.update"/></th>
                                <th title="{f:translate(key:'extensionList.header.title.activate')}"><f:translate key="extensionList.header.activate"/></th>
                                <th><f:translate key="extensionList.header.extensionName"/></th>
-                               <th><f:translate key="extensionList.header.extensionKey"/></th>
-                               <th><f:translate key="extensionList.header.extensionVersion"/></th>
+                               <th class="hidden-xs hidden-sm"><f:translate key="extensionList.header.extensionKey"/></th>
+                               <th class="hidden-xs"><f:translate key="extensionList.header.extensionVersion"/></th>
                                <th><f:translate key="extensionList.header.extensionActions"/></th>
                                <th><f:translate key="extensionList.header.extensionState"/></th>
                        </tr>
                                        </f:if>
                                        <em:configureExtension extension="{extension}" forceConfiguration="0" showDescription="1">{extension.title}</em:configureExtension>
                                </td>
-                               <td>
+                               <td class="hidden-xs hidden-sm">
                                        {extensionKey}
                                </td>
-                               <td>
+                               <td class="hidden-xs">
                                        {extension.version}
                                </td>
                                <td class="icons">