From 7f9009fed7cccd5fcee6122467c804d257900a98 Mon Sep 17 00:00:00 2001 From: Lucas Brown Date: Mon, 5 Aug 2019 13:25:49 -0800 Subject: [PATCH] Enhancements to formatting of user pages in web app. --- cmd/web-app/static/assets/css/custom.css | 94 ++++++++++ .../templates/content/account-view.gohtml | 4 +- .../templates/content/user-update.gohtml | 113 +++++++++---- .../templates/content/user-view.gohtml | 40 +++-- .../templates/content/users-create.gohtml | 120 +++++++------ .../templates/content/users-index.gohtml | 9 +- .../templates/content/users-update.gohtml | 67 ++++++-- .../templates/content/users-view.gohtml | 160 ++++++++++-------- cmd/web-app/templates/layouts/base.gohtml | 2 +- 9 files changed, 416 insertions(+), 193 deletions(-) diff --git a/cmd/web-app/static/assets/css/custom.css b/cmd/web-app/static/assets/css/custom.css index 8b13789..a387a4b 100644 --- a/cmd/web-app/static/assets/css/custom.css +++ b/cmd/web-app/static/assets/css/custom.css @@ -1 +1,95 @@ + + +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; +} + diff --git a/cmd/web-app/templates/content/account-view.gohtml b/cmd/web-app/templates/content/account-view.gohtml index 62f76ad..31ed6f9 100644 --- a/cmd/web-app/templates/content/account-view.gohtml +++ b/cmd/web-app/templates/content/account-view.gohtml @@ -14,14 +14,14 @@
-
Account Details
+
Account Details
Actions
- Update Account Details + Update Details
diff --git a/cmd/web-app/templates/content/user-update.gohtml b/cmd/web-app/templates/content/user-update.gohtml index 24f66c4..a21e31c 100644 --- a/cmd/web-app/templates/content/user-update.gohtml +++ b/cmd/web-app/templates/content/user-update.gohtml @@ -9,48 +9,79 @@
-
-
-
- - - {{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "FirstName" }} + +
+
+ +
+
+ +

Your Details

+
-
- - - {{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "LastName" }} + + +
+
+
+ + + {{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "FirstName" }} +
+
+ + + {{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "LastName" }} +
+
+ + + {{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "Email" }} +
+
+ + + {{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "Timezone" }} +
+
-
- - - {{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "Email" }} -
-
- - - {{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "Timezone" }} +
+
+ + Cancel +
+ +
-
-
- - Cancel -
-
+
-
+ + +
+
+ +
+
+ +

Change Password

+

Optional. You can change your password by specifying a new one below. Otherwise leave the fields empty.

+ +
+
+ +
+
-

Change Password

-

Optional. You can change your password by specifying a new one below. Otherwise leave the fields empty.

+
@@ -63,12 +94,20 @@ {{template "invalid-feedback" dict "validationDefaults" $.passwordValidationDefaults "validationErrors" $.validationErrors "fieldName" "PasswordConfirm" }}
+ +
+ + +
+
+ +
+
+
-
-
- -
+ + {{end}} {{define "js"}} diff --git a/cmd/web-app/templates/content/user-view.gohtml b/cmd/web-app/templates/content/user-view.gohtml index 8d1022d..60584fa 100644 --- a/cmd/web-app/templates/content/user-view.gohtml +++ b/cmd/web-app/templates/content/user-view.gohtml @@ -6,27 +6,35 @@

My Profile

- Edit Details +
-
-
-
-
- gravatar image -
-
-

{{ .user.Name }}

-

Update Avatar

-
+
+ +
+
User Details
+
+ + + +
+
Actions
+ Update Details + Update Avatar
+
-
-
+ +
+
+ gravatar image +
+ +

Name
{{ .user.Name }} @@ -42,7 +50,7 @@

{{end}}
-
+

Role
{{ if .userAccount }} @@ -77,6 +85,10 @@

