diff options
author | nachoparker <nacho@ownyourbits.com> | 2018-02-19 23:25:35 +0300 |
---|---|---|
committer | nachoparker <nacho@ownyourbits.com> | 2018-02-20 23:33:41 +0300 |
commit | 63b74a82731fc97d28249e4f081fd3e38e2b44ca (patch) | |
tree | 54b5866ae4dcc3c9d2b06ec67dc1586705a51ac1 /ncp-web | |
parent | bf4d2fc476dbe8b0af76b73d0ac78d0b7a68e91d (diff) |
ncp-web: support for small screensv0.46.23
Diffstat (limited to 'ncp-web')
-rw-r--r-- | ncp-web/img/close.svg (renamed from ncp-web/close.svg) | 0 | ||||
-rw-r--r-- | ncp-web/img/green-circle.svg (renamed from ncp-web/green-circle.svg) | 0 | ||||
-rw-r--r-- | ncp-web/img/info.svg (renamed from ncp-web/info.svg) | 0 | ||||
-rw-r--r-- | ncp-web/img/red-circle.svg (renamed from ncp-web/red-circle.svg) | 0 | ||||
-rw-r--r-- | ncp-web/index.php | 3 | ||||
-rw-r--r-- | ncp-web/menu.svg | 1 | ||||
-rw-r--r-- | ncp-web/ncp.css | 51 | ||||
-rw-r--r-- | ncp-web/ncp.js | 78 |
8 files changed, 102 insertions, 31 deletions
diff --git a/ncp-web/close.svg b/ncp-web/img/close.svg index 012c3484..012c3484 100644 --- a/ncp-web/close.svg +++ b/ncp-web/img/close.svg diff --git a/ncp-web/green-circle.svg b/ncp-web/img/green-circle.svg index e82ffe38..e82ffe38 100644 --- a/ncp-web/green-circle.svg +++ b/ncp-web/img/green-circle.svg diff --git a/ncp-web/info.svg b/ncp-web/img/info.svg index f6438ed7..f6438ed7 100644 --- a/ncp-web/info.svg +++ b/ncp-web/img/info.svg diff --git a/ncp-web/red-circle.svg b/ncp-web/img/red-circle.svg index acf7f898..acf7f898 100644 --- a/ncp-web/red-circle.svg +++ b/ncp-web/img/red-circle.svg diff --git a/ncp-web/index.php b/ncp-web/index.php index 76c85084..98d7c152 100644 --- a/ncp-web/index.php +++ b/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> diff --git a/ncp-web/menu.svg b/ncp-web/menu.svg deleted file mode 100644 index 222b39ea..00000000 --- a/ncp-web/menu.svg +++ /dev/null @@ -1 +0,0 @@ -<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M2 2v2h12V2zm0 5v2h12V7zm0 5v2h12v-2z"/></svg>
\ No newline at end of file diff --git a/ncp-web/ncp.css b/ncp-web/ncp.css index 352d6a95..04d45ecc 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 327fcbd0..c666bdc4 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(); |