kosmos/akkounts
kosmos/akkounts
8
1
Fork 0
Code Issues 19 Pull Requests 1 Actions Packages Releases 12 Activity

Style forms, migrate more styles to Tailwind
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/pr Build is passing
Details

Browse Source
This commit is contained in:
Basti 2021-02-09 20:32:10 +01:00
parent 814633034f
commit b6949acc96
Signed by untrusted user: basti
GPG Key ID: 9F88009D31D99C72
24 changed files with 160 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/assets/stylesheets/forms.scss
View File

@ -1,31 +0,0 @@
form {
.field_with_errors {
display: inline-block;
}
}
.layout-signup {
label {
display: none;
}
input[type=text], input[type=email], input[type=password] {
font-size: 1.25rem;
padding: 0.5rem 1rem;
}
span.at-sign, span.domain {
font-size: 1.25rem;
}
.error-msg {
color: #bc0101;
}
.accept-terms {
margin-top: 2rem;
font-size: 0.85rem;
line-height: 1.5em;
color: #888;
}
}

4
app/assets/stylesheets/layout.scss
View File

@ -142,10 +142,6 @@ main {
padding-bottom: 0.5rem;
}
}
.actions {
margin-top: 2rem;
}
}
.grid {

2
app/javascript/stylesheets/application.scss
View File

@ -4,3 +4,5 @@
@import "base";
@import "buttons";
@import "forms";
@import "links";

9
app/javascript/stylesheets/buttons.scss
View File

@ -1,21 +1,16 @@
@layer components {
.ks-text-link {
@apply text-blue-600;
&:hover { @apply underline; }
&:visited { @apply text-indigo-600; }
&:active { @apply text-red-600; }
}
.btn {
@apply font-semibold rounded-md leading-none cursor-pointer
transition-colors duration-75 focus:outline-none focus:ring-4;
}
.btn-md {
@apply btn;
@apply py-2.5 px-5 shadow-md;
}
.btn-sm {
@apply btn;
@apply py-1 px-2 text-sm shadow-sm;
}

17
app/javascript/stylesheets/forms.scss Normal file
View File

@ -0,0 +1,17 @@
@layer components {
form {
input[type=text], input[type=email], input[type=password],
input[type=number], select {
@apply mt-1 rounded-md bg-gray-100 focus:bg-white
border-transparent focus:border-gray-500 focus:ring-0;
}
.field_with_errors {
@apply inline-block;
}
.error-msg {
@apply text-red-700;
}
}
}

14
app/javascript/stylesheets/links.scss Normal file
View File

@ -0,0 +1,14 @@
@layer components {
.ks-text-link {
@apply text-blue-600;
&:hover { @apply underline; }
&:visited { @apply text-indigo-600; }
&:active { @apply text-red-600; }
}
.devise-links {
a {
@apply ks-text-link;
}
}
}

4
app/javascript/stylesheets/tailwind.config.js
View File

@ -17,5 +17,7 @@ module.exports = {
variants: {
extend: {},
},
plugins: [],
plugins: [
require('@tailwindcss/forms')
],
}

6
app/views/admin/donations/_form.html.erb
View File

@ -52,9 +52,7 @@
</p>
</div>
<div class="actions">
<p>
<%= form.submit class: 'btn btn-md btn-blue' %>
<p class="mt-8">
<%= form.submit class: 'btn-md btn-blue' %>
</p>
</div>
<% end %>

2
app/views/admin/donations/edit.html.erb
View File

@ -2,7 +2,7 @@
<%= render 'form', donation: @donation, url: admin_donation_path(@donation) %>
<p class="actions">
<p class="mt-8">
<%= link_to 'Show', admin_donation_path(@donation), class: 'ks-text-link' %> |
<%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %>
<p>

4
app/views/admin/donations/index.html.erb
View File

@ -36,6 +36,6 @@
</p>
<% end %>
<p class="actions">
<%= link_to 'Record an out-of-system donation', new_admin_donation_path, class: 'btn btn-md btn-gray' %>
<p class="mt-12">
<%= link_to 'Record an out-of-system donation', new_admin_donation_path, class: 'btn-md btn-gray' %>
</p>

4
app/views/admin/donations/new.html.erb
View File

@ -2,6 +2,6 @@
<%= render 'form', donation: @donation, url: admin_donations_path %>
<p class="actions">
<%= link_to 'Back', admin_donations_path %>
<p class="mt-8">
<%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %>
</p>

6
app/views/admin/donations/show.html.erb
View File

@ -30,5 +30,7 @@
<%= @donation.paid_at %>
</p>
<%= link_to 'Edit', edit_admin_donation_path(@donation), class: 'ks-text-link' %> |
<%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %>
<p class="mt-8">
<%= link_to 'Edit', edit_admin_donation_path(@donation), class: 'ks-text-link' %> |
<%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %>
</p>

12
app/views/devise/confirmations/new.html.erb
View File

@ -2,19 +2,13 @@
<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<p>
<%= f.label :email, 'Email address' %><br />
<%= f.label :email, 'Email address', class: 'block mb-1' %>
<%= f.email_field :email, required: true, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
</p>
</div>
<div class="actions">
<p>
<%= f.submit "Resend confirmation instructions" %>
<p class="mt-8">
<%= f.submit "Resend confirmation instructions", class: 'btn-md btn-blue' %>
</p>
</div>
<% end %>
<%= render "devise/shared/links" %>

30
app/views/devise/passwords/edit.html.erb
View File

@ -4,22 +4,24 @@
<%= render "devise/shared/error_messages", resource: resource %>
<%= f.hidden_field :reset_password_token %>
<div class="field">
<%= f.label :password, "New password" %><br />
<% if @minimum_password_length %>
<em>(<%= @minimum_password_length %> characters minimum)</em><br />
<% end %>
<p class="mb-1">
<%= f.label :password, "New password" %>
</p>
<p>
<%= f.password_field :password, autofocus: true, autocomplete: "new-password" %>
</div>
<div class="field">
<%= f.label :password_confirmation, "Confirm new password" %><br />
<% if @minimum_password_length %>
<br><em class="text-sm text-gray-500">(<%= @minimum_password_length %> characters minimum)</em>
<% end %>
</p>
<p class="mb-1">
<%= f.label :password_confirmation, "Confirm new password" %>
</p>
<p>
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
</div>
<div class="actions">
<%= f.submit "Change my password" %>
</div>
</p>
<p class="mt-8">
<%= f.submit "Change my password", class: 'btn-md btn-blue' %>
</p>
<% end %>
<%= render "devise/shared/links" %>

17
app/views/devise/passwords/new.html.erb
View File

@ -2,26 +2,17 @@
<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<p>
<%= f.label :cn, 'User' %><br />
<%= f.label :cn, 'User', class: 'block' %>
<%= f.text_field :cn, autofocus: true, autocomplete: "username", required: true %> @ kosmos.org
</p>
</div>
<div class="field">
<p>
<%= f.label :email, 'Email address' %><br />
<%= f.label :email, 'Email address', class: 'block' %>
<%= f.email_field :email, autocomplete: "email", required: true %>
</p>
</div>
<div class="actions">
<p>
<%= f.submit "Send me reset password instructions" %>
<p class="mt-8">
<%= f.submit "Send me reset password instructions", class: 'btn-md btn-blue' %>
</p>
</div>
<% end %>
<%= render "devise/shared/links" %>

6
app/views/devise/registrations/edit.html.erb
View File

@ -31,9 +31,9 @@
<%= f.password_field :current_password, autocomplete: "current-password" %>
</div>
<div class="actions">
<%= f.submit "Update" %>
</div>
<p class="mt-8">
<%= f.submit "Update", class: 'btn-md btn-blue' %>
</p>
<% end %>
<h3>Cancel my account</h3>

15
app/views/devise/sessions/new.html.erb
View File

@ -2,24 +2,17 @@
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<p>
<%= f.label :cn, 'User' %><br />
<%= f.label :cn, 'User', class: 'block' %>
<%= f.text_field :cn, autofocus: true, autocomplete: "username" %> @ kosmos.org
</p>
</div>
<div class="field">
<p>
<%= f.label :password %><br />
<%= f.label :password, class: 'block' %>
<%= f.password_field :password, autocomplete: "current-password" %>
</p>
</div>
<div class="actions">
<p>
<%= f.submit "Log in" %>
<p class="mt-8">
<%= f.submit "Log in", class: 'btn-md btn-blue' %>
</p>
</div>
<% end %>
<%= render "devise/shared/links" %>

10
app/views/devise/shared/_links.html.erb
View File

@ -1,24 +1,24 @@
<div class="devise-links">
<div class="devise-links mt-8 text-sm">
<%- if controller_name != 'sessions' %>
<p>
<p class="mb-1.5">
<%= link_to "Log in", new_session_path(resource_name) %><br />
</p>
<% end %>
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
<p>
<p class="mb-1.5">
<%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
</p>
<% end %>
<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
<p>
<p class="mb-1.5">
<%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %><br />
</p>
<% end %>
<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
<p>
<p class="mb-1.5">
<%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %><br />
</p>
<% end %>

12
app/views/devise/unlocks/new.html.erb
View File

@ -2,15 +2,13 @@
<%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<p>
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<div class="actions">
<%= f.submit "Resend unlock instructions" %>
</div>
</p>
<p class="mt-8">
<%= f.submit "Resend unlock instructions", class: 'btn-md btn-blue' %>
</p>
<% end %>
<%= render "devise/shared/links" %>

2
app/views/security/index.html.erb
View File

@ -6,7 +6,7 @@
<h3>Password change</h3>
<p>
<%= form_with(url: settings_reset_password_path, method: :post) do %>
<%= submit_tag("Send me a password reset link", class: 'btn btn-md btn-gray') %>
<%= submit_tag("Send me a password reset link", class: 'btn-md btn-gray') %>
<% end %>
</p>
</section>

4
app/views/signup/index.html.erb
View File

@ -7,6 +7,6 @@
This invitation can only be used once, and sign-up is currently only possible
by invitation. Seems like you have good friends!
</p>
<p>
<%= link_to "Get started", signup_steps_path(1), class: "next-step" %>
<p class="mt-12">
<%= link_to "Get started", signup_steps_path(1), class: "btn btn-md btn-blue" %>
</p>

45
app/views/signup/steps.html.erb
View File

@ -2,60 +2,53 @@
<% when 1 %>
<h2>Choose a username</h2>
<%= form_for @user, :url => signup_validate_url do |f| %>
<div class="field">
<p>
<%= f.label :cn, 'Username' %><br />
<%= f.text_field :cn, autofocus: true, autocomplete: "username" %>
<span class="at-sign">@</span>
<span class="domain">kosmos.org</span>
<%= f.label :cn, 'Username', class: 'hidden' %>
<%= f.text_field :cn, autofocus: true, autocomplete: "username",
class: 'text-xl' %>
<span class="text-xl ml-1">@</span>
<span class="text-xl">kosmos.org</span>
</p>
<% if @validation_error.present? %>
<p class="error-msg">Username <%= @validation_error %></p>
<% end %>
</div>
<div class="actions">
<p><%= f.submit "Continue" %></p>
</div>
<p class="mt-12">
<%= f.submit "Continue", class: 'btn btn-md btn-blue' %>
</p>
<% end %>
<% when 2 %>
<h2>What's your email?</h2>
<%= form_for @user, :url => signup_validate_url do |f| %>
<div class="field">
<p>
<%= f.label :email, 'Email address' %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
<%= f.label :email, 'Email address', class: 'hidden' %>
<%= f.email_field :email, autofocus: true, autocomplete: 'email', class: 'text-xl' %>
</p>
<% if @validation_error.present? %>
<p class="error-msg">Email <%= @validation_error %></p>
<% end %>
</div>
<div class="actions">
<p><%= f.submit "Continue" %></p>
</div>
<p class="mt-12">
<%= f.submit "Continue", class: 'btn btn-md btn-blue' %>
</p>
<% end %>
<% when 3 %>
<h2>Choose a password</h2>
<%= form_for @user, :url => signup_validate_url do |f| %>
<div class="field">
<p>
<%= f.label :password, 'Password' %><br />
<%= f.password_field :password, autofocus: true %>
<%= f.label :password, 'Password', class: 'hidden' %>
<%= f.password_field :password, autofocus: true, class: 'text-xl' %>
</p>
<% if @validation_error.present? %>
<p class="error-msg">Password <%= @validation_error %></p>
<% end %>
</div>
<p class="accept-terms">
<small>
<p class="mt-8 text-sm text-gray-500">
By clicking the button below, you accept our future Terms of Service
and Privacy Policy. Don't worry, they will be excellent!
</small>
</p>
<div class="actions">
<p><%= f.submit "Create account" %></p>
</div>
<p class="mt-8">
<%= f.submit "Create account", class: 'btn-md btn-blue' %>
</p>
<% end %>
<% end %>

1
package.json
View File

@ -5,6 +5,7 @@
"@rails/actioncable": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "4.3.0",
"@tailwindcss/forms": "^0.2.1",
"autoprefixer": "^9",
"postcss": "^7",
"tailwindcss": "npm:@tailwindcss/postcss7-compat",

12
yarn.lock
View File

@ -907,6 +907,13 @@
webpack-cli "^3.3.10"
webpack-sources "^1.4.3"
"@tailwindcss/forms@^0.2.1":
version "0.2.1"
resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.2.1.tgz#3244b185854fae1a7cbe8d2456314d8b2d98cf43"
integrity sha512-czfvEdY+J2Ogfd6RUSr/ZSUmDxTujr34M++YLnp2cCPC3oJ4kFvFMaRXA6cEXKw7F1hJuapdjXRjsXIEXGgORg==
dependencies:
mini-svg-data-uri "^1.2.3"
"@types/glob@^7.1.1":
version "7.1.3"
resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
@ -4576,6 +4583,11 @@ mini-css-extract-plugin@^0.8.0:
schema-utils "^1.0.0"
webpack-sources "^1.1.0"
mini-svg-data-uri@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f"
integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==
minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"