From e6e6e57ecf2e9b4ad0c698443627d78c0798b790 Mon Sep 17 00:00:00 2001
From: Emrys <emrys@openenergymonitor.org>
Date: Tue, 23 Oct 2018 20:17:46 +0100
Subject: [PATCH 1/7] added css classes to manage modal sidebar in mobile view

---
 Views/device_dialog.css | 61 +++++++++++++++++++++++++++++++++++++++++
 Views/device_dialog.js  | 30 ++++++++------------
 Views/device_dialog.php |  4 +--
 3 files changed, 74 insertions(+), 21 deletions(-)

diff --git a/Views/device_dialog.css b/Views/device_dialog.css
index cc03671..b10be1d 100644
--- a/Views/device_dialog.css
+++ b/Views/device_dialog.css
@@ -166,3 +166,64 @@
 .table-inputs td:nth-of-type(3) { width:5%; }
 .table-inputs td:nth-of-type(4) { width:10%; }
 .table-inputs td:nth-of-type(5) { width:25%; }
+
+
+#device-config-modal{
+    margin: 0;
+    border-radius: 0;
+    border: none;
+    width: 100%;
+    left:0;
+    top: 3%;
+}
+#device-config-body{padding: 0}
+#device-config-modal .accordion-toggle{
+    white-space: nowrap;
+    overflow: hidden;
+}
+#device-content{
+    left: 0.2rem;
+    margin-left: 0;
+    transition: width 0.5s ease-in-out;
+}
+#device-sidebar-close{
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: .5em;
+    line-height: 1.3;
+    background: #f2f2f2;
+    padding: .3em .6em;
+}
+#device-sidebar{
+    transition: width 0.3s ease-in-out;
+    width: 0;
+}
+#device-sidebar.show{
+    width: 100%;
+}
+#device-config-modal .modal-content{margin-top:0}
+#device-config-modal .modal-sidebar{margin-left:-1rem}
+
+/* add horizontal padding to devices larger than iphone5 (320px)*/
+@media (min-width: 340px) {
+    #device-config-modal{margin: 0 auto}
+    .modal-sidebar{margin:0 -1rem}
+    #device-content{ left: 15px; }
+    #device-config-body{padding: 0 1rem}
+}
+
+@media (min-width: 680px) { 
+    #device-sidebar.show{
+        width: 250px;
+        transition: none;
+    }
+    #device-content{ left: 270px; }
+    #device-config-modal{
+        margin: 0;
+        border-radius: 6px;
+        border: 1px solid rgba(0,0,0,0.3);
+        width: 94%;
+        left:3%;
+    }
+}
\ No newline at end of file
diff --git a/Views/device_dialog.js b/Views/device_dialog.js
index 769f2f2..d5249c5 100644
--- a/Views/device_dialog.js
+++ b/Views/device_dialog.js
@@ -176,30 +176,22 @@ var device_dialog =
         var height = $(window).height();
         
         if ($("#device-config-modal").length) {
-            var h = height - $("#device-config-modal").position().top - 180;
+            var h = height - $("#device-config-modal").position().top - 160;
             $("#device-config-body").height(h);
         }
         
         if (width < 680) {
             $("#device-sidebar-open").show();
             $("#device-sidebar-close").show();
-            
-            $("#device-sidebar").css("transition","0.5s");
-            $("#device-sidebar").css("width","0");
-            
-            $("#device-content").css("transition","0.5s");
-            $("#device-content").css("margin-left","0");
-        	$("#device-config-modal").css("margin-left","0").css("margin-right","0");
+
+            $("#device-sidebar").removeClass('show')
+                   
         } else {
             $("#device-sidebar-open").hide();
             $("#device-sidebar-close").hide();
+
+            $("#device-sidebar").addClass('show')
             
-            $("#device-sidebar").css("transition","0");
-            $("#device-sidebar").css("width","250px");
-            
-            $("#device-content").css("transition","0");
-            $("#device-content").css("margin-left","250px");
-        	$("#device-config-modal").css("margin-left","auto").css("margin-right","auto");
         }
     },
 
