Style read-only inputs, add nav menu tab-button

This commit is contained in:
cryptogopher 2023-05-01 19:16:51 +02:00
parent 50a63e0d81
commit 482a99031f
3 changed files with 25 additions and 55 deletions

View File

@ -51,7 +51,8 @@ input[type=checkbox] {
width: 1.1rem; width: 1.1rem;
-webkit-appearance: none; -webkit-appearance: none;
} }
input:focus-visible, input:hover { input:focus-visible,
input:hover {
accent-color: #006c9b; accent-color: #006c9b;
background-color: #f3f3f3; background-color: #f3f3f3;
} }
@ -59,6 +60,15 @@ input[type=checkbox]:checked {
appearance: checkbox; appearance: checkbox;
-webkit-appearance: checkbox; -webkit-appearance: checkbox;
} }
input[type=text]:read-only {
border: none;
padding-left: 0;
padding-right: 0;
}
input:read-only:focus-visible,
input:read-only:hover {
background: white;
}
.app-menu { .app-menu {
height: 2.2rem; height: 2.2rem;
@ -74,16 +84,18 @@ input[type=checkbox]:checked {
margin: 0.4rem 0; margin: 0.4rem 0;
} }
.nav-menu .image-button { .nav-menu .image-button {
border: none;
border-radius: 0;
font-size: 0.9rem; font-size: 0.9rem;
margin: 0 0.8rem;
padding: 0.6rem 1rem; padding: 0.6rem 1rem;
} }
.nav-menu .right .image-button { .nav-menu .right .image-button {
float: right; float: right;
} }
.nav-menu .image-button.active { .nav-menu .tab-button {
border: none;
border-radius: 0;
margin: 0 0.8rem;
}
.nav-menu .tab-button.active {
border-bottom: solid 0.2rem; border-bottom: solid 0.2rem;
color: #009ade; color: #009ade;
fill: #009ade; fill: #009ade;
@ -181,6 +193,7 @@ form table {
border-spacing: 0.8rem; border-spacing: 0.8rem;
} }
form tr td:first-child { form tr td:first-child {
color: #a0a0a0;
font-size: 0.9rem; font-size: 0.9rem;
padding-right: 0.25rem; padding-right: 0.25rem;
text-align: right; text-align: right;

View File

@ -1,10 +0,0 @@
<h1>Editing user</h1>
<%= render "form", user: @user %>
<br>
<div>
<%= link_to "Show this user", @user %> |
<%= link_to "Back to users", users_path %>
</div>

View File

@ -1,43 +1,10 @@
<h2>Edit <%= resource_name.to_s.humanize %></h2> <h1>Editing user</h1>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %> <%= render "form", user: @user %>
<%= render "users/shared/error_messages", resource: resource %>
<div class="field"> <br>
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
</div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %> <div>
<div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div> <%= link_to "Show this user", @user %> |
<% end %> <%= link_to "Back to users", users_path %>
</div>
<div class="field">
<%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
<%= f.password_field :password, autocomplete: "new-password" %>
<% if @minimum_password_length %>
<br />
<em><%= @minimum_password_length %> characters minimum</em>
<% end %>
</div>
<div class="field">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
</div>
<div class="field">
<%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
<%= f.password_field :current_password, autocomplete: "current-password" %>
</div>
<div class="actions">
<%= f.submit "Update" %>
</div>
<% end %>
<h3>Cancel my account</h3>
<div>Unhappy? <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?", turbo_confirm: "Are you sure?" }, method: :delete %></div>
<%= link_to "Back", :back %>