Skip to content
Snippets Groups Projects
Commit bb52e6f1 authored by Vincent Nivoliers's avatar Vincent Nivoliers
Browse files

fixed bottom phone toolbar

parent 813d32be
No related branches found
No related tags found
No related merge requests found
......@@ -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 ;
}
}
......@@ -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>
<!--}}}-->
......
......@@ -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() ;
}
/*}}}*/
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment