DeltaLima/CanGrow
DeltaLima/CanGrow
0
0
Fork 0
Code Issues 14 Pull requests Projects 1 Releases 3 Packages Wiki Activity

playground - playing aroudn with gauge meter, modify to my needs

Browse source
This commit is contained in:
Marcus 2024-05-02 16:25:33 +02:00
parent c2d5a305de
commit 86bb4fff64
2 changed files with 64 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
playground/html/material-gauge-gh-pages/index.html
View file

@ -21,30 +21,74 @@
line-height: 32px;
padding-top: 100px;
}
.center {
width: 60%; min-width: 420px;
margin: auto;
}
</style>
</head>
<body>
<div class="gauge gauge--liveupdate" id="gauge">
<div class="gauge__container">
<!-- <div class="gauge__marker"></div> -->
<div class="gauge__background"></div>
<div class="gauge__center"></div>
<div class="gauge__data"></div>
<div class="gauge__needle"></div>
</div>
<div class="gauge__labels mdl-typography__headline">
<span class="gauge__label--low">No</span>
<span class="gauge__label--spacer"></span>
<span class="gauge__label--high">Yes</span>
</div>
</div>
<div class="center">
<div style="overflow: hidden;">
<div class="gauge gauge--liveupdate" id="gauge" style="float:left;">
<span >asd</span>
<div class="gauge__container">
<!-- <div class="gauge__marker"></div> -->
<div class="gauge__background"></div>
<div class="gauge__center"></div>
<div class="gauge__data"></div>
<div class="gauge__needle"></div>
</div>
<div class="gauge__labels mdl-typography__headline">
<span class="gauge__label--low"></span>
<span class="gauge__label--spacer">75%</span>
<span class="gauge__label--high"></span>
</div>
</div>
<div class="gauge gauge--liveupdate" id="gauge2" style="float:left;">
<div class="gauge__container">
<!-- <div class="gauge__marker"></div> -->
<div class="gauge__background"></div>
<div class="gauge__center"></div>
<div class="gauge__data"></div>
<div class="gauge__needle"></div>
</div>
<div class="gauge__labels mdl-typography__headline">
<span class="gauge__label--low">0%</span>
<span class="gauge__label--spacer"></span>
<span class="gauge__label--high">100%</span>
</div>
</div>
<div class="gauge gauge--liveupdate" id="gauge3" style="float:left;">
<div class="gauge__container">
<!-- <div class="gauge__marker"></div> -->
<div class="gauge__background"></div>
<div class="gauge__center"></div>
<div class="gauge__data"></div>
<div class="gauge__needle"></div>
</div>
<div class="gauge__labels mdl-typography__headline">
<span class="gauge__label--low">0%</span>
<span class="gauge__label--spacer"></span>
<span class="gauge__label--high">100%</span>
</div>
</div>
</div>
</div>
<script src="material-gauge.js"></script>
<script>
var gauge = new Gauge(document.getElementById("gauge"));
var gauge2 = new Gauge(document.getElementById("gauge2"));
var gauge3 = new Gauge(document.getElementById("gauge3"));
gauge.value(75);
gauge2.value(50);
gauge3.value(25);
</script>
</body>

7
playground/html/material-gauge-gh-pages/material-gauge.css
View file

@ -27,6 +27,7 @@
.gauge {
position: relative;
margin-right: 10px;
}
.gauge__container {
@ -127,13 +128,13 @@
.gauge__needle { left: 120px; top: 117px; width: 120px; }
.gauge__labels { top: 120px; width: 240px; }
.gauge__label--low { width: 48px; }
.gauge__label--spacer { width: 144px; }
.gauge__label--spacer { width: 144px; text-align: center;}
.gauge__label--high { width: 48px; }
/*
* Increase the gauge size slightly on larger viewports.
*/
/*
@media only screen and (min-width: 400px) {
.gauge { height: calc(150px + 3em); }
.gauge__container { width: 300px; height: 150px; }
@ -147,7 +148,7 @@
.gauge__label--spacer { width: 180px; }
.gauge__label--high { width: 60px; }
}
*/
/*
* As an option, the `gauge--liveupdate` class can be added
* to the main gauge element. When this class is present,