From 6fdd1ea46224baa46602ac96e5593d26e9313a43 Mon Sep 17 00:00:00 2001 From: nacho Date: Mon, 19 Feb 2018 21:25:35 +0100 Subject: [PATCH] ncp-web: support for small screens --- changelog.md | 4 +- ncp-web/{ => img}/close.svg | 0 ncp-web/{ => img}/green-circle.svg | 0 ncp-web/{ => img}/info.svg | 0 ncp-web/{ => img}/red-circle.svg | 0 ncp-web/index.php | 3 +- ncp-web/menu.svg | 1 - ncp-web/ncp.css | 51 +++++++++++-------- ncp-web/ncp.js | 78 +++++++++++++++++++++++++++--- 9 files changed, 105 insertions(+), 32 deletions(-) rename ncp-web/{ => img}/close.svg (100%) rename ncp-web/{ => img}/green-circle.svg (100%) rename ncp-web/{ => img}/info.svg (100%) rename ncp-web/{ => img}/red-circle.svg (100%) delete mode 100644 ncp-web/menu.svg diff --git a/changelog.md b/changelog.md index cd543b4de..f15797eaa 100644 --- a/changelog.md +++ b/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 diff --git a/ncp-web/close.svg b/ncp-web/img/close.svg similarity index 100% rename from ncp-web/close.svg rename to ncp-web/img/close.svg diff --git a/ncp-web/green-circle.svg b/ncp-web/img/green-circle.svg similarity index 100% rename from ncp-web/green-circle.svg rename to ncp-web/img/green-circle.svg diff --git a/ncp-web/info.svg b/ncp-web/img/info.svg similarity index 100% rename from ncp-web/info.svg rename to ncp-web/img/info.svg diff --git a/ncp-web/red-circle.svg b/ncp-web/img/red-circle.svg similarity index 100% rename from ncp-web/red-circle.svg rename to ncp-web/img/red-circle.svg diff --git a/ncp-web/index.php b/ncp-web/index.php index 76c850848..98d7c152f 100644 --- a/ncp-web/index.php +++ b/ncp-web/index.php @@ -148,6 +148,7 @@
+

Configure NextCloudPi features

@@ -163,7 +164,7 @@
- + diff --git a/ncp-web/menu.svg b/ncp-web/menu.svg deleted file mode 100644 index 222b39eaa..000000000 --- a/ncp-web/menu.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ncp-web/ncp.css b/ncp-web/ncp.css index 352d6a953..04d45ecc1 100644 --- a/ncp-web/ncp.css +++ b/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; } diff --git a/ncp-web/ncp.js b/ncp-web/ncp.js index 327fcbd07..c666bdc4c 100644 --- a/ncp-web/ncp.js +++ b/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();