Limit fallback error width to window width

Change the layout a bit to make sure the entire message can be read.
sfrias · Mar 27, 2017 · 13c558e · 13c558e
1 parent c361080
commit 13c558e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/app/styles/base.css b/app/styles/base.css
@@ -216,18 +216,21 @@ select:active {
  */
 
 #noVNC_fallback_error {
-  position: fixed;
   z-index: 1000;
-  left: 50%;
-  transform: translate(-50%, -50px);
-  transition: 0.5s ease-in-out;
-
   visibility: hidden;
-  opacity: 0;
+}
+#noVNC_fallback_error.noVNC_open {
+  visibility: visible;
+}
 
-  top: 60px;
+#noVNC_fallback_error > div {
+  max-width: 90%;
   padding: 15px;
-  width: auto;
+
+  transition: 0.5s ease-in-out;
+
+  transform: translateY(-50px);
+  opacity: 0;
 
   text-align: center;
   font-weight: bold;
@@ -237,9 +240,8 @@ select:active {
   box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.5);
   background: rgba(200,55,55,0.8);
 }
-#noVNC_fallback_error.noVNC_open {
-  transform: translate(-50%, 0);
-  visibility: visible;
+#noVNC_fallback_error.noVNC_open > div {
+  transform: translateY(0);
   opacity: 1;
 }
 

diff --git a/vnc.html b/vnc.html
@@ -72,10 +72,12 @@
 
 <body>
 
-    <div id="noVNC_fallback_error">
-        <div>noVNC encountered an error:</div>
-        <br>
-        <div id="noVNC_fallback_errormsg"></div>
+    <div id="noVNC_fallback_error" class="noVNC_center">
+        <div>
+            <div>noVNC encountered an error:</div>
+            <br>
+            <div id="noVNC_fallback_errormsg"></div>
+        </div>
     </div>
 
     <!-- noVNC Control Bar -->