From e5accd1f74cbfb2b804cb5c4cd77dccb358929c7 Mon Sep 17 00:00:00 2001 From: SteelWagstaff Date: Wed, 20 Apr 2022 16:51:45 -0700 Subject: [PATCH] More signup page & styles tweaks --- assets/styles/aldine.scss | 1 + assets/styles/components/_forms.scss | 127 ----------------- assets/styles/layouts/_page-register.scss | 160 ++++++++++++++++++++++ dist/mix-manifest.json | 34 ++--- functions.php | 2 +- inc/actions/namespace.php | 5 +- inc/activation/namespace.php | 2 +- page-register.php | 76 ++++++++-- 8 files changed, 247 insertions(+), 160 deletions(-) create mode 100644 assets/styles/layouts/_page-register.scss diff --git a/assets/styles/aldine.scss b/assets/styles/aldine.scss index fd9e5d6..e1e127d 100644 --- a/assets/styles/aldine.scss +++ b/assets/styles/aldine.scss @@ -17,4 +17,5 @@ @import "layouts/page"; @import "layouts/page-home"; @import "layouts/page-catalog"; +@import "layouts/page-register"; @import "layouts/signup"; diff --git a/assets/styles/components/_forms.scss b/assets/styles/components/_forms.scss index 7e9697b..9d3f5b5 100644 --- a/assets/styles/components/_forms.scss +++ b/assets/styles/components/_forms.scss @@ -1,8 +1,3 @@ -@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; @@ -124,125 +119,3 @@ input[type="submit"] { margin-bottom: rem(40); } } - -// TODO: Add styles needed for signin/signup pages -.signup { - line-height: 1.4; - - &--wrapper { - display: flex; - flex-direction: row; - gap: 3rem; - font-family: $header-font; - - @media #{$breakpoint-not-large} { - flex-direction: column; - } - } - - &--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 { - 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; - } - - 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; - flex-direction: column; - justify-content: center; - align-items: center; - width: 100%; - a { - padding: 10px; - border-radius: rem(8); - background: var(--support-color-secondary); - width: rem(300); - margin-bottom: rem(24); - filter: drop-shadow(0 4px 4px #E5E5E5); - } - } - } -} -*/ diff --git a/assets/styles/layouts/_page-register.scss b/assets/styles/layouts/_page-register.scss new file mode 100644 index 0000000..d8955fa --- /dev/null +++ b/assets/styles/layouts/_page-register.scss @@ -0,0 +1,160 @@ +@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; + +.page.signup .header { + height: auto; + padding: 1.5rem 2.5rem; +} + +.signup { + line-height: 1.4; + + a { + text-decoration: underline; + } + + &--tagline { + padding: .75rem 2.5rem; + font-size: 3rem; + background: $dark-blue; + color: $white; + margin-bottom: 0; + } + + &--wrapper { + display: flex; + min-height: calc(100% - 175px); + flex-direction: row; + gap: 3rem; + font-family: $header-font; + + @media #{$breakpoint-not-large} { + flex-direction: column; + } + } + + &--section { + flex: 1; + width: 50%; + padding: 2.5rem; + } + + &--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; + } + } + + &--social-buttons { + } + + &--social-button { + display: flex; + align-items: center; + padding: 5px 15px; + width: 250px; + background: $grey-blue; + border: none; + border-radius: 5px; + margin-bottom: 20px; + filter: drop-shadow(0 2px 1px #aaa); + color: $dark-blue; + font-size: 1.3rem; + font-weight: 700; + text-decoration: none; + text-align: left; + text-transform: none; + + svg { + fill: $dark-blue; + margin-right: 15px; + width: 30px; + } + } + &--social-button:hover { + background: $dark-blue; + color: white; + + svg { + fill: white; + } + } + + .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; + } + + 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; + border-radius: .5rem; + } + + &--input-description { + font-size: $tiny-font-size; + } + } +} diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json index 851b8c2..de32def 100644 --- a/dist/mix-manifest.json +++ b/dist/mix-manifest.json @@ -1,19 +1,19 @@ { - "/scripts/aldine.js": "/scripts/aldine.js", - "/scripts/call-to-action.js": "/scripts/call-to-action.js", - "/scripts/catalog-admin.js": "/scripts/catalog-admin.js", - "/scripts/customizer.js": "/scripts/customizer.js", - "/scripts/customizer-toggle.js": "/scripts/customizer-toggle.js", - "/scripts/page-section.js": "/scripts/page-section.js", - "/styles/editor.css": "/styles/editor.css", - "/styles/aldine.css": "/styles/aldine.css", - "/fonts/pressbooks-theme.woff": "/fonts/pressbooks-theme.woff", - "/images/banner.jpg": "/images/banner.jpg", - "/images/catalog-header.jpg": "/images/catalog-header.jpg", - "/images/header.jpg": "/images/header.jpg", - "/images/left-arrow.svg": "/images/left-arrow.svg", - "/images/logo.svg": "/images/logo.svg", - "/images/pb.svg": "/images/pb.svg", - "/images/right-arrow.svg": "/images/right-arrow.svg", - "/images/yt_icon_mono_dark.png": "/images/yt_icon_mono_dark.png" + "/scripts/aldine.js": "/scripts/aldine.js?id=70343c46d6d5d2b5375d", + "/scripts/call-to-action.js": "/scripts/call-to-action.js?id=33370b66c7af12320fc0", + "/scripts/catalog-admin.js": "/scripts/catalog-admin.js?id=e8d84fb090536b8e49e9", + "/scripts/customizer.js": "/scripts/customizer.js?id=14dca3944228dd789c27", + "/scripts/customizer-toggle.js": "/scripts/customizer-toggle.js?id=c31594589675d7c5662a", + "/scripts/page-section.js": "/scripts/page-section.js?id=19d5c30146ea1a763bcf", + "/styles/aldine.css": "/styles/aldine.css?id=ba8f99a1f75e9f390a94", + "/styles/editor.css": "/styles/editor.css?id=b7c2449babe566571767", + "/fonts/pressbooks-theme.woff": "/fonts/pressbooks-theme.woff?id=2a7aae81673f4707bbe7", + "/images/banner.jpg": "/images/banner.jpg?id=04a813e0b4f94ddfef19", + "/images/catalog-header.jpg": "/images/catalog-header.jpg?id=223b9f7a23985f2a72df", + "/images/header.jpg": "/images/header.jpg?id=c6712212b6aa749cf1cf", + "/images/left-arrow.svg": "/images/left-arrow.svg?id=91d479e2d001857a3ee4", + "/images/logo.svg": "/images/logo.svg?id=d71cb98d33ef823ffd27", + "/images/pb.svg": "/images/pb.svg?id=c08fb158c15a470648a7", + "/images/right-arrow.svg": "/images/right-arrow.svg?id=ee2d7230318ea54ae20b", + "/images/yt_icon_mono_dark.png": "/images/yt_icon_mono_dark.png?id=ee68b73409979a929440" } diff --git a/functions.php b/functions.php index 0feec0f..b596c9c 100644 --- a/functions.php +++ b/functions.php @@ -82,4 +82,4 @@ add_action( 'manage_sites_custom_column', '\Aldine\Admin\catalog_column', 1, 3 ) add_action( 'admin_menu', '\Aldine\Actions\remove_menu_items' ); // Override signup page. -add_action('init', '\Aldine\Actions\override_signup_page'); +add_action( 'init', '\Aldine\Actions\override_signup_page' ); diff --git a/inc/actions/namespace.php b/inc/actions/namespace.php index 521d86c..3a174e3 100644 --- a/inc/actions/namespace.php +++ b/inc/actions/namespace.php @@ -349,12 +349,11 @@ function remove_widgets() { /** * Override signup page if PB_CUSTOM_SIGNUP is set. - * */ function override_signup_page() { global $pagenow; - if( getenv('PB_CUSTOM_SIGNUP') && ! is_user_logged_in() && $pagenow === 'wp-signup.php' ) { - wp_redirect( network_home_url('/register')); + if ( getenv( 'PB_CUSTOM_SIGNUP' ) && ! is_user_logged_in() && $pagenow === 'wp-signup.php' ) { + wp_redirect( network_home_url( '/register' ) ); exit(); } } diff --git a/inc/activation/namespace.php b/inc/activation/namespace.php index 6c2a106..2bc6fac 100644 --- a/inc/activation/namespace.php +++ b/inc/activation/namespace.php @@ -98,7 +98,7 @@ function create_default_content() { ], ]; - if ( getenv('PB_CUSTOM_SIGNUP') ) { + if ( getenv( 'PB_CUSTOM_SIGNUP' ) ) { $pages['register'] = [ 'post_title' => __( 'Register', 'pressbooks-aldine' ), 'post_content' => '', diff --git a/page-register.php b/page-register.php index 9b7afe1..f111633 100644 --- a/page-register.php +++ b/page-register.php @@ -1,4 +1,14 @@ - Signup for a Pressbooks Account - /dist/styles/aldine.css" /> + Pressbooks Signup + + - + + + + + + + + + + + + +

@@ -20,16 +66,16 @@ do_action( 'pb_custom_signup_form_handler' )
/register" method="post">
- +
-

+

- +

- +

@@ -37,10 +83,18 @@ do_action( 'pb_custom_signup_form_handler' )