[#118543823] Improves dashboard styling

WanjohiWanjohi · Apr 29, 2016 · 4790aef · 4790aef
1 parent 4f13304
commit 4790aef
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -11,10 +11,10 @@
   font-weight: normal;
   font-style: normal;
 }
-nav .brand-logo {
+/*nav .brand-logo {
   left: 3%;
 }
-
+*/
 #black {
   background-color: #000;
 }
@@ -47,18 +47,20 @@ nav .brand-logo {
 
 #register {
   font-family: learningcurve;
-  margin-left: 40px;
-}
-
-.row {
-  margin-left: 40px;
 }
 
 .delete {
   cursor: pointer;
 }
 
-#get-button {
-  margin-bottom: 30px;
-  left: 45%;
+.centered {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
+
+@media screen and (min-width: 480px) {
+    .brand-logo {
+      margin-left: 2%;
+    }
+}
diff --git a/public/index.html b/public/index.html
@@ -13,6 +13,7 @@
 </head>
 
 <body>
+<div class="row">
     <nav>
         <div class="nav-wrapper #ff4081 pink darken-4">
             <a id="font" href="#" class="brand-logo">RegisterAPP</a>
@@ -22,7 +23,7 @@
         </div>
     </nav>
 
-    <div id="o">
+    <div id="o" class="row">
         <div id="black">
             <div id="back"></div>
             <div class="content">
@@ -48,6 +49,7 @@ <h4 id="font">Register all the awesome ladies at Start from Scratch</h4>
   </div> -->
     <!-- <a id="get-button" class="waves-effect waves-light btn #880e4f pink darken-4">GET</a>
   <a id="post-button" class="waves-effect waves-light btn #880e4f pink darken-4">POST</a> -->
+</div>
 </body>
 
 </html>
diff --git a/public/js/script.js b/public/js/script.js
@@ -66,7 +66,7 @@ $(function () {
 
   // GET STARTED button function
   $('#get-started').on('click', function() {
-    document.getElementById('o').innerHTML = "<h4 id='register'>Register Attendee: </h4> " +
+    document.getElementById('o').innerHTML = "<div class='row'><h4 class='col s12' id='register'>Register Attendee: </h4> " +
     "<form class='col s12'> " +
       "<div class='row'> " +
         "<div class='input-field col s6'>  " +
@@ -82,9 +82,9 @@ $(function () {
         "</div> " +
       "</div>" +
     "</form> " +
-    "<a id='get-button' class='waves-effect waves-light btn #880e4f pink darken-4 col s2 offset-s8'>View all</a><hr>" +
-    "<div class='row'> " +
-      "<table class='striped col s10 offset-s1' id='list'> " +
+    "<div class='container centered'><a id='get-button' class='waves-effect waves-light btn #880e4f pink darken-4'>View all</a></div><br/><hr>" +
+    "<div class='col s12'> " +
+      "<table class='striped' id='list'> " +
         "<thead> " +
           "<tr> " +
             "<th>Name</th> " +
@@ -103,7 +103,7 @@ $(function () {
             "</tr> " +
           "</tbody> " +
         "</table> " +
-      "</div>";
+      "</div></div>";
     $('#get-started').text('');
   });
 });