Browse Source

clean up signup page & styles

pull/328/head
SteelWagstaff 4 years ago
parent
commit
17c012bfda
  1. 24
      assets/styles/common/_variables.scss
  2. 129
      assets/styles/components/_forms.scss
  3. 397
      dist/scripts/aldine.js
  4. 2818
      dist/styles/aldine.css
  5. 48
      page-register.php

24
assets/styles/common/_variables.scss

@ -1 +1,23 @@
// TODO
// PB Colour Palette
$pb-red: #bb2026;
$dark-blue: #00243a;
$grey-blue: #d0edf0;
$light-grey-blue: #f0f9fa;
$light-blue: #f6fbfc;
// Utility Colours
$black: #000;
$dark-grey: #333;
$light-blue-grey: #f3f7fa;
$white: #fff;
$error-red: #ff3b3b;
$valid-green: #2ed0ac;
$warning-yellow: #ffd943;
$disabled-grey: #c6c6c6;
// Fonts
$big-font-size: 2rem;
$medium-font-size: 1.5rem;
$small-font-size: 1rem;
$tiny-font-size: 0.8rem;

129
assets/styles/components/_forms.scss

@ -1,3 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&family=Spectral:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap');
$header-font: 'Karla', sans-serif;
$body-font: 'Spectral', serif;
label {
margin: 0 0 1rem;
font-family: $font-family-sans-serif;
@ -120,45 +125,108 @@ input[type="submit"] {
}
}
// TODO: Add styles needed for signin/signup pages
.signup {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
height: 100%;
flex-wrap: wrap;
font-family: "Karla", serif;
line-height: 1.4;
@media #{$breakpoint-not-large} {
flex-direction: column;
&--wrapper {
display: flex;
flex-direction: row;
gap: 3rem;
font-family: $header-font;
@media #{$breakpoint-not-large} {
flex-direction: column;
}
}
h2 {
line-height: 1;
text-transform: none;
text-align: left;
font-size: rem(48);
font-weight: normal;
&:before {
content: "";
margin-bottom: 0;
background: none;
&--section {
width: 50%;
padding: 0 2rem;
}
&--section:first-child {
background: $light-grey-blue;
}
&--header-title {
text-transform: none;
text-align: left;
font-size: $big-font-size;
font-weight: 400;
&::before {
content: "";
margin-bottom: 0;
background: none;
}
}
}
.form__wrapper {
align-self: stretch;
background: var(--support-color);
flex: 1;
.form {
width: 100%;
&--input-wrapper {
position: relative;
}
input[type="email"], input[type="text"] {
background: white;
border: solid 1px $dark-blue;
padding: 5px;
min-width: 66%;
font-weight: 400;
height: 40px;
}
.social__wrapper {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
label {
position: absolute;
top: 8px;
left: 8px;
color: #666;
transition: .3s;
z-index: 0;
font-size: $small-font-size;
}
input:not(:placeholder-shown) + label {
top: -10px;
left: 5px;
z-index: 999;
padding: 0 5px;
background: white;
color: #666;
}
input:focus + label {
top: -11px;
left: 5px;
z-index: 999;
padding: 0 5px;
background: white;
color: $dark-blue;
}
::placeholder {
color: transparent;
}
input:focus {
border: 2px solid $dark-blue;
}
&button {
font-size: $medium-font-size;
text-transform: none;
padding: .5rem 1.5rem;
margin-bottom: .5rem;
}
&--input-description {
font-size: $tiny-font-size;
}
}
/*
.social__buttons {
display: flex;
@ -177,3 +245,4 @@ input[type="submit"] {
}
}
}
*/

397
dist/scripts/aldine.js vendored

File diff suppressed because one or more lines are too long

2818
dist/styles/aldine.css vendored

File diff suppressed because one or more lines are too long

48
page-register.php

@ -7,34 +7,40 @@ do_action( 'pb_custom_signup_form_handler' )
?>
<html lang="en">
<head>
<title>PressBooks Aldine</title>
<title>Signup for a Pressbooks Account</title>
<link rel="stylesheet" type="text/css" href="<?php bloginfo("template_directory"); ?>/dist/styles/aldine.css" />
<?php do_action( 'pb_custom_signup_header' ); ?>
<body>
<body class="page signup">
<!-- TODO: insert logo -->
<p class="signup--tagline"><?php _e( 'Start creating your textbook today', 'pressbooks-aldine' ); ?></p>
<?php do_action( 'pb_custom_signup_before_wrapper' ); ?>
<div class="signup">
<section class="form__wrapper">
<h1>Pressbooks Logo</h1>
<h2>Start creating your <strong>manuscript</strong> today</h2>
<p>Sign up with your email and password</p>
<form action="<?php echo home_url(); ?>/register" method="post">
<input type="text" name="user_email" placeholder="Email" />
<label for="user_email error">Will be used to send your registration details</label>
<input type="password" name="user_pass" placeholder="Password" />
<label for="password error">At least 12 characters, with at least one upper case letter and one number</label>
<div class="signup--wrapper">
<section class="signup--section">
<h2 class="signup--header-title"><?php _e( 'Sign up with your email and a password', 'pressbooks-aldine' ); ?></h2>
<form class="form"<?php echo home_url(); ?>/register" method="post">
<div class="form--input-wrapper">
<input id="email" type="email" autocomplete="email" placeholder=" " required/>
<label for="email"><?php _e( 'Email address', 'pressbooks-aldine' );?></label>
</div>
<p class="form--input-description"><?php _e( 'Will be used to send your registration details', 'pressbooks-aldine' );?></p>
<div class="form--input-wrapper">
<input id="password" type="text" autocomplete="new-password" placeholder=" " required/>
<label for="password"><?php _e( 'Password', 'pressbooks-aldine' );?></label>
</div>
<p class="form--input-description"><?php _e( 'At least 12 characters, with at least one upper case letter and one number', 'pressbooks-aldine' ); ?></p>
<?php do_action( 'pb_custom_signup_extra_fields' ); ?>
<button type="submit">Create Your Account</button>
<label>By signing up for Pressbooks. you agree to our privacy policy and terms of service.</label>
<button type="submit"><?php _e( 'Create Your Account', 'pressbooks-aldine' );?></button>
<p class="form--input-description"><?php _e( 'By signing up for Pressbooks. you agree to our privacy policy and terms of service.', 'pressbooks-aldine' ); ?></p>
</form>
Already have an account? <a href="<?php echo site_url(); ?>/wp-login.php">Log in</a>
<h2 class="signup--header-title">Already have an account? <a href="<?php echo site_url(); ?>/wp-login.php">Log in</a></h2>
</section>
<section class="social__wrapper">
<h2>Or sign up with one of the following:</h2>
<div class="social__buttons">
<a href="<?php echo site_url(); ?>/wp-login.php?loginFacebook=1">Google</a>
<section class="signup--section">
<h2 class="signup--header-title"><?php _e( 'Or sign up with one of the following:', 'pressbooks-aldine' ); ?></h2>
<div class="signup--social-buttons">
<a href="<?php echo site_url(); ?>/wp-login.php?loginGoogle=1">Google</a>
<a href="<?php echo site_url(); ?>/wp-login.php?loginTwitter=1">Twitter</a>
<a href="<?php echo site_url(); ?>/wp-login.php?loginTwitter=1">LinkedIn</a>
<a href="<?php echo site_url(); ?>/wp-login.php?loginTwitter=1">Facebook</a>
<a href="<?php echo site_url(); ?>/wp-login.php?loginFacebook=1">Facebook</a>
<a href="<?php echo site_url(); ?>/wp-login.php?loginLinkedIn=1">LinkedIn</a>
</div>
</section>
</div>

Loading…
Cancel
Save