Moodle

Better 2 Row Tabs Visualization

Details

  • Affected Branches:
    MOODLE_18_STABLE

Description

Better visualization of the second Tab row. Attached the png to show how they look and the "print_tabs.php" file with the alternative themebased weblib replacement functions

Attachments

  2. File
    print_tabs.php
    03/Dec/06 10:13 PM
    5 kB
    Urs Hunkler
  3. File
    styles_color_tabs.css
    03/Dec/06 10:15 PM
    14 kB
    Urs Hunkler
  4. File
    styles_layout_tabs.css
    03/Dec/06 10:15 PM
    26 kB
    Urs Hunkler
  1. 182_rtl.png
    10 kB
    05/Aug/07 10:58 PM
  2. moodle_tabs_1_line.png
    34 kB
    09/Jan/07 5:54 PM
  3. moodle_tabs_2_lines.png
    36 kB
    09/Jan/07 5:54 PM
  4. rtl_in_fireFox1.jpg
    73 kB
    05/Aug/07 10:43 PM
  5. tab2.png
    26 kB
    18/Jan/07 5:08 PM
  6. tabs_layout.png
    11 kB
    03/Dec/06 10:13 PM

Issue Links

This issue is duplicated by:
MDL-10719 RTL tabs problems Major Closed

Activity

Ascending order - Click to sort in descending order
Hide
Permalink
Urs Hunkler added a comment -

The CSS files in a second and thirs go. I attach the whole CSS file because I do not know how the create DIFFs.

Show
Urs Hunkler added a comment - The CSS files in a second and thirs go. I attach the whole CSS file because I do not know how the create DIFFs.
Hide
Permalink
Petr Škoda (skodak) added a comment -

my +1

what OS and tools are you using, I'd like to help with the diffing

Show
Petr Škoda (skodak) added a comment - my +1 what OS and tools are you using, I'd like to help with the diffing
Hide
Permalink
Urs Hunkler added a comment -

Thanks for your offer Petr. You will feel quite familiar

Kubuntu with Krusader and KDiff3. My main editor is Vim/Gvim (with several extensions for CSS, HTML, SQL, CVS etc. handling)

Show
Urs Hunkler added a comment - Thanks for your offer Petr. You will feel quite familiar Kubuntu with Krusader and KDiff3. My main editor is Vim/Gvim (with several extensions for CSS, HTML, SQL, CVS etc. handling)
Hide
Permalink
Petr Škoda (skodak) added a comment -

AFAIK KDiff3 can not create the diff file, but you can use commandline diff utility or cvs.

If you have for example moodle/ and moodle.original/ directories, go into their parent and issue
diff -ruN moodle moodle.original > myfirst.patch
where r is recursive, u is unified style, N is to include also content of new and deleted files

If you are using cvs, go to you moodle root and type:
cvs diff -uN . > ../another.patch
where the dot is current directory, which means check all moodle files, you can type wanted files or directories too

Applying of patches might be harder, it can be done with patch command, go to your moodle directory and type:
patch -u < path/to/other.patch
and you will be asked into which file exactly to apply the patch, though I do not know exactly how to handle new and deleted files with it

Another way is to use Kompare, it should be able to apply patches.

And yet another is to install PHP Eclipse and use built-in diffing and patching

Show
Petr Škoda (skodak) added a comment - AFAIK KDiff3 can not create the diff file, but you can use commandline diff utility or cvs. If you have for example moodle/ and moodle.original/ directories, go into their parent and issue diff -ruN moodle moodle.original > myfirst.patch where r is recursive, u is unified style, N is to include also content of new and deleted files If you are using cvs, go to you moodle root and type: cvs diff -uN . > ../another.patch where the dot is current directory, which means check all moodle files, you can type wanted files or directories too Applying of patches might be harder, it can be done with patch command, go to your moodle directory and type: patch -u < path/to/other.patch and you will be asked into which file exactly to apply the patch, though I do not know exactly how to handle new and deleted files with it Another way is to use Kompare, it should be able to apply patches. And yet another is to install PHP Eclipse and use built-in diffing and patching
Hide
Permalink
Urs Hunkler added a comment -

Thanks Petr.

I remember that I read about different types of patch files. Which form of patch is needed for Moodle?

