Browse Source

multiple columns

Davide Alberani 1 year ago
parent
commit
03b882cd1d
3 changed files with 65 additions and 26 deletions
  1. 9 0
      static/css/sb.css
  2. 36 23
      static/index.html
  3. 20 3
      static/js/sb.js

+ 9 - 0
static/css/sb.css

@@ -7,6 +7,15 @@
     margin: 0 auto;
 }
 
+#video-info-container {
+    padding-top: 0.2em;
+}
+
+#izi-container {
+    height: 4em;
+    width: 100%;
+}
+
 #header {
     margin-left: 15px;
 }

+ 36 - 23
static/index.html

@@ -13,31 +13,44 @@
         <script type="text/javascript" src="/static/js/sb.js"></script>
     </head>
     <body>
-        <div id="main" class="container">
-            <div id="header" class="row center-align">
-                <h1>toot-my-t-shirt</h1>
-                Share the love for your geek t-shirt.
-            </div>
+        <div id="main">
+            <div class="row">
+                <div class="col s3">
+                    <div id="header" class="row center-align">
+                        <h1>toot-my-t-shirt</h1>
+                        Share the love for your geek t-shirt.
+                    </div>
 
-            <div id="button-containers" class="row center-align">
-                <button id="take-photo-btn" class="btn waves-effect waves-light disabled" name="take-photo-btn" onClick="takePhoto()">
-                    <i class="material-icons left">camera</i>Take photo <small>(1 sec delay)</small>
-                </button>
-                <button id="send-photo-btn" class="btn waves-effect waves-light disabled" name="send-photo-btn" onClick="sendPhoto()">
-                    <i class="material-icons left">share</i>Share photo
-                </button>
-                <button id="cancel-photo-btn" class="btn waves-effect waves-light disabled" name="cancel-photo-btn" onClick="cancelPhoto()">
-                    <i class="material-icons left">cancel</i>Cancel photo
-                </button>
-                <button id="init-btn" class="btn waves-effect waves-light" name="init-btn" onClick="initCamera()">
-                    <i class="material-icons left">photo_camera</i>Grant camera permissions
-                </button>
-            </div>
+                    <div id="button-containers" class="row center-align">
+                        <p>
+                            <button id="take-photo-btn" class="btn waves-effect waves-light disabled" name="take-photo-btn" onClick="takePhoto()">
+                                <i class="material-icons left">camera</i>Take photo
+                            </button>
+                        </p>
+                        <p>
+                            <button id="send-photo-btn" class="btn waves-effect waves-light disabled" name="send-photo-btn" onClick="sendPhoto()">
+                                <i class="material-icons left">share</i>Share photo
+                            </button>
+                        </p>
+                        <p>
+                            <button id="cancel-photo-btn" class="btn waves-effect waves-light disabled" name="cancel-photo-btn" onClick="cancelPhoto()">
+                                <i class="material-icons left">cancel</i>Cancel photo
+                            </button>
+                        </p>
+                        <p>
+                            <button id="init-btn" class="btn waves-effect waves-light" name="init-btn" onClick="initCamera()">
+                                <i class="material-icons left">photo_camera</i>Grant camera permissions
+                            </button>
+                        </p>
+                    </div>
+                </div>
 
-            <div class="row center-align">
-                <div id="canvas-container">
-                    <video id="sb-video" autoplay muted></video>
-                    <canvas id="sb-canvas"></canvas>
+                <div id="video-info-container" class="col center-align">
+                    <div id="izi-container"></div>
+                    <div id="canvas-container">
+                        <video id="sb-video" autoplay muted></video>
+                        <canvas id="sb-canvas"></canvas>
+                    </div>
                 </div>
             </div>
         </div>

+ 20 - 3
static/js/sb.js

@@ -1,4 +1,4 @@
-var DEFAULT_DELAY = 7;
+var DEFAULT_DELAY = 20;
 
 var Countdown = {
     _timeout: null,
@@ -118,12 +118,14 @@ function sendData(data) {
             console.log(msg);
             iziToast.error({
                 "title": "😭 something wrong sending the data 😭",
+                "target": "#izi-container",
                 "message": msg,
                 "titleSize": "3em",
                 "messageSize": "2em",
                 "close": false,
                 "drag": false,
                 "pauseOnHover": false,
+                "progressBarColor": "red",
                 "position": "topCenter"
             });
         }
@@ -138,11 +140,13 @@ function sendData(data) {
             iziToast.destroy();
             iziToast.success({
                 "title": msg,
+                "target": "#izi-container",
                 "titleSize": "3em",
                 "messageSize": "2em",
                 "close": false,
                 "drag": false,
                 "pauseOnHover": false,
+                "progressBarColor": "red",
                 "position": "topCenter"
             });
         } else {
@@ -150,12 +154,14 @@ function sendData(data) {
             console.log(msg);
             iziToast.error({
                 "title": "😭 backend error 😭",
+                "target": "#izi-container",
                 "message": msg,
                 "titleSize": "3em",
                 "messageSize": "2em",
                 "close": false,
                 "drag": false,
                 "pauseOnHover": false,
+                "progressBarColor": "red",
                 "position": "topCenter"
             });
         }
@@ -163,12 +169,14 @@ function sendData(data) {
         console.log(msg);
         iziToast.error({
             "title": "😭 error connecting to the server 😭",
+            "target": "#izi-container",
             "message": err,
             "titleSize": "3em",
             "messageSize": "2em",
             "close": false,
             "drag": false,
             "pauseOnHover": false,
+            "progressBarColor": "red",
             "position": "topCenter"
         });
         cancelPhoto();
@@ -184,6 +192,7 @@ function cancelPhoto() {
     var context = canvas.getContext("2d");
     context.clearRect(0, 0, canvas.width, canvas.height);
     Countdown.stop();
+    iziToast.destroy();
 }
 
 
@@ -204,11 +213,13 @@ function sendPhoto() {
         console.log(msg);
         iziToast.warning({
             "title": msg,
+            "target": "#izi-container",
             "titleSize": "3em",
             "messageSize": "2em",
             "close": false,
             "drag": false,
             "pauseOnHover": false,
+            "progressBarColor": "red",
             "position": "topCenter"
         });
         return;
@@ -225,12 +236,14 @@ function _takePhoto(message) {
         console.log(msg);
         iziToast.warning({
             "title": msg,
+            "target": "#izi-container",
             "message": "please grant camera permissions",
             "titleSize": "3em",
             "messageSize": "2em",
             "close": false,
             "drag": false,
             "pauseOnHover": false,
+            "progressBarColor": "red",
             "position": "topCenter"
         });
         return;
@@ -260,16 +273,19 @@ function _takePhoto(message) {
     document.querySelector("#send-photo-btn").classList.remove("disabled");
     document.querySelector("#cancel-photo-btn").classList.remove("disabled");
     iziToast.question({
-        "title": "do you like what you see?",
+        "title": "do you like it?",
+        "timeout": DEFAULT_DELAY * 1000,
+        "target": "#izi-container",
         "message": message || "press \"share photo\" to publish!",
         "titleSize": "3em",
         "messageSize": "2em",
         "close": false,
         "drag": false,
         "pauseOnHover": false,
+        "progressBarColor": "red",
         "position": "topCenter"
     });
-    Countdown.start(5, cancelPhoto);
+    Countdown.start(DEFAULT_DELAY, cancelPhoto);
 }
 
 
@@ -304,6 +320,7 @@ function initCamera() {
             "close": false,
             "drag": false,
             "pauseOnHover": false,
+            "progressBarColor": "red",
             "position": "topCenter"
         });
     });