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:
@@ -16,7 +16,7 @@
|
||||
<% end %>
|
||||
|
||||
<% content_for(:content) do %>
|
||||
<menu id="post-sections">
|
||||
<menu id="post-sections" class="mb-4">
|
||||
<li class="active"><a href="#" id="show-posts-link">Posts</a></li>
|
||||
|
||||
<% if @post_set.artist.present? %>
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
|
||||
<section id="search-box">
|
||||
<h2>Search</h2>
|
||||
<%= form_tag(path, method: "get", id: "search-box-form") do %>
|
||||
<%= form_tag(path, method: "get", id: "search-box-form", class: "flex") do %>
|
||||
<% if params[:random] %>
|
||||
<%= hidden_field_tag :random, params[:random] %>
|
||||
<% end %>
|
||||
<%= text_field_tag("tags", tags, :id => tags_dom_id, :"data-shortcut" => "q", :"data-autocomplete" => "tag-query") %>
|
||||
<%= text_field_tag("tags", tags, :id => tags_dom_id, :class => "flex-auto", :"data-shortcut" => "q", :"data-autocomplete" => "tag-query") %>
|
||||
<button id="search-box-submit" type="submit"><%= search_icon %></button>
|
||||
<% end %>
|
||||
</section>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<%= render "artists/summary", artist: artist %>
|
||||
<%= render "tag_relationships/alias_and_implication_list", tag: artist.tag %>
|
||||
|
||||
<p class="links">
|
||||
<p class="mt-4">
|
||||
<% if artist.wiki_page.present? %>
|
||||
<%= link_to "View wiki", artist.wiki_page, id: "view-wiki-link" %> |
|
||||
<% end %>
|
||||
@@ -33,7 +33,7 @@
|
||||
<%= format_text(wiki_page.body) %>
|
||||
<%= render "tag_relationships/alias_and_implication_list", tag: wiki_page.tag %>
|
||||
|
||||
<p class="links">
|
||||
<p class="mt-4">
|
||||
<%= link_to_wiki "View wiki", wiki_page.title, id: "view-wiki-link" %>
|
||||
</p>
|
||||
</div>
|
||||
@@ -52,7 +52,7 @@
|
||||
<%= format_text(post_set.pool.description) %>
|
||||
</div>
|
||||
|
||||
<p class="links">
|
||||
<p class="mt-4">
|
||||
<%= link_to "View pool", pool_path(post_set.pool.id) %>
|
||||
</p>
|
||||
<% end %>
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<% if policy(post).can_view_favlist? %>
|
||||
<%= link_to "Show »", "#", id: "show-favlist-link", style: ("display: none;" if post.fav_count == 0) %>
|
||||
<%= link_to "« Hide", "#", id: "hide-favlist-link", style: "display: none;" %>
|
||||
<div id="favlist" style="display: none;">
|
||||
<div id="favlist" style="display: none;" class="ml-4">
|
||||
<%= render "posts/partials/show/favorite_list", post: post %>
|
||||
</div>
|
||||
<% end %></li>
|
||||
|
||||
@@ -10,16 +10,14 @@
|
||||
) %>
|
||||
|
||||
<div id="ugoira-controls">
|
||||
<div id="ugoira-control-panel" style="width: <%= [@post.image_width, 350].max %>px;">
|
||||
<div id="ugoira-control-panel" class="mb-2 flex items-center" style="width: <%= [@post.image_width, 350].max %>px;">
|
||||
<%= button_tag "Play", :id => "ugoira-play", :style => "display: none;" %>
|
||||
<%= button_tag "Pause", :id => "ugoira-pause" %>
|
||||
<div id="seek-slider" style="width: <%= [@post.image_width, 350].max - 81 %>px;"></div>
|
||||
<div id="seek-slider" class="ml-4" style="width: <%= [@post.image_width, 350].max - 81 %>px;"></div>
|
||||
</div>
|
||||
<p id="save-video-link">
|
||||
<% if post.has_ugoira_webm? %>
|
||||
<%= link_to "Save as video (right click and save)", post.tagged_large_file_url %>
|
||||
<% else %>
|
||||
WebM conversion pending
|
||||
<% end %>
|
||||
</p>
|
||||
<% if post.has_ugoira_webm? %>
|
||||
<%= link_to "Save as video (right click and save)", post.tagged_large_file_url %>
|
||||
<% else %>
|
||||
WebM conversion pending
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
<% end -%>
|
||||
|
||||
<% if policy(Favorite).create? %>
|
||||
<%= content_tag(:div, class: "fav-buttons fav-buttons-#{@post.favorited_by?(CurrentUser.user)}") do %>
|
||||
<%= content_tag(:div, class: "mb-2 fav-buttons fav-buttons-#{@post.favorited_by?(CurrentUser.user)}") do %>
|
||||
<%= form_tag(favorites_path(post_id: @post.id), method: "post", id: "add-fav-button", "data-remote": true) do %>
|
||||
<%= button_tag empty_heart_icon, class: "ui-button ui-widget ui-corner-all", "data-disable-with": spinner_icon %>
|
||||
<% end %>
|
||||
@@ -86,7 +86,7 @@
|
||||
<%= render_post_navbar(@post, current_user: CurrentUser.user, search: params[:q]) %>
|
||||
<% end %>
|
||||
|
||||
<menu id="post-sections">
|
||||
<menu id="post-sections" class="mb-4">
|
||||
<li class="active"><a href="#comments">Comments</a></li>
|
||||
|
||||
<% if RecommenderService.available_for_post?(@post) %>
|
||||
|
||||
Reference in New Issue
Block a user