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. 111
      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;

111
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 { label {
margin: 0 0 1rem; margin: 0 0 1rem;
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
@ -120,45 +125,108 @@ input[type="submit"] {
} }
} }
// TODO: Add styles needed for signin/signup pages
.signup { .signup {
line-height: 1.4;
&--wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; gap: 3rem;
align-items: flex-start; font-family: $header-font;
width: 100%;
height: 100%;
flex-wrap: wrap;
font-family: "Karla", serif;
@media #{$breakpoint-not-large} { @media #{$breakpoint-not-large} {
flex-direction: column; flex-direction: column;
} }
}
h2 { &--section {
line-height: 1; width: 50%;
padding: 0 2rem;
}
&--section:first-child {
background: $light-grey-blue;
}
&--header-title {
text-transform: none; text-transform: none;
text-align: left; text-align: left;
font-size: rem(48); font-size: $big-font-size;
font-weight: normal; font-weight: 400;
&:before {
&::before {
content: ""; content: "";
margin-bottom: 0; margin-bottom: 0;
background: none; background: none;
} }
} }
}
.form {
width: 100%;
.form__wrapper { &--input-wrapper {
align-self: stretch; position: relative;
background: var(--support-color);
flex: 1;
} }
.social__wrapper { input[type="email"], input[type="text"] {
flex: 1; background: white;
display: flex; border: solid 1px $dark-blue;
flex-direction: column; padding: 5px;
justify-content: center; min-width: 66%;
align-items: center; font-weight: 400;
height: 40px;
}
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 { .social__buttons {
display: flex; 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"> <html lang="en">
<head> <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" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo("template_directory"); ?>/dist/styles/aldine.css" />
<?php do_action( 'pb_custom_signup_header' ); ?> <?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' ); ?> <?php do_action( 'pb_custom_signup_before_wrapper' ); ?>
<div class="signup"> <div class="signup--wrapper">
<section class="form__wrapper"> <section class="signup--section">
<h1>Pressbooks Logo</h1> <h2 class="signup--header-title"><?php _e( 'Sign up with your email and a password', 'pressbooks-aldine' ); ?></h2>
<h2>Start creating your <strong>manuscript</strong> today</h2> <form class="form"<?php echo home_url(); ?>/register" method="post">
<p>Sign up with your email and password</p> <div class="form--input-wrapper">
<form action="<?php echo home_url(); ?>/register" method="post"> <input id="email" type="email" autocomplete="email" placeholder=" " required/>
<input type="text" name="user_email" placeholder="Email" /> <label for="email"><?php _e( 'Email address', 'pressbooks-aldine' );?></label>
<label for="user_email error">Will be used to send your registration details</label> </div>
<input type="password" name="user_pass" placeholder="Password" /> <p class="form--input-description"><?php _e( 'Will be used to send your registration details', 'pressbooks-aldine' );?></p>
<label for="password error">At least 12 characters, with at least one upper case letter and one number</label> <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' ); ?> <?php do_action( 'pb_custom_signup_extra_fields' ); ?>
<button type="submit">Create Your Account</button> <button type="submit"><?php _e( 'Create Your Account', 'pressbooks-aldine' );?></button>
<label>By signing up for Pressbooks. you agree to our privacy policy and terms of service.</label> <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> </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>
<section class="social__wrapper"> <section class="signup--section">
<h2>Or sign up with one of the following:</h2> <h2 class="signup--header-title"><?php _e( 'Or sign up with one of the following:', 'pressbooks-aldine' ); ?></h2>
<div class="social__buttons"> <div class="signup--social-buttons">
<a href="<?php echo site_url(); ?>/wp-login.php?loginFacebook=1">Google</a> <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">Twitter</a>
<a href="<?php echo site_url(); ?>/wp-login.php?loginTwitter=1">LinkedIn</a> <a href="<?php echo site_url(); ?>/wp-login.php?loginFacebook=1">Facebook</a>
<a href="<?php echo site_url(); ?>/wp-login.php?loginTwitter=1">Facebook</a> <a href="<?php echo site_url(); ?>/wp-login.php?loginLinkedIn=1">LinkedIn</a>
</div> </div>
</section> </section>
</div> </div>

Loading…
Cancel
Save