[Vtigercrm-developers] Files to fix word wrapping of long items andgeneral column layout

[Neil Temperley]

Dear All,

This archive has some minor fixes to two files in the version I sent
previously.  Additional altered files fix a layout issue for "Edit" and
"Create" views... now the spacing/layout of the copy address radio buttons
is improved.  (As far as I can tell these files can be dropped on top of SVN
9848 and everything works OK.)

Regards,
Neil

-----Original Message-----
From: vtigercrm-developers-bounces at lists.vtigercrm.com
[mailto:vtigercrm-developers-bounces at lists.vtigercrm.com] On Behalf Of Neil
Temperley
Sent: Monday, 13 November 2006 21:27
To: vtigercrm-developers at lists.vtigercrm.com
Subject: [Vtigercrm-developers] Files to fix word wrapping of long items
andgeneral column layout

Dear vtiger developers,

please find attached a gzipped tar file of changes I'm suggesting to the
vtiger user interface to cope with the problem that long item problems do
not wrap correctly and resizing the browser window doesn't help.   See
ticket my #2564 and others.  I've made these corrections to SVN 9765.

In particular my aim was to make all "Detail Views" format well; wrapping
correctly when the user chooses to alter the width of his or her browser
window.  In particular I wanted to ensure that fields such as Comments,
Notes, Description, Terms & Conditions, Mailing Street and Multi-select
Combo Boxes worked correctly with long items regardless of window width.
Also, I've ensured that these wide items (including Contact Image (i.e.
Photo)) now span multiple columns to provide a neater layout.

With these changes, the user has significant control over column width's and
layout in Detail Views by altering the two classes in the style.css file
".dvtCellLabel" and ".dvtCellInfo".  Both of these now have a width setting
that you can play with.  You can choose values that give you column
proportions pretty similar to vtiger's existing proportions, or you can
choose values that enable more data to be fitted to the screen.

Unfortunately, to implement these changes many files were affected because
these two CSS style classes .dvtCellLabel and .dvtCellInfo are used in lots
of places such as Change Password and Data Migration.   This means that I've
ended up tweaking (and fixing some bugs in) lots of tables.  Where
reasonable I've tried to replace the use of these with the more generic
.cellLabel and .cellInfo.

Some of the "tables" affected are as follows.

1) All "Detail Views".   A Detail View shows the details for one item, e.g.
a Contact, a Quote etc.  Detail Views are found in Contacts, Leads,
Potentials, Accounts, Notes, User and all the items under the Inventory tab,
e.g. Quotes and Invoices. 

2) The Advance Filter tables used in Custom View and Reporting.  These now
resize well and can accept long "OR" combinations of search strings.

3) Odd places (which in my mind do not really constitute a Detail View) such
as Change Password, Convert Lead, Calendar and Data Migration.

Files most affected are:
DetailViewUI.tpl, DetailView.tpl, DisplayFields.tpl and style.css of course.


How to proceed.

1) Untar the archive files into your vtigercrm root directory on top of a
SVN 9765 version.

2) Log-on to vtiger using the *** Blue Lagoon Theme ***.  I've only giving
you a new style.css for Blue Lagoon (any other theme will look a mess with
no word wrapping)!!!!

3) Edit a Contact and create lots of long entries in every field you can!

4) Now resize your browser window and check that everything wraps neatly.

5) If you want to play with the layout: in themes, open
bluelagoon/style.css, search for .dvtCellLabel, and read my notes.
For experts, you may want to copy bluelagoon/style-developer.css to
bluelagoon/style.css.  This will give you a fairly ugly colour scheme but
will clearly show the places that have been affected by my changes.

6) Note I reformatted the indentation of portions of the code in these files
where I thought indentation was poor or hard to follow.


Some of the things that I have learnt through this process.

1) There are multiple style classes used in vtiger and some have been used
inconsistently.
One problem is that there is no clear definition of what constitutes a
Detail View.  This is causing confusion.  For example there are multiple
styles defining the same heading of different tables both using Detail View
style classes, e.g. .detailedViewHeader and .dvInnerHeader.

I'd like to suggest that we restrict Detail View tables to those having four
columns: Label, Data, Label, Data.   The headings for many different types
of tables are substantially identical.  Rather than create new style for
every situation or table, it is probably best to minimise the number of
styles and use generic names such as .headingLevel2 or .selectBox where
possible.

2) Note that HTML statements such as <table class='small'> or <tr
class='small'> don't seem to propagate the font style down to cell level.
I'm not sure why not.

3) Note also that an HTML statement like:
<td align="left" class="txtBox">
may not do what you want since the class setting always takes precedence
over the "align".  The better choice is this <td style="text-align:left;"
class="txtBox"> which will always work.

4) One nowrap type item in a table cell can turn off wrapping for the
**whole column** of data and ruin the layout.  Avoid using nowrap!

5) I couldn't resize images since the HTML sizing seems to be stored with
the link information for the image.  Photos are too large by default.

6) I don't think &nbsp; codes are required in empty data cells.  In the past
they used to be required to ensure a cell would display properly.  If you
need to include one, put it **after** the data not in front so that the
alignment of the data is not disturbed (assuming the data is left aligned),
e.g. <td>{$data}&nbsp;</td>  NOT  <td>&nbsp;{$data}</td>.


Please let me know if you find any formatting disasters as a result of these
changes.  I've tried this with Firefox 1.5 and IE 6.0.

I tried hard to be neat and careful.  I spent a reasonable time
reformatting.  (Yes, I spent way way too long on this :-))

Best regards,
Neil

Neil Temperley
Skype: neil.temperley 

--
No virus found in this incoming message.
Checked by AVG Free Edition.
Version: 7.5.430 / Virus Database: 268.14.3/530 - Release Date: 11/11/06
18:53
 
    
-------------- next part --------------
A non-text attachment was scrubbed...
Name: vtiger-Neil-20061121.tar.gz
Type: application/x-gzip
Size: 85673 bytes
Desc: not available
Url : http://lists.vtigercrm.com/pipermail/vtigercrm-developers/attachments/20061121/e18da66b/attachment-0003.gz