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

@@ -1,4 +1,8 @@
.tag-list {
a.wiki-link {
margin-right: 0.25rem;
}
a.search-tag {
overflow-wrap: normal;
}
@@ -11,9 +15,7 @@
}
}
&.categorized-tag-list {
ul {
margin-bottom: 1em;
}
ul {
margin-bottom: 1em;
}
}

View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
div#page {
overflow: visible;
margin: 0 20px;

View File

@@ -13,17 +13,12 @@ table.striped {
}
}
.number, .links {
text-align: right;
}
thead {
tr {
border-bottom: var(--table-header-border);
}
th {
font-weight: bold;
text-align: left;
}
}
@@ -72,3 +67,11 @@ table.search, table.aligned-vertical {
table.aligned-vertical {
height: 1.75em;
}
table.table-sm {
th, td { padding: 0.25rem; }
}
table.table-md {
th, td { padding: 0.5rem; }
}

View File

@@ -0,0 +1,48 @@
// A small set of utility classes, modeled after TailwindCSS and Bootstrap.
//
// https://tailwindcss.com/docs
// https://getbootstrap.com/docs/5.0/utilities/spacing/
$spacer: 0.25rem; /* 4px */
.font-monospace { font-family: var(--monospace-font); }
.font-bold { font-weight: bold; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-2 { margin-left: 2 * $spacer; margin-right: 2 * $spacer; }
.mt-2 { margin-top: 2 * $spacer; }
.mt-4 { margin-top: 4 * $spacer; }
.mb-2 { margin-bottom: 2 * $spacer; }
.mb-4 { margin-bottom: 4 * $spacer; }
.ml-4 { margin-left: 4 * $spacer; }
.p-4 { padding: 4 * $spacer; }
.w-1\/4 { width: 25%; }
.w-full { width: 100%; }
.h-10 { height: 10 * $spacer; }
.space-x-4 > * + * { margin-left: 4 * $spacer; }
.space-y-4 > * + * { margin-top: 4 * $spacer; }
.align-top { vertical-align: top; }
.flex-auto { flex: 1 1 auto; }
.items-center { align-items: center; }
@media screen and (min-width: 660px) {
.md\:inline-block { display: inline-block; }
.md\:flex { display: flex; }
.md\:space-x-8 > * + * { margin-left: 8 * $spacer; }
.md\:space-y-0 > * + * { margin-top: 0; }
}

View File

@@ -1,15 +0,0 @@
div#c-artist-commentary-versions {
#a-index {
div.commentary-body-section {
padding: 0.5em;
margin-bottom: 0.5em;
border: var(--footer-border);
}
td.original-column,
td.translated-column {
padding-top: 0.5em;
vertical-align: top;
}
}
}

View File

@@ -1,11 +0,0 @@
div#c-artists, div#excerpt {
.recent-posts h2 {
margin: 1em 0 0.5em;
}
div#a-index {
td {
height: 2.25em; /* should match .artist-other-name line-height */
}
}
}

View File

@@ -1,6 +1,3 @@
ul.backtrace {
font: var(--monospace-font);
background: var(--dtext-code-background);
padding: 1em;
margin-bottom: 1em;
}

View File

@@ -1,5 +0,0 @@
#c-favorite-groups #a-edit {
textarea {
height: 10em;
}
}

View File

@@ -1,7 +0,0 @@
#c-ip-addresses {
.ip-address-details, .ip-address-map {
display: inline-block;
margin-right: 2em;
vertical-align: top;
}
}

