NetTalk Central
NetTalk Web Server => Web Server - Ask For Help => Topic started by: Alberto on July 17, 2020, 01:31:05 PM
-
Hi, I need to show a timeline of where and when is a paqage.
The number of lines is variable, max 8
But the problem I see is the blue image
Any hint?
Thanks
-
tengo algo similar pero horizontal, usó una variable tipo text con el atributo Allow xHTML y luego por código llenó la variable, ejemplo:
CLEAR(Loc:Pg)
p_web.ssv('Loc:Pg','')
CASE Bil3:BillofLadingStatus
OF 'P'
Loc:Pg = (p_web.AsciiToUTF('<<ol class="progtrckr if-large" data-progtrckr-steps="5"><13,10>'&|
' <<li class="progtrckr-done">IN-TRANSIT TO US TERMINAL<</li><13,10>'&|
' <<li class="progtrckr-todo">RECEIVED AT US TERMINAL<</li><13,10>'&|
' <<li class="progtrckr-todo">CONTAINER UNLOADED<</li><13,10>'&|
' <<li class="progtrckr-todo">IN-TRANSIT<</li><13,10>'&|
' <<li class="progtrckr-todo">DELIVERED<</li><13,10>'&|
'<</ol><13,10>'))
OF 'W'
Loc:Pg = (p_web.AsciiToUTF('<<ol class="progtrckr if-large" data-progtrckr-steps="5"><13,10>'&|
' <<li class="progtrckr-done">IN-TRANSIT TO US TERMINAL<</li><13,10>'&|
' <<li class="progtrckr-done">RECEIVED AT US TERMINAL<</li><13,10>'&|
' <<li class="progtrckr-todo">CONTAINER UNLOADED<</li><13,10>'&|
' <<li class="progtrckr-todo">IN-TRANSIT<</li><13,10>'&|
' <<li class="progtrckr-todo">DELIVERED<</li><13,10>'&|
'<</ol><13,10>'))
END
-
Very nice! :)
Care to show the CSS?
-
Genial, y como se ve en un celular?
Esta gente lo quiere vertical x eso.
-
Guys,
In English please.
We all want to learn.
Cheers,
Rene
-
Ah. Found code similar to Osquiabro's on Stack Overflow.
Also found a vertical example there, Alberto.
I'll attach both of them to this.
Rene - Alberto asked how Osquiabro's would look on a phone. His client is asking for vertical status bar.
Jane
-
Thanks Jane, its working...
-
hi Jane sorry for delay this is the css and michelis this is not compatible for mobile is a very old solutions but when have a time i modified for responsive:
ol.progtrckr {
display: table;
list-style-type: none;
margin: 0;
padding: 0;
table-layout: fixed;
width: 100%;
}
ol.progtrckr li {
display: table-cell;
text-align: center;
line-height: 3em;
}
ol.progtrckr[data-progtrckr-steps="2"] li { width: 49%; }
ol.progtrckr[data-progtrckr-steps="3"] li { width: 33%; }
ol.progtrckr[data-progtrckr-steps="4"] li { width: 24%; }
ol.progtrckr[data-progtrckr-steps="5"] li { width: 19%; }
ol.progtrckr[data-progtrckr-steps="6"] li { width: 16%; }
ol.progtrckr[data-progtrckr-steps="7"] li { width: 14%; }
ol.progtrckr[data-progtrckr-steps="8"] li { width: 12%; }
ol.progtrckr[data-progtrckr-steps="9"] li { width: 11%; }
ol.progtrckr li.progtrckr-done {
color: black;
border-bottom: 4px solid yellowgreen;
}
ol.progtrckr li.progtrckr-todo {
color: silver;
border-bottom: 4px solid silver;
}
ol.progtrckr li:after {
content: "\00a0\00a0";
}
ol.progtrckr li:before {
position: relative;
bottom: -2.5em;
float: left;
left: 50%;
line-height: 1em;
}
ol.progtrckr li.progtrckr-done:before {
content: "\2713";
color: white;
background-color: yellowgreen;
height: 1.2em;
width: 1.2em;
line-height: 1.2em;
border: none;
border-radius: 1.2em;
}
ol.progtrckr li.progtrckr-todo:before {
content: "\039F";
color: silver;
background-color: white;
font-size: 1.5em;
bottom: -1.6em;
}
-
michelis look this sample is very clean and easy to understand
https://codepen.io/erwinquita/pen/ZWzVRE?editors=1100