[jira] Commented: (OFBIZ-241) CSS Layout and Other Cleanups in the Manager Applications

[Nicolas Malin (Jira)]

    [ https://issues.apache.org/jira/browse/OFBIZ-241?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#action_12481761 ]

Adrian Crum commented on OFBIZ-241:
-----------------------------------

Misc UI Refactor Guidelines

This document describes the steps needed to refactor the back-office components to eliminate embedded styling and make better use of CSS styling.

The following CSS styles are deprecated and should be removed:

inputBox -  not needed
selectBox -  not needed
textAreaBox -  not needed
tabletext -  not needed
sepbar -  not needed
viewManyTR1 -  not needed
treeitem -  not needed


The following CSS styles are deprecated and should be refactored/replaced. Each instance needs to be evaluated to determine the best way to refactor its usage.

tableheadtext -  If it's used in a <td> element, then use the basic-table CSS class on the table and the header-row CSS class on its enclosing <tr> element -OR- convert the <td> element to a <th> element. If it is being used without a table to make text bold, then use <b></b> instead.

bothclear, endcolumns - Replace with clear.

viewManyTR2 - Use the basic-table CSS class on the table and replace viewManyTR2 with alternate-row.

col-right - Use one of the new container CSS styles, then change this to opposed.

tabContainer - convert menu to new CSS style "button-bar" plus one of its decorators.

tabButtonSelected - perform above step, then change this to selected.

head1, head2, head3 - can be replaced with <h> elements in many, but not all cases.

Example:

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td><div class="tableheadtext">Column 1 Header</div></td>
      ...
    </tr>
</table>

becomes

<table class="basic-table dark-grid" cellspacing="0">
  <tr class="header-row">
    <td>Column 1 Header</td>
      ...
    </tr>
</table>

or

<table class="basic-table dark-grid" cellspacing="0">
  <tr>
    <th>Column 1 Header</th>
      ...
    </tr>
</table>

Example:

<div>
  <div class="tableheadtext">Some bold text</div>
</div>

becomes

<div>
  <b>Some bold text</b>
</div>

Example:

<div class="head1">Big bold text</div>

becomes

<h1>Big bold text</h1>

> CSS Layout and Other Cleanups in the Manager Applications
> ---------------------------------------------------------
>
>                 Key: OFBIZ-241
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-241
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: accounting, content, humanres, manufacturing, marketing, order, party, product, workeffort
>    Affects Versions: SVN trunk
>            Reporter: Marco Risaliti
>         Attachments: style-info.txt
>
>
> Copy of http://jira.undersunconsulting.com/browse/OFBIZ-202 from David Jones
> =======================================================
> The purpose of this task is to improve the current CSS based layout, and separate it from the ecommerce application so they do not interfere with eachother. There are some issues with the layout, and lots of room for improvement including in some cases chaging table-based layouts to CSS based, and making styles and HTML structure cleaner and more flexible. This is not meant to be nearly as aggessive an effort as in ecommerce, and is meant more for general improvements and not to facilitate extremely flexible customization and such as is the case in ecommerce.
> I would like to propose the removal of all redundant style info... for example, nearly all <div class="tabletext"> wrappers can be removed, the exception being where they are used like <p>s - the default text style can be set on body; all "inputBox", "selectBox", "smallSubmit" styles can be removed - can style input elements globally; remove embedded style="margin: 0" on forms, style forms globally; change <div class="head1|head2|head3"> to <h1|h2|h3>, etc. (Just the ones off the top of my head, I'm sure there are more.)
> I would be happy to help with this, but due to the large number of files affected, it will probably need to be coordinated with any other css work.
> I agree with this approach Joe. It is much more flexible and will reduce the HTML size a fair bit, and with proper labelling of different areas it can be very flexible too. This is what I've done with the ofbiz.org home page.
> You're right about this requiring a lot of changes in lots of different files. I'm not sure what the best way to manage this is, but to get it started it is probably best to choose 2-3 "proof of concept" pages and get those cleaned up, and then solicit help with others based on those.
> Of course, chances are no one except the core group will help anyway, but I always find it entertaining to try...
> I would be willing to help as well, if you like. I have converted my ecommerce site already to css (www.heatwithsolar.com). Since my goal is to use OFBiz on my site, I have a strong desire to retain CSS level 1 capability. I have no real need to go to a higher standard of CSS yet until it is supported by more browsers.
> As soon as I get an SVN up and running well, I'll likely start working on this anyways. Just let me know. [hidden email]

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.