fix issue with css

branchNotes.txt

@@ -1,17 +1,17 @@
-1.  The login and register forms should not be partials because they are only used in one place.  
+v 1.  The login and register forms should not be partials because they are only used in one place.  
     Only use partials if they are going to be used in multiple places
     In the future we can easily turn them into partials if we need to reuse it.
     This also means that their css should be in the landing.css and not their own css file
 
-2.  You have css in landing.css that applies to partials, this should never be.
+v 2.  You have css in landing.css that applies to partials, this should never be.
     However, this will be solved once you fix #1, so you can ignore this problem
 
-3.  The register strand does show the background picture, but the login strand does
+v 3.  The register strand does show the background picture, but the login strand does
 
-5.  In shared.css, move .button-join class to the "header partial" section further down.  
+v 5.  In shared.css, move .button-join class to the "header partial" section further down.  
     The button-join class is only found in the header
 
-6.  The "link" class that you created in shared.css is under the "banner partial" section.
-    It is not part of the banner partial.  It needs to be moved to an appropriate place.  Probaby landing.css
+v6.  The "link" class that you created in shared.css is under the "banner partial" section.
+    It is not part of the banner partial.  It needs to be moved to an appropriate place.  Probaby landing.css - moved to main area of shared.css since this should be apply to all pages.
 
 7.  In shared.css.  You create style for h1, h3 and label.  This belongs near the top with all of the other general, site-wide style.

views/landingPage/landing.css

@@ -81,7 +81,7 @@
 
 /* Login Strand */
 
-#loginStrand{
+#loginStrand, #registerStrand{
     display: none;
     flex-direction: column;
     align-items: center;
@@ -92,38 +92,79 @@
     height: 91.5vh;
 }
 
