Saving space in upcoming events box

Saving space in upcoming events box

by Gustav W Delius -
Number of replies: 2
I think the current layout of the upcoming events box could be improved by replacing the <hr> tags by <img src="rule.gif"> tags. That gives each template author the chance to customize the spacing between entries.
Attachment space.gif
Average of ratings: -
In reply to Gustav W Delius

Re: Saving space in upcoming events box

by John Papaioannou -
Gustav, I think that's the wrong idea. The <img> solution will force people to use an image. Instead, a better solution (involving CSS) would be like this:

1. Make a trivial modification to the blocks code, to allow each sideblock to have a unique CSS class or ID attribute
2. You are now completely free to explore any layout changes by modifying some CSS, without touching the code at all.

For example, using this approach, we would have HTML like:
<table class="sideblock" id="calendar_upcoming">
...
</table>

and inside this use <div class="spacer"> </div> for spacing. Then, in the theme css:

.spacer { /* This is a generic setting that sets the default spacer appearance */
   height: 8px;
   background-image: url(line.gif)
}

which we would be able to override on a case-by-case basis, using rules like

#calendar_upcoming .spacer { /* This overrides the above in the calendar upcoming block */
   height: 1px; /* maximize space savings */
   background: none;
}

and all of this would be controlled through CSS.

How does that sound like?

Jon
In reply to John Papaioannou

Re: Saving space in upcoming events box

by Gustav W Delius -

I agree that that would be the more sophisticated solution. However all this is only temporary anyway because we have not yet been told how the transition to using templates is going to proceed. Until that is clear I don't think we should spend too much time on style issues. I just wanted a quick fix to the enormous space required by the upcoming events block as it is now. If you can implement the above before Moodle 1.3 beta closes then please do, otherwise let us at least do the <img> thing.