From bb52e6f19a4c0a8b18b021a04a5f3ebe5db840a3 Mon Sep 17 00:00:00 2001
From: Vincent Nivoliers <vincent.nivoliers@gmail.com>
Date: Sat, 17 Sep 2016 16:18:25 +0200
Subject: [PATCH] fixed bottom phone toolbar
---
css/style.css | 100 +++++++++++++++--------------------------
explorer.php | 30 ++++++-------
js/pgm_construction.js | 25 ++++++++---
3 files changed, 71 insertions(+), 84 deletions(-)
diff --git a/css/style.css b/css/style.css
index 6f42110..6192321 100644
--- a/css/style.css
+++ b/css/style.css
@@ -189,19 +189,6 @@ script {
vertical-align: middle;
}
-#tile_index {
- border-radius: 5px ;
- border: 1px solid #000 ;
- text-align: center ;
- margin-top: 5px ;
- padding: 5px ;
- font-size: 120% ;
- -webkit-box-shadow: inset 0px 0px 2px #000;
- box-shadow: inset 0px 0px 2px #000;
- background-color: #5fb1e1 ;
- display: none ;
-}
-
.boussole[transform=r0] {
background-image:
url('../Images/boussole_overlay.png'),
@@ -361,6 +348,7 @@ script {
border-radius : 0 ;
white-space : nowrap ;
overflow : auto ;
+ z-index : 110 ;
}
.pgm-block > .list-group {
@@ -380,6 +368,7 @@ script {
#pgm {
min-height : 39em ;
text-align : center ;
+ box-sizing : content-box ;
}
#pgm-main {
@@ -397,22 +386,49 @@ script {
margin-right : 10px ;
}
-.height-wrapper {
+#phone-toolbar {
position : absolute ;
top : 0 ;
- height : calc(100% - 30px) ;
+ margin : 0 ;
+ height : calc(100% - 20px) ;
width : calc(100% - 30px) ;
max-height : 100vh ;
- z-index : -1 ;
+ text-align : center ;
+ ponter-events : none ;
+ box-sizing : content-box ;
}
-#phone-toolbar {
- position : relative ;
- z-index : 110 ;
+@media(max-width:767px){
+ #phone-toolbar {
+ width : 100% ;
+ }
+}
+
+#phone-toolbar:before {
+ content: '\200B';
+ display: inline-block;
+ height: 100%;
+ vertical-align: middle;
}
#phone-toolbar > .btn-group {
- bottom : 0 ;
+ position : absolute ;
+ display : inline-block ;
+ bottom : 20px ;
+ margin : 0 ;
+ transform : translate(-50%, 0) ;
+ overflow : hidden ;
+ white-space : nowrap ;
+}
+
+#phone-toolbar.fixed-bottom > .btn-group {
+ position : fixed ;
+ bottom : 10px ;
+}
+
+#phone-toolbar > .btn-group > .btn {
+ float : none ;
+ display : inline-block ;
}
@@ -570,7 +586,7 @@ input.add-target {
}
.fixed-top {
- position : fixed ;
+ position : fixed !important ;
top : 10px ;
}
@@ -638,46 +654,4 @@ input.add-target {
top: 0;
width: 100%;
}
-
- .offcanvas-btn {
- z-index : 110 ;
- }
-
- .offcanvas-btn-open {
- position : fixed ;
- right : 0 ;
- display : block !important ;
- }
-
- .row-offcanvas.active .offcanvas-btn-open{
- display : none !important ;
- }
-
- .offcanvas-btn-close {
- position : fixed ;
- right : 0 ;
- display : none !important ;
- }
-
- .row-offcanvas.active .offcanvas-btn-close{
- display : block !important ;
- }
-
- .offcanvas-btn a {
- padding : 15px ;
- border : 1px solid #ddd ;
- background : rgb(245, 245, 245) ;
- position : relative ;
- top : 0px ;
- right : 0px ;
- border-top-left-radius : 5px ;
- border-bottom-left-radius : 5px ;
- text-decoration : none ;
- cursor : default ;
- font-size : 1.5em ;
- }
-
- .offcanvas-btn a:hover {
- background : #eee ;
- }
}
diff --git a/explorer.php b/explorer.php
index b7ea3b4..3358a94 100644
--- a/explorer.php
+++ b/explorer.php
@@ -783,22 +783,20 @@
</li>
</ul>
<!--{{{ mobile toolbar-->
- <div class="height-wrapper">
- <div class="btn-toolbar hidden" role="toolbar" id="phone-toolbar">
- <div class="btn-group" role="group">
- <button class="btn btn-default active" autofocus type="button" id="phone-tool-add">
- <span class="glyphicon glyphicon-plus"></span>
- </button>
- <button class="btn btn-default" type="button" id="phone-tool-cut">
- <span class="glyphicon glyphicon-scissors"></span>
- </button>
- <button class="btn btn-default" type="button" id="phone-tool-copy">
- <span class="glyphicon glyphicon-copy"></span>
- </button>
- <button class="btn btn-default" type="button" id="phone-tool-paste">
- <span class="glyphicon glyphicon-paste"></span>
- </button>
- </div>
+ <div class="btn-toolbar hidden" role="toolbar" id="phone-toolbar">
+ <div class="btn-group" role="group">
+ <button class="btn btn-default active" autofocus type="button" id="phone-tool-add">
+ <span class="glyphicon glyphicon-plus"></span>
+ </button><!--
+ --><button class="btn btn-default" type="button" id="phone-tool-cut">
+ <span class="glyphicon glyphicon-scissors"></span>
+ </button><!--
+ --><button class="btn btn-default" type="button" id="phone-tool-copy">
+ <span class="glyphicon glyphicon-copy"></span>
+ </button><!--
+ --><button class="btn btn-default" type="button" id="phone-tool-paste">
+ <span class="glyphicon glyphicon-paste"></span>
+ </button>
</div>
</div>
<!--}}}-->
diff --git a/js/pgm_construction.js b/js/pgm_construction.js
index 9d1916c..0d24bea 100644
--- a/js/pgm_construction.js
+++ b/js/pgm_construction.js
@@ -13,6 +13,7 @@ var library = document.getElementById('library') ;
var library_panel = document.getElementById('library-panel') ;
var pgm = document.getElementById('pgm') ;
var main = document.getElementById('pgm-main') ;
+var phone_toolbar = document.getElementById('phone-toolbar') ;
/* {{{ General tools ======================================================== */
@@ -519,7 +520,7 @@ function pin_library() {
function unpin_library() {
library_panel.style.width = '' ;
- window.removeEventListener('scroll', library_fixed_switch) ;
+ document.body.removeEventListener('scroll', library_fixed_switch) ;
}
function desktop_activate_library() {
@@ -906,7 +907,6 @@ function mobile_deactivate_blocks(el) {
}
function show_mobile_ui() {
- var phone_toolbar = document.getElementById("phone-toolbar") ;
removeClass(phone_toolbar, "hidden") ;
var library_close = document.getElementById("btn-close-library") ;
removeClass(library_close, "hidden") ;
@@ -923,7 +923,6 @@ function show_mobile_ui() {
}
function hide_mobile_ui() {
- var phone_toolbar = document.getElementById("phone-toolbar") ;
addClass(phone_toolbar, "hidden") ;
var library_close = document.getElementById("btn-close-library") ;
addClass(library_close, "hidden") ;
@@ -961,7 +960,6 @@ function is_mobile() {
}
function phone_tools_set(id) {
- var phone_toolbar = document.getElementById("phone-toolbar") ;
var btns = phone_toolbar.getElementsByTagName("button") ;
for(var i = 0; i < btns.length; ++i) {
if(btns[i].id == id) {
@@ -1001,7 +999,6 @@ document.getElementById('phone-tool-paste').addEventListener(
) ;
function phone_tools_get() {
- var phone_toolbar = document.getElementById("phone-toolbar") ;
var btns = phone_toolbar.getElementsByTagName("button") ;
for(var i = 0; i < btns.length; ++i) {
if(btns[i].className.match(/active/)) {
@@ -1010,6 +1007,22 @@ function phone_tools_get() {
}
}
+function phone_tools_fixed_switch() {
+ if(pgm.getBoundingClientRect().top < 10) {
+ addClass(phone_toolbar, 'fixed-bottom') ;
+ } else {
+ removeClass(phone_toolbar, 'fixed-bottom') ;
+ }
+}
+
+function pin_phone_toolbar() {
+ document.body.addEventListener('scroll', phone_tools_fixed_switch) ;
+}
+
+function unpin_phone_toolbar() {
+ document.body.removeEventListener('scroll', phone_tools_fixed_switch) ;
+}
+
function open_library() {
var elem = document.getElementById("program") ;
addClass(elem, "active") ;
@@ -1032,6 +1045,7 @@ function mobile_activate() {
mobile_activate_library() ;
mobile_activate_program() ;
show_mobile_ui() ;
+ pin_phone_toolbar() ;
}
function mobile_deactivate() {
@@ -1039,6 +1053,7 @@ function mobile_deactivate() {
mobile_deactivate_library() ;
mobile_deactivate_program() ;
hide_mobile_ui() ;
+ unpin_phone_toolbar() ;
}
/*}}}*/
--
GitLab