Commit 85c04b76 authored by Lucas Brown's avatar Lucas Brown

updates to user and account pages along with fixed fontawesome icons.

parent 6680064c
......@@ -3243,6 +3243,28 @@ input[type="button"].btn-block {
width: 100%;
}
.text-blue {
color: #4e73df;
}
.text-green {
color: #1cc88a;
}
.text-aqua {
color: #36b9cc;
}
.text-orange {
color: #f6c23e;
}
.text-red {
color: #e74a3b;
}
.text-purple {
color: #52489C;
}
.text-pink {
color: #D741A7;
}
.fade {
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
......@@ -10606,7 +10628,7 @@ a:focus {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-top: 70px;
padding-top: 0px;
}
#wrapper #content-wrapper {
......@@ -10621,6 +10643,14 @@ a:focus {
flex: 1 0 auto;
}
#wrapper.website {
padding-top: 70px;
}
#page-content {
padding-bottom: 5em;
}
.container,
.container-fluid {
padding-left: 1.5rem;
......@@ -10970,7 +11000,7 @@ a:focus {
border: 0;
font-weight: 900;
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-family: 'FontAwesome';
}
.sidebar .nav-item.dropdown.show .dropdown-toggle::after,
......@@ -11247,7 +11277,7 @@ a:focus {
.sidebar #sidebarToggle::after {
font-weight: 900;
content: '\f104';
font-family: 'Font Awesome 5 Free';
font-family: 'FontAwesome';
margin-right: 0.1rem;
}
......@@ -11266,7 +11296,7 @@ a:focus {
.sidebar.toggled #sidebarToggle::after {
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-family: 'FontAwesome';
margin-left: 0.25rem;
}
......@@ -11350,7 +11380,7 @@ a:focus {
border: 0;
font-weight: 900;
content: '\f107';
font-family: 'Font Awesome 5 Free';
font-family: 'FontAwesome';
}
.sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
content: '\f105';
......@@ -11531,6 +11561,11 @@ a:focus {
color: rgba(255, 255, 255, 0.5);
}
#buildinfo {
margin-top: 2em;
font-size: 12px;
}
.btn-circle {
border-radius: 100%;
height: 2.5rem;
......@@ -11622,7 +11657,7 @@ a:focus {
line-height: 51px;
font-weight: 900;
content: '\f107';
font-family: 'Font Awesome 5 Free';
font-family: 'FontAwesome';
color: #d1d3e2;
}
......
......@@ -3,50 +3,81 @@
{{end}}
{{define "content"}}
<div class="row">
<div class="col-auto">
<a href="/account/update" class="btn btn-outline-success"><i class="fal fa-edit"></i>Edit Details</a>
</div>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Account</h1>
<!-- a href="/account/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="spacer-30"></div>
<div class="row">
<div class="col-md-6">
<p>
<small>Name</small><br/>
<b>{{ .account.Name }}</b>
</p>
{{ if .account.City }}
<p>
<small>Address</small><br/>
{{if .account.Address1 }}
<b>{{ .account.Address1 }}{{ if .account.Address2 }},{{ .account.Address2 }}{{ end }}</b>
<br/>
{{end}}
<b>{{ .account.City }}, {{ .account.Region }}, {{ .account.Zipcode }}</b>
</p>
{{end}}
<p>
<small>Timezone</small><br/>
<b>{{.account.Timezone }}</b>
</p>
</div>
<div class="col-md-6">
<p>
<small>Status</small><br/>
<b>
{{ if eq .account.Status.Value "active" }}
<span class="text-green"><i class="fas fa-circle"></i>{{ .account.Status.Title }}</span>
{{else}}
<span class="text-orange"><i class="far fa-circle"></i>{{.account.Status.Title }}</span>
{{end}}
</b>
</p>
<p>
<small>ID</small><br/>
<b>{{ .account.ID }}</b>
</p>
<div class="col">
<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>
<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>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<p>
<small>Name</small><br/>
<b>{{ .account.Name }}</b>
</p>
{{ if .account.City }}
<p>
<small>Address</small><br/>
{{if .account.Address1 }}
<b>{{ .account.Address1 }}{{ if .account.Address2 }},{{ .account.Address2 }}{{ end }}</b>
<br/>
{{end}}
<b>{{ .account.City }}, {{ .account.Region }}, {{ .account.Zipcode }}</b>
{{ if .account.Country }}
<br/><b>{{ .account.Country }}</b>
{{end}}
</p>
{{end}}
<p>
<small>Timezone</small><br/>
<b>{{.account.Timezone }}</b>
</p>
</div>
<div class="col-md-6">
<p>
<small>Status</small><br/>
<b>
{{ if eq .account.Status.Value "active" }}
<span class="text-green"><i class="fas fa-circle"></i>{{ .account.Status.Title }}</span>
{{else}}
<span class="text-orange"><i class="far fa-circle"></i>{{.account.Status.Title }}</span>
{{end}}
</b>
</p>
<p>
<small>ID</small><br/>
<b>{{ .account.ID }}</b>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
{{end}}
{{define "js"}}
......
......@@ -2,7 +2,7 @@
{{define "style"}}
{{end}}
{{ define "partials/page-wrapper" }}
{{ define "partials/app-wrapper" }}
<div class="container-fluid">
<!-- Error Text -->
......
......@@ -4,37 +4,40 @@
{{end}}
{{define "content"}}
<p>S3ImgSrcLarge
<img {{ S3ImgSrcLarge $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
</p>
<h3>S3ImgSrcLarge</h3>
<p>320, 480, 800</p>
<img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
<p>S3ImgThumbSrcLarge
<img {{ S3ImgThumbSrcLarge $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
</p>
<h3>S3ImgThumbSrcLarge</h3>
<p>320, 480, 800</p>
<img {{ S3ImgThumbSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
<p>S3ImgSrcMedium
<img {{ S3ImgSrcMedium $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
</p>
<h3>S3ImgSrcMedium</h3>
<p>320, 640</p>
<img {{ S3ImgSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
<p>S3ImgThumbSrcMedium
<img {{ S3ImgThumbSrcMedium $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
</p>
<h3>S3ImgThumbSrcMedium</h3>
<p>320, 640</p>
<img {{ S3ImgThumbSrcMedium $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
<p>S3ImgSrcSmall
<img {{ S3ImgSrcSmall $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
</p>
<p>S3ImgThumbSrcSmall
<img {{ S3ImgThumbSrcSmall $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
</p>
<h3>S3ImgSrcSmall</h3>
<p>320</p>
<img {{ S3ImgSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
<p>S3ImgSrc
<img {{ S3ImgSrc $._ctx "/assets/images/glacier-example-pic.jpg" $.imgSizes }}/>
</p>
<p>S3ImgUrl
<img src="{{ S3ImgUrl $._ctx "/assets/images/glacier-example-pic.jpg" 200 }}" />
</p>
<h3>S3ImgThumbSrcSmall</h3>
<p>320</p>
<img {{ S3ImgThumbSrcSmall $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/>
<h3>S3ImgSrc</h3>
<p>returns Src array</p>
<img {{ S3ImgSrc $._ctx "/images/example-image-resize-galaxy-3000x1600.png" $.imgSizes }}/>
<h3>S3ImgUrl</h3>
<p>Returns URL for file on S3</p>
<img src="{{ S3ImgUrl $._ctx "/images/example-image-resize-galaxy-3000x1600.png" 200 }}" />
{{end}}
{{define "js"}}
......
......@@ -3,39 +3,27 @@
{{end}}
{{define "content"}}
Welcome to the web app
<p>S3ImgSrcLarge
<img {{ S3ImgSrcLarge $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
</p>
<p>S3ImgThumbSrcLarge
<img {{ S3ImgThumbSrcLarge $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
</p>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
</div>
<p>S3ImgSrcMedium
<img {{ S3ImgSrcMedium $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
</p>
<p>S3ImgThumbSrcMedium
<img {{ S3ImgThumbSrcMedium $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
</p>
<div class="row">
<div class="col">
<p>S3ImgSrcSmall
<img {{ S3ImgSrcSmall $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
</p>
<div class="card">
<div class="card-body">
<p>S3ImgThumbSrcSmall
<img {{ S3ImgThumbSrcSmall $._ctx "/assets/images/glacier-example-pic.jpg" }}/>
</p>
<p>Welcome to the web app</p>
<p>S3ImgSrc
<img {{ S3ImgSrc $._ctx "/assets/images/glacier-example-pic.jpg" $.imgSizes }}/>
</p>
</div>
</div>
</div>
</div>
<p>S3ImgUrl
<img src="{{ S3ImgUrl $._ctx "/assets/images/glacier-example-pic.jpg" 200 }}" />
</p>
{{end}}
......
......@@ -3,7 +3,7 @@
{{define "style"}}
{{end}}
{{ define "partials/page-wrapper" }}
{{ define "partials/app-wrapper" }}
<div class="container" id="page-content">
<div class="card o-hidden border-0 shadow-lg my-5">
......
......@@ -3,7 +3,7 @@
{{define "style"}}
{{end}}
{{ define "partials/page-wrapper" }}
{{ define "partials/app-wrapper" }}
<div class="container" id="page-content">
<!-- Outer Row -->
......
......@@ -3,7 +3,7 @@
{{define "style"}}
{{end}}
{{ define "partials/page-wrapper" }}
{{ define "partials/app-wrapper" }}
<div class="container" id="page-content">
<!-- Outer Row -->
......
......@@ -3,7 +3,7 @@
{{define "style"}}
{{end}}
{{ define "partials/page-wrapper" }}
{{ define "partials/app-wrapper" }}
<div class="container" id="page-content">
<!-- Outer Row -->
......
......@@ -2,7 +2,7 @@
{{define "style"}}
{{end}}
{{ define "partials/page-wrapper" }}
{{ define "partials/app-wrapper" }}
<div class="container" id="page-content">
<!-- Outer Row -->
......
......@@ -3,6 +3,11 @@
{{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 My Profile</h1>
</div>
<form class="user" method="post" novalidate>
<div class="row">
<div class="col-md-6">
......@@ -29,19 +34,27 @@
<option value="{{ $t }}" {{ if CmpString $t $.form.Timezone }}selected="selected"{{ end }}>{{ $t }}</option>
{{ end }}
</select>
{{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Timezone" }}
{{template "invalid-feedback" dict "validationDefaults" $.userValidationDefaults "validationErrors" $.validationErrors "fieldName" "Timezone" }}
</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>
<div class="row">
<form class="user" method="post" novalidate>
<div class="row mt-5">
<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="">
<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,10 +64,9 @@
</div>
</div>
</div>
<div class="spacer-30"></div>
<div class="row">
<div class="row mt-2">
<div class="col">
<input id="btnSubmit" type="submit" name="action" value="Save" class="btn btn-primary"/>
<input id="btnSubmit2" type="submit" name="action" value="Change Password" class="btn btn-primary"/>
</div>
</div>
</form>
......
......@@ -3,6 +3,13 @@
{{end}}
{{define "content"}}
<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>
</div>
<div class="row">
<div class="col">
<div class="row">
......@@ -10,23 +17,15 @@
<img src="{{ .user.Gravatar.Medium }}" alt="gravatar image" class="rounded">
</div>
<div class="col">
<h4>Name</h4>
<p class="font-14">
{{ .user.Name }}
</p>
<h4>{{ .user.Name }}</h4>
<p><small><a href="https://gravatar.com" target="_blank">Update Avatar</a></small></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="/user/update" class="btn btn-outline-success"><i class="fal fa-edit"></i>Edit Details</a>
</div>
</div>
<div class="spacer-30"></div>
<div class="row">
<div class="row mt-5">
<div class="col-md-6">
<p>
<small>Name</small><br/>
......@@ -42,7 +41,6 @@
<b>{{.user.Timezone }}</b>
</p>
{{end}}
<div class="spacer-15"></div>
</div>
<div class="col-md-6">
<p>
......@@ -51,9 +49,9 @@
<b>
{{ range $r := .userAccount.Roles }}
{{ if eq $r "admin" }}
<span class="text-pink-dark"><i class="far fa-user-astronaut"></i>{{ $r }}</span>
<span class="text-pink"><i class="far fa-kiss-wink-heart mr-1"></i>{{ $r }}</span>
{{else}}
<span class="text-purple-dark"><i class="fal fa-user"></i>{{ $r }}</span>
<span class="text-purple"><i class="far fa-user-circle mr-1"></i>{{ $r }}</span>
{{end}}
{{ end }}
</b>
......@@ -64,11 +62,11 @@
{{ if .userAccount }}
<b>
{{ if eq .userAccount.Status.Value "active" }}
<span class="text-green"><i class="fas fa-circle"></i>{{ .userAccount.Status.Title }}</span>
<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-blue"><i class="fas fa-unicorn"></i>{{ .userAccount.Status.Title }}</span>
<span class="text-aqua"><i class="far fa-dot-circle mr-1"></i>{{ .userAccount.Status.Title }}</span>
{{else}}
<span class="text-orange"><i class="far fa-circle"></i>{{.userAccount.Status.Title }}</span>
<span class="text-orange"><i class="fas fa-circle-notch mr-1"></i>{{.userAccount.Status.Title }}</span>
{{end}}
</b>
{{ end }}
......
......@@ -2,7 +2,7 @@
{{define "style"}}
{{end}}
{{ define "partials/page-wrapper" }}
{{ define "partials/app-wrapper" }}
<div class="container" id="page-content">
<!-- Outer Row -->
......
......@@ -41,7 +41,7 @@
</head>
<body id="page-top">
{{ template "partials/page-wrapper" . }}
{{ template "partials/app-wrapper" . }}
<!-- ============================================================== -->
<!-- Logout Modal -->
......
......@@ -54,7 +54,7 @@
<!-- ============================================================== -->
<!-- Page Wrapper -->
<!-- ============================================================== -->
<div id="wrapper">
<div id="wrapper" class="website">
<!-- ============================================================== -->
<!-- Content Wrapper -->
......
{{ define "partials/sidebar" }}
{{ define "partials/app-sidebar" }}
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
......
{{ define "partials/topbar" }}
{{ define "partials/app-topbar" }}
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
......@@ -192,7 +192,7 @@
</a>
{{ end }}
<a class="dropdown-item" href="/support">
<a class="dropdown-item" href="/support" target="_blank">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
Support
</a>
......
{{ define "partials/page-wrapper" }}
{{ define "partials/app-wrapper" }}
<!-- ============================================================== -->
<!-- Page Wrapper -->
<!-- ============================================================== -->
<div id="wrapper">
{{ template "partials/sidebar" . }}
{{ template "partials/app-sidebar" . }}
<!-- ============================================================== -->
<!-- Content Wrapper -->
......@@ -18,7 +18,7 @@
<!-- ============================================================== -->
<!-- Topbar -->
<!-- ============================================================== -->
{{ template "partials/topbar" . }}
{{ template "partials/app-topbar" . }}
<!-- End of Topbar -->
<!-- ============================================================== -->
......@@ -40,13 +40,13 @@
<!-- Footer -->
<!-- ============================================================== -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>
&copy; Copyright 2019 Geeks Accelerator<br/>
{{ template "partials/buildinfo" . }}
</span>
<div class="container-fluid">
<div class="copyright ">
<span>&copy; Copyright 2019 Geeks Accelerator</span>
</div>
{{ template "partials/buildinfo" . }}
</div>
</footer>
<!-- End of Footer -->
......
{{ define "partials/buildinfo" }}
<p style="font-size: 12px;{{if eq ._Service.ENV "prod"}}display: none;{{end}}">
<p id="buildinfo" style="{{if eq ._Service.ENV "prod"}}display: none;{{end}}">
{{if ne ._Service.BuildInfo.CiCommitTag ""}}
Tag: {{ ._Service.BuildInfo.CiCommitRefName }}@{{ ._Service.BuildInfo.CiCommitSha }}<br/>
{{else}}
......
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