Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wins form css #1314

Merged
merged 8 commits into from
Jun 16, 2021
Merged

Wins form css #1314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
477291b
begin css changes
jbubar Mar 21, 2021
f25606e
initial page styling
jbubar Mar 23, 2021
52dd1f6
add submit success message
jbubar Mar 23, 2021
c669be3
Merge branch 'gh-pages' into wins-form-css
jbubar Mar 31, 2021
2eb587d
styled the inputs to be more simple
jbubar Apr 4, 2021
c53af21
small update
jbubar Jun 13, 2021
88f94b7
change colors to variables
jbubar Jun 13, 2021
681d421
fix github error checking, and make textarea required
jbubar Jun 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 92 additions & 0 deletions _sass/components/_wins-form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
1 change: 1 addition & 0 deletions _sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,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';

Expand Down
124 changes: 46 additions & 78 deletions pages/wins/wins-share-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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">
Expand All @@ -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:
Expand Down Expand Up @@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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> -->