Wins form css (#1314)

* begin css changes * initial page styling * add submit success message * styled the inputs to be more simple * small update * change colors to variables * fix github error checking, and make textarea required
hackforla · Jun 16, 2021 · 7e204ce · 7e204ce
1 parent aedbca2
commit 7e204ce
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 78 deletions.
diff --git a/_sass/components/_wins-form.scss b/_sass/components/_wins-form.scss
@@ -0,0 +1,92 @@
+.wins-form {
+  min-height: calc(100vh - 223px);
+  display: flex;
+  align-items: center;
+  background: $color-blue-dark;
+  .wins-form-title {
+    font-size: 35px;
+    font-weight: 400;
+    line-height: 41px;
+  }
+  form.page-card {
+    flex: 0 1 896px;
+  }
+  .page-card-lg {
+    max-width: 896px;
+    box-shadow: 0 0 8px 0 rgba(51, 51, 51, 0.2);
+    padding: 48px 100px;
+    margin: 16px auto;
+    // NEW MOBILE FRIENDLY RULES
+    @media #{$bp-below-tablet} {
+      padding: 32px 16px;
+      margin: 12px auto;
+    }
+  }
+  button[type="submit"]{
+    float: right;
+  }
+  .page-card {
+    border-radius: 20px;
+    overflow: hidden;
+    background: $color-white;
+  }
+  #professionalLinkForm {
+    display: none;
+  }
+  #teamsRolesForm {
+    display: none;
+  }
+  #celebrationsForm {
+    display: none;
+  }
+
+  #linkedinPhotoPermission {
+    display: none;
+  }
+  #githubPhotoPermission {
+    display: none;
+  }
+  #successMessage {
+    display: none;
+  }
+  .form-group {
+    margin-bottom: 1rem;
+  }
+  label {
+    display: inline-block;
+    margin-bottom: 0.5rem;
+  }
+  .form-control, .date {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    background-color: $color-white;
+    background-clip: padding-box;
+    border-bottom: 1.5px solid $color-black;
+    border-radius: 0;
+    box-shadow: inset 0px 0px 0px 0px;
+  }
+  .form-control:focus {
+    outline: none;
+    border-bottom: 2px solid $color-blue; //need to change color
+    background-color: $color-grey-light;
+  }
+  .container-fluid {
+    width: 100%;
+    padding-right: 30px;
+    padding-left: 30px;
+  }
+  p, .question {
+    margin: 16px 0;
+    font-weight: 700;
+  } 
+  .btn-container{
+      width: 100%;
+      display: flex;
+      justify-content: center;
+  }
+}
diff --git a/_sass/main.scss b/_sass/main.scss
@@ -53,6 +53,7 @@
 @import 'components/guide-pages/2FA.scss';
 @import 'components/toolkit.scss';
 @import 'components/wins-page.scss';
+@import 'components/wins-form.scss';
 @import 'components/join-us.scss';
 @import 'components/sitemap.scss';
 @import 'components/program-areas.scss';

diff --git a/pages/wins/wins-share-form.html b/pages/wins/wins-share-form.html
@@ -1,68 +1,23 @@
 ---
-layout: null
+layout: default
 permalink: /share-your-wins/
 ---
 
-<!DOCTYPE html>
+<!-- <!DOCTYPE html>
 <html lang="en">
   <head>
-    <style>
-      #professionalLinkForm {
-        display: none;
-      }
-      #teamsRolesForm {
-        display: none;
-      }
-      #celebrationsForm {
-        display: none;
-      }
-
-      #linkedinPhotoPermission {
-        display: none;
-      }
-      #githubPhotoPermission {
-        display: none;
-      }
-      .form-group {
-        margin-bottom: 1rem;
-      }
-      label {
-        display: inline-block;
-        margin-bottom: 0.5rem;
-      }
-      .form-control {
-        display: block;
-        width: 100%;
-        height: calc(1.5em + 0.75rem + 2px);
-        padding: 0.375rem 0.75rem;
-        font-size: 1rem;
-        font-weight: 400;
-        line-height: 1.5;
-        color: #495057;
-        background-color: #fff;
-        background-clip: padding-box;
-        border: 1px solid #ced4da;
-        border-radius: 0.25rem;
-        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-      }
-      .container-fluid {
-        width: 100%;
-        padding-right: 30px;
-        padding-left: 30px;
-      }
-    </style>
     <title>Share your wins with us!</title>
-  </head>
+  </head> -->
 
-  <body class="container-fluid">
-    <form id="nameEmailForm">
+  <div class="container-fluid wins-form content-section">
+    <form id="nameEmailForm" class="page-card-lg page-card">
+      <h1 class="wins-form-title">Share your wins with us!</h1>
       <div class="form-group">
         <label for="fullName">Full name</label>
         <input
           type="text"
           class="form-control"
           id="fullName"
-          placeholder="Enter fullname"
           required
         />
       </div>
@@ -72,23 +27,21 @@
           type="email"
           class="form-control"
           id="email"
