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

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) {
div.comments-for-post div.list-of-comments article.comment {
display: block;
margin-top: 1em;
padding: 0;
border: var(--forum-post-border);
margin-top: 3em;
padding: 5px;
div.author {
margin: 0;
padding: 1em;
border-bottom: var(--forum-post-border);
background: var(--forum-post-author-background);
}
margin: 0 0 1em;
div.content {
padding: 1em;
h4 {
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 {
margin: 0 0.5em;
div.post {
display: block;
margin: 0;
margin: 4em 0;
&:first-of-type {
margin: 1em 0;
}
div.preview {
margin: 2em auto;
margin: 1em auto;
width: auto;
height: auto;
}
@@ -159,11 +168,11 @@ form.edit_comment div.input.boolean {
div.header div.row span.info {
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 {
display: block;
margin-top: 1em;
border: var(--forum-post-border);
margin-top: 3em;
div.author {
margin: 0;
padding: 1em;
border-bottom: var(--forum-post-border);
background: var(--forum-post-author-background);
}
margin: 0 0 1em;
div.content {
padding: 1em;
h4 {
display: inline;
margin-right: 0.5em;
}
time {
display: inline;
color: var(--muted-text-color);
font-size: 0.8em;
}
}
}
}