Skip to content

M
mynij
Commit e88ef252 authored by Alain Takoudjou's avatar Alain Takoudjou
Browse files
Options

erp5_web_mynij_search: Improve application design

parent a6d461e9
Hide whitespace changes
Inline Side-by-side
Showing with 329 additions and 44 deletions
bt5/erp5_web_mynij_search/PathTemplateItem/web_page_module/gadget_erp5_mynij_panel_html.html
View file @ e88ef252
......@@ -13,6 +13,7 @@
<script src="renderjs.js" type="text/javascript"></script>
<script src="handlebars.js" type="text/javascript"></script>
<script src="gadget_global.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="mynij-style.css">
<script id="panel-template-header" type="text/x-handlebars-template">
<div data-role="header" class="ui-bar-inherit">
......
bt5/erp5_web_mynij_search/PathTemplateItem/web_page_module/gadget_erp5_mynij_panel_html.xml
View file @ e88ef252
......@@ -238,7 +238,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>989.49025.8435.13312</string> </value>
<value> <string>989.49043.15174.20121</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -256,7 +256,7 @@
</tuple>
<state>
<tuple>
<float>1612271233.89</float>
<float>1619607375.33</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_web_mynij_search/PathTemplateItem/web_page_module/gadget_erp5_mynij_panel_js.xml
View file @ e88ef252
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>989.7259.5245.62788</string> </value>
<value> <string>990.3854.51788.45158</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1609768857.13</float>
<float>1614020347.31</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_web_mynij_search/PathTemplateItem/web_page_module/gadget_erp5_page_mynij_search_html.html
View file @ e88ef252
......@@ -13,10 +13,16 @@
</div>
<div id="search_div">
<form id="search_bar">
<input type="search" id="search_input" name="search" value>
<select id="select_index"></select>
<button class="search-button ui-btn-icon-notext ui-icon-search" type="submit">
</button>
<p class="inp-wrap search-wrap">
<input type="search" name="search" id="search_input" class="input-search" />
</p>
<p class="inp-wrap cat-wrap">
<select id="select_index" class="index-select">
</select>
</p>
<p class="inp-wrap submit-wrap">
<button class="btn-search" type="submit">Search</button>
</p>
</form>
</div>
<div id="gadget_result" data-gadget-url="gadget_mynij_result.html"
......
bt5/erp5_web_mynij_search/PathTemplateItem/web_page_module/gadget_erp5_page_mynij_search_html.xml
View file @ e88ef252
......@@ -242,7 +242,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>987.57828.2250.21794</string> </value>
<value> <string>991.43171.61051.50124</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -260,7 +260,7 @@
</tuple>
<state>
<tuple>
<float>1605519284.37</float>
<float>1619531070.14</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_web_mynij_search/PathTemplateItem/web_page_module/gadget_mynij_style.css.css
View file @ e88ef252
......@@ -14,8 +14,9 @@
}
#select_index {
max-width: 20%;
margin-left: 5px;
width: calc(100% + 1px);
margin-left: -1px;
border: 1px solid #FF1979;
}
.search {
......@@ -41,6 +42,10 @@ i.info {
font-size: .9em;
}
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button[data-i18n="Filter"] {
display: none;
}
@media (max-width: 600px) {
#mynij-results > li, #searx-results > li {
width: 100%;
......@@ -164,8 +169,7 @@ div[data-gadget-scope='panel'] .ui-content {
/** Tabs CSS **/
.tabs {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
transform: translateX(-50%);
position: relative;
background: white;
padding-top: 20px;
......@@ -218,7 +222,6 @@ div[data-gadget-scope='panel'] .ui-content {
height: 1.2em;
vertical-align: bottom;
margin-right: 0.2em;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
......@@ -231,7 +234,6 @@ div[data-gadget-scope='panel'] .ui-content {
.tabs .slider {
position: relative;
width: 50%;
-webkit-transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}
.tabs .slider .indicator {
......@@ -255,16 +257,11 @@ div[data-gadget-scope='panel'] .ui-content {
}
.tabs .content section {
display: none;
-webkit-animation-name: content;
animation-name: content;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
animation-name: content;
animation-direction: normal;
animation-duration: 0.3s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
line-height: 1.4;
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
......@@ -275,8 +272,7 @@ div[data-gadget-scope='panel'] .ui-content {
fill: #428bff;
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
transform: translateX(0%);
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) {
display: block;
......@@ -289,8 +285,7 @@ div[data-gadget-scope='panel'] .ui-content {
fill: #428bff;
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider {
-webkit-transform: translateX(100%);
transform: translateX(100%);
transform: translateX(100%);
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) {
display: block;
......@@ -308,8 +303,7 @@ div[data-gadget-scope='panel'] .ui-content {
}
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider {
-webkit-transform: translateX(200%);
transform: translateX(200%);
transform: translateX(200%);
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) {
display: block;
......@@ -327,8 +321,7 @@ div[data-gadget-scope='panel'] .ui-content {
}
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .slider {
-webkit-transform: translateX(300%);
transform: translateX(300%);
transform: translateX(300%);
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .content > section:nth-child(4) {
display: block;
......@@ -336,25 +329,21 @@ div[data-gadget-scope='panel'] .ui-content {
@-webkit-keyframes content {
from {
opacity: 0;
-webkit-transform: translateY(5%);
transform: translateY(5%);
transform: translateY(5%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
transform: translateY(0%);
}
}
@keyframes content {
from {
opacity: 0;
-webkit-transform: translateY(5%);
transform: translateY(5%);
transform: translateY(5%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
transform: translateY(0%);
}
}
@media (max-width: 1000px) {
......@@ -377,6 +366,28 @@ div[data-gadget-scope='panel'] .ui-content {
margin-top: 20px;
}
}
@media (min-width: 1300px) {
.tabs .content {
display: flex;
}
.section-result {
width: 50%;
}
#mynij-results > li, #searx-results > li {
max-width: auto;
width: 100%;
}
.tabs .slider {
display: none;
}
.tabs ul li label {
cursor: default;
}
.tabs .content section {
display: block !important;
}
}
/** END Tabs CSS **/
/* Building indicator */
......@@ -482,3 +493,270 @@ table {
background-color: #f9fafd;
}
/* END Table style */
div[data-gadget-scope='panel'] {
left: -186pt;
}
div[data-gadget-scope='header'] .ui-header {
color: #545558;
}
div[data-gadget-scope='panel'].visible {
transform: translate3d(186pt, 0, 0);
}
div[data-gadget-scope='panel'] {
box-shadow: 5px 0 5px rgb(0 0 0 / 15%);
}
div[data-gadget-scope='header'] .ui-header {
transition: none;
transform: none;
/*box-shadow: 0 0 16px 0 rgb(108 126 131 / 8%), 0 0px 4px 0 rgb(0 59 77 / 18%);*/
background-color: white;
}
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls .ui-icon-bars {
width: 8em;
}
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button, div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
/*background-color: #085078;*/
background: #f8f8f8;
}
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 button, div[data-gadget-scope='header'] .ui-header a {
color: #424748
}
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button:hover, div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:hover, div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button:active, div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active {
color: #085078;
background: none;
}
div[data-gadget-scope='header'] .ui-header button:hover, div[data-gadget-scope='header'] .ui-header a:hover, div[data-gadget-scope='header'] .ui-header button:active, div[data-gadget-scope='header'] .ui-header a:active {
background-color: transparent;
color: #1075ae;
text-decoration: none;
}
div[data-gadget-scope='header'] .ui-header, div[data-gadget-scope='header'] .ui-header h1 {
background: #f8f8f8;
}
div[data-gadget-scope='panel'] {
background-color: #1d1f32;
}
div[data-gadget-scope='panel'] div[data-role="header"] button, div[data-gadget-scope='panel'] div[data-role="header"] a {
background-color: transparent;
}
div[data-gadget-scope='panel'] dl {
background-color: #151728;
color: #767a7d;
}
div[data-gadget-scope='panel'] ul li a:hover, div[data-gadget-scope='panel'] ul li a:active {
background-color: #2f3147;
}
div[data-gadget-scope='panel'] dl dd a:hover, div[data-gadget-scope='panel'] dl dd a:active {
background-color: rgb(255 255 255 / 55%);
}
div[data-gadget-scope='header'] .ui-header .ui-subheader {
background: white;
}
@media not screen and (max-width: 85em) {
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button[name="panel"], div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a[name="panel"] {
display: block;
}
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='panel'] div[data-role="header"] button[data-i18n="Close"], div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='panel'] div[data-role="header"] a[data-i18n="Close"] {
display: block;
}
div[data-role='page']:not(.desktop-panel-hidden) .gadget-content {
margin-left: inherit;
}
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header h1 {
flex: 1;
background: #f8f8f8;
}
div[data-gadget-scope='header'] .ui-header .ui-subheader {
text-align: left;
flex: 1 100%;
}
}
@media not screen and (min-width: 45em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls .ui-icon-bars {
width: auto;
}
}
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (min-width: 45em) {
div[data-gadget-scope='header'] .ui-header ul li {
border-left: 1px solid #e0e0e0;
}
}
.inp-wrap {
display: inline-block;
}
/* very messy "grid" styles */
.input-search, .index-select, .btn-search {
vertical-align: middle;
height: 3rem;
font-size: 1.1rem;
}
.search-wrap {
width: 70%;
}
.cat-wrap {
width: 20%;
}
.submit-wrap {
width: 10%;
}
/* input and label styles*/
.input-search {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 100%;
}
.index-select,
.input-search,
#search_div input[type=search]{
transition: box-shadow 0.2s ease-in-out;
border: 0;
padding: 0 0 0 0.5em;
}
#search_div input[type=search] {
border: 1px solid #FF1979;
border-radius: 0;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 100%;
}
#search_bar .input-search:focus,
#search_bar .index-select:focus {
outline: none;
border: 1px solid #ffc519;
box-shadow: inset 0 0 0 5px #FFC519;
}
/* select menu styles */
.cat-wrap {
padding: 0;
position: relative;
z-index: 1;
}
select {
padding: 0.5rem 2rem 0.5rem 0.75rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
}
option {
margin: 0.6em 0;
}
/* search button and icon styles */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance:none;
}
/* remove mozilla button styles */
button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
.btn-search {
text-transform: uppercase;
font-size: 1.1rem;
border: 0;
padding: 0 0.3em 0 0;
background: #FF1979;
color: white;
font-weight: 600;
transition: background 0.25s ease-in-out;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width: 100%;
}
#search_bar .btn-search:hover,
#search_bar .btn-search:focus,
#search_bar .btn-search:active {
outline: 0;
background: #FFC519;
color: #232323;
}
.btn-search:active {
transform: translateY(1px);
}
@media screen and (max-width: 820px) {
.search-label {
border-radius: 0;
}
.cat-wrap {
width: 30%;
}
.submit-wrap {
display: none;
}
.btn {
border-radius: 5px;
}
.search-form {
padding: 0 1rem;
}
}
@media screen and (max-width: 560px) {
.cat-wrap {
width: 40%;
margin-bottom: 0.5rem;
}
.search-wrap {
width: 60%;
margin-bottom: 0.5rem;
}
#select_index {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
}
\ No newline at end of file
bt5/erp5_web_mynij_search/PathTemplateItem/web_page_module/gadget_mynij_style.css.xml
View file @ e88ef252
......@@ -242,7 +242,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>989.49045.17557.19575</string> </value>
<value> <string>991.44537.19963.26094</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -260,7 +260,7 @@
</tuple>
<state>
<tuple>
<float>1612280937.44</float>
<float>1619607458.67</float>
<string>UTC</string>
</tuple>
</state>
......
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