Minisidebar for mobile devices

fixes #395

* sidebar toggle menu - if there are more tools in the toolbar than fits the width of the screen

* Change minisidebar style

* Change unexpected behavior of minisidebar

Sidebar closed when app started on mobile device

* Refactor populating number of panels enabled

components/core/core.js

@@ -348,7 +348,8 @@ angular.module('hs.core', ['hs.map', 'gettext', 'hs.drag', 'hs.layout'])
             $templateCache.removeAll();
 
             if (me.exists('hs.sidebar.controller') /*&& me.puremapApp != true*/) {
-                layoutService.sidebarExpanded = true;
+                if(window.innerWidth < 767){layoutService.sidebarExpanded = false;}
+                else{layoutService.sidebarExpanded = true;}
             }
 
             /* HACK: https://github.com/openlayers/ol3/issues/3990 

components/layermanager/partials/basemap-gallery.html

@@ -1,6 +1,6 @@
 <div class="basemapGallery" ng-style="galleryStyle()">
     <div class="btn-group btn-group-sm" role="group" aria-label="Button group with nested dropdown">
-        <button type="button" ng-if="fitsInContainer()" class="button-primary galleryButton btn-sm "
+        <button type="button" ng-if="fitsInContainer()" class="button-primary btn-sm  basemap-tile "
             ng-repeat="layer in LayMan.data.baselayers | orderBy: 'title'"
             ng-click="LayMan.changeBaseLayerVisibility($event, layer)"
             ng-class="{'active': layer.active}">{{::layer.title}}</button>

components/layout/layout.service.js

@@ -302,10 +302,15 @@ export default ['config', '$rootScope',
                 if (layoutWidth <= 767) {
                     tmp = layoutWidth;
                     me.sidebarToggleable = false;
+                    if (layoutWidth < (me.panelsEnabled + 1) * 53.6) { me.classicSidebar = false }
+                    else {
+                        me.classicSidebar = true
+                    }
                     return tmp;
                 }
                 else {
                     me.sidebarToggleable = true;
+                    me.classicSidebar = true
                 }
                 if (me.sidebarExpanded && me.sidebarVisible()) {
                     if (panelWidths[me.mainpanel])
@@ -349,13 +354,16 @@ export default ['config', '$rootScope',
 
             widthWithoutPanelSpace() {
                 return 'calc(100% - ' + me.panelSpaceWidth() + 'px)';
-            }
+            },
+            panelsEnabled: 0
 
         })
 
         let panelsEnabledDefaults = {
+            legend: true,
+            info: true,
             compositions: true,
-            toolbar: false,
+            toolbar: true,
             mobile_settings: false,
             draw: false,
             ows: true,
@@ -364,8 +372,16 @@ export default ['config', '$rootScope',
             saveMap: true,
             language: true,
             permalink: true,
-            compositionLoadingProgress: false
+            compositionLoadingProgress: false,
+            sensors: false,
+            routing: false,
+            tracking: false,
+            explorer: false,
+            filter: false,
         };
+
+        let nonSidebarPanels = ['toolbar','compositionLoadingProgress','styler'];
+
         angular.forEach(panelsEnabledDefaults, (value, key) => {
             if (typeof config.panelsEnabled == 'undefined' ||
                 typeof config.panelsEnabled[key] == 'undefined')
@@ -375,6 +391,10 @@ export default ['config', '$rootScope',
             me.panelEnabled(key, value)
         })
 
+        angular.forEach(me.panel_enabled, (value, key) => {
+            if (me.panel_enabled[key] && !nonSidebarPanels.includes(key)) { me.panelsEnabled += 1 }
+        })
+
         return me;
     }
 ]

components/layout/partials/layout.html

@@ -22,7 +22,7 @@
                 <div class="panelspace" ng-if="layoutService.sidebarVisible()" ng-class="{'labels': layoutService.sidebarLabels, 'buttons': layoutService.sidebarButtons, 'minisidebar-wrapper':!layoutService.classicSidebar}" ng-style="{width: panelSpaceWidth()+'px'}">
                     <div class="panelspace-wrapper" ng-style="{width: panelSpaceWidth()+'px'}">
                         <div id="sidebar" hs.sidebar.directive ng-controller="hs.sidebar.controller" ng-if="layoutService.classicSidebar" ng-if="Core.exists('hs.sidebar.controller')" ng-cloak></div>
-                        <div id="mini-sidebar" hs.minisidebar.directive ng-controller="hs.sidebar.controller" ng-class="layoutService.mainpanel" ng-if="!layoutService.classicSidebar" ng-if="Core.exists('hs.sidebar.controller')" ng-cloak></div>
+                        <div id="sidebar" class="menuToggle" hs.minisidebar.directive ng-controller="hs.sidebar.controller" ng-if="!layoutService.classicSidebar" ng-if="Core.exists('hs.sidebar.controller')" ng-cloak></div>
                         <div id="panelplace" ng-class="{'minisidebar-panel':!layoutService.classicSidebar}" ng-style="{width: (panelSpaceWidth()-50)+'px'}">
                             <hs.layermanager                        hs.draggable ng-show="panelVisible('layermanager', this)"></hs.layermanager>
                             <hs.legend                              hs.draggable ng-if="Core.exists('hs.legend')" ng-show="panelVisible('legend', this)"></hs.legend>
@@ -41,7 +41,8 @@
                             <div hs.routing.directive               hs.draggable ng-controller="hs.routing.controller" ng-if="Core.exists('hs.routing.controller')" ng-show="panelVisible('routing', this)"></div>
                             <div hs.tracking.directive              hs.draggable ng-controller="hs.tracking.controller" ng-if="Core.exists('hs.tracking.controller')" ng-show="panelVisible('tracking', this)"></div>
                             <hs.vgi-draw                            hs.draggable ng-if="Core.exists('hs.vgi-draw')" ng-show="panelVisible('draw', this)"></hs.vgi-draw>
-                            <hs.sensors.panel                       hs.draggable  ng-if="Core.exists('hs.sensors')" ng-show="panelVisible('sensors', this)"></hs.sensors.panel>
+                            <hs.sensors.panel                       hs.draggable ng-if="Core.exists('hs.sensors')" ng-show="panelVisible('sensors', this)"></hs.sensors.panel>
+                            <div hs.sidebar.directive               hs.draggable ng-controller="hs.sidebar.controller" ng-if="Core.exists('hs.sidebar') && !layoutService.classicSidebar" ng-show="panelVisible('sidebar', this)"></div>
                             <div hs.customhtml.directive                                                            ng-if="Core.exists('hs.customhtml')"></div>
                         </div>
                     </div>

components/sidebar/partials/minisidebar.html

@@ -1,5 +1,11 @@
 
-        <a href="#" class="sidebar-main list-group-item" ng-if="layoutService.sidebarToggleable">
-            <span class="glyphicon-menu-hamburger" ng-class="layoutService.sidebarExpanded ? (!layoutService.sidebarRight ? 'icon-menu-left' : 'icon-menu-right') : 'icon-menu-left'"  ng-click="toggleSidebar()"></span>
-        </a>
+<!-- <a href="#" class="sidebar-main list-group-item" ng-if="layoutService.sidebarToggleable">
+    <span class="glyphicon-menu-hamburger" ng-class="layoutService.sidebarExpanded ? (!layoutService.sidebarRight ? 'icon-menu-left' : 'icon-menu-right') : 'icon-menu-left'"  ng-click="toggleSidebar()"></span>
+</a> -->
+<div class="sidebar-list list-group minisidebar">
+    <a href="#" class="list-group-item" ng-if="Core.exists('hs.sidebar')" ng-click="setMainPanel('sidebar')" ng-class="{active: layoutService.mainpanel == 'sidebar'}">
+            <i class="menu-icon icon-equals" data-toggle="tooltip" data-container="body" data-placement="auto" title="{{'Manage and style your layers in composition'|translate}}"></i>
+    </a>
+</div>
+
 

components/sidebar/partials/sidebar.html

@@ -1,4 +1,4 @@
-<div class="sidebar-list list-group">
+<div class="sidebar-list list-group" ng-class="{'minisidebar':!layoutService.classicSidebar}">
     <a href="#" class="sidebar-item list-group-item" ng-if="layoutService.sidebarToggleable">
         <i class="menu-icon" ng-class="layoutService.sidebarExpanded ? (!layoutService.sidebarRight ? 'icon-chevron-left' : 'icon-chevron-right') : 'icon-slidersoff'"  ng-click="toggleSidebar()"></i>
     </a>
@@ -9,15 +9,15 @@
 
     <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.layermanager') && panelEnabled('layermanager')" ng-click="setMainPanel('layermanager')" ng-class="{active: layoutService.mainpanel == 'layermanager'}">
         <i class="menu-icon icon-layers" data-toggle="tooltip" data-container="body" data-placement="auto" title="{{'Manage and style your layers in composition'|translate}}"></i>
-        <span class="sidebar-item-title" translate>Manage and Style Layers</span>
+        <span class="sidebar-item-title" translate>Layer Manager</span>
     </a>
 
-    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.legend')" ng-click="setMainPanel('legend')" ng-class="{active: layoutService.mainpanel == 'legend'}">    
+    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.legend') && panelEnabled('legend')" ng-click="setMainPanel('legend')" ng-class="{active: layoutService.mainpanel == 'legend'}">    
         <i class="menu-icon icon-dotlist" data-toggle="tooltip" data-container="body" data-placement="auto" title="{{'Legend'|translate}}"></i>
         <span class="sidebar-item-title">Legend</span>
     </a>
 
-    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.datasource_selector')" ng-click="setMainPanel('datasource_selector')" ng-class="{active: layoutService.mainpanel == 'datasource_selector'}">
+    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.datasource_selector') && panelEnabled('ows')" ng-click="setMainPanel('datasource_selector')" ng-class="{active: layoutService.mainpanel == 'datasource_selector'}">
         <span class="menu-icon icon-database" data-toggle="tooltip" data-container="body" data-placement="auto" title="{{'Select data or services for your map composition'|translate}}"></span>
         <span class="sidebar-item-title" ng-if="!Core.singleDatasources" translate>Datasource Selector</span>
         <span class="sidebar-item-title" ng-if="Core.singleDatasources" translate>Add layers</span>
@@ -28,7 +28,7 @@
         <span class="sidebar-item-title" translate>Add external data</span>
     </a>
 
-    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.feature_crossfilter.controller')" ng-click="setMainPanel('feature_crossfilter')" ng-class="{active: layoutService.mainpanel == 'feature_crossfilter'}">
+    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.feature_crossfilter.controller') && panelEnabled('filter')" ng-click="setMainPanel('feature_crossfilter')" ng-class="{active: layoutService.mainpanel == 'feature_crossfilter'}">
         <span class="menu-icon icon-analytics-piechare" data-toggle="tooltip" data-container="body" data-placement="auto" title="Crossfilter"></span>
         <span class="sidebar-item-title" translate>Filter features</span>
     </a>
@@ -38,17 +38,17 @@
         <span class="sidebar-item-title" translate>Measurements</span>
     </a>
 
-    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.lodexplorer.controller')" ng-click="setMainPanel('lodexplorer')" ng-class="{active: layoutService.mainpanel == 'lodexplorer'}">
+    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.lodexplorer.controller') && panelEnabled('explorer')" ng-click="setMainPanel('lodexplorer')" ng-class="{active: layoutService.mainpanel == 'lodexplorer'}">
         <span class="menu-icon icon-sharedhosting"></span>
         <span class="sidebar-item-title">Eurostat explorer</span>
     </a>
 
-    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.routing.controller')" ng-click="setMainPanel('routing')" ng-class="{active: layoutService.mainpanel == 'routing'}">
+    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.routing.controller') && panelEnabled('routing')" ng-click="setMainPanel('routing')" ng-class="{active: layoutService.mainpanel == 'routing'}">
         <span class="menu-icon icon-road"></span>
         <span class="sidebar-item-title">Routing</span>
     </a>
 
-    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.tracking.controller')" ng-click="setMainPanel('tracking')" ng-class="{active: layoutService.mainpanel == 'tracking'}">
+    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.tracking.controller') && panelEnabled('tracking')" ng-click="setMainPanel('tracking')" ng-class="{active: layoutService.mainpanel == 'tracking'}">
         <span class="menu-icon icon-screenshot"></span>
         <span class="sidebar-item-title">Tracking</span>
     </a>
@@ -72,12 +72,12 @@
         <span class="sidebar-item-title" translate>Save composition</span>
     </a>
 
-    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.sensors')" ng-click="setMainPanel('sensors')" ng-class="{active: layoutService.mainpanel == 'sensors'}">
+    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.sensors') && panelEnabled('sensors')" ng-click="setMainPanel('sensors')" ng-class="{active: layoutService.mainpanel == 'sensors'}">
         <span class="menu-icon icon-weightscale"></span>
         <span class="sidebar-item-title">Sensors</span>
     </a>   
 
-    <a href="#" class="sidebar-item list-group-item text-justify" ng-if="Core.exists('hs.language.controller') && panelEnabled('language')" ng-click="setMainPanel('language')" ng-class="{active: layoutService.mainpanel == 'language'}">
+    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.language.controller') && panelEnabled('language')" ng-click="setMainPanel('language')" ng-class="{active: layoutService.mainpanel == 'language'}">
         <span data-toggle="tooltip" data-container="body" data-placement="auto" class="" title="{{'Change language'||translate}}">{{languageService.getCurrentLanguageCode().toUpperCase()}}</span>
         <span class="sidebar-item-title" translate>Change language</span>
     </a>
@@ -91,7 +91,7 @@
         <span ng-class="'menu-icon ' + but.icon_class"></span>
         <span class="sidebar-item-title">{{but.title}}</span>
     </a>
-    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.query')" ng-click="setMainPanel('info')" ng-class="{active: panelVisible('info')}">
+    <a href="#" class="sidebar-item list-group-item" ng-if="Core.exists('hs.query') && panelEnabled('info')" ng-click="setMainPanel('info')" ng-class="{active: panelVisible('info')}">
         <i class="menu-icon icon-info-sign" data-toggle="tooltip" data-container="body" data-placement="auto" title="{{'Display map-query result informations'|translate}}"></i>
         <span class="sidebar-item-title" translate>Info panel</span>
     </a>

css/app.css

@@ -449,17 +449,17 @@ button.but-title-sm {
     position: absolute;
 }
 .basemapGallery .basemap-tile{
-    background-color: hsla(211, 100%, 50%, 0.445);
+    background: rgba(0,60,136,0.5);
     text-align: center;
     color: white;
     font-weight: 500;
     padding: 0.25em;
     margin:0.2em !important;
+    border: none;
 
 }
-.basemapGallery .selected-basemap{
-    border: 1px solid #007bff;
-    background-color:hsla(211, 100%, 50%, 0.719);
+.basemapGallery .active{
+    background: rgba(0, 59, 136, 0.788);
 
 }   
 
@@ -548,7 +548,7 @@ div#sidebar {
     width: 100%;
 }
 
-#content-wrapper.open div.panelspace:not(.labels) .sidebar-list {
+#content-wrapper.open div.panelspace:not(.labels) .sidebar-list:not(.minisidebar) {
     width: 48px;
 }
 
@@ -904,12 +904,16 @@ div#composition-share-dialog .modal-body, div#composition-info-dialog .modal-bod
 /**********************************/
 
 @media only screen and (max-width: 767px) {
-    #content-wrapper .sidebar-item-title {
+    #content-wrapper .sidebar-item-title:not(.minisidebar) {
         display:none;
     }
     input[type=checkbox]{
         transform: scale(2,2);
+        margin-right: 0.5em;
     }
