Flex now auto-hides text if too narrow

ChaoticNeutralCzech · Jan 29, 2024 · e1068de · e1068de
1 parent 306459a
commit e1068de
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 31 deletions.
diff --git a/embed.css b/embed.css
@@ -33,7 +33,7 @@ body {
 	align-items: center;
 	position: relative;
   font-family: sans-serif;
-  font-size: 20pt;
+  font-size: 16pt;
 }
 
 #spinner {
@@ -43,15 +43,17 @@ body {
 	margin: auto; 
 	align-self: center;
 	visibility: hidden;
-	transition: opacity 1s; 
+	transition: opacity 1s;  
 }
 
 #controls {
 	position: absolute;
 	bottom: 0; 
+  padding-top: 20px;
 	align-self: bottom;
-  max-height: 20vh;
-  height: 50px;
+/*  max-height: 20vh;*/
+  align-content: start;
+  height: 40px;
   width: 100vw;
   /*background-image: linear-gradient(#0000 0%, #0000 90%, #0007 93%, #000a 96%, #000c	100%);*/
   background-image: linear-gradient(#0000 0%, /*#0000 90%, #0007 93%, #000a 96%,*/ #000c	100%);
@@ -61,13 +63,25 @@ body {
   display: flex;
   align-items: center;
 /*  justify-content: flex-end;*/
-  flex-flow: row nowrap;
+  flex-flow: row wrap;
+  flex-direction: row-reverse;
+  row-gap: 100px;
 }
 
 p {
 /*  position: absolute;*/
   align-self: center;
   color: #fff;
+  white-space: nowrap;
+  margin-right: auto;
+  margin-left: 130px; /* 120 px is width of channel selector, required for flex-wrap to work */
+  margin-bottom: 10px;
+  margin-top: 0;
+}
+
+.graytext {
+  color: #fffa;
+  font-size: 8pt;
 }
 
 .ficon {
@@ -76,8 +90,8 @@ p {
   right: 0;
   top: 0;
   bottom: 0;
-  margin: auto 0;
-  padding: 5px 10px;
+  margin-top: -10px;
+  padding: 15px 15px;
 	transition: transform 0.5s;
 }
 
@@ -100,6 +114,12 @@ p {
   border: none;
   padding: 5px 20px;
 }
+
+#chmenu {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+}
 #chmenu, #chButton {
   font-family: Baloo, sans-serif;
   font-size: 20pt;
@@ -112,6 +132,7 @@ p {
   align-items: center;
   justify-self: flex-end;
   margin-left: auto;
+  margin-bottom: 10px;
 }
 
 #qButton {

diff --git a/embed.html b/embed.html
@@ -12,30 +12,27 @@
   <img src="duha.png" id="duha"></img>
   <canvas id="tv" width="480" height="270"></canvas>
   <img src="spinner.svg" id="spinner"></img>
-  <div id="controls">
-      <div id="chmenu" class="drop">
-        <div class="dropWindow">
-          <a href="#ch2">kino</a>
-          <a href="#ch3">krimi</a>
-        </div>
-        <button id="chButton" class="dropButton">tv</button>
-
+  <div id="controls" class="controls">
+    <img src="exit.svg" id="exit" class="ficon">
+    <img src="full.svg" id="full" class="ficon">
+    <div id="qmenu" class="drop">
+      <div class="dropWindow">
+        <a href="#">HD</a>
+        <a href="#">SD</a>
+        <a href="#">LQ</a>
+        <a href="#">Auto</a>
       </div>
-      <p>Právě běží: <i>Žádné informace</i></p>
-
-      <div id="qmenu" class="drop">
-        <div class="dropWindow">
-          <a href="#">HD</a>
-          <a href="#">SD</a>
-          <a href="#">LQ</a>
-          <a href="#">Auto</a>
-        </div>
-        <button id="qButton" class="dropButton">Auto</button>
-
+      <button id="qButton" class="dropButton">Auto</button>
+
+    </div>
+    <p><span class="graytext">Právě běží:</span> <i>Žádné informace</i></p> 
+    <div id="chmenu" class="drop">
+      <div class="dropWindow">
+        <a href="#ch2">kino</a>
+        <a href="#ch3">krimi</a>
       </div>
-      <!--<p>TV Barrandov/Barrandov Krimi/Barrandov Kino - Právě běží: <u>Žádné informace</u></p>--->
-      <img src="exit.svg" id="exit" class="ficon">
-      <img src="full.svg" id="full" class="ficon">
+      <button id="chButton" class="dropButton">tv</button>
+    </div>
   </div>
   <script src="embed.js"></script>
   </body>

diff --git a/embed.js b/embed.js
@@ -110,7 +110,7 @@ var loadInterval;
 
 function updateQuality()
 {
-  stopSpinning();
+  stopSpinning(); 
   startTV();   
   startUpdatingTime();
 }

diff --git a/index.css b/index.css
@@ -1,4 +1,4 @@
-embed {
+iframe {
     height: 540px;
     width: 960px;
 }