KDiff3 is great for patches - even for 3 way patches.

I did already checked Aptana, a IDE for RIAs with Ajax library integration which is built on Eclipse. Too many stuff on the screen. I prefer Vim for the small screen estate it uses. And the fact that you find it on all Unix based systems. Much of the functionality you use in Eclipse you also get for Vim with it's extension scripts.

And Vim has one big advantage over Eclipse: It's a perfect brain training to learn and remember all shortcuts. With increasing age brain training is a real value

Show
Urs Hunkler added a comment - Thanks Petr. I remember that I read about different types of patch files. Which form of patch is needed for Moodle? KDiff3 is great for patches - even for 3 way patches. I did already checked Aptana, a IDE for RIAs with Ajax library integration which is built on Eclipse. Too many stuff on the screen. I prefer Vim for the small screen estate it uses. And the fact that you find it on all Unix based systems. Much of the functionality you use in Eclipse you also get for Vim with it's extension scripts. And Vim has one big advantage over Eclipse: It's a perfect brain training to learn and remember all shortcuts. With increasing age brain training is a real value
Hide
Permalink
Petr Škoda (skodak) added a comment -

Unified diff style is the one Martin likes and the only one Eclipse accepts

Show
Petr Škoda (skodak) added a comment - Unified diff style is the one Martin likes and the only one Eclipse accepts
Hide
Permalink
Martin Dougiamas added a comment -

I'm about to check this in ... is this a good time to try and do this without tables?

Show
Martin Dougiamas added a comment - I'm about to check this in ... is this a good time to try and do this without tables?
Hide
Permalink
Urs Hunkler added a comment -

Martin, tabs without tables would be great. I'd prefer an ul / li structure with a surrounding div based the one used on http://css.maxdesign.com.au/listamatic/index.htm.

Show
Urs Hunkler added a comment - Martin, tabs without tables would be great. I'd prefer an ul / li structure with a surrounding div based the one used on http://css.maxdesign.com.au/listamatic/index.htm.
Hide
Permalink
Martin Dougiamas added a comment -

OK, so how's this one for a default?

http://clagnut.com/sandbox/csstabs/?writingtext=csstabs#

Show
Martin Dougiamas added a comment - OK, so how's this one for a default? http://clagnut.com/sandbox/csstabs/?writingtext=csstabs#
Hide
Permalink
Urs Hunkler added a comment -

"moodle_tabs_1_line.png" for one line tabs. The colours are not optimized.

Show
Urs Hunkler added a comment - "moodle_tabs_1_line.png" for one line tabs. The colours are not optimized.
Hide
Permalink
Urs Hunkler added a comment -

"moodle_tabs_2_lines.png" show 2 line tabs.

Show
Urs Hunkler added a comment - "moodle_tabs_2_lines.png" show 2 line tabs.
Hide
Permalink
Urs Hunkler added a comment -

"example_01.zip" contains the html file and the CSS files for the tabs I used for the tab mock-up images. I used the Clagnut.com examples Martin proposed - they are quite different from the actual tabs, but look very flexible.

Show
Urs Hunkler added a comment - "example_01.zip" contains the html file and the CSS files for the tabs I used for the tab mock-up images. I used the Clagnut.com examples Martin proposed - they are quite different from the actual tabs, but look very flexible.
Hide
Permalink
Martin Dougiamas added a comment -

Thanks, Urs! I've now changed to similar code in HEAD. They don't look very good right now, can you suggest better CSS?

The HTML currently looks like this:

<div class="tabtree">
<ul class="tabrow0">
<li><a href="http://dev.moodle.com/user/view.php?id=2&course=2" title="Profile">Profile</a></li>
<li><a href="http://dev.moodle.com/user/edit.php?id=2&course=2" title="Edit profile">Edit profile</a></li>
<li><a href="http://dev.moodle.com/mod/forum/user.php?id=2&course=2" title="Forum posts">Forum posts</a></li>
<li><a href="http://dev.moodle.com/blog/index.php?userid=2&courseid=2" title="Blog">Blog</a></li>

