OFBiz › OFBiz - Dev

RFC: General HTML Layout Ideas

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

2 messages Options

Adrian Crum

RFC: General HTML Layout Ideas

The recent UI refactoring has done a lot to make the UI more flexible. But, there are a couple of areas that still need some discussion and possible
changes.

1. The new tab-bar style breaks when there is a response message. The Party Manager profile page is an example. The tab bar at the top of the content
area breaks when an action causes one of those "The following happened..." messages to appear. The response messages need to be moved outside the main
content area.

2. The app-navigation HTML compound is contained by the "centerarea" <div> element. It would be nice to be able to move the app-navigation separately
from the centerarea. The app-navigation div needs to be moved outside the centerarea.

3. There are a number of unnecessary <div> elements inserted by the Global Decorator - which results in unnecessary markup. Some of those divs are
used for multi-column layouts. It would be preferable to have the multi-column divs inserted by component decorators when they are needed.

So, with those things considered, here is the general layout I propose (before and after) -

Before (current layout):

<body>
<div id="masthead">
...
</div>
<div id="main-navigation">
...
</div>
<div class="centerarea">
<div id="app-navigation">
...
</div>
<div class="contentarea">
<div id="column-container">
<div id="content-main-section">
<div id="content-messages">
"The following ocurred..."
</div>
... (menu bars, screenlets, etc)
</div>
</div>
</div>
</div>
<div id="footer">
...
</div>
</body>

After (proposed layout):

<body>
<div id="masthead">
...
</div>
<div id="main-navigation">
...
</div>
<div id="app-navigation">
...
</div>
<div id="content-messages">
"The following ocurred..."
</div>
<div class="contentarea">
... (menu bars, screenlets, etc)
</div>
<div id="footer">
...
</div>
</body>

The proposed layout would eliminate unnecessary HTML element nesting - making style changes easier. Also, the proposed layout would still have the
same appearance, but use less markup. The only appearance change would be when a response message appears - it would be in its own container instead
of being in the main content area. This will keep the main content unaltered when response messages appear.

Comments are welcome.

-Adrian

Jacopo Cappellato

Re: RFC: General HTML Layout Ideas

Adrian,

I think they are all good ideas.

Jacopo

Adrian Crum wrote:

> The recent UI refactoring has done a lot to make the UI more flexible.
> But, there are a couple of areas that still need some discussion and
> possible changes.
>
> 1. The new tab-bar style breaks when there is a response message. The
> Party Manager profile page is an example. The tab bar at the top of the
> content
> area breaks when an action causes one of those "The following
> happened..." messages to appear. The response messages need to be moved
> outside the main
> content area.
>
> 2. The app-navigation HTML compound is contained by the "centerarea"
> <div> element. It would be nice to be able to move the app-navigation
> separately from the centerarea. The app-navigation div needs to be moved
> outside the centerarea.
>
> 3. There are a number of unnecessary <div> elements inserted by the
> Global Decorator - which results in unnecessary markup. Some of those
> divs are used for multi-column layouts. It would be preferable to have
> the multi-column divs inserted by component decorators when they are
> needed.
>
> So, with those things considered, here is the general layout I propose
> (before and after) -
>
> Before (current layout):
>
> <body>
> <div id="masthead">
> ...
> </div>
> <div id="main-navigation">
> ...
> </div>
> <div class="centerarea">
> <div id="app-navigation">
> ...
> </div>
> <div class="contentarea">
> <div id="column-container">
> <div id="content-main-section">
> <div id="content-messages">
> "The following ocurred..."
> </div>
> ... (menu bars, screenlets, etc)
> </div>
> </div>
> </div>
> </div>
> <div id="footer">
> ...
> </div>
> </body>
>
> After (proposed layout):
>
> <body>
> <div id="masthead">
> ...
> </div>
> <div id="main-navigation">
> ...
> </div>
> <div id="app-navigation">
> ...
> </div>
> <div id="content-messages">
> "The following ocurred..."
> </div>
> <div class="contentarea">
> ... (menu bars, screenlets, etc)
> </div>
> <div id="footer">
> ...
> </div>
> </body>
>
> The proposed layout would eliminate unnecessary HTML element nesting -
> making style changes easier. Also, the proposed layout would still have
> the same appearance, but use less markup. The only appearance change
> would be when a response message appears - it would be in its own
> container instead of being in the main content area. This will keep the
> main content unaltered when response messages appear.
>
> Comments are welcome.
>
> -Adrian