Skip to content
This repository was archived by the owner on Jan 20, 2022. It is now read-only.

Commit 1f6a541

Browse files
zombiezenzombiezen
committed
add basic styling to Material Design orange
1 parent 430c62a commit 1f6a541

File tree

6 files changed

+204
-160
lines changed

6 files changed

+204
-160
lines changed

‎style.css‎

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,33 +31,57 @@ limitations under the License.
3131
}
3232

3333
html, body {
34+
background: #ffe0b2;
3435
margin: 0;
3536
padding: 0;
3637
}
3738

3839
.pageContainer {
3940
font: 14px/24px Roboto, Helvetica, sans-serif;
40-
margin: 0 auto;
41-
padding: 1ex 1em;
41+
margin: 8px auto 0;
42+
padding: 0 0 16px;
4243
max-width: 650px;
4344
}
4445

46+
.pageHeader {
47+
background: #ef6c00;
48+
color: white;
49+
margin: 0;
50+
padding: 8px 16px;
51+
}
52+
53+
.breadcrumbLink:link {
54+
color: white;
55+
text-decoration: none;
56+
}
57+
58+
.breadcrumbLink:visited {
59+
color: white;
60+
text-decoration: none;
61+
}
62+
63+
.breadcrumbLink:hover {
64+
text-decoration: underline;
65+
}
66+
4567
.pageTitle {
46-
margin: 4px 0 20px;
68+
margin: 4px 0 0;
4769
}
4870

4971
.pageTitle.noBreadcrumb {
50-
margin: 20px 0;
72+
margin: 0;
73+
}
74+
75+
.pageBody {
76+
background: white;
77+
padding: 8px 16px;
5178
}
5279

5380
.error {
5481
font-weight: bold;
5582
color: #730a0a;
5683
}
5784

