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

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

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