[TASK] Make list title width responsive 93/46393/7
authorAlexander Stehlik <alexander.stehlik@gmail.com>
Thu, 1 Sep 2016 21:04:22 +0000 (23:04 +0200)
committerPhilipp Gampe <philipp.gampe@typo3.org>
Fri, 2 Sep 2016 23:18:38 +0000 (01:18 +0200)
Instead of using the titleLen Backend user setting the titles
in the record list and the file list are now cropped by CSS
depending on the current screen width.

Resolves: #73030
Releases: master
Change-Id: Icdd9bbb7d3a9ab83605a47eb17ed4fcc6a2854b0
Reviewed-on: https://review.typo3.org/46393
Reviewed-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Andreas Fernandez <typo3@scripting-base.de>
Tested-by: Bamboo TYPO3com <info@typo3.com>
Reviewed-by: Philipp Gampe <philipp.gampe@typo3.org>
Tested-by: Philipp Gampe <philipp.gampe@typo3.org>
Build/Resources/Public/Less/TYPO3/_element_table.less
typo3/sysext/backend/Resources/Public/Css/backend.css
typo3/sysext/filelist/Classes/FileList.php
typo3/sysext/filelist/Resources/Private/Templates/FileList/Search.html
typo3/sysext/recordlist/Classes/RecordList/AbstractDatabaseRecordList.php
typo3/sysext/recordlist/Classes/RecordList/DatabaseRecordList.php

