ncp-web: support for small screens

changelog.md

@@ -1,5 +1,7 @@
 
-[v0.46.22](https://github.com/nextcloud/nextcloudpi/commit/37b396a) (2018-02-19) UFW: make it work with nc-forward-ports
+[v0.46.23](https://github.com/nextcloud/nextcloudpi/commit/d0d6159) (2018-02-19) ncp-web: support for small screens
+
+[v0.46.22](https://github.com/nextcloud/nextcloudpi/commit/44f00b6) (2018-02-19) UFW: make it work with nc-forward-ports
 
 [v0.46.21](https://github.com/nextcloud/nextcloudpi/commit/4183052) (2018-02-19) docker: use docker networks for x86
 

ncp-web/index.php

@@ -148,6 +148,7 @@ HTML;
           </div>
 
       <div id="app-content">
+        <div id="app-navigation-toggle" class="icon-menu hidden"></div>
         <h2 id="config-box-title">Configure NextCloudPi features</h2>
         <a href="#" target="_blank">
           <div id="config-extra-info" class="icon-info"></div>
@@ -163,7 +164,7 @@ HTML;
                 <div id="circle-retstatus" class="icon-red-circle"></div>
               </div>
           </form>
-          <textarea readonly id="details-box" rows="25" cols="60"></textarea>
+          <textarea readonly id="details-box" rows="12"></textarea>
         </div>
       </div>
 

ncp-web/menu.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2 2v2h12V2zm0 5v2h12V7zm0 5v2h12v-2z"/></svg>

ncp-web/ncp.css

@@ -38,7 +38,8 @@ caption,th,td {
  font-weight:normal
 }
 table,td,th {
- vertical-align:middle
+ vertical-align:middle;
+ padding-right: 5px;
 }
 a {
  border:0;
@@ -589,6 +590,7 @@ kbd {
  border-right:1px solid #ebebeb;
  display:flex;
  flex-direction:column;
+ z-index: 2000;
 }
 #app-navigation > ul {
  position:relative;
@@ -891,23 +893,21 @@ select {
  visibility:hidden
 }
 @media only screen and (max-width:768px) {
- #app-navigation,#app-content {
+ #app-content {
   position:absolute !important;
   top:0;
   left:0;
   right:0;
-  bottom:0
- }
- #app-navigation {
-  width:250px !important
- }
- #app-content {
-  width:100% !important;
-  left:0 !important;
+  bottom:0;
+  width: 80% !important;
+  margin: auto !important;
   background-color:#fff;
   overflow-x:hidden !important;
   z-index:1000
  }
+ #app-navigation {
+  width:0px;
+ }
  #body-settings #app-content {
   overflow-x:auto !important
  }
@@ -1050,9 +1050,10 @@ select {
 }
 
 #config-box-wrapper {
-  width: 450px ;
-  margin-left: auto ;
-  margin-right: auto ;
+  width: 80%;
+  max-width: 450px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 #config-box-wrapper table {
@@ -1064,7 +1065,7 @@ select {
 }
 
 #details-box {
-  width: auto;
+  width: 100%;
 }
 
 #loading-gif {
@@ -1076,7 +1077,7 @@ select {
 }
 
 #config-box-info {
-  white-space: pre;
+  white-space: pre-wrap;
   text-align: center;
 }
 
@@ -1087,7 +1088,11 @@ select {
 }
 
 .icon-close {
- background-image:url('close.svg')
+ background-image:url('img/close.svg')
+}
+
+.icon-menu {
+  background-image: url('img/menu.svg');
 }
 
 #power {
@@ -1126,18 +1131,18 @@ select {
   background-image: url('img/wizard.svg');
 }
 .icon-red-circle {
-  background-image: url('red-circle.svg');
+  background-image: url('img/red-circle.svg');
   padding: 8px;
   display: none;
 }
 
 .icon-green-circle {
-  background-image: url('green-circle.svg');
+  background-image: url('img/green-circle.svg');
   padding: 8px;
 }
 
 .icon-info {
-  background-image: url('info.svg');
+  background-image: url('img/info.svg');
   padding: 8px;
   float: right;
   display: none;
@@ -1155,6 +1160,10 @@ a#versionlink{
  cursor:pointer
 }
 
+a#versionlink:hover {
+  opacity: 0.8;
+}
+
 #update-notification {
   cursor: pointer;
 }
@@ -1242,11 +1251,11 @@ a#versionlink{
 
 #overlay {
   display: block;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.2);
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 0;
+  z-index: 1500;
 }

ncp-web/ncp.js

@@ -64,6 +64,9 @@ $(function()
     if ( confLock ) return;
     confLock = true;
 
+    if ( window.innerWidth < 768 )
+      close_menu();
+
     $( '#' + selectedID ).set('-active');
     var that = this;
     $.request('post', 'ncp-launcher.php', { action:'cfgreq', 
@@ -158,21 +161,80 @@ $(function()
     $('#details-box').hide( '' );
   } );
 
+  // slide menu
+  var slide_menu_enabled = false;
+
+  function hide_overlay(e) { $('#overlay').hide() }
+
+  function open_menu()
+  {
+    if ( $('#app-navigation').get('$width') != '250px' )
+    {
+      $('#overlay').show();
+      $('#overlay').on('|click', close_menu );
+      $('#app-navigation').animate( {$width: '250px'}, 150 );
+    }
+  }
+
+  function close_menu()
+  {
+    if ( $('#app-navigation').get('$width') == '250px' )
+    {
+      $('#app-navigation').animate( {$width: '0px'}, 150 );
+      $('#overlay').hide();
+      $.off( close_menu );
+    }
+  }
+
+  function close_menu_on_click_out(e) { close_menu(); }
+
+  function enable_slide_menu()
+  {
+    if ( slide_menu_enabled ) return;
+    $( '#app-navigation' ).set( { $width: '0px' } );
+    $( '#app-navigation' ).set( { $position: 'absolute' } );
+    $( '#app-navigation-toggle' ).on('click', open_menu );
+    $( '#app-content' ).on('|click', close_menu_on_click_out );
+    slide_menu_enabled = true;
+  }
+
+  function disable_slide_menu()
+  {
+    if ( !slide_menu_enabled ) return;
+    $.off( open_menu );
+    $.off( close_menu );
+    $.off( close_menu_on_click_out );
+    $( '#app-navigation' ).set( { $width: '250px' } );
+    $( '#app-navigation' ).set( { $position: 'unset' } );
+    $('#overlay').hide();
+    slide_menu_enabled = false;
+  }
+
+  if ( window.innerWidth < 768 ) 
+    enable_slide_menu();
+
+  window.addEventListener('resize', function(){ 
+    if ( window.innerWidth < 768 ) 
+      enable_slide_menu();
+    else
+      disable_slide_menu();
+  } );
+
   // Power-off button
+  function hide_poweroff_dialog(ev)
+  {
+    $('#poweroff-dialog').hide();
+    $('#overlay').hide();
+    $('#overlay').off('click');
+  }
   function poweroff_event_handler(e)
   {
-    //e.preventBubble = true;
     $('#overlay').show();
     $('#poweroff-dialog').show();
-    $('#overlay').on('click', function(ev)
-    {
-       $('#poweroff-dialog').hide();
-       $('#overlay').hide();
-       $('#overlay').off('click');
-    });
+    $('#overlay').on('click', hide_poweroff_dialog );
   }
   $( '#poweroff' ).on('click', poweroff_event_handler );
-  
+
   $( '#poweroff-option_shutdown' ).on('click', function(e)
   {
     $('#poweroff-dialog').hide();