@@ -226,18 +218,18 @@ var device_dialog =
                 $("#device-init").show()
             }
             if ($(window).width() < 1024) {
-                $("#device-sidebar").css("width","0");
+                $("#device-sidebar").removeClass('show')
             }
             
             device_dialog.drawTemplate();
         });
-
+        
         $("#device-sidebar-open").off('click').on('click', function () {
-            $("#device-sidebar").css("width","250px");
+            $("#device-sidebar").addClass('show')
         });
-
+        
         $("#device-sidebar-close").off('click').on('click', function () {
-            $("#device-sidebar").css("width","0");
+            $("#device-sidebar").removeClass('show')
         });
 
         $("#device-save").off('click').on('click', function () {
diff --git a/Views/device_dialog.php b/Views/device_dialog.php
index 94ec0ab..53a1b9c 100644
--- a/Views/device_dialog.php
+++ b/Views/device_dialog.php
@@ -5,7 +5,7 @@
 <link href="<?php echo $path; ?>Modules/device/Views/device_dialog.css" rel="stylesheet">
 <script type="text/javascript" src="<?php echo $path; ?>Modules/device/Views/device_dialog.js"></script>
 
-<div id="device-config-modal" class="modal hide keyboard modal-adjust" tabindex="-1" role="dialog" aria-labelledby="device-config-modal-label" aria-hidden="true" data-backdrop="static">
+<div id="device-config-modal" class="modal hide keyboard modal-adjust fade" tabindex="-1" role="dialog" aria-labelledby="device-config-modal-label" aria-hidden="true" data-backdrop="static">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3 id="device-config-modal-label"><?php echo _('Configure Device'); ?></h3>
@@ -14,7 +14,7 @@
         <div id="device-sidebar" class="modal-sidebar">
             <h3 style="padding-left:10px;">
                 <span><?php echo _('Devices'); ?></span>
-                <span id="device-sidebar-close" style="float:right; cursor:pointer;"><i class="icon-remove" style="margin:8px;"></i></span>
+                <span id="device-sidebar-close"><i class="icon-remove"></i></span>
             </h3>
             <div style="overflow-x: hidden; width:100%">
                 <div id="template-list" class="accordion"></div>

From 88ea00d145e4b73b93464b9de509082a476d4343 Mon Sep 17 00:00:00 2001
From: Emrys <emrys@openenergymonitor.org>
Date: Tue, 23 Oct 2018 22:49:15 +0100
Subject: [PATCH 2/7] matched js and css for responsive edit device  modal

---
 Views/device_dialog.css |  2 +-
 Views/device_dialog.js  | 12 ++++--------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/Views/device_dialog.css b/Views/device_dialog.css
index b10be1d..e803a7e 100644
--- a/Views/device_dialog.css
+++ b/Views/device_dialog.css
@@ -226,4 +226,4 @@
         width: 94%;
         left:3%;
     }
-}
\ No newline at end of file
+}
diff --git a/Views/device_dialog.js b/Views/device_dialog.js
index d5249c5..f4f9da9 100644
--- a/Views/device_dialog.js
+++ b/Views/device_dialog.js
@@ -176,22 +176,18 @@ var device_dialog =
         var height = $(window).height();
         
         if ($("#device-config-modal").length) {
-            var h = height - $("#device-config-modal").position().top - 160;
+            var h = height - $("#device-config-modal").position().top - 180;
             $("#device-config-body").height(h);
         }
         
         if (width < 680) {
             $("#device-sidebar-open").show();
             $("#device-sidebar-close").show();
-
             $("#device-sidebar").removeClass('show')
-                   
         } else {
             $("#device-sidebar-open").hide();
             $("#device-sidebar-close").hide();
-
             $("#device-sidebar").addClass('show')
-            
         }
     },
 
