yWeb: better positioning inside yInfo

Origin commit data
------------------
Branch: ni/coolstream
Commit: 4916869507
Author: vanhofen <vanhofen@gmx.de>
Date: 2018-11-05 (Mon, 05 Nov 2018)

Origin message was:
------------------
- yWeb: better positioning inside yInfo

------------------
No further description and justification available within origin commit message!

------------------
This commit was generated by Migit
This commit is contained in:
vanhofen
2018-11-05 21:17:34 +01:00
parent 1c763e839f
commit e13be1cece

View File

@@ -37,7 +37,7 @@ jQuery(document).ready(function(){
if (minutes < 10)
minutes = "0" + minutes;
jQuery('#graph_progress').css({ width: "{=var-get:progress=}%"});
jQuery('#progress').css({ width: "{=var-get:progress=}%"});
jQuery('#clock').html(hours+':'+minutes);
jQuery('html head').find('title').text("yInfo");
});
@@ -78,15 +78,9 @@ body {
top: 5%;
}
.yinfo .logo {
top: 20%;
top: 25%;
}
.yinfo .event {
top: 50%;
}
.yinfo .graph {
top: 70%;
}
.yinfo .time {
.yinfo .eventinfo {
bottom: 5%;
}
@@ -111,7 +105,7 @@ body {
.yinfo .event {
vertical-align: middle;
text-align: center;
font-size: 200%;
font-size: 10vh;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
@@ -121,19 +115,22 @@ body {
display: block;
margin: 0 auto;
height: 20vh;
max-width: 100%;
max-width: 90vw;
object-fit: contain;
}
.yinfo .graph_outer {
.yinfo .progress_outer {
height: 10vh;
background-color: #424242;
}
.yinfo .graph_inner {
.yinfo .progress_inner {
float: left;
background-color: #bdbdbd;
width: 0;
height: 100%;
}
.yinfo .spacer {
margin-bottom: 5vh;
}
/*]]>*/
</style>
</head>
@@ -162,22 +159,22 @@ body {
</div>
<div class="clear"></div>
<div class="fullwidth event">
{=var-get:event_curr=}
</div>
<div class="fullwidth graph">
<div class="graph_outer">
<div id="graph_progress" class="graph_inner"></div>
<div class="fullwidth eventinfo">
<div class="event">
{=var-get:event_curr=}
</div>
</div>
<div class="fullwidth time">
<div class="left" id="clock">
00:00
<div class="spacer"></div>
<div class="progress_outer">
<div id="progress" class="progress_inner"></div>
</div>
<div class="right">
{=var-get:duration=}
<div class="spacer"></div>
<div class="time">
<div class="left" id="clock">
00:00
</div>
<div class="right">
{=var-get:duration=}
</div>
</div>
</div>
<div class="clear"></div>