Forum OpenACS Q&A: Re: Copenhagen - UI discussion

Collapse
Posted by Bruno Mattarollo on

I started working, in my spare time, on a generic CSS for OpenACS (out-of-the-box) and on making the calendar widgets layout-free (as much as possible). This is just the start but it's aiming towards having OpenACS be more flexible in the layout and also be able to support skins more easily (just-replace-the-css-and-there-you-go type of scenario).

I have the calendar dt_widget_month already done ... it was quite simple 😊. I will continue and once I have something more or less finished, I will send the diff file to ... Lars?. As you all might know, I am not a designer but we have to start somewhere, right? In this case the start is to get the core modules to output proper XHTML.

I will -most probably- start working in a new job within Greenpeace so it means that I will have even less time to work on this but at least I am making some steps forward.

Collapse
Posted by xx xx on
Very good!
Does this mean you make use of <div> and <span> instead of tables?
Is there a 'Naming Convention' that you use or that should be used?
Collapse
Posted by Bruno Mattarollo on

I use tables but not for layout. The layout is controlled by CSS. In the case of the calendar, in particular, I think we still need to use tables (since that's how the information is structured, in a tabular way) but the layout (all the fonts, colors, positioning etc) is controlled from the CSS.

My naming convention is quite lax at the moment, I have one main div called calendartable and then a class called calendar that is applied to each td. I use another class calendarheader for the caption of the table containing the calendar. For the day view rows I have dayvieweven and dayviewodd just to continue with the current code.

I just started working on this because that's something I have been wanting to do for a long time ... I want to make it easier to change the layout of the widgets and stuff 😊.

Collapse
Posted by Jeff Davis on
Bruno, rather than dayviewodd and dayvieweven you might want to use simply odd and even so that the banding will be done by the default sitewide css and if you want to overide it you can still do
.calendar .odd { }

Here is what I ended up with for the calendar table:

<table class="calendar">
  <tr class="title"><th class="month" colspan="7">July 2003</th></tr>
  <tr class="days">
    <th class="day">S</th>
    <th class="day">M</th>
    <th class="day">T</th>

    <th class="day">W</th>
    <th class="day">T</th>
    <th class="day">F</th>
    <th class="day">S</th>
  </tr>
  <tr>
    <td class="empty">&nbsp;</td>
    <td class="empty">&nbsp;</td>
    <td class="day">1</td>
    <td class="day">2</td>
    <td class="day">3</td>
    <td class="today">4</td>
    <td class="day">5</td>

  </tr>
...
  </table>