From 5607077032bfdc0afc8c4971c40167120d82f106 Mon Sep 17 00:00:00 2001
From: Felix Eckhofer <felix@eckhofer.com>
Date: Sun, 22 Dec 2024 01:19:23 +0100
Subject: [PATCH] Clean up style
This unifies the look of `<h1>`, applies similar spacing across pages
and removes weird styling from templates originating with devise.
Also removes h1 from "logo", because all of our headers start at h1 and
it really isn't a header semantically.
---
app/views/assignments/index.html.erb | 3 ++-
app/views/devise/registrations/edit.html.erb | 18 ++++++++++--------
app/views/devise/registrations/new.html.erb | 12 ++++++------
app/views/devise/sessions/new.html.erb | 8 ++++----
app/views/devise/shared/_links.html.erb | 2 ++
app/views/layouts/application.html.erb | 2 +-
6 files changed, 25 insertions(+), 20 deletions(-)
diff --git a/app/views/assignments/index.html.erb b/app/views/assignments/index.html.erb
index e546f61..c24fe44 100644
--- a/app/views/assignments/index.html.erb
+++ b/app/views/assignments/index.html.erb
@@ -1,7 +1,8 @@
<% now = Time.now %>
<div>
+ <h1 class="text-xl my-4">Assignments for all users</h1>
<% @assignments.group_by(&:user).each do |user, assignments| %>
- <div class="my-8">
+ <div class="my-4">
<h4 class="text-xl my-2"><%= link_to user.name, user_assignments_path(user) %> <span class="font-normal"><%= link_to user_assignments_path(user, format: 'ics') do %><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="ml-2 mb-1 size-4 inline-block stroke-slate-400 fill-slate-400"><path fill-rule="evenodd" d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z" clip-rule="evenodd"></path></svg><% end %></span></h4>
<% assignments.group_by { |a| a.session.starts_at.strftime('%Y-%m-%d') }.each do |date, assignments_on_date| %>
<h5 class="text-base mt-2 <%= Time.parse(date).end_of_day < now ? "past" : "future" %>"><%= date %></h5>
diff --git a/app/views/devise/registrations/edit.html.erb b/app/views/devise/registrations/edit.html.erb
index 496839e..17dc3c4 100644
--- a/app/views/devise/registrations/edit.html.erb
+++ b/app/views/devise/registrations/edit.html.erb
@@ -1,16 +1,17 @@
<div>
-<h1 class="font-bold text-4xl">Profile</h1>
+
+<h1 class="text-xl my-4">Profile</h1>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
- <%= f.label :name %><br />
+ <%= f.label :name %>
<%= f.text_field :name, autofocus: true, autocomplete: "username" %>
</div>
<div class="field hidden">
- <%= f.label :email %><br />
+ <%= f.label :email %>
<%= f.email_field :email, autocomplete: "email" %>
</div>
@@ -19,16 +20,16 @@
<% end %>
<div class="field">
- <%= f.label :password %> <i>(leave blank if you don't want to change it)</i><br />
+ <%= f.label :password %>
+ <i class="block">(leave blank if you don't want to change it)</i>
<%= 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.label :password_confirmation %>
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
</div>
@@ -43,7 +44,8 @@
</div>
<div class="field">
- <%= f.label :current_password %> <i>(we need your current password to confirm your changes)</i><br />
+ <%= f.label :current_password %>
+ <i class="block">(we need your current password to confirm your changes)</i>
<%= f.password_field :current_password, autocomplete: "current-password" %>
</div>
@@ -56,5 +58,5 @@
<div class="hidden">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 %>
+<%= link_to "Back", :back, class:"block mt-4" %>
</div>
diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
index d751c2b..5d98cd4 100644
--- a/app/views/devise/registrations/new.html.erb
+++ b/app/views/devise/registrations/new.html.erb
@@ -1,29 +1,29 @@
<div>
-<h1 class="font-bold text-4xl">Sign Up</h1>
+<h1 class="text-xl my-4">Sign Up</h1>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
- <%= f.label :name %><br />
+ <%= f.label :name %>
<%= f.text_field :name, autofocus: true, autocomplete: "username" %>
</div>
<div class="field">
<%= f.label :password %>
<% if @minimum_password_length %>
- <em>(<%= @minimum_password_length %> characters minimum)</em>
- <% end %><br />
+ <em class="block">(<%= @minimum_password_length %> characters minimum)</em>
+ <% end %>
<%= f.password_field :password, autocomplete: "new-password" %>
</div>
<div class="field">
- <%= f.label :password_confirmation %><br />
+ <%= f.label :password_confirmation %>
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
</div>
<div class="field">
- <%= f.label :invitation_token, "Invitation Token" %><br />
+ <%= f.label :invitation_token, "Invitation Token" %>
<%= f.text_field :invitation_token, autocomplete: "off" %>
</div>
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index 60578f7..a216b2d 100644
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -1,21 +1,21 @@
<div>
-<h1 class="font-bold text-4xl">Log in</h1>
+<h1 class="text-xl my-4">Log in</h1>
<%= form_for(resource, as: resource_name, url: user_session_path) do |f| %>
<div class="field">
- <%= f.label :name %><br />
+ <%= f.label :name %>
<%= f.text_field :name, autofocus: true, autocomplete: "username" %>
</div>
<div class="field">
- <%= f.label :password %><br />
+ <%= f.label :password %>
<%= f.password_field :password, autocomplete: "current-password" %>
</div>
<% if devise_mapping.rememberable? %>
<div class="field">
<%= f.check_box :remember_me %>
- <%= f.label :remember_me %>
+ <%= f.label :remember_me, class: "!inline-block align-middle" %>
</div>
<% end %>
diff --git a/app/views/devise/shared/_links.html.erb b/app/views/devise/shared/_links.html.erb
index 3fad320..54410c5 100644
--- a/app/views/devise/shared/_links.html.erb
+++ b/app/views/devise/shared/_links.html.erb
@@ -1,3 +1,4 @@
+<div class="pt-4">
<%- if controller_name != 'sessions' %>
<%= link_to "Log in", new_user_session_path %><br />
<% end %>
@@ -23,3 +24,4 @@
<%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false } %><br />
<% end %>
<% end %>
+</div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index b7f7313..5ce0e95 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -15,7 +15,7 @@
<nav class="bg-slate-100 text-gray-700 shadow relative" data-controller="navigation">
<div class="relative bg-slate-100 z-50 container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
- <h1 class="text-xl font-bold text-black"><%= link_to 're:scheduled', '/', class: "!no-underline" %></h1>
+ <div class="text-xl font-bold text-black"><%= link_to 're:scheduled', '/', class: "!no-underline" %></div>
<div class="hidden md:flex space-x-4">
<%= link_to 'Conferences', conferences_path, class: 'hover:text-gray-900' %>
<%= link_to 'Assignments', assignments_path, class: 'hover:text-gray-900' %>
--
GitLab