diff --git a/public/css/nimforum.scss b/public/css/nimforum.scss index 098ad6e..5630b06 100644 --- a/public/css/nimforum.scss +++ b/public/css/nimforum.scss @@ -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; diff --git a/src/frontend/category.nim b/src/frontend/category.nim index 7b46194..314720d 100644 --- a/src/frontend/category.nim +++ b/src/frontend/category.nim @@ -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 diff --git a/src/frontend/threadlist.nim b/src/frontend/threadlist.nim index 8a2a5ed..d2dc104 100644 --- a/src/frontend/threadlist.nim +++ b/src/frontend/threadlist.nim @@ -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] diff --git a/tests/browsertests/categories.nim b/tests/browsertests/categories.nim index c4ff41c..b1a2edb 100644 --- a/tests/browsertests/categories.nim +++ b/tests/browsertests/categories.nim @@ -113,18 +113,18 @@ proc categoriesUserTests(session: Session, baseUrl: string) = ensureExists "#categories-list" click "#category-default" - checkText "#threads-list .thread-title", "Post 3" + checkText "#threads-list .thread-title a", "Post 3" for element in session.waitForElements("#threads-list .category-name"): # Have to user "innerText" because elements are hidden on this page assert element.getProperty("innerText") == "Default" selectCategory "announcements" - checkText "#threads-list .thread-title", "Post 2" + checkText "#threads-list .thread-title a", "Post 2" for element in session.waitForElements("#threads-list .category-name"): assert element.getProperty("innerText") == "Announcements" selectCategory "fun" - checkText "#threads-list .thread-title", "Post 1" + checkText "#threads-list .thread-title a", "Post 1" for element in session.waitForElements("#threads-list .category-name"): assert element.getProperty("innerText") == "Fun"