]> www.vanbest.org Git - motioneye-debian/commitdiff
ui improvements
authorCalin Crisan <ccrisan@gmail.com>
Sat, 21 Sep 2013 10:56:12 +0000 (13:56 +0300)
committerCalin Crisan <ccrisan@gmail.com>
Sat, 21 Sep 2013 10:56:12 +0000 (13:56 +0300)
artwork/video-buttons.svg [new file with mode: 0644]
static/css/base-site.css
static/css/main.css
static/img/video-buttons.png [new file with mode: 0644]
static/js/base-site.js
static/js/jquery.mousewheel.js [new file with mode: 0644]
templates/base-site.html
templates/base.html
templates/macros.html

diff --git a/artwork/video-buttons.svg b/artwork/video-buttons.svg
new file mode 100644 (file)
index 0000000..f9a4aad
--- /dev/null
@@ -0,0 +1,199 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   height="16"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="video-buttons.svg"
+   inkscape:export-filename="/media/data/projects/motioneye/static/img/validation-error.png"
+   inkscape:export-xdpi="90"
+   inkscape:export-ydpi="90">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1"
+     inkscape:cx="39.954578"
+     inkscape:cy="-30.616453"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1027"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-nodes="true"
+     inkscape:bbox-paths="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     inkscape:snap-page="true"
+     inkscape:snap-intersection-paths="true"
+     showguides="true"
+     inkscape:guide-bbox="true" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1036.3622)">
+    <path
+       sodipodi:type="arc"
+       style="fill:none;stroke:#000000;stroke-width:0.84620845;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="path3752"
+       sodipodi:cx="7.8036885"
+       sodipodi:cy="8.2353296"
+       sodipodi:rx="5.6186557"
+       sodipodi:ry="5.3845448"
+       d="m 13.422344,8.2353296 a 5.6186557,5.3845448 0 1 1 -11.2373112,0 5.6186557,5.3845448 0 1 1 11.2373112,0 z"
+       transform="matrix(1.1568604,0,0,1.2071587,-1.0277779,1034.4208)" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+       d="m 5.5,5.5 5,5"
+       id="path3756"
+       inkscape:connector-curvature="0"
+       transform="translate(0,1036.3622)"
+       sodipodi:nodetypes="cc" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path3758"
+       d="m 10.5,1041.8622 -5,5"
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
+    <path
+       sodipodi:type="arc"
+       style="fill:none;stroke:#000000;stroke-width:0.84620845;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       id="path3792"
+       sodipodi:cx="7.8036885"
+       sodipodi:cy="8.2353296"
+       sodipodi:rx="5.6186557"
+       sodipodi:ry="5.3845448"
+       d="m 13.422344,8.2353296 a 5.6186557,5.3845448 0 1 1 -11.2373112,0 5.6186557,5.3845448 0 1 1 11.2373112,0 z"
+       transform="matrix(-1.1568604,0,0,1.2071587,33.027778,1034.4209)" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path3794"
+       d="m 21.5,1046.8622 3,-3"
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+       d="m 24.5,1043.8622 0,-2"
+       id="path3796"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path3798"
+       d="m 24.5,1043.8622 2,0"
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+       d="m 27.5,1042.8622 -1,1"
+       id="path3800"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path3802"
+       d="m 25.5,1040.8622 -1,1"
+       style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
+    <path
+       transform="matrix(1.1568604,0,0,1.2071587,-1.0277779,1054.4208)"
+       d="m 13.422344,8.2353296 a 5.6186557,5.3845448 0 1 1 -11.2373112,0 5.6186557,5.3845448 0 1 1 11.2373112,0 z"
+       sodipodi:ry="5.3845448"
+       sodipodi:rx="5.6186557"
+       sodipodi:cy="8.2353296"
+       sodipodi:cx="7.8036885"
+       id="path3816"
+       style="fill:none;stroke:#000000;stroke-width:0.84620845;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       sodipodi:type="arc" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path3818"
+       d="m 5.5,1061.8622 5,5"
+       style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+       d="m 10.5,1061.8622 -5,5"
+       id="path3820"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       transform="matrix(-1.1568604,0,0,1.2071587,33.027778,1054.4209)"
+       d="m 13.422344,8.2353296 a 5.6186557,5.3845448 0 1 1 -11.2373112,0 5.6186557,5.3845448 0 1 1 11.2373112,0 z"
+       sodipodi:ry="5.3845448"
+       sodipodi:rx="5.6186557"
+       sodipodi:cy="8.2353296"
+       sodipodi:cx="7.8036885"
+       id="path3822"
+       style="fill:none;stroke:#000000;stroke-width:0.84620845;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       sodipodi:type="arc" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 22,1066.3622 2,-2"
+       id="path3824"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path3826"
+       d="m 24,1064.3622 0,-2"
+       style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 24,1064.3622 2,0"
+       id="path3828"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       sodipodi:nodetypes="cc"
+       inkscape:connector-curvature="0"
+       id="path3830"
+       d="m 27,1063.3622 -1,1"
+       style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+       d="m 25,1061.3622 -1,1"
+       id="path3832"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>
index 6d92e45037f969fdd5004c7a59ffb409241b1f31..4f862f89624cfcc5944abc5a0a1a4ab8848e6e55 100644 (file)
@@ -34,13 +34,12 @@ html {
 div.page,
 div.header-container {
     position: relative;
-    min-width: 1000px;
-    max-width: 1580px;
-    width: 75%;
-    margin: auto;   
+    min-width: 320px;
+    width: 100%;
 }
 
 div.page {
+    margin-top: 50px;
     padding-bottom: 20px;
     font-size: 1em;
     transition: all 0.5s;
@@ -48,8 +47,12 @@ div.page {
 
 div.header {
     background-color: rgba(64, 64, 64, 0.5);
+    top: 0px;
+    width: 100%;
     height: 50px;
-    position: relative;
+    position: fixed;
+    overflow: hidden;
+    z-index: 10000;
 }
 
 div.header-container {
@@ -80,18 +83,19 @@ div.page-container.stretched {
 
 div.settings {
     background-color: #313131;
-    position: absolute;
+    position: fixed;
     z-index: 1;
-    top: 0px;
+    top: 50px;
     left: 0px;
     width: 0px;
-    min-height: 100%;
+    height: 100%;
     transition: all 0.2s;
-    overflow: hidden;
+    overflow: auto;
 }
 
 div.settings.open {
     width: 40%;
+    min-width: 320px;
 }
 
 div.settings-container {
@@ -112,6 +116,7 @@ div.settings-top-bar {
 
 div.settings-top-bar.open {
     background-color: #414141;
+    min-width: 320px;
 }
 
 div.settings-section-title {
@@ -193,35 +198,24 @@ input[type=text].working-schedule.number {
     }
 }
 
-@media all and (max-width: 800px) {
-    /* mobile devices */
+@media all and (max-width: 1000px) {
+    /* small screens (mobile devices) */
     
-    body {
-        font-size: 17px;
-    }
-    
-    div.page,
-    div.header-container {
-        width: 100%;
-        min-width: 320px;
-    }
-    
-    div.header {
-        background-color: rgba(32, 32, 32, 1);
-    }
-
     div.page-container.stretched {
         margin-left: 0px;
     }
     
-    div.settings-top-bar,
-    div.settings-top-bar.open {
-        width: auto;
-        background-color: transparent;
+    div.settings.open {
+        box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
+        background-color: rgba(40, 40, 40, 0.9);
     }
+}
+
+@media all and (max-width: 400px) {
+    /* very small screens */
     
-    div.settings.open {
-        width: 100%;
+    body {
+        font-size: 13px;
     }
 }
 
index 36d7284d71394fc86fe32e529a22beac9880b138..6214374cf865fb1fb9f2edfdcd11575bd648e088 100644 (file)
@@ -4,24 +4,59 @@ div.video-list {
 }
 
 div.video-frame {
-    width: 48%;
+    width: 32%;
     text-align: left;
     background-color: #313131;
     display: inline-block;
-    padding: 0px 5px;
+    padding: 0px 5px 5px 5px;
     border-radius: 3px;
     transition: all 0.2s;
-    margin-bottom: 10px;
+    margin-top: 3px;
 }
 
 div.video-frame:HOVER {
     background-color: #414141;
 }
 
-div.video-top-bar,
-div.video-bottom-bar {
-    padding: 3px;
-    font-size: 0.75em;
+div.video-top-bar {
+    padding: 3px 0px;
+    font-size: 17px;
+    height: 17px;
+}
+
+span.video-name {
+    float: left;
+}
+
+div.video-buttons {
+    float: right;
+}
+
+div.video-button {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-image: url(../img/video-buttons.png);
+    margin-left: 3px;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: all 0.1s linear;
+}
+
+div.video-button:HOVER {
+    opacity: 1;
+}
+
+div.video-button:ACTIVE {
+    opacity: 0.5;
+}
+
+div.video-button.close {
+    background-position: 0px 0px;
+}
+
+div.video-button.configure {
+    background-position: -16px 0px;
 }
 
 div.video-container {
@@ -36,8 +71,16 @@ img.video {
 
     /* media queries */
 
-@media all and (max-width: 1600px) {
-    /* smaller screens */
+@media all and (max-width: 1900px) {
+    /* a bit smaller screens */
+    
+    div.video-frame {
+        width: 48%;
+    }
+}
+
+@media all and (max-width: 1150px) {
+    /* even smaller screens */
     
     div.video-frame {
         width: 98%;
diff --git a/static/img/video-buttons.png b/static/img/video-buttons.png
new file mode 100644 (file)
index 0000000..d27d5e4
Binary files /dev/null and b/static/img/video-buttons.png differ
index 7891d8ce17e1a687b06128d8a747266f35464d3e..b0172d884d878393cc915a5b00a8d64ccc4ce2a0 100644 (file)
@@ -171,6 +171,7 @@ function updateSettingsUI() {
 }
 
 $(document).ready(function () {
+    /* open/close settings */
     $('img.settings-button').click(function () {
         if ($('div.settings').hasClass('open')) {
             $('div.settings').removeClass('open');
@@ -182,7 +183,18 @@ $(document).ready(function () {
             $('div.page-container').addClass('stretched');
             $('div.settings-top-bar').addClass('open');
         }
-    }).click();
+    });
+    
+    /* prevent scroll events on settings div from propagating */
+    $('div.settings').mousewheel(function (e, d) {
+        var t = $(this);
+        if (d > 0 && t.scrollTop() === 0) {
+            e.preventDefault();
+        }
+        else if (d < 0 && (t.scrollTop() === t.get(0).scrollHeight - t.innerHeight())) {
+            e.preventDefault();
+        }
+    });
     
     initUI();
     updateSettingsUI();
diff --git a/static/js/jquery.mousewheel.js b/static/js/jquery.mousewheel.js
new file mode 100644 (file)
index 0000000..9d65c71
--- /dev/null
@@ -0,0 +1,117 @@
+/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.1.3
+ *
+ * Requires: 1.2.2+
+ */
+
+(function (factory) {
+    if ( typeof define === 'function' && define.amd ) {
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory);
+    } else if (typeof exports === 'object') {
+        // Node/CommonJS style for Browserify
+        module.exports = factory;
+    } else {
+        // Browser globals
+        factory(jQuery);
+    }
+}(function ($) {
+
+    var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'];
+    var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
+    var lowestDelta, lowestDeltaXY;
+
+    if ( $.event.fixHooks ) {
+        for ( var i = toFix.length; i; ) {
+            $.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
+        }
+    }
+
+    $.event.special.mousewheel = {
+        setup: function() {
+            if ( this.addEventListener ) {
+                for ( var i = toBind.length; i; ) {
+                    this.addEventListener( toBind[--i], handler, false );
+                }
+            } else {
+                this.onmousewheel = handler;
+            }
+        },
+
+        teardown: function() {
+            if ( this.removeEventListener ) {
+                for ( var i = toBind.length; i; ) {
+                    this.removeEventListener( toBind[--i], handler, false );
+                }
+            } else {
+                this.onmousewheel = null;
+            }
+        }
+    };
+
+    $.fn.extend({
+        mousewheel: function(fn) {
+            return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+        },
+
+        unmousewheel: function(fn) {
+            return this.unbind("mousewheel", fn);
+        }
+    });
+
+
+    function handler(event) {
+        var orgEvent = event || window.event,
+            args = [].slice.call(arguments, 1),
+            delta = 0,
+            deltaX = 0,
+            deltaY = 0,
+            absDelta = 0,
+            absDeltaXY = 0,
+            fn;
+        event = $.event.fix(orgEvent);
+        event.type = "mousewheel";
+
+        // Old school scrollwheel delta
+        if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta; }
+        if ( orgEvent.detail )     { delta = orgEvent.detail * -1; }
+
+        // New school wheel delta (wheel event)
+        if ( orgEvent.deltaY ) {
+            deltaY = orgEvent.deltaY * -1;
+            delta  = deltaY;
+        }
+        if ( orgEvent.deltaX ) {
+            deltaX = orgEvent.deltaX;
+            delta  = deltaX * -1;
+        }
+
+        // Webkit
+        if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; }
+        if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; }
+
+        // Look for lowest delta to normalize the delta values
+        absDelta = Math.abs(delta);
+        if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; }
+        absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX));
+        if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) { lowestDeltaXY = absDeltaXY; }
+
+        // Get a whole value for the deltas
+        fn = delta > 0 ? 'floor' : 'ceil';
+        delta  = Math[fn](delta / lowestDelta);
+        deltaX = Math[fn](deltaX / lowestDeltaXY);
+        deltaY = Math[fn](deltaY / lowestDeltaXY);
+
+        // Add event and delta to the front of the arguments
+        args.unshift(event, delta, deltaX, deltaY);
+
+        return ($.event.dispatch || $.event.handle).apply(this, args);
+    }
+
+}));
index eadbafb5907cba7dd3812e57235c2dab35856ba0..f7ef3297f9dc85b1ba864acd9bb0b84221723490 100644 (file)
                         <td><span class="help-mark" title="enable this to be able to access all the advanced settings">?</span></td>
                     </tr>
                     <tr class="settings-item">
-                        <td class="settings-item-label"><span class="settings-item-label">motionEye Username</span></td>
-                        <td class="settings-item-value"><input type="text" class="styled general" id="motionEyeUsernameEntry"></td>
-                        <td><span class="help-mark" title="the username supplied when accessing motionEye">?</span></td>
+                        <td class="settings-item-label"><span class="settings-item-label">Administrator Username</span></td>
+                        <td class="settings-item-value"><input type="text" class="styled general" id="adminUsernameEntry"></td>
+                        <td><span class="help-mark" title="the username supplied to configure motionEye">?</span></td>
                     </tr>
                     <tr class="settings-item">
-                        <td class="settings-item-label"><span class="settings-item-label">motionEye Password</span></td>
-                        <td class="settings-item-value"><input type="password" class="styled general" id="motionEyePasswordEntry"></td>
-                        <td><span class="help-mark" title="the password that protects the access to motionEye">?</span></td>
+                        <td class="settings-item-label"><span class="settings-item-label">Administrator Password</span></td>
+                        <td class="settings-item-value"><input type="password" class="styled general" id="adminPasswordEntry"></td>
+                        <td><span class="help-mark" title="administrator's password">?</span></td>
+                    </tr>
+                    <tr class="settings-item">
+                        <td class="settings-item-label"><span class="settings-item-label">Surveillance Username</span></td>
+                        <td class="settings-item-value"><input type="text" class="styled general" id="normalUsernameEntry"></td>
+                        <td><span class="help-mark" title="the username supplied for video surveillance">?</span></td>
+                    </tr>
+                    <tr class="settings-item">
+                        <td class="settings-item-label"><span class="settings-item-label">Surveillance Password</span></td>
+                        <td class="settings-item-value"><input type="password" class="styled general" id="normalPasswordEntry"></td>
+                        <td><span class="help-mark" title="the password for the surveillance user">?</span></td>
                     </tr>
                     <tr class="settings-item advanced-setting">
                         <td colspan="100"><div class="settings-item-separator"></div></td>
index 38c5fa46f9a38fcc7d649cf4bb479ddced890dc0..81a1e90f82ccde18499bef5eb84939c9f673161f 100644 (file)
@@ -15,6 +15,7 @@
             <script type="text/javascript" src="{{STATIC_URL}}js/css-browser-selector.js"></script>
             <script type="text/javascript" src="{{STATIC_URL}}js/jquery.min.js"></script>
             <script type="text/javascript" src="{{STATIC_URL}}js/jquery.timepicker.min.js"></script>
+            <script type="text/javascript" src="{{STATIC_URL}}js/jquery.mousewheel.js"></script>
             <script type="text/javascript" src="{{STATIC_URL}}js/base.js"></script>
             
             <script type="text/javascript">
index fbbec983295c4b4be36eb5729afcaa5b57c24b9d..6458ccc0d856d36f892b48d5291cfec1f5c36eb3 100644 (file)
@@ -1,13 +1,14 @@
 {% macro video(url) %}
 <div class="video-frame">
     <div class="video-top-bar">
-        Video A
+        <span class="video-name">Video A</span>
+        <div class="video-buttons">
+            <div class="video-button configure" title="configure">
+            </div><div class="video-button close" title="close"></div>
+        </div>
     </div>
     <div class="video-container">
         <img class="video" src="{{url}}">
     </div>
-    <div class="video-bottom-bar">
-        Video A Bottom Bar
-    </div>
 </div>
 {% endmacro %}