jyapayne/nimforum
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add expanded version of category drop down and add it to categories page

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2020-02-17 19:48:10 -07:00 • committed by Andreas Rumpf
commit f3396777fb
5 changed files with 55 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

13
public/css/nimforum.scss
View file

@ -122,6 +122,19 @@ $logo-height: $navbar-height - 20px;
}
}
.category-description {
opacity: 0.6;
font-size: small;
}
.category-status {
.topic-count {
margin-left: 5px;
opacity: 0.7;
font-size: small;
}
}
.category {
white-space: nowrap;
}

24
src/frontend/category.nim
View file

@ -10,16 +10,23 @@ type
CategoryList* = ref object
categories*: seq[Category]
const categoryDescriptionCharLimit = 250
proc cmpNames*(cat1: Category, cat2: Category): int =
cat1.name.cmp(cat2.name)
when defined(js):
include karax/prelude
import karax / [vstyles]
import karaxutils
proc render*(category: Category): VNode =
result = buildHtml():
if category.name.len >= 0:
proc render*(category: Category, compact=false): VNode =
if category.name.len == 0:
return buildHtml():
span()
result = buildhtml(tdiv):
tdiv(class="category-status"):
tdiv(class="category",
title=category.description,
"data-color"="#" & category.color):
@ -28,6 +35,11 @@ when defined(js):
(StyleAttr.border,
kstring"0.3rem solid #" & category.color)
))
text category.name
else:
span()
span(class="category-name"):
text category.name
if not compact:
span(class="topic-count"):
text "× " & $category.numTopics
if not compact:
tdiv(class="category-description"):
text category.description.limit(categoryDescriptionCharLimit)

6
src/frontend/categorypicker.nim
View file

@ -155,7 +155,7 @@ when defined(js):
state.onAddCategoryClick()):
text "Add"
proc render*(state: CategoryPicker, currentUser: Option[User]): VNode =
proc render*(state: CategoryPicker, currentUser: Option[User], compact=false): VNode =
let loggedIn = currentUser.isSome()
let currentAdmin =
loggedIn and currentUser.get().rank == Admin
@ -178,7 +178,7 @@ when defined(js):
tdiv(class="dropdown"):
a(class="btn btn-link dropdown-toggle", tabindex="0"):
tdiv(class="selected-category d-inline-block"):
render(selectedCategory)
render(selectedCategory, compact=true)
text " "
italic(class="fas fa-caret-down")
ul(class="menu"):
@ -186,6 +186,6 @@ when defined(js):
li(class="menu-item"):
a(class="category-" & $category.id & " " & category.name.slug,
onClick=onCategoryClick(state, category)):
render(category)
render(category, compact)
if state.addEnabled:
genAddCategory(state)

15
src/frontend/mainbuttons.nim
View file

@ -3,16 +3,22 @@ import user
when defined(js):
include karax/prelude
import karax / [vstyles, kajax, kdom]
import karax / [kdom]
import karaxutils, error, user
import karaxutils, user, categorypicker, category
let buttons = [
(name: "Latest", url: makeUri("/"), id: "latest-btn"),
(name: "Categories", url: makeUri("/categories"), id: "categories-btn"),
]
proc renderMainButtons*(currentUser: Option[User]): VNode =
proc onSelectedCategoryChanged(oldCategory: Category, newCategory: Category) =
let uri = makeUri("/c/" & $newCategory.id)
navigateTo(uri)
let catPicker = newCategoryPicker(onCategoryChange=onSelectedCategoryChanged)
proc renderMainButtons*(currentUser: Option[User], categoryId = -1): VNode =
result = buildHtml():
section(class="navbar container grid-xl", id="main-buttons"):
section(class="navbar-section"):
@ -23,6 +29,9 @@ when defined(js):
ul(class="menu"):
li: text "community"
li: text "dev" ]#
if categoryId != -1:
catPicker.selectedCategoryID = categoryId
render(catPicker, currentUser)
for btn in buttons:
let active = btn.url == window.location.href

15
src/frontend/threadlist.nim
View file

@ -88,7 +88,7 @@ when defined(js):
else:
return $duration.inSeconds & "s"
proc genThread(thread: Thread, isNew: bool, noBorder: bool): VNode =
proc genThread(thread: Thread, isNew: bool, noBorder: bool, displayCategory=true): VNode =
let isOld = (getTime() - thread.creation.fromUnix).inWeeks > 2
let isBanned = thread.author.rank.isBanned()
result = buildHtml():
@ -109,8 +109,9 @@ when defined(js):
a(href=makeUri("/t/" & $thread.id),
onClick=anchorCB):
text thread.topic
td():
render(thread.category)
if displayCategory:
td():
render(thread.category, compact=true)
genUserAvatars(thread.users)
td(): text $thread.replies
td(class=class({
@ -193,7 +194,8 @@ when defined(js):
thead():
tr:
th(text "Topic")
th(text "Category")
if categoryId == -1:
th(text "Category")
th(style=style((StyleAttr.width, kstring"8rem"))): text "Users"
th(text "Replies")
th(text "Views")
@ -206,7 +208,8 @@ when defined(js):
let isLastThread = i+1 == list.threads.len
let (isLastUnseen, isNew) = getInfo(list.threads, i, currentUser)
genThread(thread, isNew,
noBorder=isLastUnseen or isLastThread)
noBorder=isLastUnseen or isLastThread,
displayCategory=categoryId == -1)
if isLastUnseen and (not isLastThread):
tr(class="last-visit-separator"):
td(colspan="6"):
@ -224,5 +227,5 @@ when defined(js):
proc renderThreadList*(currentUser: Option[User], categoryId = -1): VNode =
result = buildHtml(tdiv):
renderMainButtons(currentUser)
renderMainButtons(currentUser, categoryId=categoryId)
genThreadList(currentUser, categoryId)