Bug 69654

Mon Dec 8 15:56:14 UTC 2003

Christian Robottom Reis wrote:

>On Mon, Dec 08, 2003 at 01:41:12PM +0100, Ludovic Dubost wrote:
>  
>
>>- Especially being able to have the actions in a menu bar at the top of 
>>a page is more similar with the usual experience non-tech users have 
>>with computer applications.
>>    
>>
>
>This is a really important point (though rather orthogonal to the CSS
>issue here) -- our footer is a usability problem for most of our pages,
>since the user ends up having to scroll down (many times guessing he
>needs to scroll down) to [find out how to] navigate through the site.
>
>However, I need to stay focused here if we want the initial CSS
>framework to land -- when it's in, we can work on the UI improvements.
>
>  
>
That's true.. we just need to make sure the CSS structure will allow to 
do it.. So we need to integrate a div space to receive these actions..
It could be the same as the one for the Next/Prev links in the buglist..
I called it 'navheader'..

>>- Changing the look to use CSS buttons not only allows to change it more 
>>easily but gives a 'sexy' look that is quite important to easy the 
>>adoption of the tool to a resisting non-tech audience..
>>    
>>
>
>You'll find that many people will be reluctant to rely on images for
>buttons as "menu items", but that if a decent CSS structure is devised
>it should be easy to add those to a site CSS file.
>
>  
>
It is true.. However in the design I used, it only needs 2 very small 
images for all the buttons.. The power of CSS make them look like real 
buttons..
So it doesn't have a huge impact on speed.. Also it should be possible 
to have a correct interface with colors of the images are not loaded..

As you say a decent CSS structure will allow to choose..

>
> - Also using a standard naming for the 'standard' and 'advanced' DIV
>
>>>allows to apply the same CSS/JS code. Creating a separate div for the 
>>>header of each section was a way to apply a style.
>>>
>>><div id="editadvtitle"><h1>Advanced</h1></div>
>>><div id="editadv">
>>><table>... with form elements</table>
>>></div>
>>><div>
>>>      
>>>
>>
>>I didn't understand your point here.
>>
>>    
>>
> I think my example was not clear.. My point is to use the same names 
> for things that have a good chance of looking the same accross pages.
> For example:
>  -> of course the banner; the footer
>  -> the actions for bug views or the next/prev links in bug list
>  -> a section with advance fields,
>
>
>
>
>>> - The footer is at the bottom of the page. The only way to get it back 
>>>at the top is absolute positioning. So float positioning is kind of 
>>>forbidden if you want to keep the footer at the bottom in non CSS mode.
>>>      
>>>
>>
>>This could be param-configurable, or we could just move the footer
>>content to the top of the page. Again, this is a larger UI change that
>>should happen later..
>>
>>    
>>
> Param configurable would be great.. This would improve the UI 
> performance when you want to show the links at the top of the page.
>
>>> - I first used <li> for each action, search query or admin menu item. 
>>>But in fact there is a neat solution to keep the '|' as separators so 
>>>that the no-style view looks like it does in the current footer. Like this:
>>>      
>>>
>>
>>I think that <li> is really the way to go for the top-level actions,
>>though, and we might be able to tolerate some visual changes to allow
>>this.
>>
>>    
>>
> I thought it in the beginning to since the <li> reprensents lists and 
> that it makes sense for menues to be lists..
> However when I saw the result without style sheets I really didn't 
> like the result.. For TV terminals or PDA it is true that you will see 
> the items but it won't be as nice as it is now.. The following article 
> (sorry in French: http://openweb.eu.org/articles/initiation_display/) 
> showed the tric to have a better accessibility using the | as it is in 
> bugzilla now..
>
> With the trick you get the same benefit you get with the <li> but keep 
> the current way of presenting.. I don't see any reason to not do it 
> this way.
>
>  
>
As an example here is the current div structure I'm using which allows 
quite well to customize:

Here is the div structure I'm using in my template which allows to 
customize quite well the interface to my needs..
(it only shows the divs, not what is inside)..

--> For the banner
<div id="logo">
  </div>
  <div id="bzversion">
  </div>
<div id="title">
</div>

--> Content
<div id="content">

--> Navigation Header (actions: Edit/Attach/Show Dependency Tree in Bug 
view, Next/Prev in buglist)
--> The navheader name is used to position it always at the same place
--> then the others divs are positioned relatively to the main one
<div id="navheader">
<div id="nav">
<div id="nav_main">
</div>
<div id="nav_links">
</div>
<div id="nav_new">
</div>
</div>
</div>

--> Bug View
--> The is the div structure with a template where there is a read-only 
mode for bugs and an edit mode switchable using a button at the top.
<br>
<div id="show_view">
<div id="viewmaintitle"><h1>Summary</h1></div>
<div id="viewmain">
</div>
<div id="viewadvtitle"><h1>Advanced</h1></div>
<div id="viewadv">
</div>
</div>
<div id="show_edit">
<div id="editmaintitle"><h1>Summary</h1></div>
<div id="editmain">
</div>
<div id="editadvtitle"><h1>Advanced</h1></div>
<div id="editadv">
  </div>
<div id="editknobtitle"><h1>Actions</h1></div>
<div id="editknob">
  </div>
 </div>
<div id="show_comments">
<div id="commentstitle"><h1>Comments
</div>
<div id="commentlist">
<div>
</div>
</div>
</div>

--> Navigation footer (repeats the action unless you hide them using CSS)
<div id="navfooter">
<div id="nav">
<div id="nav_main">
</div>
<div id="nav_links">
</div>
<div id="nav_new">
</div>
</div>
</div>

--> end of content
</div>

--> Footer: the javascript here allows to show/hide the drop down menu.. 
A default implementation would do nothing..
--> Having separate divs for the title and the items themselves allows 
to make a button at one place and show the list of items at another place..
--> (for example show/hide the saved queries at the bottom from a button 
at the top)
<div id="footer">
      <div id="actionstitle"><h2><a onclick="switchActions(); return 
false;" href="">Actions</a></h2></div>
      <div id="actions">
      </div>
    <div id="admintitle"><h2><a onclick="switchAdmin(); return false;" 
href="">Admin</a></h2></div>
    <div id="admin">
   <div id="adminlogout"><a 
href="http://bzdev.xpertnet.biz/bzdemo/relogin.cgi">Log out <span>ludovic at xpertnet.biz</span></a></div>
    <div id="queriestitle"><h2><a onclick="return switchQueryMenu()" 
href="">Searches</a></h2></div>
    <div id="queries">
    </div>
</div>

Ludovic