View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
div#c-modqueue {
div.post {
padding: 1em;

View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
a.pool-category-series, .pool-category-series a {
color: var(--series-pool-color);
@@ -16,51 +14,18 @@ a.pool-category-collection, .pool-category-collection a {
}
}
div#add-to-pool-dialog {
font-size: 0.8em;
form {
margin-bottom: 1em;
}
li {
margin-left: 1em;
cursor: pointer;
}
}
div#c-pools {
textarea {
height: 10em;
}
div#a-show {
div#description {
margin-bottom: 1em;
}
}
}
div#c-pool-orders, div#c-favorite-group-orders {
div#a-edit {
ul.ui-sortable {
list-style-type: none;
ul.ui-sortable li {
display: inline-block;
min-width: 150px;
li {
cursor: pointer;
margin-right: 20px;
margin-bottom: 20px;
min-width: 150px;
min-height: 150px;
padding: 10px;
display: inline-block;
&, .post-preview a {
cursor: move;
}
li.ui-state-default {
background: none;
}
li.ui-state-placeholder {
&.ui-state-placeholder {
border: none;
background: none;
}
}

View File

@@ -7,10 +7,6 @@ body.c-post-versions.a-index {
min-width: 2em;
}
.advanced-search-link {
margin: 0 1em;
}
ins.diff-obsolete a {
color: var(--diff-list-obsolete-added-color);
font-weight: bold;

View File

@@ -22,14 +22,6 @@
}
}
#saved-searches-nav {
margin-top: 1em;
}
#excerpt p.links {
margin-top: 1em;
}
#edit-dialog {
/* Hide everything but the rating and tags fields. */
.post_has_embedded_notes_fieldset, .post_lock_fieldset, .post_parent_id,
@@ -68,11 +60,6 @@
div#c-posts {
.fav-buttons {
font-size: 14pt;
margin: 0.5em 0;
i {
margin-right: 0.1em;
}
button.ui-button {
padding: 0.25em 0.75em;
@@ -97,8 +84,6 @@ div#c-posts {
#ugoira-controls {
div#seek-slider {
margin-top: 0.5em;
float: right;
overflow: visible;
background: var(--ugoira-seek-slider-background);
@@ -107,24 +92,12 @@ div#c-posts {
}
}
#save-video-link {
margin: 0.5em 0;
}
button {
margin-top: 0.3em;
}
#ugoira-load-progress {
display: inline;
margin-left: 17px;
}
}
.outer-recent-searches {
overflow: hidden;
}
.post-notice {
margin: 0.5em 0;
padding: 0.5em;
@@ -144,40 +117,19 @@ div#c-posts {
&.post-notice-search { background: var(--post-search-notice-background); }
}
aside#sidebar > section > ul {
margin-bottom: 1em;
a.wiki-link {
margin-right: 0.3em;
}
}
aside#sidebar > section > ul ul li {
margin-left: 1em;
}
#search-box-form {
display: flex;
input {
min-width: 0;
flex: 1;
}
#search-box-submit {
padding: 2px 6px;
border-left: none;
border-radius: 0;
}
/* override default <button> tag styling */
#search-box-submit {
padding: 2px 6px;
border-left: none;
border-radius: 0;
}
div#a-index {
menu#post-sections {
margin-bottom: 0.5em;
font-size: var(--text-lg);
li {
padding: 0 1em 0.5em 0;
padding: 0 1em 0 0;
&.active {
font-weight: bold;
@@ -191,12 +143,7 @@ div#c-posts {
word-break: break-all;
}
.recommended-posts {
margin-top: 1em;
}
menu#post-sections {
margin: 0;
font-size: var(--text-lg);
li {
@@ -208,16 +155,11 @@ div#c-posts {
margin: 1em 0 0.5em;
}
textarea {
margin-bottom: 0.25em;
}
#edit textarea {
width: 100%;
}
#favlist {
margin-left: 1em;
word-wrap: break-word;
}
@@ -289,8 +231,6 @@ div#c-posts, div#c-uploads {
/* Fetch source data box */
div#source-info {
border-radius: 4px;
margin: 1em 0;
padding: 1em;
border: var(--fetch-source-data-border);
&:not(.loading) #source-info-loading { display: none; }
@@ -338,31 +278,6 @@ div#c-posts, div#c-uploads {
}
}
div#c-explore-posts {
a.desc {
font-weight: bold;
margin: 0 0.5em;
}
.date-nav-links {
text-align: center;
}
.period {
margin: 0 5em;
&:first-child {
margin-left: 0;
}
}
}
div#unapprove-dialog {
p {
margin-bottom: 1em;
}
}
#add-commentary-dialog {
input {
width: 70%;

View File

@@ -1,5 +0,0 @@
#c-static #a-privacy-policy {
.summary {
font-style: italic;
}
}