@@ -217,7 +213,7 @@ var device_dialog =
                 $('#template-info').hide();
                 $("#device-init").show()
             }
-            if ($(window).width() < 1024) {
+            if ($(window).width() < 680) {
                 $("#device-sidebar").removeClass('show')
             }
             
@@ -314,8 +310,8 @@ var device_dialog =
             return;
         }
         
-        console.log("deviceType:"+device_dialog.deviceType)
-        console.log(device_dialog.templates)
+        // console.log("deviceType:"+device_dialog.deviceType)
+        // console.log(device_dialog.templates)
         var template = device_dialog.templates[device_dialog.deviceType];
         $('#template-description').html('<em style="color:#888">'+template.description+'</em>');
         $('#template-info').show();

From d5ac122400f2e46b39836fee1d6ec7ce6b2ccd1f Mon Sep 17 00:00:00 2001
From: Emrys <emrys@openenergymonitor.org>
Date: Tue, 23 Oct 2018 23:11:01 +0100
Subject: [PATCH 3/7] removed fade modal effect - event propegation issue with
 inner accordion

---
 Views/device_dialog.css | 16 +++++++++-------
 Views/device_dialog.php |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/Views/device_dialog.css b/Views/device_dialog.css
index e803a7e..b193f23 100644
--- a/Views/device_dialog.css
+++ b/Views/device_dialog.css
@@ -168,7 +168,7 @@
 .table-inputs td:nth-of-type(5) { width:25%; }
 
 
-#device-config-modal{
+.modal{
     margin: 0;
     border-radius: 0;
     border: none;
@@ -177,7 +177,7 @@
     top: 3%;
 }
 #device-config-body{padding: 0}
-#device-config-modal .accordion-toggle{
+.modal .accordion-toggle{
     white-space: nowrap;
     overflow: hidden;
 }
@@ -202,13 +202,13 @@
 #device-sidebar.show{
     width: 100%;
 }
-#device-config-modal .modal-content{margin-top:0}
-#device-config-modal .modal-sidebar{margin-left:-1rem}
+.modal .modal-content{margin-top:0}
+.modal .modal-sidebar{margin: 0}
 
 /* add horizontal padding to devices larger than iphone5 (320px)*/
 @media (min-width: 340px) {
-    #device-config-modal{margin: 0 auto}
-    .modal-sidebar{margin:0 -1rem}
+    .modal{margin: 0 auto}
+    .modal .modal-sidebar{margin: 0 -1.2em}
     #device-content{ left: 15px; }
     #device-config-body{padding: 0 1rem}
 }
@@ -219,11 +219,13 @@
         transition: none;
     }
     #device-content{ left: 270px; }
-    #device-config-modal{
+    .modal{
         margin: 0;
         border-radius: 6px;
         border: 1px solid rgba(0,0,0,0.3);
         width: 94%;
         left:3%;
     }
+    .modal .modal-sidebar{margin: 0 -1.2em}
+
 }
diff --git a/Views/device_dialog.php b/Views/device_dialog.php
index 53a1b9c..47e160e 100644
--- a/Views/device_dialog.php
+++ b/Views/device_dialog.php
@@ -5,7 +5,7 @@
 <link href="<?php echo $path; ?>Modules/device/Views/device_dialog.css" rel="stylesheet">
 <script type="text/javascript" src="<?php echo $path; ?>Modules/device/Views/device_dialog.js"></script>
 
-<div id="device-config-modal" class="modal hide keyboard modal-adjust fade" tabindex="-1" role="dialog" aria-labelledby="device-config-modal-label" aria-hidden="true" data-backdrop="static">
+<div id="device-config-modal" class="modal hide keyboard modal-adjust" tabindex="-1" role="dialog" aria-labelledby="device-config-modal-label" aria-hidden="true" data-backdrop="static">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3 id="device-config-modal-label"><?php echo _('Configure Device'); ?></h3>

