css: refactor CSS to use Tailwind-style utility classes.

Refactor CSS to use standard Tailwind-style utility classes instead of
ad-hoc rules. This eliminates a lot of single-purpose rules for specific
UI elements and standardizes margins to be more consistent throughout
the site.

Utility classes are defined manually on an as-needed basis instead of
importing Tailwind as a whole. Naming conventions mostly follow
Tailwind's conventions, otherwise they follow Bootstrap.

* https://tailwindcss.com/docs/
* https://getbootstrap.com/docs/5.0/utilities/spacing/
This commit is contained in:
evazion
2021-02-15 18:28:53 -06:00
parent 7b0fee6333
commit 1e80540a04
49 changed files with 245 additions and 450 deletions

View File

@@ -12,35 +12,31 @@
<% end %>
<% if listing_type(:post_id) == :standard %>
<% t.column "Version", width: "3%" do |commentary_version| %>
<%= link_to "#{commentary_version.post_id}.#{commentary_version.id}»", artist_commentary_versions_path(search: {post_id: commentary_version.post_id}, anchor: "artist-commentary-version-#{commentary_version.id}") %>
<%= link_to "#{commentary_version.post_id}.#{commentary_version.id}&nbsp;»".html_safe, artist_commentary_versions_path(search: {post_id: commentary_version.post_id}, anchor: "artist-commentary-version-#{commentary_version.id}") %>
<% end %>
<% end %>
<% t.column "Original", width: "40%", td: {class: "diff-body"} do |commentary_version| %>
<% t.column "Original", width: "40%", td: { class: "diff-body align-top mt-2" } do |commentary_version| %>
<% if !commentary_version.unchanged_empty?(:original_title) %>
<b>Title:</b>
<div class="commentary-body-section">
<p class="commentary-body-section font-bold">
<%= commentary_version_field_diff(commentary_version, params[:type], :original_title) %>
</div>
</p>
<% end %>
<% if !commentary_version.unchanged_empty?(:original_description) %>
<b>Description:</b>
<div class="commentary-body-section">
<p class="commentary-body-section">
<%= commentary_version_field_diff(commentary_version, params[:type], :original_description) %>
</div>
</p>
<% end %>
<% end %>
<% t.column "Translated", width: "40%", td: {class: "diff-body"} do |commentary_version| %>
<% t.column "Translated", width: "40%", td: { class: "diff-body align-top mt-4" } do |commentary_version| %>
<% if !commentary_version.unchanged_empty?(:translated_title) %>
<b>Title:</b>
<div class="commentary-body-section">
<p class="commentary-body-section font-bold">
<%= commentary_version_field_diff(commentary_version, params[:type], :translated_title) %>
</div>
</p>
<% end %>
<% if !commentary_version.unchanged_empty?(:translated_description) %>
<b>Description:</b>
<div class="commentary-body-section">
<p class="commentary-body-section">
<%= commentary_version_field_diff(commentary_version, params[:type], :translated_description) %>
</div>
</p>
<% end %>
<% end %>
<% t.column "Changes", width: "3%" do |commentary_version| %>