HTML redesign

[GoogleCodeExporter]

We need to change the underlying HTML to make it more CSS-friendly.
There is a long list of issues designers encounter trying to apply their
own CSS to our layout. We need to redesign the HTML+main.css so that it
looks the same, but is more versatile when it comes to re-arranging the
elements on the screen. 

http://zetaprints.com is an example of the skeleton design
realestate has MOAS skin
magento has g-skin
Both have problems. See the list here.

The task is to take a few pages as HTML and re-arrange the blocks inside.
We'll convert that new HTML into a set of XSLTs. Most likely we'll release
them as open source here. 

Original issue reported on code.google.com by zetapri...@gmail.com on 6 Apr 2010 at 12:01

• Blocked on: #21, #27

[GoogleCodeExporter]

Content area. A generic issue for most of the pages.

Can’t match the content area block with it’s content amount and title. The 
block
(border) should be as big as its content.
The way it is now, in FF it shows up as a fixed height and the titles of the 
catalogs
go outside its borders.
http://www.zetaprints.com/help/skins/g-skin/screen-shots/content_area_1.png

Could the content area be constructed in a different way? Maybe putting the 
title and
content as part of the same block.

path:
http://realestate.zetaprints.com/?CorporateID=
(log in as a user and go to “home”)

This is an issue on most pages.
http://www.zetaprints.com/help/skins/g-skin/screen-shots/content_area_1_my_detai
ls.png
http://www.zetaprints.com/help/skins/g-skin/screen-shots/content_area_1_my_image
s.png
http://www.zetaprints.com/help/skins/g-skin/screen-shots/content_area_1_search_p
age.png
http://www.zetaprints.com/help/skins/g-skin/screen-shots/content_area_1_template
_page.png
- etc..

I’m also having problems making the content area border and title block same 
width.
Used % values but they don’t match on browser window resize.
http://www.zetaprints.com/help/skins/g-skin/screen-shots/content_area_2.png

Original comment by zetapri...@gmail.com on 6 Apr 2010 at 12:01

[GoogleCodeExporter]

All buttons in the tabs on “my images” page should have separate ID’s. If 
I align
them correctly for FF, they get missaligned in IE and the other way around. 
Tabs with
multiple buttons should also have those buttons in a single
or table cell so that they can be moved according to the design.

path:
http://realestate.zetaprints.com/?page=images
(login as a user and go to My images in the left menu)

screenshots in IE:
http://www.zetaprints.com/help/skins/g-skin/screen-shots/copy_tab.png
http://www.zetaprints.com/help/skins/g-skin/screen-shots/delete_tab.png

Original comment by zetapri...@gmail.com on 6 Apr 2010 at 12:02

[GoogleCodeExporter]

Designer/printer

The templates scroll on the right side should be part of the content area so 
that the
content area border is on the outside.

path:
http://www.zetaprints.com/blog/2006/12/22/outsourcing-in-printing-industry-and-y
our-business/
(log in as a designer and click on a catalog)

http://www.zetaprints.com/help/skins/g-skin/screen-shots/templates_scroll.png

Original comment by zetapri...@gmail.com on 6 Apr 2010 at 12:02

[GoogleCodeExporter]

Printer left menu

There is a block at the top of the printer left vertical menu. This block 
shares an
ID with the rest of the menu and I can’t remove its border.
Nees a separate ID just for this block in order to remove the border which is
obstructing the top horizontal menu links.

path:
http://realestate.zetaprints.com/?CorporateID=
(log in as a printer)

screenshot:
http://www.zetaprints.com/help/skins/g-skin/screen-shots/printer_menu.png

Original comment by zetapri...@gmail.com on 6 Apr 2010 at 12:02

[GoogleCodeExporter]

Initial version with sample content and comments
Menu can be easily switched left to right, fixed or liquid widths.
Fixed content block height

Original comment by k.safro...@gmail.com on 7 Apr 2010 at 1:37

Attachments:

• layout.zip

[GoogleCodeExporter]

Task for designer: try to apply custom skins in the test location. Just add 
links to
the CSS you need on top of the main.css as if it is on ZP.

I think it needs a bit of white space on the right. Too close to the border.

Original comment by zetapri...@gmail.com on 8 Apr 2010 at 7:42

[GoogleCodeExporter]

Add more pages for testing:

1. list of templates
2. preview page

Original comment by zetapri...@gmail.com on 8 Apr 2010 at 7:44

[GoogleCodeExporter]

1. List of templates:
http://realestate.zetaprints.com/?page=catalogue;CorporateID=D6022B77-7BFC-4B43-
AD36-E97371033276

2. Preview page:
http://realestate.zetaprints.com/?page=template-preview;TemplateID=D13AAB30-2E26
-43A3-84CE-12A7424CE95C

3. News block on the right:
http://realestate.zetaprints.com/?CorporateID=
login as a printer

4. Help on the right side:
http://realestate.zetaprints.com/?page=font-template-add;TemplateID=D13AAB30-2E2
6-43A3-84CE-12A7424CE95C
login as a printer

Original comment by agur...@gmail.com on 8 Apr 2010 at 8:17

[GoogleCodeExporter]

please see test.html pure css changes, no layout or original css changes

Original comment by k.safro...@gmail.com on 8 Apr 2010 at 8:39

[GoogleCodeExporter]

http://www.zetaprints.com/prototype/test/test.html
Original HTML as on ZP, main.css unchanged.
Removed BASE element, no layout impact with this.
Added new.css on top.

Original comment by zetapri...@gmail.com on 8 Apr 2010 at 9:47

[GoogleCodeExporter]

Another illustration for link 4 (help on the side)
http://realestate.zetaprints.com/?page=pdf-template-save;TemplateID=8E1C3D3C-F43
3-4060-95E1-CE374B67B6F8
Try to resize the browser window. It goes from the right to the bottom. Ugly :(

Original comment by zetapri...@gmail.com on 8 Apr 2010 at 9:51

[GoogleCodeExporter]

Please test fixes on realestate. 
Please note blue border around .content is just for better understanding of 
height fix

Original comment by k.safro...@gmail.com on 9 Apr 2010 at 3:20

• Changed state: ToTest

[GoogleCodeExporter]

Notes for testing. 

Check as many pages as possible.
The emphasis is on the pages users see most.
The skin must look perfect. Some changes to the new elements introduced by new
scripts may need to be styled better (upload button for example).

Post comments here or start new issues and add label Related-15.

Original comment by zetapri...@gmail.com on 19 Apr 2010 at 5:00

[GoogleCodeExporter]

We need to close this off, unless there are major issues we actually can fix 
quickly.

Please, copy to the normal skin store, publish the link here and on help and 
update
it on realestate.

Original comment by zetapri...@gmail.com on 22 Apr 2010 at 10:42

[GoogleCodeExporter]

Original comment by zetapri...@gmail.com on 22 Apr 2010 at 12:13

• Changed state: OhHold

[GoogleCodeExporter]

I've copied G-skin to http://www.zetaprints.com/skins/G-skin/styles.css and 
installed 
it on realestate. Please test and revert with results

Original comment by k.safro...@gmail.com on 6 May 2010 at 7:52

• Changed state: ToTest

[GoogleCodeExporter]

See issue#27

Original comment by agur...@gmail.com on 6 May 2010 at 12:36

• Changed state: MoreWork

[GoogleCodeExporter]

Original comment by zetapri...@gmail.com on 12 May 2010 at 10:11

[GoogleCodeExporter]

Original comment by zetapri...@gmail.com on 12 May 2010 at 10:30

• Added labels: Stream-Skin