58-
.formGroup {
59-
}
60-
6185
.entryFields {
6286
display: table;
6387
}
@@ -69,7 +93,7 @@ html, body {
6993
.entryFieldName {
7094
display: table-cell;
7195
font-weight: bold;
72-
padding-right: 1em;
96+
padding-right: 16px;
7397
vertical-align: top;
7498
}
7599

‎templates/editentry.html‎

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -8,56 +8,60 @@
88
</title>
99
<link rel="stylesheet" href="/style.css">
1010
<div class="pageContainer">
11-
<nav class="breadcrumb">
12-
<a href="/groups">Groups</a> &#x279C;
13-
{{with .Group}}
14-
<a href="/groups/{{.ID}}">{{.Name}}</a> &#x279C;
15-
{{end}}
16-
</nav>
17-
<h1 class="pageTitle">
18-
{{if .Entry.UUID.IsZero}}
19-
New Entry
20-
{{else}}
21-
Edit {{.Entry.Title}}
22-
{{end}}
23-
</h1>
24-
<form method="POST">
25-
<div class="entryFields">
26-
<div class="entryFieldGroup">
27-
<div class="entryFieldName">Title</div>
28-
<div class="entryField">
29-
<input type="text" name="title" value="{{.Entry.Title}}">
11+
<div class="pageHeader">
12+
<nav class="breadcrumb">
13+
<a href="/groups" class="breadcrumbLink">Groups</a> &#x279C;
14+
{{with .Group}}
15+
<a href="/groups/{{.ID}}" class="breadcrumbLink">{{.Name}}</a> &#x279C;
16+
{{end}}
17+
</nav>
18+
<h1 class="pageTitle">
19+
{{if .Entry.UUID.IsZero}}
20+
New Entry
21+
{{else}}
22+
Edit {{.Entry.Title}}
23+
{{end}}
24+
</h1>
25+
</div>
26+
<div class="pageBody">
27+
<form method="POST">
28+
<div class="entryFields">
29+
<div class="entryFieldGroup">
30+
<div class="entryFieldName">Title</div>
31+
<div class="entryField">
32+
<input type="text" name="title" value="{{.Entry.Title}}">
33+
</div>
3034
</div>
31-
</div>
32-
<div class="entryFieldGroup">
33-
<div class="entryFieldName">Username</div>
34-
<div class="entryField">
35-
<input type="text" name="username" value="{{.Entry.Username}}">
35+
<div class="entryFieldGroup">
36+
<div class="entryFieldName">Username</div>
37+
<div class="entryField">
38+
<input type="text" name="username" value="{{.Entry.Username}}">
39+
</div>
3640
</div>
37-
</div>
38-
<div class="entryFieldGroup">
39-
<div class="entryFieldName">Password</div>
40-
<div class="entryField">
41-
<input type="text" name="password" value="{{.Entry.Password}}">
41+
<div class="entryFieldGroup">
42+
<div class="entryFieldName">Password</div>
43+
<div class="entryField">
44+
<input type="text" name="password" value="{{.Entry.Password}}">
45+
</div>
4246
</div>
43-
</div>
44-
<div class="entryFieldGroup">
45-
<div class="entryFieldName">URL</div>
46-
<div class="entryField">
47-
<input type="url" name="url" value="{{.Entry.URL}}">
47+
<div class="entryFieldGroup">
48+
<div class="entryFieldName">URL</div>
49+
<div class="entryField">
50+
<input type="url" name="url" value="{{.Entry.URL}}">
51+
</div>
4852
</div>
49-
</div>
50-
<div class="entryFieldGroup">
51-
<div class="entryFieldName">Notes</div>
52-
<div class="entryField">
53-
<textarea name="notes" rows="4" cols="20">{{.Entry.Notes}}</textarea>
53+
<div class="entryFieldGroup">
54+
<div class="entryFieldName">Notes</div>
55+
<div class="entryField">
56+
<textarea name="notes" rows="4" cols="20">{{.Entry.Notes}}</textarea>
57+
</div>
5458
</div>
5559
</div>
56-
</div>
57-
<div>
58-
<a href="/groups/{{.Group.ID}}{{if not .Entry.UUID.IsZero}}/entry/{{.Entry.UUID}}{{end}}">Cancel</a>
59-
<input type="submit" value="Save">
60-
</div>
61-
</form>
60+
<div>
61+
<a href="/groups/{{.Group.ID}}{{if not .Entry.UUID.IsZero}}/entry/{{.Entry.UUID}}{{end}}">Cancel</a>
62+
<input type="submit" value="Save">
63+
</div>
64+
</form>
65+
</div>
6266
</div>
6367
<script src="/js/sandnav.js"></script>

‎templates/entry.html‎

Lines changed: 55 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,64 +2,68 @@
22
<title>{{.Entry.Title}} - Sandpass</title>
33
<link rel="stylesheet" href="/style.css">
44
<div class="pageContainer">
5-
<nav class="breadcrumb">
6-
<a href="/groups">Groups</a> &#x279C;
7-
{{with .Group}}
8-
<a href="/groups/{{.ID}}">{{.Name}}</a> &#x279C;
9-
{{end}}
10-
</nav>
11-
<h1 class="pageTitle">{{.Entry.Title}}</h1>
12-
{{with .Entry}}
13-
<div>
14-
<a href="/groups/{{$.Group.ID}}/entry/{{.UUID}}/edit">Edit</a>
5+
<div class="pageHeader">
6+
<nav class="breadcrumb">
7+
<a href="/groups" class="breadcrumbLink">Groups</a> &#x279C;
8+
{{with .Group}}
9+
<a href="/groups/{{.ID}}" class="breadcrumbLink">{{.Name}}</a> &#x279C;
10+
{{end}}
11+
</nav>
12+
<h1 class="pageTitle">{{.Entry.Title}}</h1>
1513
</div>
16-
<div class="entryFields">
17-
{{with .Username}}
18-
<div class="entryFieldGroup">
19-
<div class="entryFieldName">Username</div>
20-
<div class="entryField entryFieldValue">{{.}}</div>
14+
<div class="pageBody">
15+
{{with .Entry}}
16+
<div>
17+
<a href="/groups/{{$.Group.ID}}/entry/{{.UUID}}/edit">Edit</a>
2118
</div>
22-
{{end}}
23-
{{with .Password}}
24-
<div class="entryFieldGroup">
25-
<div class="entryFieldName">Password</div>
26-
<div class="entryField">
27-
<span id="password" class="entryFieldValue" data-value="{{.}}">**********</span>
28-
<div>
29-
<button id="showpassword">Show</button>
30-
<button id="copypassword" data-clipboard-text="{{.}}">Copy</button>
19+
<div class="entryFields">
20+
{{with .Username}}
21+
<div class="entryFieldGroup">
22+
<div class="entryFieldName">Username</div>
23+
<div class="entryField entryFieldValue">{{.}}</div>
24+
</div>
25+
{{end}}
26+
{{with .Password}}
27+
<div class="entryFieldGroup">
28+
<div class="entryFieldName">Password</div>
29+
<div class="entryField">
30+
<span id="password" class="entryFieldValue" data-value="{{.}}">**********</span>
31+
<div>
32+
<button id="showpassword">Show</button>
33+
<button id="copypassword" data-clipboard-text="{{.}}">Copy</button>
34+
</div>
3135
</div>
3236
</div>
33-
</div>
34-
{{end}}
35-
{{with .URL}}
36-
<div class="entryFieldGroup">
37-
<div class="entryFieldName">URL</div>
38-
<div class="entryField entryFieldValue"><a href="{{.}}" target="_blank">{{.}}</a></div>
39-
</div>
40-
{{end}}
41-
{{with .Notes}}
42-
<div class="entryFieldGroup">
43-
<div class="entryFieldName">Notes</div>
44-
<div class="entryField entryFieldValue">{{.}}</div>
45-
</div>
46-
{{end}}
47-
<div class="entryFieldGroup">
48-
<div class="entryFieldName">Created</div>
49-
<div class="entryField entryFieldValue">{{template "time.html" .CreationTime}}</div>
50-
</div>
51-
<div class="entryFieldGroup">
52-
<div class="entryFieldName">Last Modified</div>
53-
<div class="entryField entryFieldValue">{{template "time.html" .LastModificationTime}}</div>
54-
</div>
55-
{{if not .ExpiryTime.IsZero}}
56-
<div class="entryFieldGroup">
57-
<div class="entryFieldName">Expires</div>
58-
<div class="entryField entryFieldValue">{{template "time.html" .ExpiryTime}}</div>
37+
{{end}}
38+
{{with .URL}}
39+
<div class="entryFieldGroup">
40+
<div class="entryFieldName">URL</div>
41+
<div class="entryField entryFieldValue"><a href="{{.}}" target="_blank">{{.}}</a></div>
42+
</div>
43+
{{end}}
44+
{{with .Notes}}
45+
<div class="entryFieldGroup">
46+
<div class="entryFieldName">Notes</div>
47+
<div class="entryField entryFieldValue">{{.}}</div>
48+
</div>
49+
{{end}}
50+
<div class="entryFieldGroup">
51+
<div class="entryFieldName">Created</div>
52+
<div class="entryField entryFieldValue">{{template "time.html" .CreationTime}}</div>
53+
</div>
54+
<div class="entryFieldGroup">
55+
<div class="entryFieldName">Last Modified</div>
56+
<div class="entryField entryFieldValue">{{template "time.html" .LastModificationTime}}</div>
57+
</div>
58+
{{if not .ExpiryTime.IsZero}}
59+
<div class="entryFieldGroup">
60+
<div class="entryFieldName">Expires</div>
61+
<div class="entryField entryFieldValue">{{template "time.html" .ExpiryTime}}</div>
62+
</div>
63+
{{end}}
5964
</div>
6065
{{end}}
6166
</div>
62-
{{end}}
6367
</div>
6468
<script src="/js/sandnav.js"></script>
6569
<script src="/js/clipboard.js"></script>

‎templates/group.html‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,21 @@
22
<title>{{.Name}} - Sandpass</title>
33
<link rel="stylesheet" href="/style.css">
44
<div class="pageContainer">
5-
<nav class="breadcrumb">
6-
<a href="/groups">Groups</a> &#x279C;
7-
</nav>
8-
<h1 class="pageTitle">{{.Name}}</h1>
9-
<div>
10-
<a href="/groups/{{.ID}}/newentry">New Entry</a>
5+
<div class="pageHeader">
6+
<nav class="breadcrumb">
7+
<a href="/groups" class="breadcrumbLink">Groups</a> &#x279C;
8+
</nav>
9+
<h1 class="pageTitle">{{.Name}}</h1>
10+
</div>
11+
<div class="pageBody">
12+
<div>
13+
<a href="/groups/{{.ID}}/newentry">New Entry</a>
14+
</div>
15+
<ul>
16+
{{range sortEntries .Entries}}
17+
<li><a href="/groups/{{$.ID}}/entry/{{.UUID}}">{{.Title}}</a></li>
18+
{{end}}
19+
</ul>
1120
</div>
12-
<ul>
13-
{{range sortEntries .Entries}}
14-
<li><a href="/groups/{{$.ID}}/entry/{{.UUID}}">{{.Title}}</a></li>
15-
{{end}}
16-
</ul>
1721
</div>
1822
<script src="/js/sandnav.js"></script>

‎templates/groups.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
<title>Groups - Sandpass</title>
33
<link rel="stylesheet" href="/style.css">
44
<div class="pageContainer">
5-
<h1 class="pageTitle noBreadcrumb">Groups</h1>
6-
{{template "grouplist.html" .DB.Root}}
5+
<div class="pageHeader">
6+
<h1 class="pageTitle noBreadcrumb">Groups</h1>
7+
</div>
8+
<div class="pageBody">
9+
{{template "grouplist.html" .DB.Root}}
10+
</div>
711
</div>
812
<script src="/js/sandnav.js"></script>

0 commit comments

Comments
 (0)