From 97fe739ccc06221fe0d93d4aed15b475cf08d127 Mon Sep 17 00:00:00 2001
From: Emrys <emrys@openenergymonitor.org>
Date: Tue, 23 Oct 2018 23:31:44 +0100
Subject: [PATCH 4/7] made the modal footer cancel "config device" btn fit on
 mobile devices

---
 Views/device_dialog.css | 9 +++++++--
 Views/device_dialog.php | 7 ++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/Views/device_dialog.css b/Views/device_dialog.css
index b193f23..7f2cea6 100644
--- a/Views/device_dialog.css
+++ b/Views/device_dialog.css
@@ -208,7 +208,7 @@
 /* add horizontal padding to devices larger than iphone5 (320px)*/
 @media (min-width: 340px) {
     .modal{margin: 0 auto}
-    .modal .modal-sidebar{margin: 0 -1.2em}
+    .modal .modal-sidebar{margin: 0 -1rem}
     #device-content{ left: 15px; }
     #device-config-body{padding: 0 1rem}
 }
@@ -226,6 +226,11 @@
         width: 94%;
         left:3%;
     }
-    .modal .modal-sidebar{margin: 0 -1.2em}
+    .modal .modal-sidebar{margin: 0 -1rem}
 
 }
+.visible-xs{display:none}
+@media (max-width: 375px) {
+    .hidden-xs{display:none}
+    .visible-xs{display:inline-block}
+}
diff --git a/Views/device_dialog.php b/Views/device_dialog.php
index 47e160e..5d0d96f 100644
--- a/Views/device_dialog.php
+++ b/Views/device_dialog.php
@@ -53,9 +53,10 @@
         </div>
     </div>
     <div class="modal-footer">
-        <button class="btn" data-dismiss="modal" aria-hidden="true"><?php echo _('Cancel'); ?></button>
-        <button id="device-delete" class="btn btn-danger" style="cursor:pointer"><i class="icon-trash icon-white"></i> <?php echo _('Delete'); ?></button>
-        <button id="device-init" class="btn btn-primary"><i class="icon-refresh icon-white"></i> <?php echo _('Initialize'); ?></button>
+        <button class="btn hidden-xs" data-dismiss="modal" aria-hidden="true"><?php echo _('Cancel'); ?></button>
+        <button class="btn visible-xs pull-left"  title="<?php echo _('Cancel'); ?>" style="margin-left:0;font-weight:bold" data-dismiss="modal" aria-hidden="true" type="button">×</button>
+        <button id="device-delete" class="btn btn-danger" style="cursor:pointer"><i class="icon-trash icon-white hidden-phone"></i> <?php echo _('Delete'); ?></button>
+        <button id="device-init" class="btn btn-primary"><i class="icon-refresh icon-white hidden-phone"></i> <?php echo _('Initialize'); ?></button>
         <button id="device-save" class="btn btn-primary"><?php echo _('Save'); ?></button>
     </div>
 </div>

From 25d0e1ef217629e77d6deb8d2f036353695facfd Mon Sep 17 00:00:00 2001
From: Emrys <emrys@openenergymonitor.org>
Date: Tue, 23 Oct 2018 23:47:12 +0100
Subject: [PATCH 5/7] triggered the display of the device list if device not
 initialized

---
 Views/device_dialog.css | 4 ++++
 Views/device_dialog.js  | 1 +
 Views/device_dialog.php | 6 +++---
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/Views/device_dialog.css b/Views/device_dialog.css
index 7f2cea6..57c7d6f 100644
--- a/Views/device_dialog.css
+++ b/Views/device_dialog.css
@@ -202,6 +202,10 @@
 #device-sidebar.show{
     width: 100%;
 }
+.key {
+    font-size: 12px !important;
+    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
+}
 .modal .modal-content{margin-top:0}
 .modal .modal-sidebar{margin: 0}
 
