cief/IZYIM-mobile-client
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/IZYIM-mobile-client.git synced 2026-08-19 04:14:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

update meter tracker

Browse Source
This commit is contained in:
Darel
2018-03-29 10:06:07 +08:00
parent 9e3ea3f2e7
commit ce9d1714e2
5 changed files with 148 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vs/IZYIM-mobile-client/v15/.suo
BIN
View File
Binary file not shown.
.vs/VSWorkspaceState.json
+1 -1
View File
@@ -2,6 +2,6 @@
"ExpandedNodes": [
""
],
"SelectedNode": "\\home.html",
"SelectedNode": "\\arrangements-delivery_arrangements1.html",
"PreviewInSolutionExplorer": false
}
.vs/slnx.sqlite
BIN
View File
Binary file not shown.
css/global.style.css
+81 -56
View File
@@ -793,8 +793,8 @@ section.container{
.meter-container{
position: relative;
width: 90%;
margin-left: 5%;
width: 100%;
padding: 10px;
}
/*end of part 8----------------------------------------------------*/
@@ -2827,90 +2827,115 @@ input[type=text]:disabled {
height: 100px;
}
.meter-tracker-bar {
width: 80%;
margin-left: 13.5%;
height: 10px;
width: 96%;
height: 4px;
background-color: #a9a9a9;
display: inline-block;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
position: relative;
float: left;
}
.meter-tracker-bar .update-btn-first-back{
.meter-tracker-bar .update-txt-first{
position: absolute;
display: block;
width: 80px;
width: 25%;
height: 32px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
background-color: #069;
right: 89%;
bottom: -400%;
bottom: -100%;
text-align: center;
line-height: 32px;
line-height: 10px;
right: 75%;
}
.meter-tracker-bar .update-txt-second{
position: absolute;
width: 25%;
height: 32px;
bottom: -100%;
text-align: center;
line-height: 10px;
right: 50%;
}
.meter-tracker-bar .update-txt-third{
position: absolute;
width: 25%;
height: 32px;
bottom: -100%;
text-align: center;
line-height: 10px;
right: 25%;
}
.meter-tracker-bar .update-txt-fourth{
position: absolute;
width: 25%;
height: 32px;
bottom: -100%;
text-align: center;
line-height: 10px;
right: 0%;
}
.meter-tracker-bar .update-txt-fixwall{
position: absolute;
width: 5%;
height: 32px;
bottom: -100%;
text-align: center;
line-height: 10px;
right: -5%;
}
.meter-tracker-bar .update-btn-first{
position: absolute;
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
width: 15px;
height: 15px;
bottom: 0%;
background-color: #069;
right: 99%;
bottom: -100%;
border-radius: 100%;
text-align: center;
line-height: 32px;
line-height: 10px;
z-index: 1;
}
.meter-tracker-bar .update-btn-second{
position: absolute;
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
width: 15px;
height: 15px;
bottom: 0%;
background-color: #069;
right: 67%;
bottom: -100%;
border-radius: 100%;
text-align: center;
line-height: 32px;
line-height: 10px;
z-index: 1;
}
.meter-tracker-bar .update-btn-third{
position: absolute;
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
width: 15px;
height: 15px;
bottom: 0%;
background-color: #069;
right: 33%;
bottom: -100%;
border-radius: 100%;
text-align: center;
line-height: 32px;
line-height: 10px;
z-index: 1;
}
.meter-tracker-bar .update-btn-fourth{
position: absolute;
display: block;
width: 32px;
height: 32px;
border-radius: 50%;
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.2);
width: 15px;
height: 15px;
bottom: 0%;
background-color: #069;
right: -1%;
bottom: -100%;
border-radius: 100%;
text-align: center;
line-height: 32px;
line-height: 10px;
z-index: 1;
}
.meter-tracker-bar .update-btn-completed{
position: absolute;
width: 15px;
height: 15px;
bottom: -100%;
background-color: #069;
border-radius: 100%;
text-align: center;
line-height: 10px;
right: 0%;
z-index: 1;
}
/*end of part 31----------------------------------------------------*/
meter-progress-trackers.html
+66 -34
View File
@@ -72,30 +72,49 @@
<!-- Header area end -->
<!-- Main Content Start Here -->
<div class="form-fixed"></div>
<div class="form-row txt-center">
<div class="meter-tracker-bar">
<div id="meter-bar" style="background-color:#069; width:0; height:100%"></div>
<label class="update-btn-first-back" style="display:none">
<a>Order Date</a>
</label>
<label class="update-btn-first fix">
<input id="firststep" type="submit" onclick="FirstStep()" style="display:none" />
</label>
<label class="update-btn-second fix">
<input id="secondstep" type="submit" onclick="SecondStep()" style="display:none" />
</label>
<label class="update-btn-third fix">
<input id="thirdstep" type="submit" onclick="ThirdStep()" style="display:none" />
</label>
<label class="update-btn-fourth fix">
<input id="fourthstep" type="submit" onclick="FourthStep()" style="display:none" />
</label>
</div>
</div>
<div class="form-divider"></div>
<div class="meter-container">
<div class="form-row">
<div class="meter-tracker-bar">
<!-- Trackers Meter Point Start Here -->
<div id="meter-bar" style="background-color:#069; width:0; height:100%"></div>
<!-- Trackers Meter Point End Here -->
<!-- Sub Title For Meter Point Start Here -->
<label class="update-txt-first fix">
<div class="update-btn-first fix">
<input id="StartedStep" type="submit" onclick="StartedStep()" style="display:none" />
</div>
<a>Order Date</a>
</label>
<label class="update-txt-second fix">
<div class="update-btn-second fix">
<input id="FirstStep" type="submit" onclick="FirstStep()" style="display:none" />
</div>
<a>WH Received</a>
</label>
<label class="update-txt-third fix">
<div class="update-btn-third fix">
<input id="SecondStep" type="submit" onclick="SecondStep()" style="display:none" />
</div>
<a>Delivery Arr</a>
</label>
<label class="update-txt-fourth fix">
<div class="update-btn-fourth fix">
<input id="ThirdStep" type="submit" onclick="ThirdStep()" style="display:none" />
</div>
<a>Delivery</a>
</label>
<label class="update-txt-fixwall fix">
<div class="update-btn-fourth fix">
<input id="CompletedStep" type="submit" onclick="CompletedStep()" style="display:none" />
</div>
</label>
<!-- Sub Title For Meter Point End Here -->
</div>
</div>
<div class="form-divider"></div>
<div class="form-row">
<div class="form-row txt-center">
<a class="a-meter-title">Order Date</a>
@@ -144,28 +163,41 @@
<!-- Required For All Pages, Otherwise Ugly Others Function Won't Work -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/global.script.js"></script>
<!-- Required For All Pages, Oth erwise Ugly Others Function Won't Work -->
<!-- Required For All Pages, Otherwise Ugly Others Function Won't Work -->
<script>
function FirstStep() {
function StartedStep() {
var elem = document.getElementById("meter-bar");
var width = 30;
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= 0) {
if (width >= 0.1) {
clearInterval(id);
} else {
width--;
width++;
elem.style.width = width + '%';
}
}
}
function FirstStep() {
var elem = document.getElementById("meter-bar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width >= 25) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
function SecondStep() {
var elem = document.getElementById("meter-bar");
var width = 0;
var width = 25;
var id = setInterval(frame, 10);
function frame() {
if (width >= 30) {
if (width >= 50) {
clearInterval(id);
} else {
width++;
@@ -175,10 +207,10 @@
}
function ThirdStep() {
var elem = document.getElementById("meter-bar");
var width = 30;
var width = 50;
var id = setInterval(frame, 10);
function frame() {
if (width >= 60) {
if (width >= 75) {
clearInterval(id);
} else {
width++;
@@ -186,12 +218,12 @@
}
}
}
function FourthStep() {
function CompletedStep() {
var elem = document.getElementById("meter-bar");
var width = 60;
var width = 75;
var id = setInterval(frame, 10);
function frame() {
if (width >= 90) {
if (width >= 100) {
clearInterval(id);
} else {
width++;