Commit 69a74ac3 authored by Lucas Brown's avatar Lucas Brown

Enhanced formatting for project pages.

parent 9fbab53b
......@@ -23,6 +23,18 @@ div.dataTables_wrapper div.dataTables_filter label {
margin-bottom: 0px;
}
div.dataTables_wrapper div.dataTables_filter input {
font-size: .8rem;
font-weight: 400;
border-radius: 0.35rem;
font-weight: normal;
border: 1px solid rgb(166, 166, 166);
color: #858796;
}
div.dataTables_wrapper div.dataTables_info {
flex: 0 0 50%;
max-width: 50%;
......@@ -93,3 +105,7 @@ div.dataTable_card a.paginate_button.current {
background-color: #007bff;
}
.alert p:last-child {
margin-bottom: 0;
}
......@@ -56,9 +56,9 @@
<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>
<span class="text-green"><i class="fas fa-circle mr-1"></i>{{ .account.Status.Title }}</span>
{{else}}
<span class="text-orange"><i class="far fa-circle"></i>{{.account.Status.Title }}</span>
<span class="text-orange"><i class="fas fa-circle-notch mr-1"></i>{{.account.Status.Title }}</span>
{{end}}
</b>
</p>
......
......@@ -5,20 +5,32 @@
{{define "content"}}
{{ if .imgResizeDisabled }}
<h3>Image Resize Not enabled</h3>
AWS credentials must be set and then the following configs be set as well.
<h1 class="h3 text-red">Image Resize Not enabled</h1>
<p>AWS credentials must be set and then the following configs be set as well.</p>
<pre>
export WEB_APP_SERVICE_S3_BUCKET_PUBLIC=example-bucket-public
export WEB_APP_SERVICE_STATICFILES_IMG_RESIZE_ENABLED=1
</pre>
{{ else }}
<h3>S3ImgSrcLarge</h3>
<p>320, 480, 800</p>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Responsive Images</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>
<p>This SaaS Starter Kit includes functions to resize images automatically and render the src of an image tag with an array of source URLs. The functions are custom functions that are rendered with the GO templates.</p>
<pre class="mb-4">&#x7B;&#x7B; FUNCTION_NAME $._ctx "RELATIVE_PATH_TO_IMAGE_HERE" &#x7D;&#x7D;</pre>
<h5>S3ImgSrcLarge</h5>
<p>Generates an array of three images from the source file with widths of 320, 480 and 800.</p>
<img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}/><br/>
HTML: <pre>&lt;img &#x7B;&#x7B; S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
Result: <pre>&lt;img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre>
<p class="mb-0 mt-2">HTML:</p><pre>&lt;img &#x7B;&#x7B; S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" &#x7D;&#x7D;&gt;</pre>
<p class="mb-0">Result:</p><pre>&lt;img {{ S3ImgSrcLarge $._ctx "/images/example-image-resize-galaxy-3000x1600.png" }}&gt;</pre></p>
<h3>S3ImgThumbSrcLarge</h3>
<p>320, 480, 800</p>
......
......@@ -3,23 +3,36 @@
{{end}}
{{define "content"}}
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Create Project</h1>
</div>
<form class="user" method="post" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="inputName">Name</label>
<input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "Name" }}"
placeholder="enter name" name="Name" id="inputName" value="{{ .form.Name }}" required>
{{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Name" }}
<div class="card shadow">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="inputName">Project Name</label>
<input type="text" class="form-control {{ ValidationFieldClass $.validationErrors "Name" }}"
placeholder="Enter name for your project" name="Name" id="inputName" value="{{ .form.Name }}" required>
{{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Name" }}
</div>
</div>
</div>
</div>
</div>
<div class="spacer-30"></div>
<div class="row">
<div class="row mt-4">
<div class="col">
<input id="btnSubmit" type="submit" name="action" value="Save" class="btn btn-primary"/>
<a href="/projects" class="ml-2 btn btn-secondary" >Cancel</a>
</div>
</div>
</form>
{{end}}
{{define "js"}}
......
{{define "title"}}Projects{{end}}
{{define "content"}}
{{ if HasRole $._Ctx "admin" }}
<a href="{{ .urlProjectsCreate }}">Create Project</a>
{{ end }}
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Projects</h1>
{{ if HasRole $._Ctx "admin" }}
<a href="{{ .urlProjectsCreate }}" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i class="fas fa-folder-plus fa-sm text-white-50 mr-1"></i>Create Project</a>
{{ end }}
</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>
......
......@@ -3,8 +3,25 @@
{{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 Project</h1>
</div>
<form class="user" method="post" novalidate>
<div class="row">
<div class="card shadow mb-4">
<div class="card-body">
<div class="row mb-2">
<div class="col-12">
<h4 class="card-title">Project Details</h4>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="inputName">Name</label>
......@@ -24,7 +41,10 @@
</div>
</div>
</div>
<div class="spacer-30"></div>
</div>
</div>
<div class="row">
<div class="col">
<input id="btnSubmit" type="submit" name="action" value="Save" class="btn btn-primary"/>
......
......@@ -3,54 +3,61 @@
{{end}}
{{define "content"}}
<div class="row">
<div class="col">
<div class="row">
<div class="col">
<h4>Name</h4>
<p class="font-14">
{{ .project.Name }}
</p>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">{{ .project.Name }}</h1>
<!-- a href="{{ .urlProjectsUpdate }}" 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 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-dark">Project 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="{{ .urlProjectsUpdate }}">Update Details</a>
{{ if HasRole $._Ctx "admin" }}
<form method="post"><input type="hidden" name="action" value="archive" /><input type="submit" value="Archive Project" class="dropdown-item"></form>
{{ end }}
</div>
</div>
</div>
<div class="col-auto">
<a href="{{ .urlProjectsUpdate }}" class="btn btn-outline-success"><i class="fal fa-edit"></i>Edit Details</a>
{{ if HasRole $._Ctx "admin" }}
<form method="post"><input type="hidden" name="action" value="archive" /><input type="submit" value="Archive"></form>
{{ end }}
</div>
</div>
<div class="card-body">
<div class="spacer-30"></div>
<div class="row">
<div class="col-md-6">
<p>
<small>Name</small><br/>
<b>{{ .project.Name }}</b>
</p>
<p>
<small>Status</small><br/>
{{ if .project }}
<b>
{{ if eq .project.Status.Value "active" }}
<span class="text-green"><i class="fas fa-circle mr-1"></i>{{ .project.Status.Title }}</span>
{{else}}
<span class="text-orange"><i class="fas fa-circle-notch mr-1"></i>{{.project.Status.Title }}</span>
{{end}}
</b>
{{ end }}
</p>
</div>
<div class="col-md-6">
<p>
<small>ID</small><br/>
<b>{{ .project.ID }}</b>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>
<small>Name</small><br/>
<b>{{ .project.Name }}</b>
</p>
<div class="spacer-15"></div>
</div>
<div class="col-md-6">
<p>
<small>Status</small><br/>
{{ if .project }}
<b>
{{ if eq .project.Status.Value "active" }}
<span class="text-green"><i class="fas fa-circle"></i>{{ .project.Status.Title }}</span>
{{else}}
<span class="text-orange"><i class="far fa-circle"></i>{{.project.Status.Title }}</span>
{{end}}
</b>
{{ end }}
</p>
<p>
<small>ID</small><br/>
<b>{{ .project.ID }}</b>
</p>
</div>
</div>
{{end}}
{{define "js"}}
......
......@@ -13,7 +13,6 @@
<div class="card shadow">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
......@@ -55,6 +54,24 @@
<div class="form-group">
<label for="inputRoles">Roles</label>
<span class="help-block "><small>- Select at least one role.</small></span>
{{ range $r := .roles.Options }}
{{ $selectRole := false }}
{{ range $fr := $.form.Roles }}
{{ if eq $r.Value $fr }}{{ $selectRole = true }}{{ end }}
{{ end }}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="{{ $r.Value }}" id="defaultCheck1" {{ if $selectRole }}checked="checked"{{ end }}>
<label class="form-check-label" for="defaultCheck1">
{{ $r.Title }}
</label>
</div>
{{ end }}
<select class="form-control {{ ValidationFieldClass $.validationErrors "Roles" }}" id="inputRoles" name="Roles" multiple="multiple">
{{ range $r := .roles.Options }}
{{ $selectRole := false }}
......
......@@ -48,6 +48,7 @@
</select>
{{template "invalid-feedback" dict "validationDefaults" $.validationDefaults "validationErrors" $.validationErrors "fieldName" "Timezone" }}
</div>
</div>
</div>
......
......@@ -3,7 +3,7 @@
<html lang="en">
<head>
<title>
{{block "title" .}}{{end}} Web App
{{block "title" .}}{{end}} - SaaS Web App
</title>
<meta charset="utf-8">
......
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