update views and styles to use classes for common styles.

This commit is contained in:
snogrammer 2020-12-19 11:46:29 -07:00
parent 8c94c176c9
commit 8db72adbe5
13 changed files with 47 additions and 49 deletions

View File

@ -8,7 +8,7 @@
// $sidebar-width: 242px;
// Active Admin's got SASS!
@import "active_admin/mixins";
// @import "active_admin/mixins";
@import "arctic_admin/base";
// Overriding any non-variable SASS must be done after the fact.

View File

@ -15,7 +15,7 @@
$primary-gradient: linear-gradient(141deg, #009e6c 0%, #00d1b2 71%, #00e7eb 100%);
@import "bulma"; // https://bulma.io/documentation/
@import "./devise";
@import "./shared/all";
html {
background-image: radial-gradient(circle at 13% 47%, rgba(140, 140, 140,0.03) 0%, rgba(140, 140, 140,0.03) 25%,transparent 25%, transparent 100%),radial-gradient(circle at 28% 63%, rgba(143, 143, 143,0.03) 0%, rgba(143, 143, 143,0.03) 16%,transparent 16%, transparent 100%),radial-gradient(circle at 81% 56%, rgba(65, 65, 65,0.03) 0%, rgba(65, 65, 65,0.03) 12%,transparent 12%, transparent 100%),radial-gradient(circle at 26% 48%, rgba(60, 60, 60,0.03) 0%, rgba(60, 60, 60,0.03) 6%,transparent 6%, transparent 100%),radial-gradient(circle at 97% 17%, rgba(150, 150, 150,0.03) 0%, rgba(150, 150, 150,0.03) 56%,transparent 56%, transparent 100%),radial-gradient(circle at 50% 100%, rgba(25, 25, 25,0.03) 0%, rgba(25, 25, 25,0.03) 36%,transparent 36%, transparent 100%),radial-gradient(circle at 55% 52%, rgba(69, 69, 69,0.03) 0%, rgba(69, 69, 69,0.03) 6%,transparent 6%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));

View File

@ -1,15 +0,0 @@
#registrations, #passwords {
padding-top: $size-1;
}
#registrations-column {
background-color: $white;
padding: $size-6;
}
#registrations-column-form, #registrations-column-form-submit-button,
#registration-edit-account-deletion-container, #registrations-edit-passwords,
#registrations-edit-update-password, #passwords-column-form, #unlocks-column-form,
#confirmations-column-form {
padding: $size-3;
}

View File

@ -0,0 +1 @@
@import "./spacing";

View File

@ -0,0 +1,12 @@
.top-p__1 {
padding-top: $size-1;
}
.with-background-p__6 {
background-color: $white;
padding: $size-6;
}
.p__3 {
padding: $size-3;
}

View File

@ -1,6 +1,6 @@
<div class="container is-fluid" id="passwords">
<div class="container is-fluid top-p__1">
<div class="columns is-centered is-mobile">
<div id="registrations-column" class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop">
<div class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop with-background-p__6">
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
@ -11,7 +11,7 @@
</div>
</section>
<div id="confirmations-column-form">
<div class="p__3">
<%= simple_form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
<div class="field">
<%= f.label :email, class: "label" %>
@ -33,7 +33,7 @@
</div>
<div class="field">
<p class="control" id="registrations-column-form-submit-button">
<p class="control p__3">
<%= f.button :submit, "Resend confirmation", class: "button is-primary is-fullwidth is-rounded" %>
</p>
</div>

View File

@ -1,6 +1,6 @@
<div class="container is-fluid" id="passwords">
<div class="container is-fluid top-p__1">
<div class="columns is-centered is-mobile">
<div id="registrations-column" class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop">
<div class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop with-background-p__6">
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
@ -11,7 +11,7 @@
</div>
</section>
<div id="passwords-column-form">
<div class="p__3">
<%= simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
<%= f.input :reset_password_token, as: :hidden %>
<%= f.full_error :reset_password_token %>
@ -53,7 +53,7 @@
</div>
<div class="field">
<p class="control" id="registrations-column-form-submit-button">
<p class="control p__3">
<%= f.button :submit, "Update password", class: "button is-primary is-fullwidth is-rounded" %>
</p>
</div>

View File

@ -1,6 +1,6 @@
<div class="container is-fluid" id="passwords">
<div class="container is-fluid top-p__1">
<div class="columns is-centered is-mobile">
<div id="registrations-column" class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop">
<div class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop with-background-p__6">
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
@ -11,7 +11,7 @@
</div>
</section>
<div id="passwords-column-form">
<div class="p__3">
<%= simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
<div class="field">
<%= f.label :email, class: "label" %>
@ -32,7 +32,7 @@
</div>
<div class="field">
<p class="control" id="registrations-column-form-submit-button">
<p class="control p__3">
<%= f.button :submit, "Reset password", class: "button is-primary is-fullwidth is-rounded" %>
</p>
</div>

View File

@ -1,6 +1,6 @@
<div class="container is-fluid" id="registrations" data-controller="notification">
<div class="container is-fluid top-p__1" data-controller="notification">
<div class="columns is-centered">
<div id="registrations-column" class="column is-four-fifths is-two-thirds-tablet is-half-desktop">
<div class="p__3 column is-four-fifths is-two-thirds-tablet is-half-desktop">
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
@ -11,7 +11,7 @@
</div>
</section>
<div id="registrations-column-form">
<div class="p__3">
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div class="notification is-warning">
<button class="delete"></button>
@ -35,8 +35,8 @@
<%= f.full_error :email, class: "help is-danger" %>
</div>
<div id="registrations-edit-passwords">
<%= link_to "Change password", "#", id: "registration-edit-password-button", class: "button is-fullwidth is-rounded" %>
<div class="p__3">
<%= link_to "Change password", "#", id: "registration-edit-password-button", class: "p__3 button is-fullwidth is-rounded" %>
<div class="toggleable" id="registrations-edit-update-password">
<div class="notification">
@ -88,7 +88,7 @@
</div>
<div class="field">
<p class="control" id="registrations-column-form-submit-button">
<p class="control p__3">
<%= f.button :submit, "Update Account", class: "button is-primary is-fullwidth is-rounded" %>
</p>
</div>
@ -111,7 +111,7 @@
<div class="message-body">
<strong>Warning!</strong> Account deletion is permanant and can not be recovered.
<div class="is-centered" id="registration-edit-account-deletion-container">
<div class="is-centered p__3">
<%= link_to "Delete My Account", registration_path(resource_name),
data: { confirm: "Are you sure?" }, method: :delete,
class: "button is-danger is-two-thirds is-rounded" %>

View File

@ -1,6 +1,6 @@
<div class="container is-fluid" id="registrations">
<div class="container is-fluid top-p__1">
<div class="columns is-centered is-mobile">
<div id="registrations-column" class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop">
<div class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop with-background-p__6">
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
@ -11,7 +11,7 @@
</div>
</section>
<div id="registrations-column-form">
<div class="p__3">
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<div class="field">
<%= f.label :email, class: "label" %>
@ -58,7 +58,7 @@
</div>
<div class="field">
<p class="control" id="registrations-column-form-submit-button">
<p class="control p__3">
<%= f.button :submit, "Sign up", class: "button is-primary is-fullwidth is-rounded" %>
</p>
</div>

View File

@ -1,6 +1,6 @@
<div class="container is-fluid" id="registrations">
<div class="container is-fluid top-p__1">
<div class="columns is-centered">
<div id="registrations-column" class="column is-four-fifths is-two-thirds-tablet is-half-desktop">
<div class="column is-four-fifths is-two-thirds-tablet is-half-desktop with-background-p__6">
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
@ -11,7 +11,7 @@
</div>
</section>
<div id="registrations-column-form">
<div class="p__3">
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="field">
<%= f.label :email, class: "label" %>
@ -45,7 +45,7 @@
<%= f.label :remember_me, class: "checkbox" %>
<div class="field">
<p class="control" id="registrations-column-form-submit-button">
<p class="control p__3">
<%= f.button :submit, "Sign in", class: "button is-primary is-fullwidth is-rounded" %>
</p>
</div>

View File

@ -1,6 +1,6 @@
<div class="container is-fluid" id="passwords">
<div class="container is-fluid top-p__1">
<div class="columns is-centered is-mobile">
<div id="registrations-column" class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop">
<div class="column is-four-fifths-mobile is-two-thirds-tablet is-half-desktop with-background-p__6">
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
@ -11,7 +11,7 @@
</div>
</section>
<div id="unlocks-column-form">
<div class="p__3">
<%= simple_form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>
<div class="field">
<%= f.label :email, class: "label" %>
@ -32,7 +32,7 @@
</div>
<div class="field">
<p class="control" id="registrations-column-form-submit-button">
<p class="control p__3">
<%= f.button :submit, "Send unlock instructions", class: "button is-primary is-fullwidth is-rounded" %>
</p>
</div>

View File

@ -1,4 +1,4 @@
<div id="home-index">
<div class="home-index">
<section class="hero is-medium is-primary is-bold">
<div class="hero-body">
<div class="container">