Sie sind auf Seite 1von 5

GROU.PS Layout ­ Draft ­

Grou.ps uses Smarty Templating Engine (http://smarty.php.net)

Pages are composed of 10 absolute div's:

1.

#ajax_popup Features: floating, not draggable This is the floating dialog box of operations

2.

#busy_popup Features: floating, not draggable Consists of a img that shows the busy status during AJAX interactions.

3.

#bg_differentiation Features: floating, not draggable is a background for #ajax_popup, makes transparency effect

4.

#theHelp Features: static, not draggable Hidden per default. Appears when Help Mode turned on. Gives information about current module.

5.

#theCrop Features: floating, not draggable Created for People Module only, to be used in picture cropping process.

6.

#ad_area Features: static, not draggable Space for ads. Intentionally left empty for now.

7.

#chatScreen Features: floating, draggable Draggable chat layer.

8.

#topbar Features: static Site­wide used topbar that shows user and grou.p status and operations

9.

#layout Features: static Main content area

10.

#title2note

Features: dynamically generated Dynamic help about page elements (on hover)

The picture below represents: #layout, #topbar, #chatScreen, #ad_area

represents: #layout , #topbar , #chatScreen , #ad_area The picture below represents: #layout, #theHelp , #topbar

The picture below represents: #layout, #theHelp, #topbar

represents: #layout , #topbar , #chatScreen , #ad_area The picture below represents: #layout, #theHelp , #topbar

The picture below represents #ajax_popup, #bg_differentiation. Note that #bg_differentiation covers everything on the page with a white semi­transparent layer.

everything on the page with a white semi­transparent layer. #title2note is dynamically created (currently in the

#title2note is dynamically created (currently in the right bottom part of the page) #theCrop is only used in People module

#layout Unleashed

#layout Unleashed

#content Unleashed

#content is generated on the fly by a class named includes/PageGenerator.class.php

A

#content may have 3 column layouts:

1. Equal Columns (no such example yet, planned for future Home module) (consists of 2 blocks of equal width)

2. With Sidebar (example: People, Blogs

)

(consists of 1 sidebar and 1 wider column)

3. Full Column (example: Map, Wiki

)

(consists of a single column)

In

a column, there may be 4 types of blocks:

 

1. Operational (has no header)

2. Promotional (has no header either, temporary – disappears in 10 seconds) (example:

promotional block in Blogs module)

3. Ordinary (header is optional)

4. Hidden (required in some special cases)

Here's a sample block skeleton:

IF (Hidden): { #hidden_block_X (X is equal to [1­9][0­9]* in regexp) END }

#top_block_no_X

IF (not Operational AND not Promotional): { .box

If (has header): .box_top END

.box_mid

.content

.box_bottom

.box_bottom_left

.box_bottom_right

} ELSE: { .box_mid_ops OR .box_mid_promo

.content

.box_bottom_ops END }