View File

@@ -7,26 +7,12 @@ div#related-tags-container {
}
div.related-tags {
width: 100%;
margin-bottom: 1em;
padding: 1em;
background: var(--related-tags-container-background);
overflow: auto;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
div.user-related-tags-columns, div.current-related-tags-columns, div.source-related-tags-columns {
display: flex;
}
div.tag-column {
max-width: 15em;
margin-right: 2em;
&.is-empty-true {
display: none;
}
&.wide-column {
max-width: 45em;

View File

@@ -1,15 +0,0 @@
@import "../base/000_vars.scss";
div#c-static {
div#a-site-map {
display: flex;
section {
flex: 1;
ul {
margin-bottom: 1.5em;
}
}
}
}

View File

@@ -1,26 +1,6 @@
div#c-user-upgrades {
div#a-new {
margin: 0 auto;
* {
margin-bottom: 1em;
}
h1 {
text-align: center;
}
table#feature-comparison {
width: 100%;
th {
font-weight: bold;
}
colgroup {
width: 10em;
}
colgroup#basic {
background-color: var(--user-upgrade-basic-background-color);
}
@@ -32,12 +12,6 @@ div#c-user-upgrades {
colgroup#platinum {
background-color: var(--user-upgrade-platinum-background-color);
}
td, th {
text-align: center;
vertical-align: top;
padding: 0.5em 0;
}
}
}
}

View File

@@ -5,24 +5,10 @@ div#c-users {
}
table.user-statistics {
tr {
height: 1.75em;
}
th {
width: 15%;
text-align: right;
padding-right: 1em;
vertical-align: top;
}
td {
width: 85%;
vertical-align: top;
}
p {
margin-bottom: 0.5em;
}
.user-verified-email-icon {
@@ -36,14 +22,6 @@ div#c-users {
}
div#a-edit {
h1 {
margin: 0.5em 0;
}
h2 {
margin: 0.5em 0;
}
div.input {
margin-bottom: 2em;
}

View File

@@ -10,10 +10,4 @@ div#c-wiki-page-versions {
text-decoration: none;
}
}
#a-index {
table {
margin-bottom: 1em;
}
}
}

View File