+ +
+
+ {{end}} {{define "js"}} diff --git a/cmd/web-app/templates/content/users-create.gohtml b/cmd/web-app/templates/content/users-create.gohtml index 086da6f..9ceb2f9 100644 --- a/cmd/web-app/templates/content/users-create.gohtml +++ b/cmd/web-app/templates/content/users-create.gohtml @@ -3,66 +3,80 @@ {{end}} {{define "content"}} -
-
-
-
- - - {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "UserCreateRequest.FirstName" }} -
-
- - - {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "UserCreateRequest.LastName" }} -
-
- - - {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "UserCreateRequest.Email" }} -
-
- - - {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "UserCreateRequest.Timezone" }} -
-
- - - Generate random password - {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "UserCreateRequest.Password" }} -
-
- - - {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "UserCreateRequest.PasswordConfirm" }} -
-
- - - {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Roles" }} +
+

Create User

+
+ + + +
+
+ + +
+
+
+ + + {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "UserCreateRequest.FirstName" }} +
+
+ + + {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "UserCreateRequest.LastName" }} +
+
+ + + {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "UserCreateRequest.Email" }} +
+
+ + + {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "UserCreateRequest.Timezone" }} +
+
+ + + Generate random password + {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "UserCreateRequest.Password" }} +
+
+ + + {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "UserCreateRequest.PasswordConfirm" }} +
+ +
+ + + {{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Roles" }} +
+ +
-
-
+ +
+ Cancel
diff --git a/cmd/web-app/templates/content/users-index.gohtml b/cmd/web-app/templates/content/users-index.gohtml index fb3ad91..22b4585 100644 --- a/cmd/web-app/templates/content/users-index.gohtml +++ b/cmd/web-app/templates/content/users-index.gohtml @@ -1,10 +1,15 @@ {{define "title"}}Users{{end}} {{define "content"}} - Create User + +
+

Users

+ Create User +
+
-
+
{{ template "partials/datatable/html" . }}
diff --git a/cmd/web-app/templates/content/users-update.gohtml b/cmd/web-app/templates/content/users-update.gohtml index 75a9eda..ac4aa11 100644 --- a/cmd/web-app/templates/content/users-update.gohtml +++ b/cmd/web-app/templates/content/users-update.gohtml @@ -1,10 +1,27 @@ -{{define "title"}}Update Profile{{end}} +{{define "title"}}Update User {{end}} {{define "style"}} {{end}} {{define "content"}} + +
+

Update User

+
+ + -
+ +
+
+ +
+
+ +

User Details

+
+
+ +
@@ -34,14 +51,40 @@
-
+
+
+ + Cancel +
+
+ + +
+
+ + + +
+ + +
+
+ +
+
+ +

Change Password

+

Optional. You can change the users' password by specifying a new one below. Otherwise leave the fields empty.

+ +
+
+ +
-

Change Password

-

Optional. You can change your password by specifying a new one below. Otherwise leave the fields empty.

-
+
- Generate random password + Generate random password {{template "invalid-feedback" dict "validationDefaults" $.passwordValidationDefaults "validationErrors" $.validationErrors "fieldName" "Password" }}
@@ -51,12 +94,14 @@
-
-
-
- +
+
+ +
+
+ {{end}} {{define "js"}} diff --git a/cmd/web-app/templates/content/users-view.gohtml b/cmd/web-app/templates/content/users-view.gohtml index c6521e7..26f8fd8 100644 --- a/cmd/web-app/templates/content/users-view.gohtml +++ b/cmd/web-app/templates/content/users-view.gohtml @@ -3,88 +3,102 @@ {{end}} {{define "content"}} -
-
-
-
+ + + +
+

{{ .user.Name }}

+ +
+ + +
+ +
+
User Details
+
+ + + +
+
Actions
+ + Update Details + {{ $ctxUser := ContextUser $._Ctx }} + {{ if $ctxUser }} + {{ if ne .user.ID $ctxUser.ID }} +
+ {{ end }} + {{ end }} + +
+
+
+ +
+ + +
+
gravatar image
-
-

Name

-

- {{ .user.Name }} + +

+

+ Name
+ {{ .user.Name }} +

+

+ Email
+ {{ .user.Email }} +

+ {{if .user.Timezone }} +

+ Timezone
+ {{.user.Timezone }} +

+ {{end}} +
+
+

+ Role
+ {{ if .userAccount }} + + {{ range $r := .userAccount.Roles }} + {{ if eq $r "admin" }} + {{ $r }} + {{else}} + {{ $r }} + {{end}} + {{ end }} + + {{ end }} +

+

+ Status
+ {{ if .userAccount }} + + {{ if eq .userAccount.Status.Value "active" }} + {{ .userAccount.Status.Title }} + {{ else if eq .userAccount.Status.Value "invited" }} + {{ .userAccount.Status.Title }} + {{else}} + {{.userAccount.Status.Title }} + {{end}} + + {{ end }} +

+

+ ID
+ {{ .user.ID }}

-
-

Update Avatar

-
-
- Edit Details - {{ $ctxUser := ContextUser $._Ctx }} - {{ if $ctxUser }} - {{ if ne .user.ID $ctxUser.ID }} -
- {{ end }} - {{ end }} +
-
-
-
-

- Name
- {{ .user.Name }} -

-

- Email
- {{ .user.Email }} -

- {{if .user.Timezone }} -

- Timezone
- {{.user.Timezone }} -

- {{end}} -
-
-
-

- Role
- {{ if .userAccount }} - - {{ range $r := .userAccount.Roles }} - {{ if eq $r "admin" }} - {{ $r }} - {{else}} - {{ $r }} - {{end}} - {{ end }} - - {{ end }} -

-

- Status
- {{ if .userAccount }} - - {{ if eq .userAccount.Status.Value "active" }} - {{ .userAccount.Status.Title }} - {{ else if eq .userAccount.Status.Value "invited" }} - {{ .userAccount.Status.Title }} - {{else}} - {{.userAccount.Status.Title }} - {{end}} - - {{ end }} -

-

- ID
- {{ .user.ID }} -

-
-
{{end}} {{define "js"}} diff --git a/cmd/web-app/templates/layouts/base.gohtml b/cmd/web-app/templates/layouts/base.gohtml index 488c043..bc0a0be 100644 --- a/cmd/web-app/templates/layouts/base.gohtml +++ b/cmd/web-app/templates/layouts/base.gohtml @@ -32,7 +32,7 @@ - +