From 4bfa873f3791f3c1d500b6993b40617fd7bfaabe Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Wed, 10 Jul 2019 22:17:29 +0200
Subject: [PATCH] customize in modal

---
 pages/_data/menu.yml                  |  3 +-
 pages/_includes/layout/customize.html | 40 +++++++++++++++++++
 pages/_includes/layout/menu.html      |  2 +-
 pages/_includes/layout/modals.html    | 13 +++++++
 pages/_layouts/default.html           |  2 +
 pages/customize.html                  | 55 ---------------------------
 scss/layout/_navbar.scss              | 30 ++++++++-------
 7 files changed, 75 insertions(+), 70 deletions(-)
 create mode 100644 pages/_includes/layout/customize.html
 create mode 100644 pages/_includes/layout/modals.html
 delete mode 100644 pages/customize.html

diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index eb1eb2dd..9e8790b7 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -62,7 +62,8 @@ changelog:
   label: v1.0
 
 customize:
-  url: customize.html
+  url: '#customize'
   title: Customize
   icon: sliders
+  toggle: modal
 
diff --git a/pages/_includes/layout/customize.html b/pages/_includes/layout/customize.html
new file mode 100644
index 00000000..17084a20
--- /dev/null
+++ b/pages/_includes/layout/customize.html
@@ -0,0 +1,40 @@
+<form action="#" class="js-layout-form">
+   <div class="form-group">
+      <label class="form-label">Color scheme</label>
+      {% include ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Nav position</label>
+      {% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Header color</label>
+      {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
+   </div>
+   <!--<div class="form-group">-->
+   <!--<label class="form-label">Header fixed</label>-->
+   <!--{% include ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}-->
+   <!--</div>-->
+   <div class="form-group">
+      <label class="form-label">Sidebar position</label>
+      {% include ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Sidebar size</label>
+      {% include ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Sidebar color</label>
+      {% include ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
+   </div>
+   <div class="form-group">
+      <label class="form-label">Sidebar fixed</label>
+      {% include ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
+   </div>
+
+
+
+   <!--<div class="form-footer">-->
+   <!--<button type="submit" class="btn btn-primary">Save options</button>-->
+   <!--</div>-->
+</form>
diff --git a/pages/_includes/layout/menu.html b/pages/_includes/layout/menu.html
index 9b0e4a69..16dcb228 100644
--- a/pages/_includes/layout/menu.html
+++ b/pages/_includes/layout/menu.html
@@ -4,7 +4,7 @@
    {% for level-1 in site.data.menu %}
    {% assign icon = level-1[1].icon %}
    <li class="nav-item">
-      <a class="nav-link{% if level-1[0] == current-page[0] %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" data-parent="#menu" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
+      <a class="nav-link{% if level-1[0] == current-page[0] %} active{% endif %}" {% if level-1[1].children or level-1[1].docs %}href="#sidebar-{{ level-1[0] }}" data-toggle="collapse" data-parent="#menu" role="button" aria-expanded="{% if level-1[0] == current-page[0] %}true{% else %}false{% endif %}"{% elsif level-1[1].toggle %}href="{{ level-1[1].url }}" data-toggle="{{ level-1[1].toggle }}"{% else %}href="{{ site.base }}/{{ level-1[1].url }}"{% endif %}>
          <span class="nav-icon">
             {% include ui/icon.html icon=icon  %}
          </span>
diff --git a/pages/_includes/layout/modals.html b/pages/_includes/layout/modals.html
new file mode 100644
index 00000000..6ead7fe0
--- /dev/null
+++ b/pages/_includes/layout/modals.html
@@ -0,0 +1,13 @@
+<div class="modal fade" id="customize" tabindex="-1" role="dialog" aria-hidden="true">
+   <div class="modal-dialog" role="document">
+      <div class="modal-content">
+         <div class="modal-body">
+            <a class="close" data-dismiss="modal" aria-label="Close">
+               <span aria-hidden="true">&times;</span>
+            </a>
+
+            {% include layout/customize.html %}
+         </div>
+      </div>
+   </div>
+</div>
diff --git a/pages/_layouts/default.html b/pages/_layouts/default.html
index 7588482f..61c28e70 100644
--- a/pages/_layouts/default.html
+++ b/pages/_layouts/default.html
@@ -21,3 +21,5 @@ layout: base
       </main>
    </div>
 </div>
+
+{% include layout/modals.html %}
diff --git a/pages/customize.html b/pages/customize.html
deleted file mode 100644
index 617e6094..00000000
--- a/pages/customize.html
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: Layout manager
----
-
-<div class="card">
-   <div class="card-header">
-      Layout manager
-   </div>
-   <div class="card-body">
-      <form action="" class="js-layout-form">
-         <div class="row">
-            <div class="col-4">
-               <div class="form-group">
-                  <label class="form-label">Color scheme</label>
-                  {% include ui/input-selectgroup.html name="color-scheme" values="light,dark" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Nav position</label>
-                  {% include ui/input-selectgroup.html name="nav-position" values="top,side" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Header color</label>
-                  {% include ui/input-selectgroup.html name="header-color" values="light,dark" type="radio" class="w-100p" %}
-               </div>
-               <!--<div class="form-group">-->
-                  <!--<label class="form-label">Header fixed</label>-->
-                  <!--{% include ui/input-selectgroup.html name="header-fixed" values="fixed,default" type="radio" class="w-100p" %}-->
-               <!--</div>-->
-               <div class="form-group">
-                  <label class="form-label">Sidebar position</label>
-                  {% include ui/input-selectgroup.html name="sidebar-position" values="left,right" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Sidebar size</label>
-                  {% include ui/input-selectgroup.html name="sidebar-size" values="default,folded" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Sidebar color</label>
-                  {% include ui/input-selectgroup.html name="sidebar-color" values="light,dark" type="radio" class="w-100p" %}
-               </div>
-               <div class="form-group">
-                  <label class="form-label">Sidebar fixed</label>
-                  {% include ui/input-selectgroup.html name="sidebar-fixed" values="fixed,default" type="radio" class="w-100p" %}
-               </div>
-
-
-
-               <!--<div class="form-footer">-->
-                  <!--<button type="submit" class="btn btn-primary">Save options</button>-->
-               <!--</div>-->
-            </div>
-         </div>
-      </form>
-   </div>
-</div>
diff --git a/scss/layout/_navbar.scss b/scss/layout/_navbar.scss
index 4cf8bcd2..927c361e 100644
--- a/scss/layout/_navbar.scss
+++ b/scss/layout/_navbar.scss
@@ -231,28 +231,32 @@ Responsive utils
     @include media-breakpoint-up(xl) {
       display: flex;
 
-      & ~ .layout-main {
-        margin-left: $sidenav-width;
-      }
+      &.navbar-fixed {
+        & ~ .layout-main {
+          margin-left: $sidenav-width;
+        }
 
-      &.navbar-right ~ .layout-main {
-        margin-left: 0;
-        margin-right: $sidenav-width;
+        &.navbar-right ~ .layout-main {
+          margin-left: 0;
+          margin-right: $sidenav-width;
+        }
       }
     }
 
     &.navbar-folded {
       display: flex;
 
-      @include media-breakpoint-up(lg) {
+      &.navbar-fixed {
+        @include media-breakpoint-up(lg) {
 
-        & ~ .layout-main {
-          margin-left: $sidenav-folded-width;
-        }
+          & ~ .layout-main {
+            margin-left: $sidenav-folded-width;
+          }
 
-        &.navbar-right ~ .layout-main {
-          margin-left: 0;
-          margin-right: $sidenav-folded-width;
+          &.navbar-right ~ .layout-main {
+            margin-left: 0;
+            margin-right: $sidenav-folded-width;
+          }
         }
       }
     }
-- 
GitLab