Create separate page for new thread modal.

redesign/forum.nim

@@ -4,18 +4,20 @@ from dom import window, Location
 include karax/prelude
 import jester/patterns
 
-import threadlist, postlist, header, profile
+import threadlist, postlist, header, profile, newthread
 import karaxutils
 
 type
   State = ref object
     url: Location
     profile: ProfileState
+    newThread: NewThread
 
 proc newState(): State =
   State(
     url: window.location,
-    profile: newProfileState()
+    profile: newProfileState(),
+    newThread: newNewThread()
   )
 
 var state = newState()
@@ -46,6 +48,10 @@ proc render(): VNode =
   result = buildHtml(tdiv()):
     renderHeader()
     route([
+      r("/newthread",
+        (params: Params) =>
+          (render(state.newThread))
+      ),
       r("/profile/@username",
         (params: Params) =>
           (render(state.profile, params["username"]))

redesign/newthread.nim

@@ -9,19 +9,17 @@ when defined(js):
   import karaxutils
 
   type
-    NewThreadModal* = ref object
+    NewThread* = ref object
-      shown: bool
       loading: bool
-      onNewThread: proc (threadId, postId: int)
       error: Option[PostError]
       replyBox: ReplyBox
 
-  proc onCreatePost(httpStatus: int, response: kstring, state: NewThreadModal) =
+  proc onCreatePost(httpStatus: int, response: kstring, state: NewThread) =
     postFinished:
-      state.shown = false
+      # TODO
-      state.onNewThread(0, 0) # TODO
+      discard
 
-  proc onCreateClick(ev: Event, n: VNode, state: NewThreadModal) =
+  proc onCreateClick(ev: Event, n: VNode, state: NewThread) =
     state.loading = true
     state.error = none[PostError]()
 
@@ -32,46 +30,22 @@ when defined(js):
     ajaxPost(uri, @[], cast[cstring](formData),
              (s: int, r: kstring) => onCreatePost(s, r, state))
 
-  proc onClose(ev: Event, n: VNode, state: NewThreadModal) =
+  proc newNewThread*(): NewThread =
-    state.shown = false
+    NewThread(
-    ev.preventDefault()
-
-  proc newNewThreadModal*(
-    onNewThread: proc (threadId, postId: int)
-  ): NewThreadModal =
-    NewThreadModal(
-      shown: false,
-      onNewThread: onNewThread,
       replyBox: newReplyBox(nil)
     )
 
-  proc show*(state: NewThreadModal) =
+  proc render*(state: NewThread): VNode =
-    state.shown = true
-
-  proc render*(state: NewThreadModal): VNode =
     result = buildHtml():
-      tdiv(class=class({"active": state.shown}, "modal modal-lg"),
+      section(class="container grid-xl"):
-           id="new-thread-modal"):
+        tdiv(id="new-thread"):
-        a(href="", class="modal-overlay", "aria-label"="close",
+          tdiv(class="title"):
-          onClick=(ev: Event, n: VNode) => onClose(ev, n, state))
+            p(): text "New Thread"
-        tdiv(class="modal-container"):
+          tdiv(class="content"):
-          tdiv(class="modal-header"):
+            input(class="form-input", `type`="text", name="username",
-            a(href="", class="btn btn-clear float-right",
+                  placeholder="Type the title here")
-              "aria-label"="close",
+            renderContent(state.replyBox, none[Thread](), none[Post]())
-              onClick=(ev: Event, n: VNode) => onClose(ev, n, state))
+          tdiv(class="footer"):
-            tdiv(class="modal-title h5"):
-              text "New Thread"
-          tdiv(class="modal-body"):
-            tdiv(class="content"):
-              input(class="form-input", `type`="text", name="username",
-                    placeholder="Type the title here")
-              renderContent(state.replyBox, none[Thread](), none[Post]())
-
-          tdiv(class="modal-footer"):
-            button(class="btn",
-                   onClick=(ev: Event, n: VNode) =>
-                      onClose(ev, n, state)):
-              text "Cancel"
             button(class=class(
                     {"loading": state.loading},
                     "btn btn-primary"

redesign/nimforum.scss

@@ -113,7 +113,7 @@ $logo-height: $navbar-height - 20px;
   }
 }
 
-#new-thread-modal {
+#new-thread {
   .modal-container .modal-body {
     max-height: none;
   }
@@ -124,9 +124,13 @@ $logo-height: $navbar-height - 20px;
 
   textarea.form-input, .panel-body > div {
     margin-top: $control-padding-y*2;
-    resize: none;
+    resize: vertical;
     min-height: 40vh;
-    max-height: 45vh;
+  }
+
+  .footer {
+    float: right;
+    margin-top: $control-padding-y*2;
   }
 }
 

redesign/threadlist.nim

@@ -24,22 +24,20 @@ when defined(js):
   include karax/prelude
   import karax / [vstyles, kajax, kdom]
 
-  import karaxutils, error, newthread
+  import karaxutils, error
 
   type
     State = ref object
       list: Option[ThreadList]
       loading: bool
       status: HttpCode
-      newThread: NewThreadModal
 
   proc onNewThread(threadId, postId: int)
   proc newState(): State =
     State(
       list: none[ThreadList](),
       loading: false,
-      status: Http200,
+      status: Http200
-      newThread: newNewThreadModal(onNewThread)
     )
 
   var
@@ -63,10 +61,10 @@ when defined(js):
           button(class="btn btn-link"): text "Most Active"
           button(class="btn btn-link"): text "Categories"
         section(class="navbar-section"):
-          button(class="btn btn-secondary",
+          a(href=makeUri("/newthread"), onClick=anchorCB):
-                 onClick=(e: Event, n: VNode) => state.newThread.show()):
+            button(class="btn btn-secondary"):
-            italic(class="fas fa-plus")
+              italic(class="fas fa-plus")
-            text " New Thread"
+              text " New Thread"
 
   proc genUserAvatars(users: seq[User]): VNode =
     result = buildHtml(td):
@@ -181,5 +179,4 @@ when defined(js):
   proc renderThreadList*(): VNode =
     result = buildHtml(tdiv):
       genTopButtons()
-      genThreadList()
+      genThreadList()
-      render(state.newThread)