Details

    • Affected Branches:
      MOODLE_18_STABLE
    • Rank:
      296

      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

      1. print_tabs.php
        5 kB
        Urs Hunkler
      2. styles_color_tabs.css
        14 kB
        Urs Hunkler
      3. styles_layout_tabs.css
        26 kB
        Urs Hunkler
      1. 182_rtl.png
        10 kB
      2. moodle_tabs_1_line.png
        34 kB
      3. moodle_tabs_2_lines.png
        36 kB
      4. rtl_in_fireFox1.jpg
        73 kB
      5. tab2.png
        26 kB
      6. tabs_layout.png
        11 kB

        Issue Links

          Activity

          Hide
          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
          Petr Škoda added a comment -

          my +1

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

          Show
          Petr Škoda added a comment - my +1 what OS and tools are you using, I'd like to help with the diffing
          Hide
          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
          Petr Škoda 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 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
          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
          Petr Škoda added a comment -

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

          Show
          Petr Škoda added a comment - Unified diff style is the one Martin likes and the only one Eclipse accepts
          Hide
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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
          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.

            People

            • Votes:
              3 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated: