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; padding-bottom: 0.5rem;
} }
} }
.actions {
margin-top: 2rem;
}
} }
.grid { .grid {

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

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

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

@ -1,21 +1,16 @@
@layer components { @layer components {
.ks-text-link {
@apply text-blue-600;
&:hover { @apply underline; }
&:visited { @apply text-indigo-600; }
&:active { @apply text-red-600; }
}
.btn { .btn {
@apply font-semibold rounded-md leading-none cursor-pointer @apply font-semibold rounded-md leading-none cursor-pointer
transition-colors duration-75 focus:outline-none focus:ring-4; transition-colors duration-75 focus:outline-none focus:ring-4;
} }
.btn-md { .btn-md {
@apply btn;
@apply py-2.5 px-5 shadow-md; @apply py-2.5 px-5 shadow-md;
} }
.btn-sm { .btn-sm {
@apply btn;
@apply py-1 px-2 text-sm shadow-sm; @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: { variants: {
extend: {}, extend: {},
}, },
plugins: [], plugins: [
require('@tailwindcss/forms')
],
} }

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

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

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

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

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

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

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

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

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

@ -30,5 +30,7 @@
<%= @donation.paid_at %> <%= @donation.paid_at %>
</p> </p>
<p class="mt-8">
<%= link_to 'Edit', edit_admin_donation_path(@donation), class: 'ks-text-link' %> | <%= link_to 'Edit', edit_admin_donation_path(@donation), class: 'ks-text-link' %> |
<%= link_to 'Back', admin_donations_path, 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| %> <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %> <%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<p> <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) %> <%= f.email_field :email, required: true, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
</p> </p>
</div> <p class="mt-8">
<%= f.submit "Resend confirmation instructions", class: 'btn-md btn-blue' %>
<div class="actions">
<p>
<%= f.submit "Resend confirmation instructions" %>
</p> </p>
</div>
<% end %> <% end %>
<%= render "devise/shared/links" %> <%= 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 %> <%= render "devise/shared/error_messages", resource: resource %>
<%= f.hidden_field :reset_password_token %> <%= f.hidden_field :reset_password_token %>
<div class="field"> <p class="mb-1">
<%= f.label :password, "New password" %><br /> <%= f.label :password, "New password" %>
<% if @minimum_password_length %> </p>
<em>(<%= @minimum_password_length %> characters minimum)</em><br /> <p>
<% end %>
<%= f.password_field :password, autofocus: true, autocomplete: "new-password" %> <%= f.password_field :password, autofocus: true, autocomplete: "new-password" %>
</div> <% if @minimum_password_length %>
<br><em class="text-sm text-gray-500">(<%= @minimum_password_length %> characters minimum)</em>
<div class="field"> <% end %>
<%= f.label :password_confirmation, "Confirm new password" %><br /> </p>
<p class="mb-1">
<%= f.label :password_confirmation, "Confirm new password" %>
</p>
<p>
<%= f.password_field :password_confirmation, autocomplete: "new-password" %> <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
</div> </p>
<p class="mt-8">
<div class="actions"> <%= f.submit "Change my password", class: 'btn-md btn-blue' %>
<%= f.submit "Change my password" %> </p>
</div>
<% end %> <% end %>
<%= render "devise/shared/links" %> <%= 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| %> <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %> <%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<p> <p>
<%= f.label :cn, 'User' %><br /> <%= f.label :cn, 'User', class: 'block' %>
<%= f.text_field :cn, autofocus: true, autocomplete: "username", required: true %> @ kosmos.org <%= f.text_field :cn, autofocus: true, autocomplete: "username", required: true %> @ kosmos.org
</p> </p>
</div>
<div class="field">
<p> <p>
<%= f.label :email, 'Email address' %><br /> <%= f.label :email, 'Email address', class: 'block' %>
<%= f.email_field :email, autocomplete: "email", required: true %> <%= f.email_field :email, autocomplete: "email", required: true %>
</p> </p>
</div> <p class="mt-8">
<%= f.submit "Send me reset password instructions", class: 'btn-md btn-blue' %>
<div class="actions">
<p>
<%= f.submit "Send me reset password instructions" %>
</p> </p>
</div>
<% end %> <% end %>
<%= render "devise/shared/links" %> <%= 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" %> <%= f.password_field :current_password, autocomplete: "current-password" %>
</div> </div>
<div class="actions"> <p class="mt-8">
<%= f.submit "Update" %> <%= f.submit "Update", class: 'btn-md btn-blue' %>
</div> </p>
<% end %> <% end %>
<h3>Cancel my account</h3> <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| %> <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %> <%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<p> <p>
<%= f.label :cn, 'User' %><br /> <%= f.label :cn, 'User', class: 'block' %>
<%= f.text_field :cn, autofocus: true, autocomplete: "username" %> @ kosmos.org <%= f.text_field :cn, autofocus: true, autocomplete: "username" %> @ kosmos.org
</p> </p>
</div>
<div class="field">
<p> <p>
<%= f.label :password %><br /> <%= f.label :password, class: 'block' %>
<%= f.password_field :password, autocomplete: "current-password" %> <%= f.password_field :password, autocomplete: "current-password" %>
</p> </p>
</div> <p class="mt-8">
<div class="actions"> <%= f.submit "Log in", class: 'btn-md btn-blue' %>
<p>
<%= f.submit "Log in" %>
</p> </p>
</div>
<% end %> <% end %>
<%= render "devise/shared/links" %> <%= 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' %> <%- if controller_name != 'sessions' %>
<p> <p class="mb-1.5">
<%= link_to "Log in", new_session_path(resource_name) %><br /> <%= link_to "Log in", new_session_path(resource_name) %><br />
</p> </p>
<% end %> <% end %>
<%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %> <%- 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 /> <%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
</p> </p>
<% end %> <% end %>
<%- if devise_mapping.confirmable? && controller_name != 'confirmations' %> <%- 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 /> <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %><br />
</p> </p>
<% end %> <% end %>
<%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %> <%- 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 /> <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %><br />
</p> </p>
<% end %> <% 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| %> <%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %> <%= render "devise/shared/error_messages", resource: resource %>
<p>
<div class="field">
<%= f.label :email %><br /> <%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %> <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div> </p>
<p class="mt-8">
<div class="actions"> <%= f.submit "Resend unlock instructions", class: 'btn-md btn-blue' %>
<%= f.submit "Resend unlock instructions" %> </p>
</div>
<% end %> <% end %>
<%= render "devise/shared/links" %> <%= render "devise/shared/links" %>

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

@ -6,7 +6,7 @@
<h3>Password change</h3> <h3>Password change</h3>
<p> <p>
<%= form_with(url: settings_reset_password_path, method: :post) do %> <%= 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 %> <% end %>
</p> </p>
</section> </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 This invitation can only be used once, and sign-up is currently only possible
by invitation. Seems like you have good friends! by invitation. Seems like you have good friends!
</p> </p>
<p> <p class="mt-12">
<%= link_to "Get started", signup_steps_path(1), class: "next-step" %> <%= link_to "Get started", signup_steps_path(1), class: "btn btn-md btn-blue" %>
</p> </p>

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

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

1
package.json
View File

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

12
yarn.lock
View File

@ -907,6 +907,13 @@
webpack-cli "^3.3.10" webpack-cli "^3.3.10"
webpack-sources "^1.4.3" 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": "@types/glob@^7.1.1":
version "7.1.3" version "7.1.3"
resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183" 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" schema-utils "^1.0.0"
webpack-sources "^1.1.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: minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"