mirrors/recycled-ni-neutrino
1
0
Fork 0
mirror of https://github.com/tuxbox-fork-migrations/recycled-ni-neutrino.git synced 2025-08-31 09:21:09 +02:00
Code Issues Packages Projects Releases Wiki Activity

yWeb: use percentage scaling for yInfo to always get fullscreen

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

Origin message was:
------------------
- yWeb: use percentage scaling for yInfo to always get fullscreen

------------------
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 01:53:54 +01:00
parent 0f97f08292
commit 1c763e839f
1 changed files with 70 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
data/y-web/info/yinfo.yhtm
View File

@@ -37,7 +37,7 @@ jQuery(document).ready(function(){
if (minutes < 10) if (minutes < 10)
minutes = "0" + minutes; minutes = "0" + minutes;
jQuery('#_progress_graph').css({ width: "{=var-get:progress=}%"}); jQuery('#graph_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");
}); });
@@ -45,90 +45,103 @@ jQuery(document).ready(function(){
</script> </script>
<style type="text/css"> <style type="text/css">
/*<![CDATA[*/ /*<![CDATA[*/
/* globals */
html {
margin: 0;
padding: 0;
}
body { body {
background-color: #212121; background-color: #212121;
color: #bdbdbd; color: #bdbdbd;
height: 100%;
margin: 5% 2.5%;
} }
.NIinfo { .yinfo {
width: 780px;
margin: 0 auto; margin: 0 auto;
font-size: 35px; font-size: 5vh;
padding: 10px; padding: 0;
} }
.NIinfo .fullwidth { .yinfo .left {
width: 780px; float: left;
max-width: 780px;
} }
.NIinfo .status { .yinfo .right {
height: 40px; float: right;
margin: 10px 0;
} }
.NIinfo .status span {
/* positions */
.yinfo .fullwidth {
position: fixed;
width: 95%;
}
.yinfo .status {
top: 5%;
}
.yinfo .logo {
top: 20%;
}
.yinfo .event {
top: 50%;
}
.yinfo .graph {
top: 70%;
}
.yinfo .time {
bottom: 5%;
}
/* design */
.yinfo .status span {
color: #424242; color: #424242;
margin-left: 10px; letter-spacing: .1em;
letter-spacing: 4px;
} }
.NIinfo .top { .yinfo .status .ecm {
}
.NIinfo .status .ecm {
color: {=if-equal:{=var-get:mode_ecm=}~on~#ff9800~#424242=} color: {=if-equal:{=var-get:mode_ecm=}~on~#ff9800~#424242=}
} }
.NIinfo .status .timer { .yinfo .status .timer {
color: {=if-equal:{=var-get:mode_timer=}~on~#ffeb3b~#424242=} color: {=if-equal:{=var-get:mode_timer=}~on~#ffeb3b~#424242=}
} }
.NIinfo .status .rec { .yinfo .status .rec {
color: {=if-equal:{=var-get:mode_rec=}~on~#f44336~#424242=} color: {=if-equal:{=var-get:mode_rec=}~on~#f44336~#424242=}
} }
.NIinfo .status .ts { .yinfo .status .ts {
color: {=if-equal:{=var-get:mode_tshift=}~on~#f44336~#424242=} color: {=if-equal:{=var-get:mode_tshift=}~on~#f44336~#424242=}
} }
.NIinfo .logo, .yinfo .logo,
.NIinfo .event { .yinfo .event {
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
height: 100px; font-size: 200%;
line-height: 100px;
font-size: 50px;
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 780px !important;
} }
.NIinfo .logo { .yinfo .logo img {
display: block;
margin: 0 auto;
height: 20vh;
max-width: 100%;
object-fit: contain;
} }
.NIinfo .event { .yinfo .graph_outer {
} height: 10vh;
.NIinfo .logo img {
height: 80px;
margin: 10px 0;
}
.NIinfo ._outer_graph {
height: 45px;
background-color: #424242; background-color: #424242;
} }
.NIinfo ._inner_graph { .yinfo .graph_inner {
float: left; float: left;
background-color: #bdbdbd; background-color: #bdbdbd;
width: 0; width: 0;
height: 100%; height: 100%;
} }
.NIinfo .percent {
text-align: center;
position: absolute;
margin-top: 0;
color: #bdbdbd;
text-shadow: 0 -1px #212121, 1px 0 #212121, 0 1px #212121, -1px 0 #212121;
}
.NIinfo .bottom {
}
/*]]>*/ /*]]>*/
</style> </style>
</head> </head>
<body> <body>
<div class="NIinfo"> <div class="yinfo">
<div class="fullwidth status top">
<div class="fullwidth status">
<div class="left"> <div class="left">
<span class="ecm">ECM</span> <span class="ecm">ECM</span>
</div> </div>
@@ -137,8 +150,9 @@ body {
<span class="rec">REC</span> <span class="rec">REC</span>
<span class="ts">TS</span> <span class="ts">TS</span>
</div> </div>
<div class="clear"></div>
</div> </div>
<div class="clear"></div>
<div class="fullwidth logo"> <div class="fullwidth logo">
{=if-equal:{=var-get:mode_logo=}~1~ {=if-equal:{=var-get:mode_logo=}~1~
<img src="{=var-get:logo=}" alt="{=var-get:service=}"> <img src="{=var-get:logo=}" alt="{=var-get:service=}">
@@ -147,27 +161,26 @@ body {
=} =}
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<div class="fullwidth event"> <div class="fullwidth event">
{=var-get:event_curr=} {=var-get:event_curr=}
</div> </div>
<div class="fullwidth status _outer_graph">
<div id="_progress_graph" class="_inner_graph"></div> <div class="fullwidth graph">
<div class="fullwidth status percent"> <div class="graph_outer">
{=if-equal:{=var-get:progress=}~0~ <div id="graph_progress" class="graph_inner"></div>
~
{=var-get:progress=} %
=}
</div> </div>
</div> </div>
<div class="fullwidth status bottom">
<div class="fullwidth time">
<div class="left" id="clock"> <div class="left" id="clock">
00:00 00:00
</div> </div>
<div class="right"> <div class="right">
{=var-get:duration=} {=var-get:duration=}
</div> </div>
<div class="clear"></div>
</div> </div>
<div class="clear"></div>
</div> </div>
</body> </body>
</html> </html>