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

css: adjust comment / forum post layout on mobile.

Browse Source 
* Remove borders around comments.
* Remove background behind commenter name / timestamp.
* Put timestamp on same line as commenter name.
This commit is contained in:
evazion
2019-09-26 02:03:13 -05:00
parent bca35d93bd
commit 3341223b40
3 changed files with 37 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/src/styles/base/040_colors.css
View File

@@ -65,8 +65,6 @@
--forum-vote-up-color: green; --forum-vote-up-color: green;
--forum-vote-meh-color: goldrenrod; --forum-vote-meh-color: goldrenrod;
--forum-vote-down-color: red; --forum-vote-down-color: red;
--forum-post-border: 1px solid #DDD;
--forum-post-author-background: #EEE;
--forum-post-highlight-background-color: #FFC; --forum-post-highlight-background-color: #FFC;
--comment-sticky-background-color: var(--subnav-menu-background-color); --comment-sticky-background-color: var(--subnav-menu-background-color);
@@ -337,8 +335,6 @@ body[data-user-theme="dark"] {
--forum-vote-up-color: var(--green-1); --forum-vote-up-color: var(--green-1);
--forum-vote-meh-color: var(--yellow-1); --forum-vote-meh-color: var(--yellow-1);
--forum-vote-down-color: var(--red-1); --forum-vote-down-color: var(--red-1);
--forum-post-border: 1px solid var(--grey-3);
--forum-post-author-background: var(--grey-3);
--forum-post-highlight-background-color: var(--blue-0); --forum-post-highlight-background-color: var(--blue-0);
--jquery-ui-widget-content-text-color: var(--text-color); --jquery-ui-widget-content-text-color: var(--text-color);

41
app/javascript/src/styles/specific/comments.scss
View File

@@ -128,29 +128,38 @@ form.edit_comment div.input.boolean {
@media screen and (max-width: 660px) { @media screen and (max-width: 660px) {
div.comments-for-post div.list-of-comments article.comment { div.comments-for-post div.list-of-comments article.comment {
display: block; display: block;
margin-top: 1em; margin-top: 3em;
padding: 0; padding: 5px;
border: var(--forum-post-border);
div.author { div.author {
margin: 0; margin: 0 0 1em;
padding: 1em;
border-bottom: var(--forum-post-border);
background: var(--forum-post-author-background);
}
div.content { h4 {
padding: 1em; display: inline;
margin-right: 0.5em;
}
time {
display: inline;
color: var(--muted-text-color);
font-size: 0.8em;
}
} }
} }
div#c-comments div#a-index, div#c-comments div#a-show { div#c-comments div#a-index, div#c-comments div#a-show {
margin: 0 0.5em;
div.post { div.post {
display: block; display: block;
margin: 0; margin: 4em 0;
&:first-of-type {
margin: 1em 0;
}
div.preview { div.preview {
margin: 2em auto; margin: 1em auto;
width: auto; width: auto;
height: auto; height: auto;
} }
@@ -159,11 +168,11 @@ form.edit_comment div.input.boolean {
div.header div.row span.info { div.header div.row span.info {
display: block; display: block;
} }
div.new-comment {
margin: 1em 0;
}
} }
} }
} }
div.new-comment {
margin: 1em 0;
}
} }

21
app/javascript/src/styles/specific/forum.scss
View File

@@ -93,18 +93,21 @@ div#c-forum-topics {
div.list-of-forum-posts article.forum-post { div.list-of-forum-posts article.forum-post {
display: block; display: block;
margin-top: 1em; margin-top: 3em;
border: var(--forum-post-border);
div.author { div.author {
margin: 0; margin: 0 0 1em;
padding: 1em;
border-bottom: var(--forum-post-border);
background: var(--forum-post-author-background);
}
div.content { h4 {
padding: 1em; display: inline;
margin-right: 0.5em;
}
time {
display: inline;
color: var(--muted-text-color);
font-size: 0.8em;
}
} }
} }
} }