added content class to base.html

static/css/style.css

@@ -1,12 +1,3 @@
-.stream-canvas {
-    width: 100%;
-    height: 100%;
-}
-
-.debug-img {
-    max-width: 100%;
-}
-
 .flex-column {
     display: flex;
     flex-direction: column;
@@ -18,20 +9,34 @@
 }
 
 .menu {
-    flex-basis: 10%;
+    flex-basis: 15%;
     align-items: center;
 }
 
 .menu-header {
     font-size: 30px;
     margin-top: 20px;
+    margin-left: 10px;
+    margin-right: 10px;
 }
 
 .menu-item {
     font-size: 20px;
     margin-top: 15px;
+    margin-left: 10px;
+    margin-right: 10px;
 }
 
 .content {
-    flex-basis: 90%;
+    flex-basis: 85%;
+}
+
+.stream-canvas {
+    flex-basis: 90%;
+    align-self: center;
+}
+
+.debug-img {
+    flex-basis: 30%;
+    align-self: stretch;
 }

templates/stream.html

@@ -3,22 +3,21 @@
 <script src="/static/js/stream.js"></script>
 {{end}}
 {{define "content"}}
-<div>
-    <canvas class="stream-canvas" id="canvas">Not supported</canvas>
-    <img src="{{ .GetCurrentColorURL }}" id="current_color_stream" hidden>
-    <div class="pure-g">
-        <div class="pure-u-1-3">
-            <img src="{{ .GetPreviousURL }}" class="debug-img">
+<div class="flex-column">
+    <!--<canvas class="stream-canvas" id="canvas">Not supported</canvas>-->
+    <img class="stream-canvas" src="{{ .GetCurrentColorURL }}" id="current_color_stream" >
+    <div class="flex-row">
+        <div class="debug-img">
+            <img src="{{ .GetPreviousURL }}">
         </div>
-        <div class="pure-u-1-3">
-            <img src="{{ .GetDebugURL }}" class="debug-img">
+        <div class="debug-img">
+            <img src="{{ .GetDebugURL }}">
         </div>
-        <div class="pure-u-1-3">
-            <img src="{{ .GetCurrentURL }}" class="debug-img">
+        <div class="debug-img">
+            <img src="{{ .GetCurrentURL }}">
         </div>
     </div>
-</div>
-<form action="/addWatchArea" method="GET" id="newWatchAreaForm">
+    <form action="/addWatchArea" method="GET" id="newWatchAreaForm">
         <input type="hidden" name="streamName" value="{{ .Name }}">
         <table class="pure-table pure-table-horizontal">
             <caption>Watches</caption>
@@ -57,7 +56,8 @@
                 {{end}}
             </tbody>
         </table>
-</form>
+    </form>
+</div>
 
 <template id="newWatchAreaTemplate" hidden>
     <tr id="addWatchAreaRow">