@@ -1,5 +1,3 @@
@import "../base/000_vars.scss";
@media screen and (max-width: 660px) {
div#page {
margin: 0 0.5rem;

View File

@@ -35,12 +35,13 @@ class TableBuilder
end
end
attr_reader :columns, :table_attributes, :items
attr_reader :columns, :table_attributes, :row_attributes, :items
def initialize(items, **table_attributes)
def initialize(items, tr: {}, **table_attributes)
@items = items
@columns = []
@table_attributes = { class: "striped", **table_attributes }
@row_attributes = tr
if items.respond_to?(:model_name)
@table_attributes[:id] ||= "#{items.model_name.plural.dasherize}-table"
@@ -58,6 +59,7 @@ class TableBuilder
{
id: "#{item.model_name.singular.dasherize}-#{item.id}",
**row_attributes,
**ApplicationController.helpers.data_attributes_for(item, "data", item.html_data_attributes)
}
end

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| %>

View File

@@ -4,7 +4,7 @@
<div id="a-index">
<%= render "search" %>
<%= table_for @artists, class: "striped autofit" do |t| %>
<%= table_for @artists, class: "striped autofit", tr: { class: "h-10" } do |t| %>
<% t.column "Name" do |artist| %>
<%= link_to artist.name, artist, class: "tag-type-#{Tag.categories.artist}" %>
<span class="post-count"><%= artist.tag.try(:post_count) || 0 %></span>

View File

@@ -1,7 +1,7 @@
<%# path, date, scale, %>
<p class="date-nav-links">
<div class="date-nav-links text-center md:space-x-8">
<%= render "explore/posts/nav_links_for_scale", path: path, date: date, selected_scale: scale, scale: "day" %>
<%= render "explore/posts/nav_links_for_scale", path: path, date: date, selected_scale: scale, scale: "week" %>
<%= render "explore/posts/nav_links_for_scale", path: path, date: date, selected_scale: scale, scale: "month" %>
</p>
</div>

View File

@@ -1,17 +1,17 @@
<%# path, date, selected_scale, scale %>
<span class="period">
<div class="text-center md:inline-block mb-2">
<% if selected_scale == scale %>
<%= link_to "« prev", send(path, date: prev_date_for_scale(date, scale), scale: scale), id: "paginator-prev", rel: "prev", "data-shortcut": "a left" %>
<% else %>
<%= link_to "« prev", send(path, date: prev_date_for_scale(date, scale), scale: scale) %>
<% end %>
<%= link_to scale.capitalize, send(path, date: date, scale: scale), class: "desc" %>
<%= link_to scale.capitalize, send(path, date: date, scale: scale), class: "font-bold mx-2" %>
<% if selected_scale == scale %>
<%= link_to "next »", send(path, date: next_date_for_scale(date, scale), scale: scale), id: "paginator-next", rel: "next", "data-shortcut": "d right" %>
<% else %>
<%= link_to "next »", send(path, date: next_date_for_scale(date, scale), scale: scale) %>
<% end %>
</span>
</div>

View File

@@ -7,9 +7,9 @@
<ul id="sortable">
<% @favorite_group.posts.limit(1_000).each do |post| %>
<li class="ui-state-default" id="favorite_group[post_ids]_<%= post.id %>">
<%= post_preview(post, show_deleted: true).presence || "Hidden: Post ##{post.id}" %>
</li>
<%= tag.li id: "favorite_group[post_ids]_#{post.id}" do -%>
<%= post_preview(post, show_deleted: true).presence || "Hidden: Post ##{post.id}" -%>
<% end -%>
<% end %>
</ul>

View File

@@ -1,75 +1,77 @@
<div class="ip-address-details">
<table class="aligned-vertical">
<tr>
<th>Location</th>
<td>
<% if ip_info.dig(:location, :city) %>
<%= ip_info.dig(:location, :city) %>,
<% end %>
<% if ip_info.dig(:location, :region, :name).present? %>
<%= ip_info.dig(:location, :region, :name) %>,
<% end %>
<%= ip_info.dig(:location, :country, :name) %>
</td>
</tr>
<tr>
<th>Network</th>
<td>
<%= link_to ip_info.dig(:connection, :route), ip_addresses_path(search: { ip_addr: ip_info.dig(:connection, :route) }) %>
(<%= link_to "info", "https://ipinfo.io/AS#{ip_info.dig(:connection, :asn)}/#{ip_info.dig(:connection, :route)}" %>)
</td>
</tr>
<tr>
<th>Proxy</th>
<td><%= ip_address.lookup.is_proxy? ? "yes" : "no" %></td>
</tr>
<tr>
<th>IP Banned</th>
<td>
<% if IpBan.ip_matches(ip_address.ip_addr.to_s).exists? %>
yes (<%= link_to "info", ip_bans_path(search: { ip_addr: ip_address.to_s }) %>)
<% else %>
no
<% end %>
</td>
</tr>
<tr>
<th>Type</th>
<td><%= ip_info.dig(:connection, :type) %></td>
</tr>
<tr>
<th>ASN</th>
<td>
<%= link_to "AS#{ip_info.dig(:connection, :asn)}", "https://ipinfo.io/AS#{ip_info.dig(:connection, :asn)}" %>
</td>
</tr>
<tr>
<th>Organization</th>
<td>
<%= ip_info.dig(:connection, :organization) %>
</td>
</tr>
<% if ip_info.dig(:carrier, :name).present? %>
<div class="space-x-4">
<div class="inline-block">
<table class="aligned-vertical">
<tr>
<th>Mobile Carrier</th>
<td><%= ip_info.dig(:carrier, :name) %></td>
<th>Location</th>
<td>
<% if ip_info.dig(:location, :city) %>
<%= ip_info.dig(:location, :city) %>,
<% end %>
<% if ip_info.dig(:location, :region, :name).present? %>
<%= ip_info.dig(:location, :region, :name) %>,
<% end %>
<%= ip_info.dig(:location, :country, :name) %>
</td>
</tr>
<% end %>
<tr>
<th>Website</th>
<td><%= external_link_to("http://#{ip_info.dig(:connection, :domain)}") %></td>
</tr>
<tr>
<th>Details</th>
<td>
<details>
<pre><%= JSON.pretty_generate(ip_info) %></pre>
</details>
</td>
</tr>
</table>
</div>
<tr>
<th>Network</th>
<td>
<%= link_to ip_info.dig(:connection, :route), ip_addresses_path(search: { ip_addr: ip_info.dig(:connection, :route) }) %>
(<%= link_to "info", "https://ipinfo.io/AS#{ip_info.dig(:connection, :asn)}/#{ip_info.dig(:connection, :route)}" %>)
</td>
</tr>
<tr>
<th>Proxy</th>
<td><%= ip_address.lookup.is_proxy? ? "yes" : "no" %></td>
</tr>
<tr>
<th>IP Banned</th>
<td>
<% if IpBan.ip_matches(ip_address.ip_addr.to_s).exists? %>
yes (<%= link_to "info", ip_bans_path(search: { ip_addr: ip_address.to_s }) %>)
<% else %>
no
<% end %>
</td>
</tr>
<tr>
<th>Type</th>
<td><%= ip_info.dig(:connection, :type) %></td>
</tr>
<tr>
<th>ASN</th>
<td>
<%= link_to "AS#{ip_info.dig(:connection, :asn)}", "https://ipinfo.io/AS#{ip_info.dig(:connection, :asn)}" %>
</td>
</tr>
<tr>
<th>Organization</th>
<td>
<%= ip_info.dig(:connection, :organization) %>
</td>
</tr>
<% if ip_info.dig(:carrier, :name).present? %>
<tr>
<th>Mobile Carrier</th>
<td><%= ip_info.dig(:carrier, :name) %></td>
</tr>
<% end %>
<tr>
<th>Website</th>
<td><%= external_link_to("http://#{ip_info.dig(:connection, :domain)}") %></td>
</tr>
<tr>
<th>Details</th>
<td>
<details>
<pre><%= JSON.pretty_generate(ip_info) %></pre>
</details>
</td>
</tr>
</table>
</div>
<div class="ip-address-map">
<%= embedded_map(ip_info.dig(:location, :latitude), ip_info.dig(:location, :longitude), 300, 200) %>
<div class="inline-block align-top">
<%= embedded_map(ip_info.dig(:location, :latitude), ip_info.dig(:location, :longitude), 300, 200) %>
</div>
</div>

View File

@@ -13,9 +13,9 @@
<ul id="sortable">
<% @pool.posts.each do |post| %>
<li class="ui-state-default" id="pool[post_ids]_<%= post.id %>">
<%= post_preview(post, show_deleted: true).presence || "Hidden: Post ##{post.id}" %>
</li>
<%= tag.li id: "pool[post_ids]_#{post.id}" do -%>
<%= post_preview(post, show_deleted: true).presence || "Hidden: Post ##{post.id}" -%>
<% end -%>
<% end %>
</ul>
<% else %>

View File

@@ -14,7 +14,7 @@
<% end %>
</h1>
<div id="description" class="prose">
<div id="description" class="prose mb-4">
<%= format_text(@pool.description) %>
</div>

View File

@@ -14,8 +14,11 @@
<%= f.input :added_tags_include_all, label: "Added Tags", input_html: { "data-autocomplete": "tag-query", value: params.dig(:search, :added_tags_include_all) } %>
<%= f.input :removed_tags_include_all, label: "Removed Tags", input_html: { "data-autocomplete": "tag-query", value: params.dig(:search, :removed_tags_include_all) } %>
<%= f.input :changed_tags, label: "Changed Tags", input_html: { "data-autocomplete": "tag-query", value: params.dig(:search, :changed_tags) }, hint: "Added or removed tags" %>
<%= f.submit "Search" %>
<%= link_to "Advanced", search_post_versions_path(params.except(:controller, :action, :index, :commit, :type).permit!), class: "advanced-search-link" %>
<div class="flex items-center space-x-4">
<%= f.submit "Search" %>
<%= link_to "Advanced", search_post_versions_path(params.except(:controller, :action, :index, :commit, :type).permit!) %>
</div>
<% end %>
<%= render "posts/partials/common/inline_blacklist" %>

View File

@@ -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? %>

View File

@@ -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>

View File

@@ -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 %>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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) %>