<li><a href="#" title="Activity reports" class="active">Activity reports</a>
<ul class="tabrow1">
<li><a href="http://dev.moodle.com/course/user.php?id=2&user=2&mode=outline" title="Outline report">Outline report</a></li>
<li><a href="http://dev.moodle.com/course/user.php?id=2&user=2&mode=complete" title="Complete report">Complete report</a></li>
<li><a href="http://dev.moodle.com/course/user.php?id=2&user=2&mode=todaylogs" title="Today's logs">Today's logs</a></li>
<li><a href="#" title="All logs" class="selected">All logs</a></li>
<li><a href="http://dev.moodle.com/course/user.php?id=2&user=2&mode=grade" title="Grade">Grade</a></li>
</ul>
</li>

<li><a href="http://dev.moodle.com/admin/roles/assign.php?contextid=8&userid=2&courseid=2" title="Roles">Roles</a></li>

</ul>
</div><div class="clearer"> </div>

Show
Martin Dougiamas added a comment - Thanks, Urs! I've now changed to similar code in HEAD. They don't look very good right now, can you suggest better CSS? The HTML currently looks like this: <div class="tabtree"> <ul class="tabrow0"> <li><a href="http://dev.moodle.com/user/view.php?id=2&course=2" title="Profile">Profile</a></li> <li><a href="http://dev.moodle.com/user/edit.php?id=2&course=2" title="Edit profile">Edit profile</a></li> <li><a href="http://dev.moodle.com/mod/forum/user.php?id=2&course=2" title="Forum posts">Forum posts</a></li> <li><a href="http://dev.moodle.com/blog/index.php?userid=2&courseid=2" title="Blog">Blog</a></li> <li><a href="#" title="Activity reports" class="active">Activity reports</a> <ul class="tabrow1"> <li><a href="http://dev.moodle.com/course/user.php?id=2&user=2&mode=outline" title="Outline report">Outline report</a></li> <li><a href="http://dev.moodle.com/course/user.php?id=2&user=2&mode=complete" title="Complete report">Complete report</a></li> <li><a href="http://dev.moodle.com/course/user.php?id=2&user=2&mode=todaylogs" title="Today's logs">Today's logs</a></li> <li><a href="#" title="All logs" class="selected">All logs</a></li> <li><a href="http://dev.moodle.com/course/user.php?id=2&user=2&mode=grade" title="Grade">Grade</a></li> </ul> </li> <li><a href="http://dev.moodle.com/admin/roles/assign.php?contextid=8&userid=2&courseid=2" title="Roles">Roles</a></li> </ul> </div><div class="clearer"> </div>
Hide
Permalink
Martin Dougiamas added a comment -

In particular is there any way to center these tabs? ... crucial

Show
Martin Dougiamas added a comment - In particular is there any way to center these tabs? ... crucial
Hide
Permalink
Urs Hunkler added a comment -

I am working on the centering since yesterday - no solution so far. Tableless and centered and flexible width do not fit together

Show
Urs Hunkler added a comment - I am working on the centering since yesterday - no solution so far. Tableless and centered and flexible width do not fit together
Hide
Permalink
Martin Dougiamas added a comment -

Bummer .... this is important enough to me that I would consider changing the HTML to something else if we have to ...

Show
Martin Dougiamas added a comment - Bummer .... this is important enough to me that I would consider changing the HTML to something else if we have to ...
Hide
Permalink
Urs Hunkler added a comment -

After Mauno's hint to the centred tabs and many hours of tweeking here they are: tableless centred flexible width tabs.

Show
Urs Hunkler added a comment - After Mauno's hint to the centred tabs and many hours of tweeking here they are: tableless centred flexible width tabs.
Hide
Permalink
Urs Hunkler added a comment -

tab_example_06.zip shows working code.

Show
Urs Hunkler added a comment - tab_example_06.zip shows working code.
Hide
Permalink
Urs Hunkler added a comment -

In Img "3. tab2.png" 1) and 2) show tabs with 1 row. 2) is closer to the tabs in Moodle pre 1.8.

3) shows tabs with 2 rows. Before spending another 2 days to tweak the second row for all browsers I decided to go this simpler visualization for the second row.

Martin, when you implement the XHTML and CSS please do it very carefully. Every name and CSS property is important. You may change all class names like "here" to "active". Any even small change will most likely break the tabs. For example the "first" and "last" classes are important to get the images working.

