Merge pull request #98 from fac-12/css-for-username

parkhabit · web-flow · commit 2a8cc0e17560 · 2017-12-08T14:10:09.000Z
Css for username
diff --git a/public/index.html b/public/index.html
@@ -12,12 +12,14 @@
 </head>
 
 <body>
-    <p id="display_username" class=display_username></p>
+
     <section class="dataContainer" id="data_container">
 
     </section>
     <section class="form_container">
+      <p id="display_username" class=display_username></p>
         <h1 class="header">Kitty Splitter</h1>
+
         <h3 class="tagline">Record the item you've purchased below</h3>
         <form class="inputForm" id="form">
             <select id="category" name="category" required>
@@ -39,4 +41,4 @@ <h3 class="tagline">Record the item you've purchased below</h3>
     <script src="/public/index.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/public/login.css b/public/login.css
@@ -18,7 +18,7 @@ body {
     /* width: 80%; */
     min-height: 50vh;
     overflow: auto;
-    background: rgba(255, 255, 255, 0.85);
+    background: rgba(255, 255, 255, 0.6);
     padding: 0 10%;
 
 }
@@ -55,16 +55,20 @@ input[type="submit"] {
     padding: 3rem;
     font-size: 1rem;
     text-align: left;
+    background: rgba(255, 255, 255, 0.85);
   }
 form {
     max-width: 80%;
 }
 
   input {
-    margin: 0;
-    padding: 0;
-    /* font size below being over ridden by mobile css!*/
-    /*font-size: 0.2;*/
+    margin: 1%;
     background-color: white;
+  }
+
+    input[type="submit"] {
+      font-size: 1.2rem;
+
+    }
 }
 }
diff --git a/public/login.js b/public/login.js
@@ -22,11 +22,11 @@ signupPassword2.addEventListener('input', function(event) {
 });
 
 
-signupPassword1.setCustomValidity("Password must be 8 or more characters long and contain at least: 1 uppcase letter, 1 lowercase letter, and 1 number");
-signupPassword2.setCustomValidity("Password must be 8 or more characters long and contain at least: 1 uppcase letter, 1 lowercase letter, and 1 number");
-loginPassW.setCustomValidity("Password must be 8 or more characters long and contain at least: 1 uppcase letter, 1 lowercase letter, and 1 number");
-signupName.setCustomValidity("Name must only contain upper and lowercase letters");
-loginName.setCustomValidity("Name must only contain upper and lowercase letters");
+// signupPassword1.setCustomValidity("Password must be 8 or more characters long and contain at least: 1 uppcase letter, 1 lowercase letter, and 1 number");
+// signupPassword2.setCustomValidity("Password must be 8 or more characters long and contain at least: 1 uppcase letter, 1 lowercase letter, and 1 number");
+// loginPassW.setCustomValidity("Password must be 8 or more characters long and contain at least: 1 uppcase letter, 1 lowercase letter, and 1 number");
+// signupName.setCustomValidity("Name must only contain upper and lowercase letters");
+// loginName.setCustomValidity("Name must only contain upper and lowercase letters");
 
 // signupName.oninvalid = function(event) {
 //     event.target.setCustomValidity('Name must only contain upper and lowercase letters');
diff --git a/public/style.css b/public/style.css
@@ -29,7 +29,7 @@ body {
 }
 
 .header {
-    margin-top: 1em;
+    margin-top: 0.5em;
     margin-bottom: 1em;
     /*padding-left: 10%;*/
     text-align: center;
@@ -84,6 +84,16 @@ select,
     opacity: 0.7;
 }
 
+.display_username {
+
+  font-size: 1.5rem;
+  color: black;
+  margin-top: 2%;
+  text-align: right;
+  margin-right: 5%;
+
+}
+
 .item_container {
     font-size: 1rem;
     overflow: scroll;
@@ -95,6 +105,7 @@ select,
     font-size: 1.2rem;
     font-weight: bold;
     width: 100%;
+    padding-left: 4%;
 }
 
 
@@ -107,23 +118,37 @@ select,
         flex-direction: row;
         /*change height to 100vh*/
     }
+
+
     .form_container {
         width: 30%;
     }
     .header {
         padding-left: 10%;
-        margin-top: 2em;
+        margin-top: 1em;
         margin-bottom: 2em;
         text-align: left;
     }
     .dataContainer {
         padding: 5%;
     }
     .display_username {
-        background: rgba(255, 255, 255, 0.7);
-        margin: 0;
-        height: 50px;
-        padding: 2%;
-        z-index: 2;
+
+      font-size: 1.5rem;
+      color: black;
+      margin-top: 2%;
+      text-align: right;
+      margin-right: 3%;
+
+    }
+
+    .item_container p {
+        font-size: 1.2rem;
+        font-weight: bold;
+        width: 100%;
+        padding-left: 0;
     }
-}
+
+
+
+}
