[TYPO3-hci] Make wrapping in getDynTabMenu() more flexible (dividers2tabs)
Jens Hoffmann
jens at typo3.org
Thu Apr 17 17:14:12 CEST 2008
Hy Niels,
wrong list ... this is code not hci.
Please post this to the core list.
You will not get good feedback here.
Greez Jens
Niels Pardon wrote:
> Hi!
>
> I've just checked how the extension seminars (which I'm a developer of)
> looks in TYPO3 4.2 and noticed that the dividers2tabs in the
> seminar/event form are split into two rows.
>
> That's nothing new in TYPO3 4.2 but with the layout stretched over the
> whole screen width this looks not very good as there is still space on
> the right side where the tabs in the second row could be placed.
>
> I checked the code to see how this split is done and saw that this is
> based on a maximum character count of 50.
>
> I thought how this could be improved so this character count thing is no
> longer needed and I came up with the idea of using a <ul> list instead
> of a table (which is the current way it is realized).
>
> It's just a quick and dirty hack but the tabs get now wrapped according
> to the screen size and not by a character count. (see attached patch)
>
> I just wanted to know what you think about my idea?
>
> Greets,
>
> Niels
>
>
> ------------------------------------------------------------------------
>
> Index: C:/workspace/TYPO3_4-2/typo3/template.php
> ===================================================================
> --- C:/workspace/TYPO3_4-2/typo3/template.php (revision 3578)
> +++ C:/workspace/TYPO3_4-2/typo3/template.php (working copy)
> @@ -1429,7 +1429,8 @@
> $divs = array();
> $JSinit = array();
> $id = $this->getDynTabMenuId($identString);
> - $noWrap = $noWrap ? ' nowrap="nowrap"' : '';
> + $noWrap = '';
> + //$noWrap = $noWrap ? ' nowrap="nowrap"' : '';
>
> // Traverse menu items
> $c=0;
> @@ -1439,7 +1440,7 @@
> $index+=1; // Need to add one so checking for first index in JavaScript is different than if it is not set at all.
>
> // Switch to next tab row if needed
> - if (!$foldout && ($titleLenCount>$newRowCharLimit | ($def['newline'] === true && $titleLenCount > 0))) {
> + if (!$foldout && ($def['newline'] === true && $titleLenCount > 0)) {
> $titleLenCount=0;
> $tabRows++;
> $options[$tabRows] = array();
> @@ -1464,14 +1465,14 @@
> if (!$foldout) {
> // Create TAB cell:
> $options[$tabRows][] = '
> - <td class="'.($isNotEmpty ? 'tab' : 'disabled').'" id="'.$id.'-'.$index.'-MENU"'.$noWrap.$mouseOverOut.'>'.
> + <li class="'.($isNotEmpty ? 'tab' : 'disabled').'" id="'.$id.'-'.$index.'-MENU"'.$noWrap.$mouseOverOut.'>'.
> ($isNotEmpty ? '<a href="#" onclick="'.htmlspecialchars($onclick).'"'.($def['linkTitle'] ? ' title="'.htmlspecialchars($def['linkTitle']).'"':'').'>' : '').
> $def['icon'].
> ($def['label'] ? htmlspecialchars($def['label']) : ' ').
> $requiredIcon.
> $this->icons($def['stateIcon'],'margin-left: 10px;').
> ($isNotEmpty ? '</a>' :'').
> - '</td>';
> + '</li>';
> $titleLenCount+= strlen($def['label']);
> } else {
> // Create DIV layer for content:
> @@ -1514,13 +1515,11 @@
> $tabContent.= '
>
> <!-- Tab menu -->
> - <table cellpadding="0" cellspacing="0" border="0"'.($fullWidth ? ' width="100%"' : '').' class="typo3-dyntabmenu">
> - <tr>
> + <ul'.($fullWidth ? ' width="100%"' : '').' class="typo3-dyntabmenu">
> '.implode('',$options[$a]).'
> - </tr>
> - </table>';
> + </ul>';
> }
> - $content.= '<div class="typo3-dyntabmenu-tabs">'.$tabContent.'</div>';
> + $content.= '<div class="typo3-dyntabmenu-tabs">'.$tabContent.'<hr class="typo3-dyntabmenu-clear" /></div>';
> }
>
> // Div layers are added:
> Index: C:/workspace/TYPO3_4-2/typo3/stylesheet.css
> ===================================================================
> --- C:/workspace/TYPO3_4-2/typo3/stylesheet.css (revision 3578)
> +++ C:/workspace/TYPO3_4-2/typo3/stylesheet.css (working copy)
> @@ -462,11 +462,23 @@
> background: #e7dba8;
> }
>
> -table.typo3-dyntabmenu tr {
> +hr.typo3-dyntabmenu-clear {
> + clear: left;
> + border: none;
> +}
> +
> +ul.typo3-dyntabmenu li {
> height: 1.5em;
> + float: left;
> + list-style: none;
> }
>
> -table.typo3-dyntabmenu td {
> +ul.typo3-dyntabmenu {
> + padding: 0;
> + margin: 0;
> +}
> +
> +ul.typo3-dyntabmenu li {
> padding-left: 5px;
> padding-right: 5px;
> border-radius: 3px;
> @@ -478,32 +490,32 @@
> -webkit-border-top-right-radius: 3px;
> }
>
> -table.typo3-dyntabmenu td.tab {
> +ul.typo3-dyntabmenu li.tab {
> background: #c4d4cd;
> }
>
> -table.typo3-dyntabmenu td.tabact {
> +ul.typo3-dyntabmenu li.tabact {
> background: #e7dba8;
> }
>
> -table.typo3-dyntabmenu td.tabact,
> -table.typo3-dyntabmenu td.tabact_over {
> +ul.typo3-dyntabmenu li.tabact,
> +ul.typo3-dyntabmenu li.tabact_over {
> border-color: black;
> }
>
> -table.typo3-dyntabmenu td.tab_over,
> -table.typo3-dyntabmenu td.tabact_over {
> +ul.typo3-dyntabmenu li.tab_over,
> +ul.typo3-dyntabmenu li.tabact_over {
> background: #f6eab7;
> }
>
> -table.typo3-dyntabmenu td.disabled,
> -table.typo3-dyntabmenu td.disabled_over {
> +ul.typo3-dyntabmenu li.disabled,
> +ul.typo3-dyntabmenu li.disabled_over {
> color: #999;
> background: #ccc;
> cursor: default;
> }
>
> -table.typo3-dyntabmenu td a {
> +ul.typo3-dyntabmenu li a {
> color: #666;
> text-decoration: none;
> display: block;
> @@ -512,12 +524,12 @@
> padding-bottom: 2px;
> }
>
> -table.typo3-dyntabmenu td.tabact a,
> -table.typo3-dyntabmenu td.tabact_over a {
> +ul.typo3-dyntabmenu li.tabact a,
> +ul.typo3-dyntabmenu li.tabact_over a {
> color: black;
> }
>
> -table.typo3-tabmenu td:hover {
> +ul.typo3-tabmenu td:hover {
> background: #f6eab7;
> }
>
> Index: C:/workspace/TYPO3_4-2/typo3/sysext/t3skin/stylesheets/typo3-dyntabmenu.css
> ===================================================================
> --- C:/workspace/TYPO3_4-2/typo3/sysext/t3skin/stylesheets/typo3-dyntabmenu.css (revision 3578)
> +++ C:/workspace/TYPO3_4-2/typo3/sysext/t3skin/stylesheets/typo3-dyntabmenu.css (working copy)
> @@ -17,51 +17,64 @@
> margin: 0;
> }
>
> -table.typo3-dyntabmenu td {
> +hr.typo3-dyntabmenu-clear {
> + clear: left;
> + border: none;
> +}
> +
> +ul.typo3-dyntabmenu {
> + padding: 0;
> + margin: 0;
> +}
> +
> +ul.typo3-dyntabmenu li {
> color: #E6E1B2;
> border: solid 1px #A2AAB8;
> border-bottom: 0;
> padding: 0;
> cursor: pointer;
> + float: left;
> + list-style: none;
> + height: auto;
> }
>
> -table.typo3-dyntabmenu td.tab {
> +ul.typo3-dyntabmenu li.tab {
> background-color: transparent;
> }
>
> -table.typo3-dyntabmenu td.tabact a {
> +ul.typo3-dyntabmenu li.tabact a {
> background-color: #F8F9FB;
> }
>
> -table.typo3-dyntabmenu td.disabled,
> -table.typo3-dyntabmenu td.disabled_over {
> +ul.typo3-dyntabmenu li.disabled,
> +ul.typo3-dyntabmenu li.disabled_over {
> padding: 5px 10px 5px 10px;
> color: #A2AAB8;
> background-color: #EFEFF4;
> }
>
> -table.typo3-dyntabmenu td a {
> +ul.typo3-dyntabmenu li a {
> padding: 5px 10px 5px 10px;
> display: block;
> width: auto;
> }
>
> -table.typo3-dyntabmenu td a:hover {
> +ul.typo3-dyntabmenu li a:hover {
> background-color: #F8F9FB;
> }
>
> -div.typo3-dyntabmenu-divs-foldout div.disabled,
> +div.typo3-dyntabmenu-divs-foldout div.disabled,
> div.typo3-dyntabmenu-divs-foldout div.disabled_over {
> background: #CCCCCC;
> }
> div.typo3-dyntabmenu-divs-foldout div.tab,
> -div.typo3-dyntabmenu-divs-foldout div.tabact {
> +div.typo3-dyntabmenu-divs-foldout div.tabact {
> background: #FEFEFE;
> -
> +
> }
>
> div.typo3-dyntabmenu-divs-foldout div.tab_over,
> -div.typo3-dyntabmenu-divs-foldout div.tabact_over {
> +div.typo3-dyntabmenu-divs-foldout div.tabact_over {
> background: #D7DBE2;
> }
>
--
||||||||||||°||||||||||||
Jens Hoffmann
[TYPO3 - HCI Team Leader]
[DKD - Creative Director]
eMail: jens at typo3.org
Skype: WrYBiT
More information about the TYPO3-team-hci
mailing list