Skip to content

erp5
erp5
Commit 787fd1ed authored by Kevin Deldycke's avatar Kevin Deldycke
Browse files
Options

New 3-column flexible layout. 

git-svn-id: https://svn.erp5.org/repos/public/erp5/trunk@9735 20353a03-c40f-0410-a6d1-a30d3c3de9de
parent 5337e9f4
Show whitespace changes
Inline Side-by-side
Showing with 164 additions and 127 deletions
bt5/erp5_web/SkinTemplateItem/portal_skins/erp5_web_default_theme/erp5_web_default.css.xml
View file @ 787fd1ed
......@@ -4,8 +4,8 @@
<pickle>
<tuple>
<tuple>
<string>OFS.DTMLDocument</string>
<string>DTMLDocument</string>
<string>Products.PageTemplates.ZopePageTemplate</string>
<string>ZopePageTemplate</string>
</tuple>
<none/>
</tuple>
......@@ -19,49 +19,48 @@
</value>
</item>
<item>
<key> <string>__name__</string> </key>
<value> <string>erp5_web_default.css</string> </value>
</item>
<item>
<key> <string>_local_properties</string> </key>
<key> <string>_bind_names</string> </key>
<value>
<tuple>
<object>
<klass>
<global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
</klass>
<tuple/>
<state>
<dictionary>
<item>
<key> <string>id</string> </key>
<value> <string>sidebar-em-width</string> </value>
</item>
<key> <string>_asgns</string> </key>
<value>
<dictionary>
<item>
<key> <string>type</string> </key>
<value> <string>string</string> </value>
<key> <string>name_subpath</string> </key>
<value> <string>traverse_subpath</string> </value>
</item>
</dictionary>
</tuple>
</value>
</item>
<item>
<key> <string>_vars</string> </key>
<value>
<dictionary/>
</value>
</item>
<item>
<key> <string>globals</string> </key>
<value>
<dictionary/>
</dictionary>
</state>
</object>
</value>
</item>
<item>
<key> <string>raw</string> </key>
<key> <string>_text</string> </key>
<value> <string encoding="cdata"><![CDATA[
<tal:block replace="nothing"\n
xmlns:tal="http://xml.zope.org/namespaces/tal"\n
xmlns:metal="http://xml.zope.org/namespaces/metal"\n
xmlns:i18n="http://xml.zope.org/namespaces/i18n"/>\n
<tal:block define="dummy python: request.RESPONSE.setHeader(\'Content-Type\', \'text/css;; charset=utf-8\')"/>\n
\n
/*____________________________________\n
\n
Default ERP5 Web CSS.\n
\n
Guidelines (how-to create a good css):\n
Guidelines (how-to create a good css):\n
* All measurements should be expressed with scalable units like em, ex, %.\n
* pt, px must be avoid expect for box borders and tricks related to borders (like position popup of Edit Tabs)\n
* pt, px must be avoid expect for box borders (not sure) and tricks related to borders (like position popup of Edit Tabs)\n
* Test your design and layout against font size increasing/decreasing.\n
* Test your html code semantics value by disabling all your css.\n
* Don\'t put styling directives in xhtml code.\n
......@@ -75,9 +74,10 @@ ____________________________________*/\n
margin: 0;\n
}\n
\n
body {\n
/* width: 85%;*/\n
margin: 0 auto;\n
html {\n
/* XXX width: 85%; work with current layout technic but, background should be changed */\n
margin-right: auto;\n
margin-left: auto;\n
}\n
\n
.clear {clear: both}\n
......@@ -98,16 +98,6 @@ ul {\n
display: none;\n
}\n
\n
/* emulate <center> */\n
.centeredContent {\n
width: 100%;\n
text-align: center;\n
}\n
*.centeredContent * {\n
margin-left: auto;\n
margin-right: auto;\n
}\n
\n
p {\n
margin: 1em 0;\n
text-align: justify;\n
......@@ -119,48 +109,113 @@ span.validated {color: #078307}\n
span.invalidated {color: #ab0303}\n
span.cancelled {color: #ccc}\n
\n
/* Emulate <center> html tag.\n
** This class is called \'centered\' to not interfer with the \'center\' group\n
** used in erp5_xhtml_style positionning.\n
*/\n
.centered {\n
width: 100%;\n
text-align: center;\n
}\n
\n
*.centered * {\n
margin-left: auto;\n
margin-right: auto;\n
}\n
\n
/* General Layout\n
Layout technic based on http://en.wikipedia.org/skins-1.5/monobook/main.css?9\n
Layout technic used here doesn\'t depend of content ordering, but will not work with IE (because of poor CSS support).\n
----------------------------------------------- */\n
\n
\n
/* General Layout.\n
** Layout technic based on http://alistapart.com/articles/holygrail/\n
-----------------------------------------------*/\n
\n
<tal:block tal:replace="nothing">\n
/* The first global form can be used as a global wrapper */\n
body > form#main_form {\n
padding-right: 1em; /* inter-column space */\n
padding-left: 1em; /* inter-column space */\n
margin-left: 16em; /* form#main_form > div column margin-left */\n
margin-left: 16.4em; /* form#main_form > div column margin-left + inter column space + 4 *border width (.1em) */\n
position: relative;\n
z-index: 2;\n
}\n
\n
/* Default layout for form groups (sidebar actually) */\n
form#main_form > div {\n
border: .1em solid #aaa;\n
border: .1em solid #aaa; /* here is a border width (.1em) used to calculate positionning */\n
margin-bottom: 1em; /* space between groups */\n
margin-left: -16em; /* = -(div.width + 1.1 ?) */\n
margin-left: -16.4em; /* = -(div.width + inter column space + 4 *border width (.1em) ) */\n
width: 15em; /* XXX CONSTANT !! */\n
}\n
\n
/* Undo border styling for main content */\n
form#main_form > div.main_content {\n
border: 0;\n
/*margin-top: 4em; not needed normally */\n
/*margin-top: 4em; not needed normally: this is part of the header. (and this cause some bottom hidding in konqueror) */\n
width: 100%;\n
float: right;\n
}\n
\n
</tal:block>\n
\n
\n
div.content {\n
background: #fff;\n
/* XXX is this border an issue ? border: .1em solid #ccc; here is a border width (.1em) used to calculate positionning */\n
}\n
\n
\n
/* Define some constant to make the css flexible without pain */\n
<tal:block\n
define="unit python: \'px\';\n
LC_fullwidth python: 200;\n
LC_width python: 180;\n
LC_padding python: 10;\n
CC_padding python: 40;\n
RC_fullwidth python: 150;\n
RC_width python: 130;\n
RC_padding python: 10;\n
">\n
body {\n
padding-left: <tal:block replace="python: (\'%s%s\') % (LC_fullwidth, unit)"/>;\n
padding-right: <tal:block replace="python: (\'%s%s\') % (RC_fullwidth + CC_padding, unit)"/>;\n
min-width: <tal:block replace="python: (\'%s%s\') % (LC_fullwidth + CC_padding, unit)"/>;\n
}\n
\n
form#main_form > div#footer,\n
form#main_form > div#header /* XXX Is header working ?? */\n
{\n
margin-left: <tal:block replace="python: (\'-%s%s\') % (LC_fullwidth, unit)"/>;\n
margin-right: <tal:block replace="python: (\'-%s%s\') % (RC_fullwidth + CC_padding, unit)"/>;\n
}\n
\n
form#main_form > div.sidebar,\n
form#main_form > div.main_content {\n
position: relative;\n
float: left;\n
}\n
\n
form#main_form > div.main_content {\n
padding: 0 20px;\n
width: 100%;\n
}\n
\n
form#main_form > div.left {\n
width: <tal:block replace="python: (\'%s%s\') % (LC_width, unit)"/>;\n
padding: 0 <tal:block replace="python: (\'%s%s\') % (LC_padding, unit)"/>;\n
right: <tal:block replace="python: (\'%s%s\') % (LC_fullwidth + CC_padding, unit)"/>;\n
margin-left: -100%;\n
}\n
\n
form#main_form > div.right {\n
width: <tal:block replace="python: (\'%s%s\') % (RC_width, unit)"/>;\n
padding: 0 <tal:block replace="python: (\'%s%s\') % (RC_padding, unit)"/>;\n
margin-right: -100%;\n
}\n
\n
\n
form#main_form > div.footer {\n
clear: both;\n
}\n
</tal:block>\n
\n
\n
\n
......@@ -168,12 +223,13 @@ form#main_form > div.main_content {\n
----------------------------------------------- */\n
\n
/* Default layout for form web widgets */\n
\n
form#main_form > div > div.field {\n
background: #fff url(erp5-website-field.png) top repeat-x;\n
border: 1px solid #ccc;\n
color: #666;\n
margin: .3em;\n
padding: .5em;\n
/* margin: .3em;\n
padding: .5em; XXX break new layout technic */\n
}\n
\n
form#main_form > div > div.field label {\n
......@@ -183,21 +239,19 @@ form#main_form > div > div.field label {\n
\n
/* Special layout for logo group */\n
\n
form#main_form > div.logo {\n
border: 0;\n
form#main_form div.field.logo {\n
padding: 2em 0 0;\n
}\n
form#main_form > div.logo .field {\n
border: 0;\n
background: transparent;\n
}\n
div.logo div.field > label {\n
\n
div.field.logo > label {\n
display: none;\n
}\n
\n
\n
/* Special layout for search bar group: move it top right\n
*/\n
<tal:block tal:replace="nothing">\n
/* Special layout for search bar group: move it top right */\n
form#main_form > div.searchBar {\n
position: absolute;\n
z-index: 200;\n
......@@ -221,6 +275,7 @@ div.searchBar > div.field > div.input {\n
float: left;\n
margin: 0 .5em;\n
}\n
</tal:block>\n
\n
\n
\n
......@@ -235,8 +290,13 @@ body {\n
body, input, textarea, select, table {\n
color: #333;\n
font-family: Sans, Verdana, Tahoma, Georgia, Geneva, Arial, sans-serif;\n
font-size: 8pt; /* XXX font-size should not be expressed in pt unit */\n
line-height: 1.5em;\n
font-size: 8pt; /* XXX font-size should not be expressed in pt unit.\n
** This unit is quite convinient actually because it scale well\n
** in any browser on font resizing.\n
*/\n
line-height: 1.5em; /* Let the content breathe ! This reduce the density of\n
** paragraph and make the text easier to read.\n
*/\n
}\n
\n
.code, code {\n
......@@ -270,7 +330,7 @@ input, textarea {\n
}\n
\n
input.button, input[type="submit"] {\n
/* XXX is this case happend in current web implementation ? */\n
/* XXX Is this case happend in current web implementation ? */\n
background-color: #fff url(erp5-website-button.png) bottom repeat-x;\n
}\n
\n
......@@ -295,7 +355,10 @@ button:hover {\n
border-color: #9abdb7;\n
}\n
\n
\n
\n
/* Default Listbox styling\n
** TODO: change colors to have better integration in default erp5 web theme.\n
----------------------------------------------- */\n
.ListSummary table {\n
display: none;\n
......@@ -319,14 +382,13 @@ button:hover {\n
\n
\n
\n
/* Content zone form styling (apply for editable mode and read only mode within the content zone)\n
/* Content zone form styling (apply for editable mode and read\n
** only mode within the content zone).\n
** TODO: Change form rendering to let the field go below the label\n
** if there is not enought width to display them inline.\n
** TODO: Use dtml variables to define dynamiccaly label width.\n
----------------------------------------------- */\n
\n
div.content {\n
background: #fff;\n
border: 1px solid #ccc;\n
}\n
\n
div.content div.input {\n
margin-left: 11.5em; /* = div.content label width + 0.5 of margin */\n
}\n
......@@ -381,9 +443,9 @@ div.content fieldset.bottom div.input {\n
\n
\n
/* Edit tabs styling.\n
Edit tabs are another part of admin stuffs and\n
should respect other admin design convention\n
(colors, etc...) to keep the UI consistent.\n
** Edit tabs are another part of admin stuffs and\n
** should respect other admin design convention\n
** (colors, etc...) to keep the UI consistent.\n
----------------------------------------------- */\n
\n
div.actions {\n
......@@ -452,8 +514,9 @@ div.actions button {\n
\n
\n
\n
/* Custom web Listbox styling\n
----------------------------------------------- */\n
/* Custom web Listbox styling.\n
** TODO: change colors to have better integration in default erp5 web theme.\n
-----------------------------------------------*/\n
\n
table.listbox, table.listbox tr, table.listbox td, table.listbox th {\n
border: 0;\n
......@@ -500,7 +563,7 @@ table.listbox thead th {\n
\n
table.listbox tbody td.externalLink a, table.listbox tbody th.externalLink a {\n
text-decoration: none;\n
background: transparent url(\'pictures/external-link.png\') center right no-repeat;\n
background: transparent url(erp5-website-external-link.png) center right no-repeat;\n
padding-right: 15px;\n
color: #637dc1;\n
}\n
......@@ -594,40 +657,15 @@ div.content > fieldset.webcontent span.summary {\n
font-style: italic;\n
}\n
\n
/* Extra content (metadata, related document box, etc...) styling */\n
\n
/* Technic 1 : absolute positionning\n
\n
div.content {\n
position:relative;\n
}\n
\n
div.content > fieldset.webcontent.extra {\n
position: absolute;\n
top: 0;\n
right: 0;\n
background: #ff0;\n
}*/\n
\n
\n
/* Technic 2 : float positionning */\n
\n
/*div.content {\n
position:relative;\n
}*/\n
\n
/*div.content > fieldset.webcontent.bottom {\n
position: relative;\n
}*/\n
\n
\n
/*div.content > fieldset.webcontent.bottom,*/\n
/* Extra content (metadata, related document box, etc...) styling.\n
----------------------------------------------- */\n
\n
div.content > fieldset.webcontent.bottom div {\n
display: inline;\n
}\n
\n
\n
div.content > fieldset.webcontent.extra {\n
float: right;\n
clear: right;\n
......@@ -641,14 +679,21 @@ div.content > fieldset.webcontent.extra {\n
\n
div.content > fieldset.webcontent.extra label:after {\n
content: ":";\n
}\n
}
]]></string> </value>
</item>
<item>
<key> <string>sidebar-em-width</string> </key>
<value> <string>16.2</string> </value>
<key> <string>content_type</string> </key>
<value> <string>text/html</string> </value>
</item>
<item>
<key> <string>expand</string> </key>
<value> <int>0</int> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>erp5_web_default.css</string> </value>
</item>
<item>
<key> <string>title</string> </key>
......
bt5/erp5_web/SkinTemplateItem/portal_skins/erp5_web_default_theme/erp5_web_default_layout.xml
View file @ 787fd1ed
......@@ -61,10 +61,9 @@
<key> <string>group_list</string> </key>
<value>
<list>
<string>logo centeredContent</string>
<string>left sidebar</string>
<string>right sidebar</string>
<string>searchBar</string>
<string>footer</string>
</list>
</value>
</item>
......@@ -73,20 +72,21 @@
<value>
<dictionary>
<item>
<key> <string>left sidebar</string> </key>
<key> <string>footer</string> </key>
<value>
<list>
<string>breadcrumb</string>
<string>sub_web_object_list</string>
<string>sub_document_list</string>
<string>login_box</string>
</list>
</value>
</item>
<item>
<key> <string>logo centeredContent</string> </key>
<key> <string>left sidebar</string> </key>
<value>
<list>
<string>website_logo</string>
<string>breadcrumb</string>
<string>sub_web_object_list</string>
<string>sub_document_list</string>
</list>
</value>
</item>
......@@ -94,17 +94,9 @@
<key> <string>right sidebar</string> </key>
<value>
<list>
<string>your_searchable_text</string>
<string>about_box</string>
<string>latest_news</string>
<string>login_box</string>
</list>
</value>
</item>
<item>
<key> <string>searchBar</string> </key>
<value>
<list>
<string>your_searchable_text</string>
</list>
</value>
</item>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7