Skip to content

erp5
erp5
Commit a7497498 authored by Romain Courteaud's avatar Romain Courteaud 🐙
Browse files
Options

[erp5_web_renderjs_ui] Improve main page UI 

Reduce field padding.
Move home link.
parent fd3d881f
Show whitespace changes
Inline Side-by-side
Showing with 152 additions and 78 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.css
View file @ a7497498
......@@ -265,7 +265,8 @@ label {
display: block;
color: #777777;
}
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]) {
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]),
textarea {
width: 100%;
margin: 0;
padding: 0.4em;
......@@ -283,10 +284,13 @@ input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio])
outline-offset: 0;
}
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):active,
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus {
textarea:active,
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus,
textarea:focus {
outline-offset: 0;
}
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus {
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]):focus,
textarea:focus {
-webkit-box-shadow: 0 0 12px #3388cc;
-moz-box-shadow: 0 0 12px #3388cc;
box-shadow: 0 0 12px #3388cc;
......@@ -333,11 +337,13 @@ textarea {
height: 15em;
width: 100%;
margin: 0;
/*
padding: 0.5em;
border: none;
background-color: #FFFFFF;
color: #1F1F1F;
background-color: @colortextboxbackground;
color: @colortextboxforeground;
border-radius: 0;
*/
font-family: "Courier New", Courier, monospace;
}
::-webkit-input-placeholder {
......@@ -431,23 +437,27 @@ div[data-gadget-scope='panel'] {
}
}
div[data-gadget-scope='panel'] div[data-role="header"] {
background-color: #252525;
color: #fff;
display: flex;
justify-content: space-between;
border-color: rgba(255, 255, 255, 0.3);
border-width: 0 0 1px 0;
border-style: solid;
}
div[data-gadget-scope='panel'] div[data-role="header"] > div:first-of-type {
border-color: rgba(255, 255, 255, 0.3);
justify-content: flex-start;
/*
> div {
&:first-of-type {
border-color: rgba(255,255,255, .3);
border-style: solid;
border-width: 0 1px 0 0;
}
div[data-gadget-scope='panel'] div[data-role="header"] > div:last-of-type {
border-color: rgba(255, 255, 255, 0.3);
}
&:last-of-type {
border-color: rgba(255,255,255, .3);
border-style: solid;
border-width: 0 0 0 1px;
}
}
*/
}
div[data-gadget-scope='panel'] div[data-role="header"] .panel_img {
text-align: center;
flex: 1;
height: 2.6em;
}
div[data-gadget-scope='panel'] div[data-role="header"] button,
div[data-gadget-scope='panel'] div[data-role="header"] a {
......@@ -455,7 +465,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] a {
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
background-color: #252525;
background-color: #444444;
display: block;
line-height: 2.6em;
color: #FFFFFF;
......@@ -481,8 +491,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before {
}
div[data-gadget-scope='panel'] img {
text-align: left;
line-height: 2.6em;
max-height: 2.6em;
height: 100%;
}
div[data-gadget-scope='panel'] ul {
margin-top: 2.6em;
......@@ -495,6 +504,7 @@ div[data-gadget-scope='panel'] ul li a {
border-style: solid;
*/
padding: .4em;
padding-left: 1em;
display: block;
text-overflow: ellipsis;
overflow: hidden;
......@@ -595,6 +605,14 @@ div[data-gadget-scope='header'] .ui-header a:active {
background: -o-linear-gradient(bottom, #85D8CE, #0E81C2);
background: -ms-linear-gradient(bottom, #85D8CE, #0E81C2);
}
div[data-gadget-scope='header'] .ui-header > .ui-btn-left button,
div[data-gadget-scope='header'] .ui-header > .ui-btn-left a {
border-right: 1px solid rgba(255, 255, 255, 0.55);
}
div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
border-left: 1px solid rgba(255, 255, 255, 0.55);
}
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
display: block;
......@@ -635,8 +653,6 @@ div[data-gadget-scope='header'] .ui-header h1 {
line-height: 2.6em;
flex: 1;
color: #FFFFFF;
border-left: 1px solid rgba(255, 255, 255, 0.55);
border-right: 1px solid rgba(255, 255, 255, 0.55);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
......@@ -813,8 +829,7 @@ div[data-gadget-scope='header'] .ui-header ul {
}
}
.gadget-content .ui-field-contain {
margin-bottom: 2em;
padding: 0.8em 0;
padding: 0.5em 0;
}
.gadget-content .ui-field-contain div {
width: 100%;
......@@ -824,8 +839,6 @@ div[data-gadget-scope='header'] .ui-header ul {
}
.gadget-content .ui-content-title {
font-size: 150%;
margin-top: 1em;
margin-bottom: 1em;
}
.gadget-content ul.document-listview li {
border-color: rgba(0, 0, 0, 0.3);
......@@ -871,17 +884,24 @@ div[data-gadget-scope='header'] .ui-header ul {
border-bottom-style: solid;
}
@media only screen and (min-width: 62em) {
.gadget-content .left,
.gadget-content .right,
.gadget-content .center,
.gadget-content .bottom {
.gadget-content {
/*
.left, .right, .center, .bottom {
padding: 0 2%;
}
*/
}
.gadget-content .left,
.gadget-content .right {
vertical-align: top;
display: inline-block;
width: 45%;
width: 50%;
}
.gadget-content .left {
padding-right: 2%;
}
.gadget-content .right {
padding-left: 2%;
}
}
@media only screen and (min-width: 28em) and (max-width: 62em) {
......@@ -905,12 +925,8 @@ div[data-gadget-scope='header'] .ui-header ul {
}
}
@media only screen and (max-width: 28em) {
.gadget-content {
/* make sure there is a bottom border */
}
.gadget-content .ui-field-contain {
padding: 0.8em 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
}
.gadget-content form label span {
......@@ -933,7 +949,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
border-bottom: 2px solid rgba(0, 0, 0, 0.14902);
}
.document_table .ui-table-header h1 {
opacity: .3;
color: #777777;
flex: 2;
align-self: flex-end;
}
......@@ -976,7 +992,9 @@ div[data-gadget-scope='erp5_searchfield'] button {
background-color: #eeeeee;
background-color: rgba(0, 0, 0, 0.04);
color: #777777;
text-align: center;
}
.document_table table thead tr th {
padding: 0.4em 0.25em;
}
@media only screen and (max-width: 28em) {
.document_table table thead {
......@@ -1024,10 +1042,16 @@ div[data-gadget-scope='erp5_searchfield'] button {
background: #e4ebf1;
}
@media only screen and (min-width: 62em), only screen and (min-width: 28em) and (max-width: 62em) {
.document_table table tbody td:not(:last-child),
.document_table table tbody th:not(:last-child) {
.document_table table tbody {
/*
// Column border
td, th {
&:not(:last-child) {
border-right: 1px solid #DDD;
}
}
*/
}
.document_table table tbody a {
display: block;
padding: 0.4em 0.25em;
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.xml
View file @ a7497498
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>952.12740.62273.29252</string> </value>
<value> <string>952.14349.56496.11042</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1467271547.98</float>
<float>1467291947.42</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_panel_html.html
View file @ a7497498
......@@ -18,19 +18,22 @@
<button data-i18n="Close" class="ui-btn ui-btn-icon-notext ui-icon-delete">Close</button>
</div>
</div>
<div class="panel_img">
<img class="ui-title" alt="ERP5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJcAAAA/CAMAAADaDqrIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMEM5NUE4MzQ5NjQxMUUzOUZEQUU2NUY1RTI1RjdCQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMEM5NUE4NDQ5NjQxMUUzOUZEQUU2NUY1RTI1RjdCQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAwQzk1QTgxNDk2NDExRTM5RkRBRTY1RjVFMjVGN0JCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAwQzk1QTgyNDk2NDExRTM5RkRBRTY1RjVFMjVGN0JCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+J9MJsAAAAwBQTFRF///////M//+Z//9m//8z//8A/8z//8zM/8yZ/8xm/8wz/8wA/5n//5nM/5mZ/5lm/5kz/5kA/2b//2bM/2aZ/2Zm/2Yz/2YA/zP//zPM/zOZ/zNm/zMz/zMA/wD//wDM/wCZ/wBm/wAz/wAAzP//zP/MzP+ZzP9mzP8zzP8AzMz/zMzMzMyZzMxmzMwzzMwAzJn/zJnMzJmZzJlmzJkzzJkAzGb/zGbMzGaZzGZmzGYzzGYAzDP/zDPMzDOZzDNmzDMzzDMAzAD/zADMzACZzABmzAAzzAAAmf//mf/Mmf+Zmf9mmf8zmf8Amcz/mczMmcyZmcxmmcwzmcwAmZn/mZnMmZmZmZlmmZkzmZkAmWb/mWbMmWaZmWZmmWYzmWYAmTP/mTPMmTOZmTNmmTMzmTMAmQD/mQDMmQCZmQBmmQAzmQAAZv//Zv/MZv+ZZv9mZv8zZv8AZsz/ZszMZsyZZsxmZswzZswAZpn/ZpnMZpmZZplmZpkzZpkAZmb/ZmbMZmaZZmZmZmYzZmYAZjP/ZjPMZjOZZjNmZjMzZjMAZgD/ZgDMZgCZZgBmZgAzZgAAM///M//MM/+ZM/9mM/8zM/8AM8z/M8zMM8yZM8xmM8wzM8wAM5n/M5nMM5mZM5lmM5kzM5kAM2b/M2bMM2aZM2ZmM2YzM2YAMzP/MzPMMzOZMzNmMzMzMzMAMwD/MwDMMwCZMwBmMwAzMwAAAP//AP/MAP+ZAP9mAP8zAP8AAMz/AMzMAMyZAMxmAMwzAMwAAJn/AJnMAJmZAJlmAJkzAJkAAGb/AGbMAGaZAGZmAGYzAGYAADP/ADPMADOZADNmADMzADMAAAD/AADMAACZAABmAAAzAAAAHHa7K3/AOojESZHJWZvNaKTSd63Whrbblb/fpMjks9Howtrt4e320uTx8Pb6AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAdfKHSQAAAOh0Uk5T////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ALItoLoAAAJkSURBVHja7NlZsqsgEABQ979C5kGGddxo4os0Q8BAynoFn0nUU23TNGRB9xzLdE3XdE3XdP2fLnIzF2VSrsYvC72HizAh9eZ5DVuOl15S4/jWwC+kDC8HPzCSJVHcRY8QXV2PwQuujUYTsYrvYlBv1yKLrsXHsPghnvR3Lazoip/JKuwpF8sm6/bY01Ow9CBlTXi53PNoRcUktEZT1NV1PIPnXAjtMJIMlzerFIzU1dVWF7aPj3Tetae4gjdxktG2et/qQjJ4kZFrv6ED4bK4eR1qduHzvEi4+PbGwD0EGu9CQQLFrv1F4jBc6BcuW3YhkPiPX1hOfxQvnHfh0HVMRqc4HuqiQf5k3mO6dq1s8Hx0H/Le5kq9YaNcxAcrZLpOvAv+ClcgNcZFtnrucd5Fwx4mXj0drnbBYXMuJmFDAV3Uhm4qlbHh3ddOrmholHNxFTVC+xTl2mf6pI4uVe4LwSp0DPGOmh/hAnM94bKZjkHlWuiLeV+cTab4luMKk82wy/Px2fLJskvKUk03hRf9RZ0wiYiZ4uVwVwTb9E71y0XboTYXGuTaa33Y47W5zBjXM3P11y7TfR2ycFdxyaW7uwSc5m0un9ix91m3TWJfW+1ijfW+wcVAfjS5dOP62LyvZZdcLHnA1MkFAtbgwq+Vm47po8OA1buwyy/a1ec5urzveAes2sV8kfW963mFaHNhlT0b6+Yi5+StchH1CtaK0ThXELDPLiyOPZHldzm/J1z9O/B14g7/K+DtkP7U8ivSeD4xaPCTSQvy+YIfubZWzRgtRe1iMP+3mq7pmq7p6jv+BBgAPrgi/TzwWzkAAAAASUVORK5CYII="/>
<div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
</div>
<!--div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
<div class="ui-controlgroup-controls">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-home" data-i18n="Home">Home</a>
</div>
</div>
</div-->
</div>
</script>
<script id="panel-template-body" type="text/x-handlebars-template">
<div class="ui-content">
<ul data-role="listview" class="ui-listview" data-enhanced="true">
<li class="ui-first-child"><a href="{{module_href}}" class="ui-btn ui-btn-icon-left ui-icon-puzzle-piece" data-i18n="Modules" accesskey="m">Modules</a></li>
<li class="ui-first-child"><a href="#" class="ui-btn ui-btn-icon-left ui-icon-home" data-i18n="Home">Home</a></li>
<li><a href="{{module_href}}" class="ui-btn ui-btn-icon-left ui-icon-puzzle-piece" data-i18n="Modules" accesskey="m">Modules</a></li>
<li><a href="{{worklist_href}}" class="ui-btn ui-btn-icon-left ui-icon-clipboard" data-i18n="Worklists" accesskey="w">Worklists</a></li>
<li><a href="{{history_href}}" class="ui-btn ui-btn-icon-left ui-icon-history" data-i18n="History" accesskey="h">History</a></li>
<li><a href="{{search_href}}" class="ui-btn ui-btn-icon-left ui-icon-search" data-i18n="History" accesskey="s">Search</a></li>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_panel_html.xml
View file @ a7497498
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>952.1567.4220.17373</string> </value>
<value> <string>952.14137.61057.25617</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1467031987.88</float>
<float>1467279122.77</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
View file @ a7497498
......@@ -315,7 +315,7 @@ label {
color: @grey;
}
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]) {
input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]):not([type=color]), textarea {
width: 100%;
margin: 0;
......@@ -402,11 +402,13 @@ textarea {
height: 15em;
width: 100%;
margin: 0;
/*
padding: 0.5em;
border: none;
background-color: @colortextboxbackground;
color: @colortextboxforeground;
border-radius: 0;
*/
font-family: @monospace;
}
......@@ -514,16 +516,16 @@ div[data-gadget-scope='panel'] {
div[data-role="header"] {
background-color: #252525;
color: #fff;
// background-color: #252525;
// color: #fff;
display: flex;
justify-content: space-between;
justify-content: flex-start;
border-color: rgba(255,255,255, .3);
border-width: 0 0 1px 0;
border-style: solid;
// border-color: rgba(255,255,255, .3);
// border-width: 0 0 1px 0;
// border-style: solid;
/*
> div {
&:first-of-type {
border-color: rgba(255,255,255, .3);
......@@ -536,11 +538,18 @@ div[data-gadget-scope='panel'] {
border-width: 0 0 0 1px;
}
}
*/
.panel_img {
text-align: center;
flex: 1;
height: @headerheight;
}
button, a {
.hide_text();
background-color: #252525;
// XXX TODO: same color than panel background
background-color: #444444;
&::before {
float: left;
......@@ -572,8 +581,9 @@ div[data-gadget-scope='panel'] {
img {
text-align: left;
line-height: @headerheight;
max-height: @headerheight;
// line-height: @headerheight;
// max-height: @headerheight;
height: 100%;
// flex: 1;
}
......@@ -590,6 +600,7 @@ div[data-gadget-scope='panel'] {
border-style: solid;
*/
padding: .4em;
padding-left: 1em;
display: block;
// position: relative;
// text-align: left;
......@@ -727,7 +738,20 @@ div[data-gadget-scope='header'] .ui-header {
}
}
// XXX TODO: restore border to separate title from button/links
& > .ui-btn-left {
button, a {
border-right: 1px solid rgba(255, 255, 255, 0.55);
}
}
& > .ui-btn-right {
button, a {
border-left: 1px solid rgba(255, 255, 255, 0.55);
}
}
.ui-controlgroup-controls {
button, a {
display: block;
......@@ -768,8 +792,9 @@ div[data-gadget-scope='header'] .ui-header {
color: @white;
border-left: 1px solid rgba(255, 255, 255, 0.55);
border-right: 1px solid rgba(255, 255, 255, 0.55);
// XXX Restore border
// border-left: 1px solid rgba(255, 255, 255, 0.55);
// border-right: 1px solid rgba(255, 255, 255, 0.55);
// Do not put title on multi line in case of small screen
white-space: nowrap;
......@@ -900,6 +925,7 @@ div[data-gadget-scope='header'] .ui-header {
.gadget-content {
@media @desktop {
// Keep the panel always visible
margin-left: @panelwidth;
}
......@@ -921,9 +947,7 @@ div[data-gadget-scope='header'] .ui-header {
// Label
.ui-field-contain {
margin-bottom: 2em;
padding: 0.8em 0;
// margin: 0 0 12px 0;
padding: 0.5em 0;
div {
width: 100%;
......@@ -945,8 +969,8 @@ div[data-gadget-scope='header'] .ui-header {
.ui-content-title {
font-size: 150%;
margin-top: 1em;
margin-bottom: 1em;
// margin-top: 1em;
// margin-bottom: 1em;
}
......@@ -1002,13 +1026,22 @@ div[data-gadget-scope='header'] .ui-header {
}
@media @desktop {
/*
.left, .right, .center, .bottom {
padding: 0 2%;
}
*/
.left, .right {
vertical-align: top;
display: inline-block;
width: 45%;
width: 50%;
}
.left {
padding-right: 2%;
}
.right {
padding-left: 2%;
}
}
......@@ -1035,10 +1068,11 @@ div[data-gadget-scope='header'] .ui-header {
}
@media @smartphone {
/* make sure there is a bottom border */
.ui-field-contain {
padding: 0.8em 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
// make sure there is a bottom border
// XXX TODO: border should be visible only if not input
// border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
}
......@@ -1073,7 +1107,8 @@ div[data-gadget-scope='erp5_searchfield'] {
border-bottom: 2px solid rgba(0, 0, 0, 0.14902);
h1 {
opacity: .3;
// XXX TODO Same color than label
color: @grey;
flex: 2;
align-self: flex-end;
}
......@@ -1115,7 +1150,14 @@ div[data-gadget-scope='erp5_searchfield'] {
background-color: #eeeeee;
background-color: rgba(0, 0, 0, .04);
color: #777777;
text-align: center;
// XXX Same than cells
tr { th {
padding: 0.4em 0.25em;
}}
// text-align: center;
@media @smartphone {
display: none;
......@@ -1139,11 +1181,16 @@ div[data-gadget-scope='erp5_searchfield'] {
}
@media @desktop, @tablet {
/*
// Column border
td, th {
&:not(:last-child) {
border-right: 1px solid #DDD;
}
}
*/
a {
display: block;
padding: 0.4em 0.25em;
......
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