|
[
Permalink
| « Hide
]
Urs Hunkler added a comment - 03/Dec/06 10:15 PM
The CSS files in a second and thirs go. I attach the whole CSS file because I do not know how the create DIFFs.
my +1
what OS and tools are you using, I'd like to help with the diffing 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) 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 If you are using cvs, go to you moodle root and type: Applying of patches might be harder, it can be done with patch command, go to your moodle directory and type: 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 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 Unified diff style is the one Martin likes and the only one Eclipse accepts
 I'm about to check this in ... is this a good time to try and do this without tables?
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
 . OK, so how's this one for a default?
"moodle_tabs_1_line.png" for one line tabs. The colours are not optimized.
"moodle_tabs_2_lines.png" show 2 line tabs.
"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.
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"> <li><a href="#" title="Activity reports" class="active">Activity reports</a> <li><a href="http://dev.moodle.com/admin/roles/assign.php?contextid=8&userid=2&courseid=2" title="Roles">Roles</a></li> </ul> In particular is there any way to center these tabs? ... crucial
I am working on the centering since yesterday - no solution so far. Tableless and centered and flexible width do not fit together
 Bummer .... this is important enough to me that I would consider changing the HTML to something else if we have to ... After Mauno's hint to the centred tabs and many hours of tweeking here they are: tableless centred flexible width tabs.
tab_example_06.zip shows working code.
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? Brilliant! I'm trying to implement them now.
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? 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. 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. I changed 'styles_layout.css' and commited it.
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. 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. 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. Hello Martin, Dougiamas,
Can one take your code and implement it on the current standard theme (1.8.2+)? Will your fix will work also for RTL languages? I'd be glad to assist to complete this task. this is how the page CSS_Tabs_example_06.html looks like in FF, when the BODY is set to dir=rtl.
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)
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! The rtl implementation of the tabs looks strange. Martin, you may assign the issue to the people working on RTL.
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. |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
New Feature
Open
Major
Better 2 Row Tabs Visualization
 |
|
