Make mobile viewing more friendly

This commit is contained in:
Joey Yakimowich-Payne 2020-03-05 17:14:02 -07:00 committed by Dominik Picheta
commit c2cc26ea77
3 changed files with 20 additions and 15 deletions

View file

@ -51,6 +51,7 @@ $logo-height: $navbar-height - 20px;
// Unfortunately we must colour the controls in the navbar manually.
.search-input {
@extend .form-input;
min-width: 120px;
border-color: $navbar-border-color-dark;
}
@ -128,6 +129,9 @@ $logo-height: $navbar-height - 20px;
}
.category-status {
font-size: small;
font-weight: bold;
.topic-count {
margin-left: 5px;
opacity: 0.7;
@ -258,7 +262,7 @@ $threads-meta-color: #545d70;
.category-color {
width: 0;
height: 0;
border: 0.3rem solid $default-category-color;
border: 0.25rem solid $default-category-color;
display: inline-block;
margin-right: 5px;
}
@ -297,6 +301,10 @@ $threads-meta-color: #545d70;
}
}
.thread-replies, .thread-time, .thread-users, .views-text, .centered-header {
text-align: center;
}
.thread-time {
color: $threads-meta-color;

View file

@ -36,7 +36,7 @@ when defined(js):
tdiv(class="category-color",
style=style(
(StyleAttr.border,
kstring"0.3rem solid #" & category.color)
kstring"0.25rem solid #" & category.color)
))
span(class="category-name"):
text category.name

View file

@ -74,7 +74,7 @@ when defined(js):
return true
proc genUserAvatars(users: seq[User]): VNode =
result = buildHtml(td):
result = buildHtml(td(class="thread-users")):
for user in users:
render(user, "avatar avatar-sm", showStatus=true)
text " "
@ -114,14 +114,13 @@ when defined(js):
if thread.isSolved:
italic(class="fas fa-check-square fa-xs",
title="Thread has a solution")
a(href=makeUri("/t/" & $thread.id),
onClick=anchorCB):
a(href=makeUri("/t/" & $thread.id), onClick=anchorCB):
text thread.topic
td(class=class({"d-none": not displayCategory})):
render(thread.category)
tdiv(class=class({"d-none": not displayCategory})):
render(thread.category)
genUserAvatars(thread.users)
td(): text $thread.replies
td(class=class({
td(class="thread-replies"): text $thread.replies
td(class="hide-sm" & class({
"views-text": thread.views < 999,
"popular-text": thread.views > 999 and thread.views < 5000,
"super-popular-text": thread.views > 5000
@ -209,12 +208,10 @@ when defined(js):
thead():
tr:
th(text "Topic")
th(class=class({"d-none": not displayCategory})):
text "Category"
th(style=style((StyleAttr.width, kstring"8rem"))): text "Users"
th(text "Replies")
th(text "Views")
th(text "Activity")
th(class="centered-header"): text "Users"
th(class="centered-header"): text "Replies"
th(class="hide-sm centered-header"): text "Views"
th(class="centered-header"): text "Activity"
tbody():
for i in 0 ..< list.threads.len:
let thread = list.threads[i]