View File

@@ -5,7 +5,7 @@
<a href="#" id="hide-related-tags-link">«</a>
</h3>
<div class="related-tags">
<div class="related-tags w-full mb-4 p-4 flex space-x-4">
<%= render "related_tags/user_tags", related_tags: nil %>
<%= render "related_tags/current_tags", related_tags: nil %>
<%= render "related_tags/source_tags", source: nil %>

View File

@@ -1,4 +1,4 @@
<div class="current-related-tags-columns">
<div class="current-related-tags-columns flex space-x-4">
<% if related_tags.present? %>
<%= render "related_tags/tag_column", tags: related_tags.tags.map(&:name), class: "general-related-tags-column", title: related_tags.pretty_name %>
<%= render "related_tags/tag_column", tags: related_tags.wiki_page_tags, class: "wiki-related-tags-column", title: link_to_wiki("wiki:#{related_tags.pretty_name}", related_tags.query) %>

View File

@@ -1,6 +1,6 @@
<div class="source-related-tags-columns">
<div class="source-related-tags-columns flex space-x-4">
<% if source.present? %>
<%= render "related_tags/tag_column", tags: source.translated_tags.map(&:name), title: "Translated Tags" %>
<%= render "related_tags/tag_column", tags: source.translated_tags.map(&:name), class: "translated-tags-related-tags-column", title: "Translated Tags" %>
<div class="tag-column wide-column artist-related-tags-column">
<h3>Artist</h3>

