Fixes for UX

defaults.cfg

@@ -1,7 +1,7 @@
 [terrariumpi]
 host = 0.0.0.0
 port = 8090
-version = 2.3
+version = 2.4
 title = TerrariumPI %(version)s
 person = M. Daygecko
 image = /static/images/gecko.jpg

static/css/terrariumpi.css

@@ -44,6 +44,17 @@ canvas.gauge {
   border: solid 1px red;
 }
 
+footer {
+  margin-bottom: -20px;
+}
+
+div.row.sensor,
+div.row.switch,
+div.row.door,
+div.row.webcam{
+  display: none;
+}
+
 /* System time */
 #system_time {
   display: block;

static/js/terrariumpi.js

@@ -398,6 +398,7 @@ function update_dashboard_environment(name, value) {
     systempart.find('span.glyphicon-warning-sign').toggle(value.alarm);
   }
   systempart.find('.state i').removeClass('red green').addClass(value.state === 'on' ? 'green' : 'red').attr('title', value.state === 'on' ? '{{_('On')}}' : '{{_('Off')}}');
+  setContentHeight();
 }
 
 function format_uptime(uptime) {
@@ -535,24 +536,24 @@ var CURRENT_URL = window.location.href.split('#')[0].split('?')[0],
     $NAV_MENU = $('.nav_menu'),
     $FOOTER = $('footer');
 
-// Sidebar
-function init_sidebar() {
-  // TODO: This is some kind of easy fix, maybe we can improve this
-  var setContentHeight = function () {
-    // reset height
-    $RIGHT_COL.css('min-height', $(window).height());
+// TODO: This is some kind of easy fix, maybe we can improve this
+function setContentHeight() {
+  // reset height
+  $RIGHT_COL.css('min-height', $(window).height());
 
-    var bodyHeight = $BODY.outerHeight(),
-      footerHeight = $BODY.hasClass('footer_fixed') ? -10 : $FOOTER.height(),
-      leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
-      contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;
+  var bodyHeight = $BODY.outerHeight(),
+    footerHeight = $BODY.hasClass('footer_fixed') ? -10 : $FOOTER.height(),
+    leftColHeight = $LEFT_COL.eq(1).height() + $SIDEBAR_FOOTER.height(),
+    contentHeight = bodyHeight < leftColHeight ? leftColHeight : bodyHeight;
 
-    // normalize content
-    contentHeight -= $NAV_MENU.height() + footerHeight;
+  // normalize content
+  contentHeight -= $NAV_MENU.height() + footerHeight;
 
-    $RIGHT_COL.css('min-height', contentHeight);
-  };
+  $RIGHT_COL.css('min-height', contentHeight - 15);
+};
 
+// Sidebar
+function init_sidebar() {
   $SIDEBAR_MENU.find('a').on('click', function(ev) {
     console.log('clicked - sidebar_menu');
         var $li = $(this).parent();
@@ -659,6 +660,8 @@ function reload_reload_theme() {
     container: 'body',
     html: true
   });
+
+  setContentHeight();
 }
 
 function sensor_gauge(name, data) {
@@ -1019,7 +1022,7 @@ function add_sensor_row(id,hardwaretype,address,type,name,alarm_min,alarm_max,li
     $(item).val(eval($(item).attr('name').replace(/sensor_[0-9]+_/g,'')))
   });
   sensor_row.find("input[name$='_address']").attr("readonly", hardwaretype == 'owfs' || hardwaretype == 'w1');
-  sensor_row.insertBefore('div.row.submit');
+  sensor_row.insertBefore('div.row.submit').show();
 
   reload_reload_theme();
 
@@ -1069,7 +1072,7 @@ function add_switch_row(id,hardwaretype,address,name,power_wattage,water_flow) {
     $(item).val(eval($(item).attr('name').replace(/switch_[0-9]+_/g,'')));
   });
 
-  switch_row.insertBefore('div.row.submit');
+  switch_row.insertBefore('div.row.submit').show();
   reload_reload_theme();
 
   switch_row.find("select").select2({
@@ -1109,7 +1112,7 @@ function add_door_row(id,hardwaretype,address,name) {
     $(item).val(eval($(item).attr('name').replace(/door_[0-9]+_/g,'')));
   });
 
-  door_row.insertBefore('div.row.submit');
+  door_row.insertBefore('div.row.submit').show();
   reload_reload_theme();
 
   door_row.find("select").select2({
@@ -1153,7 +1156,7 @@ function add_webcam_row(id,location,name,rotation,preview) {
     webcam_row.find('img').attr('src',preview);
   }
 
-  webcam_row.insertBefore('div.row.submit');
+  webcam_row.insertBefore('div.row.submit').show();
   reload_reload_theme();
 
   webcam_row.find("select").select2({

terrariumWebserver.py

@@ -82,6 +82,7 @@ def __routes(self):
   def __template_variables(self, template):
     variables = { 'lang' : self.__terrariumEngine.config.get_active_language(),
                   'title' : self.__config['title'],
+                  'version' : self.__config['version'],
                   'page_title' : _(template.replace('_',' ').capitalize()),
                   'translations': self.__translations }
 
@@ -259,4 +260,4 @@ def start(self):
                    server=GeventWebSocketServer,
                    debug=True,
                    reloader=False,
-                   quiet=True)
+                   quiet=False)

views/door_status.tpl

@@ -70,6 +70,7 @@
 
                 load_history_graph(door.id,'door','/api/history/doors/' + door.id);
               });
+              setContentHeight();
             });
           });
         </script>

views/inc/footer.tpl

@@ -2,7 +2,7 @@
     </div>
     <footer>
       <div class="pull-right">
-        Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
+        {{title}} - <a href="https://terrarium.theyosh.nl" title="{{_('Terrarium home automation v. %s' % version)}}" target="_blank">{{_('Terrarium home automation v. %s' % version)}}</a> - <a href="https://github.com/theyosh/TerrariumPI" target="_blank" title="{{_('Download TerrariumPI on Github')}}">{{_('Github')}}</a>
       </div>
       <div class="clearfix"></div>
     </footer><!-- /footer content -->

views/inc/sensor_list.tpl

@@ -69,10 +69,11 @@
               var rows = $('div.row.sensor');
               $.each(data.sensors, function(index,sensor) {
                 // Add an id to the row when first run
-                $(rows[index]).attr('id',sensor.id);
+                $(rows[index]).attr('id',sensor.id).show();
                 sensor_gauge(sensor.id, sensor);
                 load_history_graph(sensor.id,'{{sensor_type}}','/api/history/sensors/' + sensor.id);
               });
+              setContentHeight();
             });
           });
         </script>

views/switch_settings.tpl

@@ -132,7 +132,6 @@
                                power_switch.water_flow);
                 update_power_switch(power_switch.id,power_switch);
               });
-              reload_reload_theme();
             });
           });
         </script>

views/switch_status.tpl

@@ -60,10 +60,11 @@
             $.get('/api/switches',function(data) {
               var power_divs = $('div.row.switch');
               $.each(data.switches,function(index,value){
-                $(power_divs[index]).attr('id','switch_' + value.id);
+                $(power_divs[index]).attr('id','switch_' + value.id).show()
                 update_power_switch(value.id,value);
                 load_history_graph('switch_' + value.id,'switch','/api/history/switches/' + value.id);
               });
+              setContentHeight();
             });
           });
         </script>