index 140566b..3c5d01d 100644 (file)
@@ -136,6 +136,13 @@ table {
        .col-min {
                min-width: 150px;
        }
+       // Column contents are cut off with an ellipsis if they get too large.
+       .col-responsive {
+               max-width: 200px;
+               overflow: hidden;
+               text-overflow: ellipsis;
+               white-space: nowrap;
+       }
 }
 
 .table-fixed {
index 5fe6442..f25377d 100644 (file)
@@ -10175,6 +10175,12 @@ fieldset[disabled] .table .btn-default.focus {
 .table .col-min {
   min-width: 150px;
 }
+.table .col-responsive {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .table-fixed {
   word-wrap: break-word;
   word-break: break-all;
index 620ce80..e5a49f9 100644 (file)
@@ -349,7 +349,7 @@ class FileList extends AbstractRecordList
             $this->fieldArray = explode(',', $rowlist);
 
             // Add classes to table cells
-            $this->addElement_tdCssClass[$titleCol] = 'col-title';
+            $this->addElement_tdCssClass[$titleCol] = 'col-title col-responsive';
             $this->addElement_tdCssClass['_LOCALIZATION_'] = 'col-localizationa';
 
             $folders = ListUtility::resolveSpecialFolderNames($folders);
@@ -584,7 +584,7 @@ class FileList extends AbstractRecordList
         $onclick = ' onclick="' . htmlspecialchars(('top.document.getElementsByName("navigation")[0].contentWindow.Tree.highlightActiveItem("file","folder' . GeneralUtility::md5int($folderObject->getCombinedIdentifier()) . '_"+top.fsMod.currentBank)')) . '"';
         // Sometimes $code contains plain HTML tags. In such a case the string should not be modified!
         if ((string)$title === strip_tags($title)) {
-            return '<a href="' . htmlspecialchars($href) . '"' . $onclick . ' title="' . htmlspecialchars($title) . '">' . GeneralUtility::fixed_lgd_cs($title, $this->fixedL) . '</a>';
+            return '<a href="' . htmlspecialchars($href) . '"' . $onclick . ' title="' . htmlspecialchars($title) . '">' . $title . '</a>';
         } else {
             return '<a href="' . htmlspecialchars($href) . '"' . $onclick . '>' . $title . '</a>';
         }
@@ -612,7 +612,7 @@ class FileList extends AbstractRecordList
                 ];
                 $url = BackendUtility::getModuleUrl('record_edit', $urlParameters);
                 $title = htmlspecialchars($this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:cm.editMetadata'));
-                $code = '<a href="' . htmlspecialchars($url) . '" title="' . $title . '">' . GeneralUtility::fixed_lgd_cs($code, $this->fixedL) . '</a>';
+                $code = '<a class="responsive-title" href="' . htmlspecialchars($url) . '" title="' . $title . '">' . $code . '</a>';
             }
         } catch (\Exception $e) {
             // intentional fall-through
index e5f8ad0..35f5014 100644 (file)
                                                <td nowrap="nowrap" class="col-path">
                                                        {file.path}
                                                </td>
-                                               <td nowrap="nowrap" class="col-title">
+                                               <td nowrap="nowrap" class="col-title col-responsive">
                                                        <f:if condition="{file.isMetadataEditable}">
                                                                <f:then>
                                                                        <a href="#" class="filelist-file-title"
                                                                                title="{f:translate( htmlEscape:'true', key:'LLL:EXT:lang/locallang_core.xlf:cm.editMetadata' )}"
                                                                                data-url="{fl:uri.editSysFileMetadataRecord( uid:file.metadataUid, returnUrl:'{f:uri.action( action:\'search\', arguments:{ searchWord:\'{searchWord->f:format.htmlentities()}\' } )}' )}"
                                                                        >
-                                                                               {file.name->f:format.crop( maxCharacters:30 )}
+                                                                               {file.name}
                                                                        </a>
                                                                </f:then>
                                                                <f:else>
-                                                                       {file.name->f:format.crop( maxCharacters:30 )}
+                                                                       {file.name}
                                                                </f:else>
                                                        </f:if>
                                                        <f:if condition="{file.isImage}">
index 2512f0e..a36ed46 100644 (file)
@@ -1057,12 +1057,10 @@ class AbstractDatabaseRecordList extends AbstractRecordList
         $origCode = $code;
         // If the title is blank, make a "no title" label:
         if ((string)$code === '') {
-            $code = '<i>[' . htmlspecialchars($lang->sL('LLL:EXT:lang/locallang_core.xlf:labels.no_title')) . ']</i> - ' . htmlspecialchars(GeneralUtility::fixed_lgd_cs(
-                BackendUtility::getRecordTitle($table, $row),
-                $this->getBackendUserAuthentication()->uc['titleLen']
-            ));
+            $code = '<i>[' . htmlspecialchars($lang->sL('LLL:EXT:lang/locallang_core.xlf:labels.no_title')) . ']</i> - '
+                . htmlspecialchars(BackendUtility::getRecordTitle($table, $row));
         } else {
-            $code = htmlspecialchars(GeneralUtility::fixed_lgd_cs($code, $this->fixedL), ENT_QUOTES, 'UTF-8', false);
+            $code = htmlspecialchars($code, ENT_QUOTES, 'UTF-8', false);
             if ($code != htmlspecialchars($origCode)) {
                 $code = '<span title="' . htmlspecialchars($origCode, ENT_QUOTES, 'UTF-8', false) . '">' . $code . '</span>';
             }
index 3bb7949..578246f 100644 (file)
@@ -989,7 +989,8 @@ class DatabaseRecordList extends AbstractDatabaseRecordList
             $this->addToCSV($row);
         }
         // Add classes to table cells
-        $this->addElement_tdCssClass[$titleCol] = 'col-title' . $localizationMarkerClass;
+        $this->addElement_tdCssClass[$titleCol] = 'col-title col-responsive' . $localizationMarkerClass;
+        $this->addElement_tdCssClass['__label'] = $this->addElement_tdCssClass[$titleCol];
         $this->addElement_tdCssClass['_CONTROL_'] = 'col-control';
         if ($this->getModule()->MOD_SETTINGS['clipBoard']) {
             $this->addElement_tdCssClass['_CLIPBOARD_'] = 'col-clipboard';