Improve modal layout.

lautr3k · Apr 7, 2019 · d5642d093f255ce096a0797192a92b6e02c700d0 · d5642d0
1 parent 64a311c
commit d5642d093f255ce096a0797192a92b6e02c700d0
Unified Split

Showing with 19 additions and 17 deletions.

+2 −2 css/m3rlin.css

+15 −14 index.html

+2 −1 js/m3rlin.js
diff --git a/css/m3rlin.css b/css/m3rlin.css
@@ -52,7 +52,7 @@ m34 {
   transition: 0.3s;
 }
 .modal-footer {
-  display: none;
+  /* display: flex; */
 }
 #m3rlin-continue {
   background: rgb(171, 250, 171);
@@ -70,7 +70,7 @@ m34 {
   display: none;
 }
 .m3rlin-quickstart-btns {
-  display: flex;
+  display: none;
   align-content: space-between;
   justify-content: center;
 }
diff --git a/index.html b/index.html
@@ -697,13 +697,13 @@ <h4>
             <div class="m3rlin-options">
 
                     <div id="quick-confirm">
-                            <div class="col">
-                              <div class="row">
+                        <div class="col">
+                            <div class="row">
                                 <h2 class="centered">
                                   Quick Start
                                 </h2>
-                              </div>
-                              <div class="row">
+                            </div>
+                            <div class="row">
                                 <h4 class="padded centered">
                                   To print test image using default settings:
                                 </h4>
@@ -715,19 +715,20 @@ <h4 class="centered">
                               </div>
                           </div>
                         </div>
-                <div class="m3rlin-main-menu-btns">
-              <button class="m3rlin-btn" id="quick">Quick Start</button>
-              <button class="m3rlin-btn" id="settings">Settings</button>
-              <button class="m3rlin-btn">About</button>
-            </div>
+
             </div>
             <div class="modal-footer">
 
                     <div class="row">
-<div class="m3rlin-quickstart-btns">
-                            <button class="m3rlin-btn" id="m3rlin-back">Back</button>
-                            <button class="m3rlin-btn" id="m3rlin-continue">Continue</button>
-                            <button class="m3rlin-btn">Help</button>
+                            <div class="m3rlin-main-menu-btns">
+                                    <button class="m3rlin-btn" id="quick">Quick Start</button>
+                                    <button class="m3rlin-btn" id="settings">Settings</button>
+                                    <button class="m3rlin-btn">About</button>
+                                </div>
+                            <div class="m3rlin-quickstart-btns">
+                                <button class="m3rlin-btn" id="m3rlin-back">Back</button>
+                                <button class="m3rlin-btn" id="m3rlin-continue">Continue</button>
+                                <button class="m3rlin-btn">Help</button>
                           </div>
                         </div>
                 <!-- <button
@@ -738,7 +739,7 @@ <h4 class="centered">
                 Close
             </button>
             <button type="button" class="btn btn-primary">Save changes</button> -->
-        </div>
+            </div>
     </div>
         </div>
       </div>

diff --git a/js/m3rlin.js b/js/m3rlin.js
@@ -21,7 +21,8 @@ $(document).ready(function() {
 
   $('#m3rlin-back').click(function() {
     $('#quick-confirm').css({ display: 'none' });
-    $('.modal-footer').css({ display: 'none' });
+    $('.m3rlin-quickstart-btns').css({ display: 'none' });
+
     $('.m3rlin-main-menu-btns').fadeIn('slow');
   });
 });