View File

@@ -1,7 +1,7 @@
<%# tags, title, class (optional) %>
<%# tags, title, class %>
<%= content_tag(:div, class: ["tag-column", local_assigns[:class] || "#{title.parameterize}-related-tags-column", "is-empty-#{tags.empty?}"].join(" ")) do %>
<% if tags.present? %>
<% if tags.present? %>
<%= tag.div class: ["tag-column", local_assigns[:class]] do %>
<h3><%= title %></h3>
<%= render_simple_tag_list(tags) %>
<% end %>

View File

@@ -1,6 +1,6 @@
<div class="user-related-tags-columns">
<div class="user-related-tags-columns flex space-x-4">
<% if related_tags.present? %>
<%= render "related_tags/tag_column", tags: related_tags.recent_tags, title: "Recent" %>
<%= render "related_tags/tag_column", tags: related_tags.favorite_tags, title: "Frequent" %>
<%= render "related_tags/tag_column", tags: related_tags.recent_tags, class: "recent-related-tags-column", title: "Recent" %>
<%= render "related_tags/tag_column", tags: related_tags.favorite_tags, class: "frequent-related-tags-column", title: "Frequent" %>
<% end %>
</div>

View File

@@ -36,7 +36,7 @@
<% t.column "Created" do |ss| %>
<%= time_ago_in_words_tagged ss.created_at %>
<% end %>
<% t.column th: {class: "links"}, td: {class: "links"} do |ss| %>
<% t.column column: "control" do |ss| %>
<%= link_to "edit", edit_saved_search_path(ss) %>
| <%= link_to "delete", saved_search_path(ss), :method => :delete, :remote => true %>
<% end %>

View File

@@ -1,6 +1,6 @@
<%# source %>
<div id="source-info">
<div id="source-info" class="p-4 mb-4">
<%= link_to "Fetch source data", source_path, id: "fetch-data-manual" %>
<%= spinner_icon(id: "source-info-loading") %>

View File

@@ -1,6 +1,6 @@
<%# backtrace %>
<ul class="backtrace">
<ul class="backtrace font-monospace p-4 mb-4">
<% if defined?(exception) %>
<li><%= exception.class.to_s %> exception raised</li>
<% end %>

View File