diff --git a/Views/device_dialog.js b/Views/device_dialog.js
index f4f9da9..1c55b5b 100644
--- a/Views/device_dialog.js
+++ b/Views/device_dialog.js
@@ -155,6 +155,7 @@ var device_dialog =
             }
             else {
                 $("#device-init").hide();
+                $('#device-sidebar').addClass('show')
             }
         }
         else {
diff --git a/Views/device_dialog.php b/Views/device_dialog.php
index 5d0d96f..6bbe78d 100644
--- a/Views/device_dialog.php
+++ b/Views/device_dialog.php
@@ -47,7 +47,7 @@
             
             <label><b><?php echo _('Device Key'); ?></b></label>
             <div class="input-append">
-                <input id="device-config-devicekey" class="input-large" type="text" style="width:260px">
+                <input id="device-config-devicekey" class="input-large key" type="text" style="width:245px;">
                 <button id="device-config-devicekey-new" class="btn"><?php echo _('New'); ?></button>
             </div>
         </div>
@@ -55,8 +55,8 @@
     <div class="modal-footer">
         <button class="btn hidden-xs" data-dismiss="modal" aria-hidden="true"><?php echo _('Cancel'); ?></button>
         <button class="btn visible-xs pull-left"  title="<?php echo _('Cancel'); ?>" style="margin-left:0;font-weight:bold" data-dismiss="modal" aria-hidden="true" type="button">×</button>
-        <button id="device-delete" class="btn btn-danger" style="cursor:pointer"><i class="icon-trash icon-white hidden-phone"></i> <?php echo _('Delete'); ?></button>
-        <button id="device-init" class="btn btn-primary"><i class="icon-refresh icon-white hidden-phone"></i> <?php echo _('Initialize'); ?></button>
+        <button id="device-delete" class="btn btn-danger" style="cursor:pointer"><i class="icon-trash icon-white hidden-xs"></i> <?php echo _('Delete'); ?></button>
+        <button id="device-init" class="btn btn-primary"><i class="icon-refresh icon-white hidden-xs"></i> <?php echo _('Initialize'); ?></button>
         <button id="device-save" class="btn btn-primary"><?php echo _('Save'); ?></button>
     </div>
 </div>

From 9c45fe11180d2c0718ec2d73b8ea125fd6a901eb Mon Sep 17 00:00:00 2001
From: Emrys <emrys@openenergymonitor.org>
Date: Thu, 25 Oct 2018 17:58:47 +0100
Subject: [PATCH 6/7] applied style convention to css

---
 Views/device_dialog.css | 70 ++++++++++++++++++++++++++++-------------
 1 file changed, 48 insertions(+), 22 deletions(-)

diff --git a/Views/device_dialog.css b/Views/device_dialog.css
index 57c7d6f..c05b036 100644
--- a/Views/device_dialog.css
+++ b/Views/device_dialog.css
@@ -168,25 +168,27 @@
 .table-inputs td:nth-of-type(5) { width:25%; }
 
 
-.modal{
+.modal {
     margin: 0;
     border-radius: 0;
     border: none;
     width: 100%;
-    left:0;
+    left: 0;
     top: 3%;
 }
-#device-config-body{padding: 0}
-.modal .accordion-toggle{
+#device-config-body {
+    padding: 0
+}
+.modal .accordion-toggle {
     white-space: nowrap;
     overflow: hidden;
 }
-#device-content{
+#device-content {
     left: 0.2rem;
     margin-left: 0;
     transition: width 0.5s ease-in-out;
 }
-#device-sidebar-close{
+#device-sidebar-close {
     cursor: pointer;
     position: absolute;
     right: 0;
@@ -195,46 +197,70 @@
     background: #f2f2f2;
     padding: .3em .6em;
 }
-#device-sidebar{
+#device-sidebar {
     transition: width 0.3s ease-in-out;
     width: 0;
 }
