Style m3rlin buttons. Close m3rlin-modal with m3rlin.js jquery.

lautr3k · Apr 7, 2019 · b4881f498db925b95aa1dc10ae7eee38f4aa9d50 · b4881f4
1 parent bbdc712
commit b4881f498db925b95aa1dc10ae7eee38f4aa9d50
Unified Split

Showing with 37 additions and 5 deletions.

+29 −1 css/m3rlin.css

BIN images/brijan-pale.gif

BIN images/brijan.gif

+4 −4 index.html

+4 −0 js/m3rlin.js
diff --git a/css/m3rlin.css b/css/m3rlin.css
@@ -22,5 +22,33 @@
   max-height: 99% !important;
 }
 .modal-body {
-  background-image: url('../images/brijan.gif');
+  background-image: url('../images/brijan-pale.gif');
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+.m3rlin-options {
+  display: flex;
+  justify-content: space-around;
+
+  width: 90%;
+  margin: 20px;
+  padding: 50px;
+}
+.m3rlin-btn {
+  background-color: white;
+  border: 5px solid #2a93ad;
+  border-radius: 10px;
+  background-size: contain;
+  font-size: 1.5em;
+  /* margin: 10px; */
+  align-content: center;
+  padding: 5% 7% 5% 7%;
+  transition: 0.5s;
+}
+
+.m3rlin-btn:hover {
+  background: #2a93ad;
+  color: white;
+  border: 5px solid orange;
 }
diff --git a/images/brijan-pale.gif b/images/brijan-pale.gif
diff --git a/images/brijan.gif b/images/brijan.gif
diff --git a/index.html b/index.html
@@ -675,9 +675,9 @@ <h3 class="panel-title">Colors</h3>
         <div class="modal-content full_modal-content">
           <div class="modal-header">
             <h1 class="modal-title" id="exampleModalLabel">
-              M3rlin 3D Clay Printer
+              M3rlin 3D
             </h1>
-            <h3>Built with SLAcer.js</h3>
+            <h4>Built with <a href="https://github.com/lautr3k/SLAcer.js">SLAcer.js</a></h4>
             <!-- <button
               type="button"
               class="close"
@@ -691,8 +691,8 @@ <h3>Built with SLAcer.js</h3>
             <div class="m3rlin-options">
 
                 <button class="m3rlin-btn">Quick Start</button>
-                <button class="m3rlin-btn">Configure Printer</button>
-                <button class="m3rlin-btn">About M3rlin</button>
+                <button class="m3rlin-btn" id="settings">Settings</button>
+                <button class="m3rlin-btn">About</button>
 
             </div>
           </div>

diff --git a/js/m3rlin.js b/js/m3rlin.js
@@ -4,4 +4,8 @@ $(document).ready(function() {
   //     alert('Wait - are you sure??');
   //   }
   $('#m3rlinModal').modal('toggle');
+
+  $('#settings').click(function() {
+    $('#m3rlinModal').modal('toggle');
+  });
 });