@@ -8,7 +8,7 @@
<div id="a-privacy-policy" class="prose fixed-width-container">
<h1>Privacy Policy</h1>
<p class="summary">Last updated: July 5, 2020</p>
<p><em>Last updated: July 5, 2020</em></p>
<p>This privacy policy describes what information <%= @app_name %>
(collectively "we", "us", "our") collects about you when you use our website
@@ -25,7 +25,7 @@
<h6>Information You Provide To Us</h6>
<p class="summary">Summary: We collect information you directly give us.</p>
<p><em>Summary: We collect information you directly give us.</em></p>
<p>We collect information you directly provide to us when you use our
Services. What information we collect depends on how you use our Services.
@@ -76,9 +76,9 @@
<h6>Information We Collect Automatically</h6>
<p class="summary">Summary: We collect some information about you
<p><em>Summary: We collect some information about you
automatically, including your IP address, information about your computer,
and information about your site usage.</p>
and information about your site usage.</em></p>
<ul class="list-bulleted">
<li><strong>Log and usage data</strong>. We may log information about you
@@ -100,9 +100,9 @@
<h6>Information We Collect From Other Sources</h6>
<p class="summary">Summary: If you choose to link other sites to your
<p><em>Summary: If you choose to link other sites to your
<%= @app_name %> account, we will receive profile information about you
from those sites.</p>
from those sites.</em></p>
<p>We may receive information about you from other sources and combine that
information with other information we have about you. For example, we may
@@ -114,8 +114,8 @@
<h4>How We Use Your Information</h4>
<p class="summary">Summary: We use your information to provide services to
you, to operate the Site, and to enforce our Terms of Service.</p>
<p><em>Summary: We use your information to provide services to
you, to operate the Site, and to enforce our Terms of Service.</em></p>
<p>We use your information to:</p>
@@ -173,10 +173,10 @@
<h4>How Information About You Is Shared</h4>
<p class="summary">Summary: Most activity on <%= @app_name %> is public. We
<p><em>Summary: Most activity on <%= @app_name %> is public. We
won't share your information with advertisers without your consent. We
won't share information about you with third parties, except as required
under certain conditions.</p>
under certain conditions.</em></p>
<p>When you use the Site, certain information about you may be shared with
other users, with Site moderators or other authorized users, or with the
@@ -312,9 +312,9 @@
<h6>How We Handle Linked Accounts</h6>
<p class="summary">Summary: If you link other sites to your <%= @app_name %>
<p><em>Summary: If you link other sites to your <%= @app_name %>
account, we will receive profile information about you from those sites. We
won't disclose any information about you to those sites.</p>
won't disclose any information about you to those sites.</em></p>
<p>We may offer you the ability to sign up or login using third-party
social media accounts (such as your Google or Twitter accounts), or to link
@@ -352,8 +352,8 @@
<h6>Deleting Your Account</h6>
<p class="summary">Summary: You may deactivate your account, but we may
retain your IP address and your public contributions to the Site.</p>
<p><em>Summary: You may deactivate your account, but we may
retain your IP address and your public contributions to the Site.</em></p>
<p>If you would like to delete your account, you may request your
account to be deactivated <%= link_to "here", maintenance_user_deletion_path %>.</p>
@@ -409,9 +409,9 @@
<h6>Data Retention</h6>
<p class="summary">Summary: We keep your information for as long as
<p><em>Summary: We keep your information for as long as
necessary to fulfill the purposes outlined in this privacy policy, unless
otherwise required by law.</p>
otherwise required by law.</em></p>
<p>We store the information we collect for as long as it is necessary for
the purpose(s) for which we originally collected it. We may retain certain
@@ -426,7 +426,7 @@
<h6>International Data Transfers</h6>
<p class="summary">Summary: We store data in the United States and operate under US law.</p>
<p><em>Summary: We store data in the United States and operate under US law.</em></p>
<p>We are based in the United States and we process and store information
on servers located in the United States. We may store information on
@@ -439,9 +439,9 @@
<h6>Information Security</h6>
<p class="summary">Summary: We take reasonable measures to secure your
<p><em>Summary: We take reasonable measures to secure your
data. We will promptly notify you of breaches of your personal
information.</p>
information.</em></p>
<p>We take reasonable measures to protect your personal information from
loss, theft, misuse, unauthorized access, disclosure, alteration, or
@@ -461,7 +461,7 @@
<h6>Changes to this Policy</h6>
<p class="summary">Summary: We may update this policy from time to time.</p>
<p><em>Summary: We may update this policy from time to time.</em></p>
<p>We may update this Privacy Policy from time to time. The updated policy
will be indicated by a new "Last updated" date at the top of this page. If