I also changed some tab images, so please use those in "tab_example_06.zip". For example the img for the last tab with the right closing border and the missing dark bottom line in most images.

And here comes a new challenge for Moodle CSS files. I did not find a way to get the tabs working on IE6 and IE7 without IE specific CSS. In the zip you see that I used "ie6.css" and "ie7.css" included with IE conditionals. These conditionals best would be handled and constructed by the Moodle theme config.php. You may read about the conditionals on http://www.quirksmode.org/css/condcom.html.

What do you think?

Show
Urs Hunkler added a comment - In Img "3. tab2.png" 1) and 2) show tabs with 1 row. 2) is closer to the tabs in Moodle pre 1.8. 3) shows tabs with 2 rows. Before spending another 2 days to tweak the second row for all browsers I decided to go this simpler visualization for the second row. Martin, when you implement the XHTML and CSS please do it very carefully. Every name and CSS property is important. You may change all class names like "here" to "active". Any even small change will most likely break the tabs. For example the "first" and "last" classes are important to get the images working. I also changed some tab images, so please use those in "tab_example_06.zip". For example the img for the last tab with the right closing border and the missing dark bottom line in most images. And here comes a new challenge for Moodle CSS files. I did not find a way to get the tabs working on IE6 and IE7 without IE specific CSS. In the zip you see that I used "ie6.css" and "ie7.css" included with IE conditionals. These conditionals best would be handled and constructed by the Moodle theme config.php. You may read about the conditionals on http://www.quirksmode.org/css/condcom.html. What do you think?
Hide
Permalink
Martin Dougiamas added a comment -

Brilliant! I'm trying to implement them now.

Show
Martin Dougiamas added a comment - Brilliant! I'm trying to implement them now.
Hide
Permalink
Martin Dougiamas added a comment -

CVS contains the latest version now, and it's working fine for me under Firefox and Safari, but for some reason IE is really bad.

(IE is fine with your example, though) Any ideas?

Show
Martin Dougiamas added a comment - CVS contains the latest version now, and it's working fine for me under Firefox and Safari, but for some reason IE is really bad. (IE is fine with your example, though) Any ideas?
Hide
Permalink
Urs Hunkler added a comment -

Your "metainclude" solution to integrate the IE conditional CSS looks great

In "styles_layout.css" there was a property - probably forgotten from some elder CSS.
.tabtree span {
font-size:0.1;
}

Didn't I mention to work very carefully

Some tweaks for the IE Browsers are still necessary. And now that the tabs work I will optimize/rework all tab images.

Show
Urs Hunkler added a comment - Your "metainclude" solution to integrate the IE conditional CSS looks great In "styles_layout.css" there was a property - probably forgotten from some elder CSS. .tabtree span { font-size:0.1; } Didn't I mention to work very carefully Some tweaks for the IE Browsers are still necessary. And now that the tabs work I will optimize/rework all tab images.
Hide
Permalink
Urs Hunkler added a comment -

I changed 'styles_layout.css' and commited it.

Show
Urs Hunkler added a comment - I changed 'styles_layout.css' and commited it.
Hide
Permalink
Urs Hunkler added a comment -

Below tabrow1 there is an empty tabrow2 generated. Do you think we need a third row sometime? If not this third row should not be generated.

I searched quite a while to find the reason for the bottom line. It is nowhere defined, very tricky.

Show
Urs Hunkler added a comment - Below tabrow1 there is an empty tabrow2 generated. Do you think we need a third row sometime? If not this third row should not be generated. I searched quite a while to find the reason for the bottom line. It is nowhere defined, very tricky.
Hide
Permalink
Martin Dougiamas added a comment -

