Code
/
pressbooks-aldine
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Clean up contact form.

pull/22/head
Ned Zimmerman 8 years ago
parent
f4b248fabc
commit
04c7325e19
No known key found for this signature in database
GPG Key ID: FF56334A013120CA
7 changed files with 116 additions and 131 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      app/admin.php
  2. 8
      app/setup.php
  3. 36
      resources/assets/styles/common/_global.scss
  4. 2
      resources/assets/styles/components/_buttons.scss
  5. 143
      resources/assets/styles/components/_forms.scss
  6. 30
      resources/assets/styles/layouts/pages/_front-page.scss
  7. 26
      resources/views/partials/contact-form.blade.php

2
app/admin.php
Unescape View File

@ -9,7 +9,7 @@ add_action('customize_register', function (\WP_Customize_Manager $wp_customize)
// Add postMessage support // Add postMessage support
$wp_customize->get_setting('blogname')->transport = 'postMessage'; $wp_customize->get_setting('blogname')->transport = 'postMessage';
$wp_customize->selective_refresh->add_partial('blogname', [ $wp_customize->selective_refresh->add_partial('blogname', [
'selector' => '.brand', 'selector' => '.branding h1 a',
'render_callback' => function () { 'render_callback' => function () {
bloginfo('name'); bloginfo('name');
} }

8
app/setup.php
Unescape View File

@ -90,8 +90,8 @@ add_action('widgets_init', function () {
$config = [ $config = [
'before_widget' => '<section class="widget %1$s %2$s">', 'before_widget' => '<section class="widget %1$s %2$s">',
'after_widget' => '</section>', 'after_widget' => '</section>',
'before_title' => '<h3 class="tc ttu">', 'before_title' => '<h2>',
'after_title' => '</h3>' 'after_title' => '</h2>'
]; ];
register_sidebar([ register_sidebar([
'name' => __('Front Page Content', 'aldine'), 'name' => __('Front Page Content', 'aldine'),
@ -102,8 +102,8 @@ add_action('widgets_init', function () {
'id' => 'front-page-block', 'id' => 'front-page-block',
'before_widget' => '<section class="block %1$s %2$s">', 'before_widget' => '<section class="block %1$s %2$s">',
'after_widget' => '</section>', 'after_widget' => '</section>',
'before_title' => '<h3 class="tc ttu">', 'before_title' => '<h2>',
'after_title' => '</h3>' 'after_title' => '</h2>'
]); ]);
register_sidebar([ register_sidebar([
'name' => __('Network Footer Block 1', 'aldine'), 'name' => __('Network Footer Block 1', 'aldine'),

36
resources/assets/styles/common/_global.scss
Unescape View File

@ -31,18 +31,23 @@ h1 {
} }
h2 { h2 {
font-size: rem(16); font-size: rem(30);
font-weight: normal; font-weight: 600;
line-height: (30/16); color: var(--primary, $brand-primary);
letter-spacing: 2px;
line-height: (36/30);
text-transform: uppercase;
text-align: center;
margin: 0; margin: 0;
}
.ml-auto { &::before {
margin-left: auto; content: "";
} display: block;
margin: 0 auto 1em;
.mr-auto { width: 46px;
margin-right: auto; height: 5px;
background: var(--accent, $brand-accent);
}
} }
:root { :root {
@ -81,3 +86,14 @@ a {
.b--accent { .b--accent {
border-color: var(--brand-secondary, $brand-accent); border-color: var(--brand-secondary, $brand-accent);
} }
@media (min-width: $medium) {
h2 {
font-size: rem(48);
line-height: (56/48);
&::before {
width: 74px;
}
}
}

2
resources/assets/styles/components/_buttons.scss
Unescape View File

@ -35,7 +35,7 @@
} }
&.button--outline { &.button--outline {
background: $white; background: transparent;
color: var(--primary, $brand-primary); color: var(--primary, $brand-primary);
&:hover, &:hover,

143
resources/assets/styles/components/_forms.scss
Unescape View File

@ -1,98 +1,97 @@
/** Search form */ .form {
// TODO: .search-form {} width: rem(354);
// TODO: .search-form label {}
// TODO: .search-form .search-field {}
// TODO: .search-form .search-submit {}
::placeholder {
color: $black;
}
.contact {
background: #f6f6f6;
padding: rem(65) 0 rem(120);
h3 { ::placeholder {
color: var(--primary, $brand-primary); color: $black;
&::before {
content: '';
display: block;
margin: 0 auto 1rem;
width: rem(46);
height: rem(5);
background: var(--accent, $brand-accent);
}
} }
p { &__notice {
margin-bottom: 2rem;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
&:last-child { &--error {
margin-top: rem(47); color: $dark-red;
} }
}
.success {
color: $dark-green;
}
.error { &--success {
color: $dark-red; color: $dark-green;
}
} }
form { &__row {
width: 22.125rem; display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
.error > input[type="text"], &--error > input[type="text"],
.error > input[type="email"], &--error > input[type="email"],
.error > textarea { &--error > textarea {
border-bottom: solid 2px $dark-red; border-bottom: solid 2px $dark-red;
} }
.error > ::placeholder { &--error > ::placeholder {
color: $dark-red; color: $dark-red;
} }
}
label { &:last-child {
margin-bottom: 1rem; margin-top: rem(48);
}
} }
}
label, label {
input[type="text"], margin-bottom: 1rem;
input[type="email"], }
textarea {
font-size: 0.875rem;
font-weight: 600;
font-family: $font-family-sans-serif;
background: transparent;
}
.button { input[type="text"],
background: transparent; input[type="email"],
input[type="tel"],
textarea {
flex-grow: 1;
border-top: 0;
border-right: 0;
border-left: 0;
border-bottom: solid 2px $black;
padding: 0 0 1em;
font-size: 0.875rem;
font-weight: 600;
font-family: $font-family-sans-serif;
background: transparent;
-webkit-appearance: none;
-moz-appearance: none;
&:focus {
outline: none;
border-bottom: solid 2px var(--accent, $brand-accent);
} }
}
textarea { textarea {
height: 7.5em; // TODO height: 7.5em;
resize: none; resize: none;
} }
input[type="text"], input[type="submit"] {
input[type="email"], cursor: pointer;
textarea { }
flex-grow: 1;
border-top: 0; // Contact form
border-right: 0;
border-left: 0; .contact {
border-bottom: solid 2px $black; display: flex;
padding: 0 0 1em; flex-direction: column;
justify-content: center;
&:focus { align-items: center;
outline: none; width: 100%;
border-bottom: solid 2px var(--accent, $brand-accent); padding: rem(65) 0 rem(120);
} background: #f6f6f6;
h2 {
font-size: rem(24);
margin-bottom: rem(40);
} }
} }

30
resources/assets/styles/layouts/pages/_front-page.scss
Unescape View File

@ -89,27 +89,6 @@
} }
} }
.block,
.latest-books {
h3 {
font-size: rem(30);
font-weight: 600;
color: var(--primary, $brand-primary);
letter-spacing: 2px;
line-height: (36/30);
margin: 0;
&::before {
content: "";
display: block;
margin: 0 auto 1em;
width: 46px;
height: 5px;
background: var(--accent, $brand-accent);
}
}
}
.latest-books { .latest-books {
height: auto; height: auto;
padding: 0 0 rem(154); padding: 0 0 rem(154);
@ -238,15 +217,6 @@
margin-bottom: 4.0625rem; margin-bottom: 4.0625rem;
} }
h3 {
font-size: rem(48);
line-height: (56/48);
&::before {
width: 74px;
}
}
p { p {
font-size: rem(18); font-size: rem(18);
line-height: (32/18); line-height: (32/18);

26
resources/views/partials/contact-form.blade.php
Unescape View File

@ -1,22 +1,22 @@
<section class="contact flex flex-column justify-center items-center w-100" id="contact"> <section class="contact" id="contact">
<h3 class="tc ttu">{{ $contact_form_title }}</h3> <h2>{{ $contact_form_title }}</h2>
<form action="{{ network_home_url('/#contact') }}" method="post"> <form class="form" action="{{ network_home_url('/#contact') }}" method="post">
@if($contact_form_response) @if($contact_form_response)
<p class="tl mb4 w-100 {{ $contact_form_response['status'] }}">{{ $contact_form_response['message'] }}</p> <p class="form__notice form__notice--{{ $contact_form_response['status'] }}">{{ $contact_form_response['message'] }}</p>
@endif @endif
<input type="hidden" name="submitted" value="1"> <input type="hidden" name="submitted" value="1">
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_name'){{ 'error' }}@endif"> <p class="form__row @if(@$contact_form_response['field'] === 'visitor_name'){{ 'form__row--error' }}@endif">
<label class="clip" for="visitor_name">{{ __('Your name*', 'aldine' ) }}</label> <label class="clip" for="visitor_name">{{ __('Your name*', 'aldine' ) }}</label>
<input class="input-reset" type="text" placeholder="{{ __('Your name*', 'aldine' ) }}" name="visitor_name" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_name']) }}@endif"></p> <input type="text" placeholder="{{ __('Your name*', 'aldine' ) }}" name="visitor_name" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_name']) }}@endif"></p>
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_email'){{ 'error' }}@endif"> <p class="form__row @if(@$contact_form_response['field'] === 'visitor_email'){{ 'form__row--error' }}@endif">
<label class="clip" for="visitor_email">{{ __('Your email*', 'aldine' ) }}</label> <label class="clip" for="visitor_email">{{ __('Your email*', 'aldine' ) }}</label>
<input class="input-reset" type="email" placeholder="{{ __('Your email*', 'aldine' ) }}" name="visitor_email" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_email']) }}@endif"></p> <input type="email" placeholder="{{ __('Your email*', 'aldine' ) }}" name="visitor_email" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_email']) }}@endif"></p>
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'visitor_institution'){{ 'error' }}@endif"> <p class="form__row @if(@$contact_form_response['field'] === 'visitor_institution'){{ 'form__row--error' }}@endif">
<label class="clip" for="visitor_institution">{{ __('Your institution*', 'aldine' ) }}</label> <label class="clip" for="visitor_institution">{{ __('Your institution*', 'aldine' ) }}</label>
<input class="input-reset" type="text" placeholder="{{ __('Your institution*', 'aldine' ) }}" name="visitor_institution" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_institution']) }}@endif"></p> <input type="text" placeholder="{{ __('Your institution*', 'aldine' ) }}" name="visitor_institution" value="@if($contact_form_response['status'] === 'error'){{ @esc_attr($_POST['visitor_institution']) }}@endif"></p>
<p class="flex flex-row items-center @if(@$contact_form_response['field'] === 'message'){{ 'error' }}@endif"> <p class="form__row @if(@$contact_form_response['field'] === 'message'){{ 'form__row--error' }}@endif">
<label class="clip" for="message">{{ __('Your message here', 'aldine' ) }}</label> <label class="clip" for="message">{{ __('Your message here', 'aldine' ) }}</label>
<textarea class="input-reset" type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="message">@if($contact_form_response['status'] === 'error'){{ @esc_textarea($_POST['message']) }}@endif</textarea></p> <textarea type="text" placeholder="{{ __('Your message here', 'aldine' ) }}" name="message">@if($contact_form_response['status'] === 'error'){{ @esc_textarea($_POST['message']) }}@endif</textarea></p>
<p class="tc"><input class="button-reset button button--small button--outline input-reset pointer" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p> <p class="form__row"><input class="button button--small button--outline" type="submit" value="{{ __('Send', 'aldine' ) }}" /></p>
</form> </form>
</section> </section>

Write Preview
Loading…
Cancel
Save