jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/src/styles/common/main_layout.scss
View File

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

13
app/javascript/src/styles/common/tables.scss
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; }
}

48
app/javascript/src/styles/common/utilities.scss Normal file
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; }
}

15
app/javascript/src/styles/specific/artist_commentary_versions.scss
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;
}
}
}

11
app/javascript/src/styles/specific/artists.scss
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 */
}
}
}

3
app/javascript/src/styles/specific/error.scss
View File

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

5
app/javascript/src/styles/specific/favorite_groups.scss
View File

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

7
app/javascript/src/styles/specific/ip_addresses.scss
View File

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

2
app/javascript/src/styles/specific/mod_queue.scss.erb
View File

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

49
app/javascript/src/styles/specific/pools.scss
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;
}
}

4
app/javascript/src/styles/specific/post_versions.scss
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;

97
app/javascript/src/styles/specific/posts.scss
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%;

5
app/javascript/src/styles/specific/privacy_policy.scss
View File

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

14
app/javascript/src/styles/specific/related_tags.scss
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;

15
app/javascript/src/styles/specific/site_map.scss
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;
}
}
}
}

26
app/javascript/src/styles/specific/user_upgrades.scss
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;
}
}
}
}

22
app/javascript/src/styles/specific/users.scss
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;
}

6
app/javascript/src/styles/specific/wiki_page_versions.scss
View File

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

2
app/javascript/src/styles/specific/z_responsive.scss
View File

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