-#device-sidebar.show{
+#device-sidebar.show {
     width: 100%;
 }
 .key {
     font-size: 12px !important;
     font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
 }
-.modal .modal-content{margin-top:0}
-.modal .modal-sidebar{margin: 0}
+.modal .modal-content {
+    margin-top: 0
+}
+.modal .modal-sidebar {
+    margin: 0
+}
 
 /* add horizontal padding to devices larger than iphone5 (320px)*/
 @media (min-width: 340px) {
-    .modal{margin: 0 auto}
-    .modal .modal-sidebar{margin: 0 -1rem}
-    #device-content{ left: 15px; }
-    #device-config-body{padding: 0 1rem}
+    .modal {
+        margin: 0 auto
+    }
+    .modal .modal-sidebar {
+        margin: 0 -1rem
+    }
+    #device-content {
+        left: 15px;
+    }
+    #device-config-body {
+        padding: 0 1rem
+    }
 }
 
 @media (min-width: 680px) { 
-    #device-sidebar.show{
+    #device-sidebar.show {
         width: 250px;
         transition: none;
     }
-    #device-content{ left: 270px; }
-    .modal{
+    #device-content {
+        left: 270px;
+    }
+    .modal {
         margin: 0;
         border-radius: 6px;
         border: 1px solid rgba(0,0,0,0.3);
         width: 94%;
-        left:3%;
+        left: 3%;
+    }
+    .modal .modal-sidebar {
+        margin: 0 -1rem
     }
-    .modal .modal-sidebar{margin: 0 -1rem}
 
 }
-.visible-xs{display:none}
+
+/* hide/show items on very small devices */
+.visible-xs {
+    display: none
+}
 @media (max-width: 375px) {
-    .hidden-xs{display:none}
-    .visible-xs{display:inline-block}
+    .hidden-xs {
+        display: none
+    }
+    .visible-xs {
+        display: inline-block
+    }
 }

From d91eed5513f7045664f163358831353a6c637adc Mon Sep 17 00:00:00 2001
From: Emrys <emrys@openenergymonitor.org>
Date: Thu, 25 Oct 2018 19:09:10 +0100
Subject: [PATCH 7/7] added "please select device" user instructions

---
 Views/device_dialog.js  | 5 +++--
 Views/device_dialog.php | 7 ++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/Views/device_dialog.js b/Views/device_dialog.js
index 1c55b5b..63a86f9 100644
--- a/Views/device_dialog.js
+++ b/Views/device_dialog.js
@@ -152,10 +152,11 @@ var device_dialog =
             $("#device-save").html("Save");
             if (this.device.type != null && this.device.type != '') {
                 $("#device-init").show();
-            }
-            else {
+                $('#select-device-alert').addClass('hidden')
+            } else {
                 $("#device-init").hide();
                 $('#device-sidebar').addClass('show')
+                $('#select-device-alert').removeClass('hidden')
             }
         }
         else {
diff --git a/Views/device_dialog.php b/Views/device_dialog.php
index 6bbe78d..4e58c1b 100644
--- a/Views/device_dialog.php
+++ b/Views/device_dialog.php
@@ -13,9 +13,14 @@
     <div id="device-config-body" class="modal-body">
         <div id="device-sidebar" class="modal-sidebar">
             <h3 style="padding-left:10px;">
-                <span><?php echo _('Devices'); ?></span>
+                <span><?php echo _('Devices'); ?></span>            
                 <span id="device-sidebar-close"><i class="icon-remove"></i></span>
             </h3>
+            <div id="select-device-alert" class="hidden" style="max-height: 3rem; overflow: hidden">
+                <div class="alert" style="border: 0; line-height: 1.1; margin-bottom: 0; padding-left: .8em; border-radius: 0;">
+                <?php echo _('Please select the correct device template to setup your device:'); ?>
+                </div>
+            </div>
             <div style="overflow-x: hidden; width:100%">
                 <div id="template-list" class="accordion"></div>
             </div>