-          placeholder="Enter email"
           required
         />
       </div>
 
       <button type="submit" id="nameEmailNextButton">Next</button>
     </form>
 
-    <form id="professionalLinkForm">
+    <form id="professionalLinkForm" class="page-card-lg page-card">
       <div class="form-group">
         <label for="linkedinurl">LinkedIn URL(optional)</label>
         <input
           type="text"
           class="form-control"
           id="linkedinurl"
-          placeholder="Enter LinkedIn URL"
-          pattern="https:\/\/www\.linkedin\.com\/.+"
+          pattern="https:\/\/(www\.)?linkedin\.com\/.+"
           title="https://www.linkedin.com/in/<your-username>"
         />
       </div>
@@ -122,8 +75,7 @@
           type="text"
           class="form-control"
           id="githuburl"
-          placeholder="Enter GitHub URL"
-          pattern='https:\/\/www\.github\.com\/.+'
+          pattern='https:\/\/(www\.)?github\.com\/.+'
           title="https://www.github.com/<your-username>"
         />
       </div>
@@ -154,7 +106,7 @@
       </button>
     </form>
 
-    <form id="teamsRolesForm">
+    <form id="teamsRolesForm" class="page-card-lg page-card">
       <section id="teams">
         <p>Select the team(s) you're on</p>
         <template id="teamsCheckBoxTemplate">
@@ -170,7 +122,7 @@
         </template>
       </section>
       <div class="form-group">
-        <label for="specificRole">What is/was your specific role</label>
+        <label for="specificRole"><p>What is/was your specific role</p></label>
         <input
           type="text"
           class="form-control"
@@ -180,9 +132,10 @@
         />
       </div>
       <section id="joinDate">
-        <label for="joinDateInput">Join date</label>
+        <label for="joinDateInput"><p>Join date</p></label>
         <input
           type="date"
+          class="date"
           id="joinDateInput"
           name="join-date-input"
           min="2018-01-01"
@@ -192,7 +145,7 @@
       <button type="submit" id="teamsRolesNextButton">Next</button>
     </form>
 
-    <form id="celebrationsForm">
+    <form id="celebrationsForm" class="page-card-lg page-card">
       <section id="wins">
         <p>What do you want to celebrate (select all that apply)?</p>
         <template id="winsCheckboxTemplate">
@@ -201,17 +154,30 @@
         </template>
       </section>
       <div class="form-group">
-        <label for="winsOverview">Give us a brief overview</label>
-        <textarea name="winsOverview" id="winsOverview" form="celebrationsForm">
-Enter text here...</textarea
-        >
+        <label for="winsOverview"><p>Give us a brief overview</p></label>
+        <textarea 
+          name="winsOverview" 
+          id="winsOverview" 
+          form="celebrationsForm"
+          placeholder="Enter text here..."
+          required
+        ></textarea>
+      </div>
+      <div class="btn-container">
+        <button id="submitButton" type="submit" class="btn btn-lg btn-primary">
+          Submit
+        </button>
       </div>
-
-      <button id="submitButton" type="submit" class="btn btn-primary">
-        Submit
-      </button>
     </form>
-  </body>
+    <div id="successMessage" class="page-card-lg page-card">
+      <h2>Thank you for sharing your win with us!</h2>
+      <p>Our process for adding it to the website is:</p>
+      <ol>
+      <li>Review and Approve</li>
+      <li>Chron job runs nightly and adds reviewed wins to the site</li>
+      </ol>
+    </div>
+  </div>
   <script>
     /**
      * Resources:
@@ -476,7 +442,7 @@
       .addEventListener("input", function (e) {
         //If it is a valid linkedin url
         const str = e.target.value;
-        if (str.match(/https:\/\/www\.linkedin\.com\/.+/g).length >0) {
+        if (str.match(/https:\/\/(www\.)?linkedin\.com\/.+/g).length >0) {
           //display the linkedIn photo permission question
           document.querySelector("#linkedinPhotoPermission").style.display =
             "block";
@@ -501,7 +467,7 @@
       .addEventListener("input", function (e) {
         //If it is a valid linkedin url
         const str = e.target.value;
-        if (str.match(/https:\/\/www\.github\.com\/.+/g).length >0) {
+        if (str.match(/https:\/\/(www\.)?github\.com\/.+/g).length >0) {
           //display the github photo permission question
           document.querySelector("#githubPhotoPermission").style.display =
             "block";
@@ -537,14 +503,16 @@
         .then((response) => {
           response.json().then((data) => {
             console.log(data);
-            alert(
-              `This is submission success debug alert that you can comment out: ${JSON.stringify(
-                data
-              )}`
-            );
+            // alert(
+            //   `This is submission success debug alert that you can comment out: ${JSON.stringify(
+            //     data
+            //   )}`
+            // );
+            document.querySelector("#celebrationsForm").style.display = "none";
+            document.querySelector("#successMessage").style.display = "block";
           });
         })
         .catch((error) => console.error("Error!", error.message));
     }
   </script>
-</html>
+<!-- </html> -->