-/* Register Strand */
-/* Hide the browser's default checkbox */
-.container input {
+/* ----The Checkbox and Inputs Start---- */
+
+/* The container */
+.container {
+    display: block;
+    position: relative;
+    padding-left: 35px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    font-size: 16px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  
+  /* Hide the browser's default checkbox */
+  .container input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
   }
-
-#registerStrand{
+  
+  /* Create a custom checkbox */
+  .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 24px;
+    width: 24px;
+    border: 1px solid#ccc;
+    border-radius: 4px;
+    background-color: rgb(255, 255, 255);
+  }
+  
+  /* On mouse-over, add a grey background color */
+  .checkmark:hover {
+    background-color: #ccc;
+  }
+  
+  /* When the checkbox is checked, add a blue background */
+  .container input:checked ~ .checkmark {
+    background-color: #5A6F7D;
+    border: 1px solid#5A6F7D;
+  }
+  
+  /* Create the checkmark/indicator (hidden when not checked) */
+  .checkmark:after {
+    content: "";
+    position: absolute;
     display: none;
-    flex-direction: column;
-    align-items: center;
-}
-
-    #registerStrand > *{
-        margin: 10px;
-    }
-
-    #agreement{
-        display: flex;
-        margin-top: 10px;
-    }
-    
-    #checkAgree{
-        width: 24px;
-        height: 24px;
-        margin-right: 17px;
-        margin-bottom: 3px;
-        padding-top: 0px
-    }
+  }
+  
+  /* Show the checkmark when checked */
+  .container input:checked ~ .checkmark:after {
+    display: block;
+  }
+  
+  /* Style the checkmark/indicator */
+  .container .checkmark:after {
+    left: 9px;
+    top: 5px;
+    width: 5px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+/* ----The Checkbox and Inputs End---- */
 
 @media screen and (max-width: 600px){
     .logo-text img{

views/landingPage/landing.ejs

@@ -43,15 +43,58 @@
             </div>
         </div>
 
-        <div id="loginStrand">
-            <% include ../shared/loginform %>
-        </div>
-        
         <div id="registerStrand">
-            <% include ../shared/registerform %>
-        </div>
+            <form onsubmit="basicInfoObj.submit()">
+                <h1> Please Sign Up </h1>
+                <h3 class="link" onclick="loginObj.display()"> Or Register with Clover </h3>
+                <label id="nameLabel">Restaurant Name
+                    <input class="input" id="regName" type="text">
+                </label>
+        
+                <label>Email
+                    <input type="text" id="regEmail" type="email" required>
+                </label>
+        
+                <label>Password
+                    <input type="password" id="regPass" type="password" required>
+                </label>
+        
+                <label>Confirm Password
+                    <input type="password" id="regConfirmPass" type="password" required>
+                </label>
         
+                <!-- <input type="submit" value="Continue"> -->
+                <div id="agreement">
+                    <label class="container">
+                        <input type="checkbox">
+                        <span class="checkmark"></span>
+        
+                        <p style="padding-top: 5px; padding-left: 7px;">I agree to the 
+                            <a class="link" href="/information">Privacy Policy</a> and the 
+                            <a class="link" href="/information">Terms and Conditions</a></p>
+                    </label>   
+                </div> 
+                    <input id="regButton" class="buttonDisabled" type="submit" value="Register">
+            </form>
+        </div>
 
+        <div id="loginStrand">
+            <form onsubmit="basicInfoObj.submit()">
+                <h1> Please Sign In </h1>
+                <h3 class="link" onclick="registerObj.display()"> New Here? Please Sign Up </h3>
+        
+                <label>Email
+                    <input type="text" id="regEmail" type="email" required>
+                </label>
+        
+                <label>Password
+                    <input type="password" id="regPass" type="password" required>
+                </label>
+        
+                <input id="signIn" class="buttonDisabled" type="submit" value="Sign In">
+            </form>
+        </div>
+    
         <div id="posChoiceStrand">
             <h1>Choose your POS System</h1>
 

views/shared/header.css

@@ -0,0 +1,5 @@
+.button-join {
+    font-size: medium;
+    color:white;
+    text-decoration: blink;
+}

views/shared/header.ejs

@@ -1,3 +1,5 @@
+<link rel="stylesheet" href="/header.css">
+
 <div class="header">
     <a class="logo" href="http://www.thesubline.com" >
         <img src="/shared/images/logo.png" alt="Subline">

views/shared/loginform.ejs

@@ -1,20 +0,0 @@
-
-<link rel="stylesheet" href="/shared/registerform.css">
-    
-<div>
-    <form onsubmit="basicInfoObj.submit()">
-        <h1> Please Sign In </h1>
-        <h3 class="link" onclick="registerObj.display()"> New Here? Please Sign Up </h3>
-
-        <label>Email
-            <input type="text" id="regEmail" type="email" required>
-        </label>
-
-        <label>Password
-            <input type="password" id="regPass" type="password" required>
-        </label>
-
-                <input id="signIn" class="buttonDisabled" type="submit" value="Sign In">
-    </form>
-</div>
-

views/shared/registerform.css

@@ -1,70 +0,0 @@
-/* The container */
-.container {
-    display: block;
-    position: relative;
-    padding-left: 35px;
-    margin-bottom: 12px;
-    cursor: pointer;
-    font-size: 16px;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-  
-  /* Hide the browser's default checkbox */
-  .container input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-  
-  /* Create a custom checkbox */
-  .checkmark {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 24px;
-    width: 24px;
-    border: 1px solid#ccc;
-    border-radius: 4px;
-    background-color: rgb(255, 255, 255);
-  }
-  
-  /* On mouse-over, add a grey background color */
-  .checkmark:hover {
-    background-color: #ccc;
-  }
-  
-  /* When the checkbox is checked, add a blue background */
-  .container input:checked ~ .checkmark {
-    background-color: #5A6F7D;
-    border: 1px solid#5A6F7D;
-  }
-  
-  /* Create the checkmark/indicator (hidden when not checked) */
-  .checkmark:after {
-    content: "";
-    position: absolute;
-    display: none;
-  }
-  
-  /* Show the checkmark when checked */
-  .container input:checked ~ .checkmark:after {
-    display: block;
-  }
-  
-  /* Style the checkmark/indicator */
-  .container .checkmark:after {
-    left: 9px;
-    top: 5px;
-    width: 5px;
-    height: 10px;
-    border: solid white;
-    border-width: 0 3px 3px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-  }

views/shared/registerform.ejs

@@ -1,39 +0,0 @@
-
-<link rel="stylesheet" href="/shared/registerform.css">
-    
-<div>
-    <form onsubmit="basicInfoObj.submit()">
-        <h1> Please Sign Up </h1>
-        <h3 class="link" onclick="loginObj.display()"> Or Register with Clover </h3>
-        <label id="nameLabel">Restaurant Name
-            <input class="input" id="regName" type="text">
-        </label>
-
-        <label>Email
-            <input type="text" id="regEmail" type="email" required>
-        </label>
-
-        <label>Password
-            <input type="password" id="regPass" type="password" required>
-        </label>
-
-        <label>Confirm Password
-            <input type="password" id="regConfirmPass" type="password" required>
-        </label>
-
-        <!-- <input type="submit" value="Continue"> -->
-        <div id="agreement">
-            <label class="container">
-                <input type="checkbox">
-                <span class="checkmark"></span>
-
-                <p style="padding-top: 5px; padding-left: 7px;">I agree to the 
-                    <a class="link" href="/information">Privacy Policy</a> and the 
-                    <a class="link" href="/information">Terms and Conditions</a></p>
-
-            </label>   
-        </div> 
-            <input id="regButton" class="buttonDisabled" type="submit" value="Register">
-    </form>
-</div>
-

views/shared/shared.css

@@ -13,6 +13,30 @@ body{
 }
 
 /* General style that should apply to all pages */
+h1 {
+    text-align: center;
+    padding-bottom: 13px;
+
+}
+
+h3 {
+    text-align: center;
+    font-weight: 500;
+    color: gray;
+}
+
+.link {
+    cursor: pointer;
+    color: gray;
+    text-decoration: none;
+}
+
+.link:hover {
+    color: #ff636b;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
 table{
     border-spacing: 0;
 }
@@ -102,12 +126,6 @@ form{
     color: white;
 }
 
-.button-join {
-    font-size: medium;
-    color:white;
-    text-decoration: blink;
-}
-
 .button-small{
     background: none;
     border: 2px solid rgb(255, 99, 107);
@@ -312,18 +330,6 @@ strand-selector{
         color: white;
     }
 
-    .link {
-        cursor: pointer;
-        color: gray;
-        text-decoration: none;
-    }
-    
-    .link:hover {
-        color: #ff636b;
-        text-decoration: underline;
-        cursor: pointer;
-    }
-
 /* Footer Partial */
 .spacer{
     flex: 1;
@@ -358,18 +364,6 @@ strand-selector{
     }
 }
 
-h1 {
-    text-align: center;
-    padding-bottom: 13px;
-
-}
-
-h3 {
-    text-align: center;
-    font-weight: 500;
-    color: gray;
-}
-
 label {
     margin-top:20px ;
 }