+    input[type="radio"]{
+        transform: scale(2,2);
+    };
    .basemapGallery a{
         font-size: x-large !important;
     }
@@ -953,6 +957,7 @@ div#composition-share-dialog .modal-body, div#composition-info-dialog .modal-bod
     {
         margin: auto;
         min-height: 35vh;
+        padding-top: 0.5em;
         scrollbar-width: none;
     }
     #sidebar > div.list-group{
@@ -975,7 +980,29 @@ div#composition-share-dialog .modal-body, div#composition-info-dialog .modal-bod
     /* .sb-left.open #toolbar {
        margin-left: 310px;
     }*/
- */
+    .minisidebar{
+        flex-direction: row !important;
+        justify-content: center;
+        align-items: center;
+    }
+    .minisidebar:not(.menuToggle){
+        flex-wrap: wrap;
+        margin: auto;
+    }
+    .minisidebar .sidebar-item-title{
+        display: block !important;
+        margin: 0;
+        font-size: 10px;
+    }
+    .minisidebar .sidebar-item {
+        text-align: center;
+        width: 30%;
+        height: 80px;
+    }
+    .minisidebar .list-group-item:not(.menuToggle .minisidebar .list-group-item){
+        border: none;
+        background-color: unset;
+    }
     .panel-footer {
         padding: 5px;
     }