ch-make-site-responsive-161494290

ebenezerdon · Oct 25, 2018 · fd5fd67 · fd5fd67
1 parent fc848d2
commit fd5fd67
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 197 deletions.
diff --git a/UI/assets/css/adduser.css b/UI/assets/css/adduser.css
@@ -3,6 +3,11 @@
 @import "lib/button.css";
 @import "lib/regform.css";
 
+body {
+    overflow: visible;
+    max-width: 100%;
+}
+
 .reg {
-    margin-top: 20vw;
+    margin-top: 200px;
 }
diff --git a/UI/assets/css/lib/form.css b/UI/assets/css/lib/form.css
@@ -5,10 +5,9 @@
 	top: 23em;
 	left: 35vw;
 	right: 35vw;
-	padding: 25px 0 0;
 	text-align: center;
 	text-shadow: 0 1px 0 #fff;
-	width: 400px;
+	width: 390px;
 	z-index: 2;
 }
 
@@ -129,25 +128,25 @@
    10:41 am, 10-10-18 
    - Ebenezer Don */
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 1000px) and (min-width: 799px) {
 	.login-form {
 		left: 27vw;
 	}
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: 800px) and (min-width: 599px){
 	.login-form {
 		left: 19vw;
 	}
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 600px) and (min-width: 499px) {
 	.login-form {
 		left: 15vw;
 	}
 }
 
-@media only screen and (max-width: 500px) {
+@media only screen and (max-width: 500px) and (min-width: 424px) {
 	.login-form {
 		left: 11vw;
 	}
@@ -156,19 +155,21 @@
 @media only screen and (max-width: 425px) {
 	.login-form {
 		left: 5.5vw;
+		width: 370px;
 	}
 }
 
-@media (max-height: 640px) and (max-width: 360px) {
+@media only screen and (max-width: 400px) and (min-width: 359px) {
 	.login-form {
-		left: 2vw;
-		top: 28em;
+		left: 0vw;
+		width: 370px;
 	}
 }
 
-@media only screen and (max-width: 400px) {
+@media (max-width: 360px) {
 	.login-form {
-		left: 0vw;
-		width: 99vw;
+		left: 2vw;
+		top: 28em;
+		width: 370px;
 	}
-}
+}
diff --git a/UI/assets/css/lib/regform.css b/UI/assets/css/lib/regform.css
@@ -1,14 +1,8 @@
-main {
-<<<<<<< HEAD
-  margin-top: -90px;
-=======
-  margin-top: -100px;
->>>>>>> ae58a5956ac995f4df99a78696c490d8b3cd9f7d
-}
+
 
 .reg {
-    margin: auto;
     width: 70%;
+    margin: auto;
     padding: 20px;
     background: #ffffff;
     border-radius: 3px;
@@ -35,7 +29,6 @@ main {
     border-bottom: 1px solid #d8d8d8;
   }
   .reg-input:focus {
-<<<<<<< HEAD
     border-color: #262734;
     outline: 0;
   }
@@ -76,18 +69,6 @@ main {
     background: #262734;
   }
 
-  .green-button:hover {
-    background: #00050c;
-=======
-    border-color: #1d2325;
-    outline: 0;
-  }
-
-  .green-button {
-    background: #1d2325;
-  }
-
   .green-button:hover {
     background: #111516;
->>>>>>> ae58a5956ac995f4df99a78696c490d8b3cd9f7d
   }
diff --git a/UI/assets/css/lib/table.css b/UI/assets/css/lib/table.css
@@ -12,15 +12,14 @@
 
 .caption {
     display: block;
-    width: 100%;
+    width: 99.1%;
     background: #4C4E5E;
-    height: 55px;
+    height: 35px;
     padding-left: 10px;
     color: #fff;
     font-size: 20px;
-    line-height: 55px;
-    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
-    box-sizing: border-box;
+    line-height: 35px;
+
 }
 
 .header-row {
@@ -55,7 +54,7 @@ input[type="checkbox"] {
 }
 
 
-@media only screen and (max-width: 760px) {
+@media only screen and (max-width: 1000px) {
 
     body {
         padding: 0;
@@ -78,43 +77,18 @@ input[type="checkbox"] {
 
     .row {
         position: relative;
-        display: block;
         border-bottom: 1px solid #ccc;
 
     }
 
-    .header-row {
-        display: none;
-    }
-
     .cell {
         display: block;
-
         border: none;
         position: relative;
-        height: 45px;
+        height: 65px;
         line-height: 45px;
         text-align: left;
-    }
-
-    .primary:after {
-        content: "";
-        display: block;
-        position: absolute;
-        right: 20px;
-        top: 18px;
-        z-index: 2;
-        width: 0;
-        height: 0;
-        border-top: 10px solid transparent;
-        border-bottom: 10px solid transparent;
-        border-right: 10px solid #ccc;
-
-    }
-
-    .cell:nth-of-type(n+2) {
-        display: none;
-    }
+    }   
 
 
     input[type="radio"],

diff --git a/UI/assets/css/main.css b/UI/assets/css/main.css
@@ -10,7 +10,7 @@
 
 body {
   background: #FFFFFF;
-  width: 100%;
+  max-width: 100%;
   padding: 0;
   margin: 0;
   text-align: center;

diff --git a/UI/assets/css/userlist.css b/UI/assets/css/userlist.css
@@ -16,4 +16,9 @@ main {
 
 .green-button {
     margin: 10px;
+    background: #262734;
+}
+
+.green-button:hover {
+    background: #16161d;
 }
diff --git a/UI/pages/adduser.html b/UI/pages/adduser.html
@@ -44,7 +44,6 @@
     </div>
   </header>
 
-<<<<<<< HEAD
     <main>
         <form class="reg">
             <div class="reg-switch">
@@ -55,26 +54,11 @@
             </div>
             <input type="email" class="reg-input" placeholder="Email address">
             <input type="text" class="reg-input" placeholder="Name">
-            <input type="address" class="reg-input" placeholder="Address">
+            <input type="Contact address" class="reg-input" placeholder="Contact Address">
             <input type="tel" class="reg-input" placeholder="Phone Number">
             <input type="submit" value="Create Account" class="green-button">
         </form>
     </main>
-=======
-  <main>
-    <form class="reg">
-      <input type="email" class="reg-input" placeholder="Email address">
-      <input type="password" class="reg-input" placeholder="Password">
-      <input type="tel" class="reg-input" placeholder="Phone number">
-      <select class="reg-input select">
-        <option value="Select Gender">Select Gender</option>
-        <option value="Male">Male</option>
-        <option value="Female">Female</option>
-      </select>
-      <input type="submit" value="Create Account" class="green-button">
-    </form>
-  </main>
->>>>>>> ae58a5956ac995f4df99a78696c490d8b3cd9f7d
 
   <footer></footer>
 </body>