The extra trailing empty <li> was needed to make the CSS work properly ... it is currently adding one empty one every time (no matter how many rows of tabs there are.

Unfortunately the empty row is not really accessible.

Show
Martin Dougiamas added a comment - The extra trailing empty <li> was needed to make the CSS work properly ... it is currently adding one empty one every time (no matter how many rows of tabs there are. Unfortunately the empty row is not really accessible.
Hide
Permalink
Urs Hunkler added a comment -

This empty <li /> tag I added to the first row to get the CSS working for 2 rows. The empty <li /> in the second row breaks the CSS.

@accessibility: I'll check, if I get the tabs working without the empty row - puh, a never ending story.

Show
Urs Hunkler added a comment - This empty <li /> tag I added to the first row to get the CSS working for 2 rows. The empty <li /> in the second row breaks the CSS. @accessibility: I'll check, if I get the tabs working without the empty row - puh, a never ending story.
Hide
Permalink
Tal Daniel added a comment - - edited

Hello Martin, Dougiamas,

Can one take your code and implement it on the current standard theme (1.8.2+)?
If so, how? by replacing the style_ie6.css and style_ie7.css?

Will your fix will work also for RTL languages?

I'd be glad to assist to complete this task.

Show
Tal Daniel added a comment - - edited Hello Martin, Dougiamas, Can one take your code and implement it on the current standard theme (1.8.2+)? If so, how? by replacing the style_ie6.css and style_ie7.css? Will your fix will work also for RTL languages? I'd be glad to assist to complete this task.
Hide
Permalink
Tal Daniel added a comment -

this is how the page CSS_Tabs_example_06.html looks like in FF, when the BODY is set to dir=rtl.

Show
Tal Daniel added a comment - this is how the page CSS_Tabs_example_06.html looks like in FF, when the BODY is set to dir=rtl.
Hide
Permalink
Tal Daniel added a comment -

The attached image shows that the improvement still doesn't solve the 1.8+ bug that prevents users in RTL languages from editing their profile etc. (the tabs are not pressable)

Show
Tal Daniel added a comment - The attached image shows that the improvement still doesn't solve the 1.8+ bug that prevents users in RTL languages from editing their profile etc. (the tabs are not pressable)
Hide
Permalink
Martin Dougiamas added a comment -

What we have in 1.8 and 1.9 is the best we have ... there is no extra patch ...

if you can somehow fix the CSS for RTL I'd be really grateful!

Show
Martin Dougiamas added a comment - What we have in 1.8 and 1.9 is the best we have ... there is no extra patch ... if you can somehow fix the CSS for RTL I'd be really grateful!
Hide
Permalink
Urs Hunkler added a comment -

The rtl implementation of the tabs looks strange. Martin, you may assign the issue to the people working on RTL.

Show
Urs Hunkler added a comment - The rtl implementation of the tabs looks strange. Martin, you may assign the issue to the people working on RTL.
Hide
Permalink
Samuli Karevaara added a comment -

The current solution has it's problems. If the second row is empty (majority of the cases), there is too much space between the first row and the help title. This is because the standard stylesheet has bottom padding of 1.75em for .tabrow0. This is needed because the div.tabrow1 is absolutely positioned. If the bottom padding is reduced, then the second row will overlap when present. Of course the bottom padding can be taken out for each page where the second row is not present, but this seems the wrong way around.

The same thing causes the second tab row in some cases to overlap with the h2.main.help below it (because the tabrow1 is absolutely positioned).

If there is a way to do this without the tabrow1 absolutely positioned I'll vote for that.

Show
Samuli Karevaara added a comment - The current solution has it's problems. If the second row is empty (majority of the cases), there is too much space between the first row and the help title. This is because the standard stylesheet has bottom padding of 1.75em for .tabrow0. This is needed because the div.tabrow1 is absolutely positioned. If the bottom padding is reduced, then the second row will overlap when present. Of course the bottom padding can be taken out for each page where the second row is not present, but this seems the wrong way around. The same thing causes the second tab row in some cases to overlap with the h2.main.help below it (because the tabrow1 is absolutely positioned). If there is a way to do this without the tabrow1 absolutely positioned I'll vote for that.
Hide
Permalink
Eloy Lafuente (stronk7) added a comment -

NOTE: This issue was assigned to the STABLE backlog without complete triaging process. Marking it as triaged, but with this note for future reference.

Show
Eloy Lafuente (stronk7) added a comment - NOTE: This issue was assigned to the STABLE backlog without complete triaging process. Marking it as triaged, but with this note for future reference.

Dates

  • Created:
    Updated:
Atlassian JIRA (v4.4.3#663-r165197) | Report a problem
Powered by a free Atlassian JIRA open source license for Moodle. Try JIRA - bug tracking software for your team.