View File

@@ -1,8 +1,8 @@
<% page_title "Site Map" %>
<div id="c-static">
<div id="a-site-map" class="fixed-width-container">
<section>
<div id="a-site-map" class="fixed-width-container space-y-4 md:flex md:space-y-0">
<section class="flex-auto space-y-4">
<ul>
<li><h2>Posts</h2></li>
<li><%= link_to_wiki "Help", "help:posts" %></li>
@@ -44,7 +44,7 @@
<li><%= link_to("Changes", artist_versions_path) %></li>
</ul>
</section>
<section>
<section class="flex-auto space-y-4">
<ul>
<li><h2>Tags</h2></li>
<li><%= link_to_wiki "Help", "help:tags" %></li>
@@ -75,7 +75,7 @@
<li><%= link_to("Missed Searches", missed_searches_explore_posts_path) %></li>
</ul>
</section>
<section>
<section class="flex-auto space-y-4">
<ul>
<li><h2>Comments</h2></li>
<li><%= link_to_wiki "Help", "help:comments" %></li>
@@ -107,7 +107,7 @@
<li><%= link_to("Changes", artist_commentary_versions_path) %></li>
</ul>
</section>
<section>
<section class="flex-auto space-y-4">
<ul>
<li><h2>Profile</h2></li>
<% if CurrentUser.is_anonymous? %>

View File

@@ -5,10 +5,10 @@
<%= render "users/secondary_links" %>
<div id="c-user-upgrades">
<div id="a-new" class="fixed-width-container">
<div id="a-new" class="fixed-width-container mx-auto">
<% if @user_upgrade.is_gift? %>
<h1>Gift Account Upgrade</h1>
<h1 class="text-center mb-4">Gift Account Upgrade</h1>
<% if @user_upgrade.recipient.is_platinum? %>
<p><%= link_to_user @recipient %> is already above Platinum level and can't be upgraded!</p>
@@ -16,7 +16,7 @@
<h6>You are gifting this upgrade to <%= link_to_user @user_upgrade.recipient %>.</h6>
<% end %>
<% else %>
<h1>Upgrade Account</h1>
<h1 class="text-center mb-4">Upgrade Account</h1>
<p>Upgrading your account gives you exclusive benefits and helps support
<%= Danbooru.config.canonical_app_name %>. Your support helps keep the
@@ -26,7 +26,7 @@
their profile page and look for a "Gift Upgrade" link.</p>
<% end %>
<table id="feature-comparison">
<table id="feature-comparison" class="w-full text-center table-md">
<thead>
<tr>
<th></th>
@@ -36,10 +36,10 @@
</tr>
</thead>
<tbody>
<colgroup id="labels"></colgroup>
<colgroup id="basic"></colgroup>
<colgroup id="gold"></colgroup>
<colgroup id="platinum"></colgroup>
<colgroup id="labels" class="w-1/4"></colgroup>
<colgroup id="basic" class="w-1/4"></colgroup>
<colgroup id="gold" class="w-1/4"></colgroup>
<colgroup id="platinum" class="w-1/4"></colgroup>
<tr>
<td></td>
<td>Free</td>

View File

@@ -1,6 +1,6 @@
<div>
<h2>Statistics</h2>
<table width="100%" class="user-statistics">
<table width="100%" class="user-statistics table-sm">
<tbody>
<tr>
<th>User ID</th>

View File

@@ -34,7 +34,7 @@
<% end %>
<% if listing_type(:wiki_page_id, member_check: false, types: [:page, :global]) == :page %>
<%= submit_tag "Diff" %>
<%= submit_tag "Diff", class: "mt-4" %>
<% end %>
<% end %>
</div>