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