Commit 7f9009fe authored by Lucas Brown's avatar Lucas Brown

Enhancements to formatting of user pages in web app.

parent d574f8e2
div.dataTables_wrapper div.dataTables_length {
flex: 0 0 50%;
max-width: 50%;
position: relative;
float: left;
padding: 0.75rem;
}
div.dataTables_wrapper div.dataTables_filter {
flex: 0 0 50%;
max-width: 50%;
position: relative;
float: right;
padding: 0.75rem;
}
div.dataTables_wrapper div.dataTables_length label {
margin-bottom: 0px;
}
div.dataTables_wrapper div.dataTables_filter label {
margin-bottom: 0px;
}
div.dataTables_wrapper div.dataTables_info {
flex: 0 0 50%;
max-width: 50%;
position: relative;
float: left;
padding: 0.75rem;
}
div.dataTables_wrapper div.dataTables_paginate {
flex: 0 0 50%;
max-width: 50%;
position: relative;
float: right;
padding: 0.75rem;
}
div.dataTable_card table.table-bordered {
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 0px;
}
div.dataTables_scrollFootInner th {
font-size: .8em;
font-weight: normal;
}
div.dataTables_scrollFootInner input, div.dataTables_scrollFootInner select {
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: .8rem;
font-weight: 400;
border-radius: 0.35rem;
font-weight: normal;
border: 1px solid rgb(166, 166, 166);
color: #858796;
}
div.dataTable_card a.paginate_button{
position: relative;
display: inline-block;
padding: 0.5rem 0.75rem;
margin-left: -1px;
line-height: 1.25;
color: #007bff;
background-color: #fff;
border: 1px solid #dee2e6;
font-size: .8em;
}
div.dataTable_card a.paginate_button.disabled{
color: #858796;
}
div.dataTable_card a.paginate_button.previous{
border-top-left-radius: 0.35em;
border-bottom-left-radius: 0.35em;
}
div.dataTable_card a.paginate_button.next{
border-top-right-radius: 0.35em;
border-bottom-right-radius: 0.35em;
}
div.dataTable_card a.paginate_button.current {
border-radius: 0;
color: #ffffff;
background-color: #007bff;
}
......@@ -14,14 +14,14 @@
<div class="card shadow mb-4">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Account Details</h6>
<h6 class="m-0 font-weight-bold text-dark">Account Details</h6>
<div class="dropdown no-arrow show">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink" x-placement="bottom-end" style="position: absolute; transform: translate3d(-156px, 19px, 0px); top: 0px; left: 0px; will-change: transform;">
<div class="dropdown-header">Actions</div>
<a class="dropdown-item" href="/account/update">Update Account Details</a>
<a class="dropdown-item" href="/account/update">Update Details</a>
</div>
</div>
</div>
......
......@@ -9,48 +9,79 @@
</div>
<form class="user" method="post" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="inputFirstName">First Name</label>
<input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "FirstName" }}" placeholder="enter first name" name="FirstName" value="{{ .form.FirstName }}" required>
{{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "FirstName" }}
</div>
<div class="form-group">
<label for="inputLastName">Last Name</label>
<input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "LastName" }}" placeholder="enter last name" name="LastName" value="{{ .form.LastName }}" required>
{{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "LastName" }}
<div class="card shadow">
<div class="card-body">
<div class="row mb-2">
<div class="col-12">
<h4 class="card-title">Your Details</h4>
</div>
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "Email" }}" placeholder="enter email" name="Email" value="{{ .form.Email }}" required>
{{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "Email" }}
<div class="row mb-2">
<div class="col-md-6">
<div class="form-group">
<label for="inputFirstName">First Name</label>
<input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "FirstName" }}" placeholder="enter first name" name="FirstName" value="{{ .form.FirstName }}" required>
{{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "FirstName" }}
</div>
<div class="form-group">
<label for="inputLastName">Last Name</label>
<input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "LastName" }}" placeholder="enter last name" name="LastName" value="{{ .form.LastName }}" required>
{{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "LastName" }}
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "Email" }}" placeholder="enter email" name="Email" value="{{ .form.Email }}" required>
{{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "Email" }}
</div>
<div class="form-group">
<label for="inputTimezone">Timezone</label>
<select class="form-control {{ ValidationFieldClass $.validationErrors "Timezone" }}" name="Timezone">
<option value="">Not set</option>
{{ range $idx, $t := .timezones }}
<option value="{{ $t }}" {{ if CmpString $t $.form.Timezone }}selected="selected"{{ end }}>{{ $t }}</option>
{{ end }}
</select>
{{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "Timezone" }}
</div>
</div>
</div>
<div class="form-group">
<label for="inputTimezone">Timezone</label>
<select class="form-control {{ ValidationFieldClass $.validationErrors "Timezone" }}" name="Timezone">
<option value="">Not set</option>
{{ range $idx, $t := .timezones }}
<option value="{{ $t }}" {{ if CmpString $t $.form.Timezone }}selected="selected"{{ end }}>{{ $t }}</option>
{{ end }}
</select>
{{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "Timezone" }}
<div class="row">
<div class="col">
<input id="btnSubmit" type="submit" name="action" value="Save" class="btn btn-primary"/>
<a href="/user" class="ml-2 btn btn-secondary" >Cancel</a>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col">
<input id="btnSubmit" type="submit" name="action" value="Save" class="btn btn-primary"/>
<a href="/user" class="ml-2 btn btn-secondary" >Cancel</a>
</div>
</div>
</form>
<form class="user" method="post" novalidate>
<div class="row mt-5">
<div class="card mt-4">
<div class="card-body">
<div class="row mb-2">
<div class="col-12">
<h4 class="card-title">Change Password</h4>
<p><small><b>Optional</b>. You can change your password by specifying a new one below. Otherwise leave the fields empty.</small></p>
</div>
</div>
<div class="row mb-2">
<div class="col-md-6">
<h4 class="card-title">Change Password</h4>
<p><small><b>Optional</b>. You can change your password by specifying a new one below. Otherwise leave the fields empty.</small></p>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="" name="Password" value="">
......@@ -63,12 +94,20 @@
{{template "invalid-feedback" dict "validationDefaults" $.passwordValidationDefaults "validationErrors" $.validationErrors "fieldName" "PasswordConfirm" }}
</div>
</div>
</div>
<div class="row">
<div class="col">
<input id="btnSubmit2" type="submit" name="action" value="Change Password" class="btn btn-primary btn-sm"/>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col">
<input id="btnSubmit2" type="submit" name="action" value="Change Password" class="btn btn-primary"/>
</div>
</div>
</form>
{{end}}
{{define "js"}}
......
......@@ -6,27 +6,35 @@
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">My Profile</h1>
<a href="/user/update" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="far fa-edit fa-sm text-white-50 mr-1"></i>Edit Details</a>
<!-- a href="/user/update" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="far fa-edit fa-sm text-white-50 mr-1"></i>Edit Details</a -->
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col-auto">
<img src="{{ .user.Gravatar.Medium }}" alt="gravatar image" class="rounded">
</div>
<div class="col">
<h4>{{ .user.Name }}</h4>
<p><small><a href="https://gravatar.com" target="_blank">Update Avatar</a></small></p>
</div>
<div class="card shadow">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-dark">User Details</h6>
<div class="dropdown no-arrow show">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink" x-placement="bottom-end" style="position: absolute; transform: translate3d(-156px, 19px, 0px); top: 0px; left: 0px; will-change: transform;">
<div class="dropdown-header">Actions</div>
<a class="dropdown-item" href="/account/update">Update Details</a>
<a class="dropdown-item" href="https://gravatar.com" target="_blank">Update Avatar</a>
</div>
</div>
</div>
<div class="card-body">
<div class="row mt-2">
<div class="col-lg-2 mb-2">
<img src="{{ .user.Gravatar.Medium }}" alt="gravatar image" class="rounded">
</div>
<div class="row mt-5">
<div class="col-md-6">
<div class="col-md-5">
<p>
<small>Name</small><br/>
<b>{{ .user.Name }}</b>
......@@ -42,7 +50,7 @@
</p>
{{end}}
</div>
<div class="col-md-6">
<div class="col-md-5">
<p>
<small>Role</small><br/>
{{ if .userAccount }}
......@@ -77,6 +85,10 @@
</p>
</div>
</div>
</div>
</div>
{{end}}
{{define "js"}}
......
{{define "title"}}Users{{end}}
{{define "content"}}
<a href="{{ .urlUsersCreate }}">Create User</a>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Users</h1>
<a href="{{ .urlUsersCreate }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-user-plus fa-sm text-white-50 mr-1"></i>Create User</a>
</div>
<div class="row">
<div class="col">
<form method="post">
<div class="card">
<div class="card shadow">
<div class="table-responsive dataTable_card">
{{ template "partials/datatable/html" . }}
</div>
......
{{define "title"}}Update Profile{{end}}
{{define "title"}}Update User {{end}}
{{define "style"}}
{{end}}
{{define "content"}}
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Update User</h1>
</div>
<form class="user" method="post" novalidate>
<div class="row">
<div class="card shadow">
<div class="card-body">
<div class="row mb-2">
<div class="col-12">
<h4 class="card-title">User Details</h4>
</div>
</div>
<div class="row mb-2">
<div class="col-md-6">
<div class="form-group">
<label for="inputFirstName">First Name</label>
......@@ -34,14 +51,40 @@
</div>
</div>
<div class="row">
<div class="row">
<div class="col">
<input id="btnSubmit" type="submit" name="action" value="Save" class="btn btn-primary"/>
<a href="/users/{{ .user.ID }}" class="ml-2 btn btn-secondary" >Cancel</a>
</div>
</div>
</div>
</div>
</form>
<form class="user" method="post" novalidate>
<div class="card mt-4">
<div class="card-body">
<div class="row mb-2">
<div class="col-12">
<h4 class="card-title">Change Password</h4>
<p><small><b>Optional</b>. You can change the users' password by specifying a new one below. Otherwise leave the fields empty.</small></p>
</div>
</div>
<div class="row mb-2">
<div class="col-md-6">
<h4 class="card-title">Change Password</h4>
<p><small><b>Optional</b>. You can change your password by specifying a new one below. Otherwise leave the fields empty.</small></p>
<div class="form-group">
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="" name="Password" value="">
<span class="help-block "><small><a a href="javascript:void(0)" id="btnGeneratePassword"><i class="fal fa-random"></i>Generate random password </a></small></span>
<span class="help-block "><small><a a href="javascript:void(0)" id="btnGeneratePassword"><i class="fas fa-random mr-1"></i>Generate random password </a></small></span>
{{template "invalid-feedback" dict "validationDefaults" $.passwordValidationDefaults "validationErrors" $.validationErrors "fieldName" "Password" }}
</div>
<div class="form-group">
......@@ -51,12 +94,14 @@
</div>
</div>
</div>
<div class="spacer-30"></div>
<div class="row">
<div class="col">
<input id="btnSubmit" type="submit" name="action" value="Save" class="btn btn-primary"/>
<div class="row">
<div class="col">
<input id="btnSubmit2" type="submit" name="action" value="Change Password" class="btn btn-primary btn-sm"/>
</div>
</div>
</div>
</div>
</form>
{{end}}
{{define "js"}}
......
......@@ -3,88 +3,102 @@
{{end}}
{{define "content"}}
<div class="row">
<div class="col">
<div class="row">
<div class="col-auto">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">{{ .user.Name }}</h1>
<!-- a href="/user/update" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="far fa-edit fa-sm text-white-50 mr-1"></i>Edit Details</a -->
</div>
<div class="card shadow">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-dark">User Details</h6>
<div class="dropdown no-arrow show">
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
</a>
<div class="dropdown-menu dropdown-menu-right shadow animated--fade-in" aria-labelledby="dropdownMenuLink" x-placement="bottom-end" style="position: absolute; transform: translate3d(-156px, 19px, 0px); top: 0px; left: 0px; will-change: transform;">
<div class="dropdown-header">Actions</div>
<a href="{{ .urlUsersUpdate }}" class="dropdown-item">Update Details</a>
{{ $ctxUser := ContextUser $._Ctx }}
{{ if $ctxUser }}
{{ if ne .user.ID $ctxUser.ID }}
<form method="post"><input type="hidden" name="action" value="archive" /><input type="submit" value="Archive User" class="dropdown-item"></form>
{{ end }}
{{ end }}
</div>
</div>
</div>
<div class="card-body">
<div class="row mt-2">
<div class="col-lg-2 mb-2">
<img src="{{ .user.Gravatar.Medium }}" alt="gravatar image" class="rounded">
</div>
<div class="col">
<h4>Name</h4>
<p class="font-14">
{{ .user.Name }}
<div class="col-md-5">
<p>
<small>Name</small><br/>
<b>{{ .user.Name }}</b>
</p>
<p>
<small>Email</small><br/>
<b>{{ .user.Email }}</b>
</p>
{{if .user.Timezone }}
<p>
<small>Timezone</small><br/>
<b>{{.user.Timezone }}</b>
</p>
{{end}}
</div>
<div class="col-md-5">
<p>
<small>Role</small><br/>
{{ if .userAccount }}
<b>
{{ range $r := .userAccount.Roles }}
{{ if eq $r "admin" }}
<span class="text-pink"><i class="far fa-kiss-wink-heart mr-1"></i>{{ $r }}</span>
{{else}}
<span class="text-purple"><i class="far fa-user-circle mr-1"></i>{{ $r }}</span>
{{end}}
{{ end }}
</b>
{{ end }}
</p>
<p>
<small>Status</small><br/>
{{ if .userAccount }}
<b>
{{ if eq .userAccount.Status.Value "active" }}
<span class="text-green"><i class="fas fa-circle mr-1"></i>{{ .userAccount.Status.Title }}</span>
{{ else if eq .userAccount.Status.Value "invited" }}
<span class="text-aqua"><i class="far fa-dot-circle mr-1"></i>{{ .userAccount.Status.Title }}</span>
{{else}}
<span class="text-orange"><i class="fas fa-circle-notch mr-1"></i>{{.userAccount.Status.Title }}</span>
{{end}}
</b>
{{ end }}
</p>
<p>
<small>ID</small><br/>
<b>{{ .user.ID }}</b>
</p>
</div>
</div>
<div class="spacer-10"></div>
<p class="font-10"><a href="https://gravatar.com" target="_blank">Update Avatar</a></p>
</div>
<div class="col-auto">
<a href="{{ .urlUsersUpdate }}" class="btn btn-outline-success"><i class="fal fa-edit"></i>Edit Details</a>
{{ $ctxUser := ContextUser $._Ctx }}
{{ if $ctxUser }}
{{ if ne .user.ID $ctxUser.ID }}
<form method="post"><input type="hidden" name="action" value="archive" /><input type="submit" value="Archive"></form>
{{ end }}
{{ end }}
</div>
</div>
<div class="spacer-30"></div>
<div class="row">
<div class="col-md-6">
<p>
<small>Name</small><br/>
<b>{{ .user.Name }}</b>
</p>
<p>
<small>Email</small><br/>
<b>{{ .user.Email }}</b>
</p>
{{if .user.Timezone }}
<p>
<small>Timezone</small><br/>
<b>{{.user.Timezone }}</b>
</p>
{{end}}
<div class="spacer-15"></div>
</div>
<div class="col-md-6">
<p>
<small>Role</small><br/>
{{ if .userAccount }}
<b>
{{ range $r := .userAccount.Roles }}
{{ if eq $r "admin" }}
<span class="text-pink-dark"><i class="far fa-user-astronaut"></i>{{ $r }}</span>
{{else}}
<span class="text-purple-dark"><i class="fal fa-user"></i>{{ $r }}</span>
{{end}}
{{ end }}
</b>
{{ end }}
</p>
<p>
<small>Status</small><br/>
{{ if .userAccount }}
<b>
{{ if eq .userAccount.Status.Value "active" }}
<span class="text-green"><i class="fas fa-circle"></i>{{ .userAccount.Status.Title }}</span>
{{ else if eq .userAccount.Status.Value "invited" }}
<span class="text-blue"><i class="fas fa-unicorn"></i>{{ .userAccount.Status.Title }}</span>
{{else}}
<span class="text-orange"><i class="far fa-circle"></i>{{.userAccount.Status.Title }}</span>
{{end}}
</b>
{{ end }}
</p>
<p>
<small>ID</small><br/>
<b>{{ .user.ID }}</b>
</p>
</div>
</div>
{{end}}
{{define "js"}}
......
......@@ -32,7 +32,7 @@
<!-- ============================================================== -->
<!-- Custom styles for this service applied to all pages -->
<!-- ============================================================== -->
<link href="{{ SiteAssetUrl "/assets/css/custom.css" }}" id="theme" rel="stylesheet">
<link href="{{ SiteAssetUrl "/assets/css/custom.css" }}" rel="stylesheet">
<!-- ============================================================== -->
<!-- Page specific CSS -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment