Modal + some more styling tweaks

themes/grav/css-compiled/template.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 @import url(//fonts.googleapis.com/css?family=Montserrat:400|Lato:300,400,700);
-#admin-login, #admin-logo h3, #admin-main .titlebar h1, #admin-main .titlebar .button-bar, #admin-dashboard .dashboard-item .button-bar .button, #admin-dashboard #updates .numeric, #admin-dashboard #popularity .stat {
+#admin-login, #admin-logo h3, #admin-main .titlebar h1, #admin-main .titlebar .button-bar, #admin-dashboard .dashboard-item .button-bar .button, #admin-dashboard #updates .numeric, #admin-dashboard #popularity .stat, #admin-mode-toggle .switch-grav {
   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
@@ -39,6 +39,9 @@ a {
 b, strong {
   font-weight: 600; }
 
+.bigger {
+  font-size: 1.2rem; }
+
 .button-bar {
   text-align: right;
   float: right;
@@ -457,6 +460,8 @@ form h1 {
   font-size: 1.5rem;
   text-align: left;
   letter-spacing: -1px; }
+form p {
+  padding: 0 3rem; }
 form .form-field {
   margin-bottom: 1rem;
   padding-left: 3rem; }
@@ -1022,10 +1027,13 @@ tr {
       #page-filtering .selectize-control.multi .selectize-input > div[data-value='Modular'], #page-filtering .selectize-control.multi .selectize-input > div.active[data-value='Modular'] {
         background: #9055AF; }
 
+.admin-form-wrapper {
+  position: relative; }
+
 #admin-mode-toggle {
   position: absolute;
-  right: 3.1rem;
-  top: 3.1rem; }
+  right: 0.5rem;
+  height: 3.5rem; }
   #admin-mode-toggle .switch-grav {
     border: 0;
     background-color: #365569; }

themes/grav/scss/template/_core.scss

@@ -20,6 +20,10 @@ b, strong {
 	font-weight: $font-weight-bold
 }
 
+.bigger {
+    font-size: 1.2rem;
+}
+
 .button-bar {
     text-align: right;
     float: right;

themes/grav/scss/template/_forms.scss

@@ -47,6 +47,10 @@ form {
         letter-spacing: -1px;
     }
 
+    p {
+        padding: 0 $padding-default;
+   }
+
     .form-field {
         margin-bottom: 1rem;
         padding-left: $padding-default;

themes/grav/scss/template/_pages.scss

@@ -152,11 +152,17 @@
     }
 }
 
+.admin-form-wrapper {
+    position: relative;
+}
+
 #admin-mode-toggle {
     position: absolute;
-    right: 3.1rem;
-    top: 3.1rem;
+    right: 0.5rem;
+    height: 3.5rem;
+
     .switch-grav {
+        @extend %vertical-align;
         border: 0;
         background-color: lighten($accent-bg,10%);
     }

themes/grav/templates/pages.html.twig

@@ -68,42 +68,35 @@
     {% if uri.param('new') %}
         {% include 'partials/blueprints-new.html.twig' with { blueprints: admin.blueprints('pages/page'), data: context } %}
     {% elseif context %}
+        <div class="admin-form-wrapper">
+            {% if context.blueprints.fields %}
+            <form id="admin-mode-toggle">
+                <div class="switch-toggle switch-grav">
+                    <input type="radio" value="normal" id="normal" name="mode-switch" class="highlight" {% if not uri.param('expert') %} checked="checked"{% endif %}>
+                    <label for="normal">Normal</label>
+                    <input type="radio" value="expert" id="expert" name="mode-switch" class="highlight" {% if uri.param('expert') %} checked="checked"{% endif %}>
+                    <label for="expert">Expert</label>
+                    <a></a>
+                </div>
+                <script>
+                    $("#admin-mode-toggle input[name=mode-switch]").on('change', function(e){
+                        var value = $(this).val();
 
+                        // little timeout to show off the animation
+                        setTimeout(function(){
+                            window.location.href = '{{ uri.route(true) }}' + ((value == 'expert') ? '/expert:1' : '');
+                        }, 200)
+                    });
+                </script>
+            </form>
+            {% endif %}
 
-        {% if context.blueprints.fields %}
-        <form id="admin-mode-toggle">
-            <div class="switch-toggle switch-grav">
-                <input type="radio" value="normal" id="normal" name="mode-switch" class="highlight" {% if not uri.param('expert') %} checked="checked"{% endif %}>
-                <label for="normal">Normal</label>
-                <input type="radio" value="expert" id="expert" name="mode-switch" class="highlight" {% if uri.param('expert') %} checked="checked"{% endif %}>
-                <label for="expert">Expert</label>
-                <a></a>
-            </div>
-            <script>
-                $("#admin-mode-toggle input[name=mode-switch]").on('change', function(e){
-                    var value = $(this).val();
-
-                    // little timeout to show off the animation
-                    setTimeout(function(){
-                        window.location.href = '{{ uri.route(true) }}' + ((value == 'expert') ? '/expert:1' : '');
-                    }, 200)
-                });
-            </script>
-{#                 {% if not uri.param('expert') %}
-                    <span class="button" >Normal</span>
-                    <a href="{{ uri.route(true) }}/expert:1">Expert</a>
-                {% else %}
-                    <a href="{{ uri.route(true) }}">Normal</a>
-                    <span class="button">Expert</span>
-                {% endif %} #}
-        </form>
-        {% endif %}
-
-        {% if not uri.param('expert') and context.blueprints.fields %}
-            {% include 'partials/blueprints.html.twig' with { blueprints: context.blueprints, data: context } %}
-        {% else %}
-            {% include 'partials/blueprints-raw.html.twig' with { blueprints: admin.blueprints('pages/raw'), data: context } %}
-        {% endif %}
+            {% if not uri.param('expert') and context.blueprints.fields %}
+                {% include 'partials/blueprints.html.twig' with { blueprints: context.blueprints, data: context } %}
+            {% else %}
+                {% include 'partials/blueprints-raw.html.twig' with { blueprints: admin.blueprints('pages/raw'), data: context } %}
+            {% endif %}
+        </div>
     {% else %}
         <form id="page-filtering">
             <div class="page-filters">
@@ -172,7 +165,21 @@
     </script>
 
     <div class="remodal" data-remodal-id="modal" data-remodal-options="hashTracking: false">
-        {% include 'partials/blueprints-new.html.twig' with { blueprints: admin.blueprints('pages/page'), data: context } %}
+        {% include 'partials/blueprints-new.html.twig' with { blueprints: admin.blueprints('pages/new'), data: context } %}
+    </div>
+
+    <div class="remodal" data-remodal-id="changes">
+        <form>
+            <h1>Changes Detected</h1>
+            <p class="bigger">
+              You have unsaved changes.  Are you sure you want to leave without saving?
+            </p>
+            <br>
+            <div class="button-bar">
+            <a class="button secondary" href="#"><i class="fa fa-fw fa-close"></i> Cancel</a>
+            <a class="button" href="#"><i class="fa fa-fw fa-check"></i>Continue</a>
+            </div>
+        </form>
     </div>
 {% endblock %}