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

Create login modal.

Browse source
This commit is contained in:
Dominik Picheta 2018-05-10 23:33:48 +01:00
commit 4c0a88a131
2 changed files with 48 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

58
redesign/forum.nim
View file

@ -25,20 +25,50 @@ proc onPopState(event: dom.Event) =
redraw() redraw()
proc genHeader(): VNode = proc genHeader(): VNode =
result = buildHtml(header(id="main-navbar")): result = buildHtml(tdiv()):
tdiv(class="navbar container grid-xl"): header(id="main-navbar"):
section(class="navbar-section"): tdiv(class="navbar container grid-xl"):
a(href=makeUri("/")): section(class="navbar-section"):
img(src="images/crown.png", id="img-logo") # TODO: Customisation. a(href=makeUri("/")):
section(class="navbar-section"): img(src="images/crown.png", id="img-logo") # TODO: Customisation.
tdiv(class="input-group input-inline"): section(class="navbar-section"):
input(class="form-input input-sm", `type`="text", placeholder="search") tdiv(class="input-group input-inline"):
button(class="btn btn-primary btn-sm"): input(class="search-input input-sm", `type`="text", placeholder="search")
italic(class="fas fa-user-plus") button(class="btn btn-primary btn-sm"):
text " Sign up" italic(class="fas fa-user-plus")
button(class="btn btn-primary btn-sm"): text " Sign up"
italic(class="fas fa-sign-in-alt") a(href="#login-modal"):
text " Log in" button(class="btn btn-primary btn-sm"):
italic(class="fas fa-sign-in-alt")
text " Log in"
# Modals
tdiv(class="modal modal-sm", id="login-modal"):
a(href="#", class="modal-overlay", "aria-label"="close")
tdiv(class="modal-container"):
tdiv(class="modal-header"):
a(href="#", class="btn btn-clear float-right", "aria-label"="close")
tdiv(class="modal-title h5"):
text "Log in"
tdiv(class="modal-body"):
tdiv(class="content"):
form():
tdiv(class="form-group"):
label(class="form-label", `for`="username"):
text "Username"
input(class="form-input", `type`="text", id="username")
tdiv(class="form-group"):
label(class="form-label", `for`="password"):
text "Password"
input(class="form-input", `type`="password", id="password")
button(class="btn btn-link"):
text "Reset your password"
tdiv(class="modal-footer"):
button(class="btn btn-primary"):
text "Log in"
button(class="btn"):
text "Create account"
const appName = "/karax" const appName = "/karax"
type Params = Table[string, string] type Params = Table[string, string]

6
redesign/nimforum.scss
View file

@ -60,12 +60,14 @@ $logo-height: $navbar-height - 20px;
} }
// Unfortunately we must colour the controls in the navbar manually. // Unfortunately we must colour the controls in the navbar manually.
.form-input { .search-input {
@extend .form-input;
border-color: $navbar-border-color-dark; border-color: $navbar-border-color-dark;
} }
.form-input:focus { .search-input:focus {
box-shadow: none; box-shadow: none;
border-color: $navbar-border-color-dark;
} }
.btn-primary { .btn-primary {