Skip to content

Commit

Permalink
Improve content centering
Browse files Browse the repository at this point in the history 
The Pure.css grid was not ideal here. With a fixed max-width the
appearance is more uniform and also works well with wide displays.
  • Loading branch information
@codesoap
codesoap committed Aug 25, 2024
1 parent 0c7a7ca commit cc03592
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 125 deletions.
46 changes: 25 additions & 21 deletions cmd/mycolog/assets/main.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

150 changes: 73 additions & 77 deletions cmd/mycolog/tmpl/details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,85 +28,81 @@
<p>{{$typeName}} updated</p>
</div>
{{end}}
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-24 pure-u-lg-1-8 pure-u-xl-1-4"></div>
<div class="pure-u-1 pure-u-md-22-24 pure-u-lg-3-4 pure-u-xl-1-2">
<hgroup>
<h1>{{$typeName}} {{.Token}}</h1>
<p>The component ID is #{{.ID}}.
{{if eq 0 (len .Parents) -}}
It was aquired from an external source.
{{else if eq 1 (len .Parents) -}}
It was created from component
{{with index .Parents 0}}<a href="/component/{{.}}">#{{.}}</a>.{{end}}
{{else -}}
It was created from these components:
{{range $i, $id := .Parents -}}
{{- if gt $i 0 -}}, {{end -}}
<a href="/component/{{$id}}">#{{$id}}</a>
{{- end -}}
{{- end -}}
</p>
</hgroup>
<form class="pure-form pure-form-stacked">
<div class="pure-g">
<div class="pure-u-1-2">
<label for="species">
Species (<a href="/change-species/{{.ID}}">change</a>)
</label>
<input type="text" id="species" class="pure-u-23-24"
value="{{.Species}}" readonly>
</div>
<div class="pure-u-1-2">
<label for="transfers">Transfers since Spores</label>
<input type="text" id="transfers" class="pure-u-1"
value="{{if .Transfers}}{{.Transfers}}{{else}}unknown{{end}}" readonly>
</div>
<div class="centered-column padded">
<hgroup>
<h1>{{$typeName}} {{.Token}}</h1>
<p>The component ID is #{{.ID}}.
{{if eq 0 (len .Parents) -}}
It was aquired from an external source.
{{else if eq 1 (len .Parents) -}}
It was created from component
{{with index .Parents 0}}<a href="/component/{{.}}">#{{.}}</a>.{{end}}
{{else -}}
It was created from these components:
{{range $i, $id := .Parents -}}
{{- if gt $i 0 -}}, {{end -}}
<a href="/component/{{$id}}">#{{$id}}</a>
{{- end -}}
{{- end -}}
</p>
</hgroup>
<form class="pure-form pure-form-stacked">
<div class="pure-g">
<div class="pure-u-1-2">
<label for="species">
Species (<a href="/change-species/{{.ID}}">change</a>)
</label>
<input type="text" id="species" class="pure-u-23-24"
value="{{.Species}}" readonly>
</div>
</form>
<form class="pure-form pure-form-stacked" method="POST" onsubmit="registerSubmit()">
<label for="createdAt">{{$createdAtLabel}}</label>
<input type="date" name="createdAt" class="pure-input-1"
value="{{.CreatedAt}}" autocomplete="off"
onchange="registerChange()" required>
<label for="notes">Notes</label>
<textarea id="notes" name="notes" rows="8" class="pure-input-1"
autocomplete="off" onchange="registerChange()">
{{- .Notes -}}
</textarea>
{{- if .Grow}}
<div class="pure-g">
<div id="yield" class="pure-u-1-3 pure-u-md-1-4">
<label for="yield">Yield in Grams</label>
<input type="number" step="any" min="0" id="yieldInput"
class="pure-u-23-24" autocomplete="off" onchange="registerChange()"
name="yield" value="{{with .Yield}}{{.}}{{end}}"/>
</div>
<div id="yieldComment" class="pure-u-2-3 pure-u-md-3-4">
<label for="yieldComment">Remark</label>
<input type="text" name="yieldComment" onchange="registerChange()"
class="pure-u-1" autocomplete="off" value="{{.YieldComment}}"
placeholder="e.g. three fruit bodies from two flushes"/>
</div>
<div class="pure-u-1-2">
<label for="transfers">Transfers since Spores</label>
<input type="text" id="transfers" class="pure-u-1"
value="{{if .Transfers}}{{.Transfers}}{{else}}unknown{{end}}" readonly>
</div>
{{- end}}
<label for="gone" class="pure-checkbox">
<input id="gone" name="gone" type="checkbox" autocomplete="off"
value="true" onchange="registerChange()"{{if .Gone}} checked{{end}}>
{{if .Spores}}These {{$typeName}} are
{{- else}}This {{$typeName}} is{{end}} already gone.
</label>
<a href="{{$backLink}}" class="pure-button">Go back</a>
<a href="/delete-component-dialog/{{.ID}}" class="pure-button">Delete</a>
<button type="submit" class="pure-button pure-button-primary">
Update
</button>
</form>
<hr>
</div>
<div class="pure-u-1 pure-u-md-1-24 pure-u-lg-1-8 pure-u-xl-1-4"></div>
</div>
</form>
<form class="pure-form pure-form-stacked" method="POST" onsubmit="registerSubmit()">
<label for="createdAt">{{$createdAtLabel}}</label>
<input type="date" name="createdAt" class="pure-input-1"
value="{{.CreatedAt}}" autocomplete="off"
onchange="registerChange()" required>
<label for="notes">Notes</label>
<textarea id="notes" name="notes" rows="8" class="pure-input-1"
autocomplete="off" onchange="registerChange()">
{{- .Notes -}}
</textarea>
{{- if .Grow}}
<div class="pure-g">
<div id="yield" class="pure-u-1-3 pure-u-md-1-4">
<label for="yield">Yield in Grams</label>
<input type="number" step="any" min="0" id="yieldInput"
class="pure-u-23-24" autocomplete="off" onchange="registerChange()"
name="yield" value="{{with .Yield}}{{.}}{{end}}"/>
</div>
<div id="yieldComment" class="pure-u-2-3 pure-u-md-3-4">
<label for="yieldComment">Remark</label>
<input type="text" name="yieldComment" onchange="registerChange()"
class="pure-u-1" autocomplete="off" value="{{.YieldComment}}"
placeholder="e.g. three fruit bodies from two flushes"/>
</div>
</div>
{{- end}}
<label for="gone" class="pure-checkbox">
<input id="gone" name="gone" type="checkbox" autocomplete="off"
value="true" onchange="registerChange()"{{if .Gone}} checked{{end}}>
{{if .Spores}}These {{$typeName}} are
{{- else}}This {{$typeName}} is{{end}} already gone.
</label>
<a href="{{$backLink}}" class="pure-button">Go back</a>
<a href="/delete-component-dialog/{{.ID}}" class="pure-button">Delete</a>
<button type="submit" class="pure-button pure-button-primary">
Update
</button>
</form>
<hr>
</div>
<div class="centered">
<div class="centered padded">
{{if and .Graph (not .FullGraph)}}
<a class="pure-button" href="?fullgraph=true">&uarr; Show all predecessors</a>
{{end}}
Expand All @@ -118,6 +114,6 @@ <h1>{{$typeName}} {{.Token}}</h1>
</span>
</div>
{{if .Graph}}
<div class="centered">{{.Graph}}</div>
<div class="centered padded">{{.Graph}}</div>
{{end}}
{{end}}
6 changes: 1 addition & 5 deletions cmd/mycolog/tmpl/intro.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
{{define "title"}}Intro{{end}}
{{define "content"}}
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-8 pure-u-lg-1-5 pure-u-xl-7-24"></div>
<div class="pure-u-1 pure-u-md-3-4 pure-u-lg-3-5 pure-u-xl-10-24">
<div class="centered-column">

<h1>Introduction to mycolog</h1>
<p>
Expand Down Expand Up @@ -97,7 +95,5 @@ <h2>Graphs</h2>
clickable</strong>.
</p>

</div>
<div class="pure-u-1 pure-u-md-1-8 pure-u-lg-1-5 pure-u-xl-7-24"></div>
</div>
{{end}}
44 changes: 22 additions & 22 deletions cmd/mycolog/tmpl/overview.html
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
{{define "filter"}}{{/* Empty fallback. */}}{{end}}
{{define "body"}}
<div class="pure-g">
<div class="sidebar pure-u-1-4 pure-u-md-1-6 pure-menu">
<ul class="pure-menu-list">
<li class="pure-menu-item{{if .IntroSelected}} pure-menu-selected{{end}}">
<a href="/intro" class="pure-menu-link">Intro</a>
</li>
<li class="pure-menu-item{{if .SporesSelected}} pure-menu-selected{{end}}">
<a href="/spores" class="pure-menu-link">Spores</a>
</li>
<li class="pure-menu-item{{if .MycSelected}} pure-menu-selected{{end}}">
<a href="/mycelium" class="pure-menu-link">Mycelium</a>
</li>
<li class="pure-menu-item{{if .SpawnSelected}} pure-menu-selected{{end}}">
<a href="/spawn" class="pure-menu-link">Spawn</a>
</li>
<li class="pure-menu-item{{if .GrowSelected}} pure-menu-selected{{end}}">
<a href="/grows" class="pure-menu-link">Grows</a>
</li>
</ul>
{{template "filter" .}}
</div>
<div class="main pure-u-3-4 pure-u-md-5-6">
<div class="sidebar pure-menu">
<ul class="pure-menu-list">
<li class="pure-menu-item{{if .IntroSelected}} pure-menu-selected{{end}}">
<a href="/intro" class="pure-menu-link">Intro</a>
</li>
<li class="pure-menu-item{{if .SporesSelected}} pure-menu-selected{{end}}">
<a href="/spores" class="pure-menu-link">Spores</a>
</li>
<li class="pure-menu-item{{if .MycSelected}} pure-menu-selected{{end}}">
<a href="/mycelium" class="pure-menu-link">Mycelium</a>
</li>
<li class="pure-menu-item{{if .SpawnSelected}} pure-menu-selected{{end}}">
<a href="/spawn" class="pure-menu-link">Spawn</a>
</li>
<li class="pure-menu-item{{if .GrowSelected}} pure-menu-selected{{end}}">
<a href="/grows" class="pure-menu-link">Grows</a>
</li>
</ul>
{{template "filter" .}}
</div>
<div class="main-wrapper padded">
<div class="main">
{{template "content" .}}
</div>
</div>
Expand Down

0 comments on commit cc03592

Please sign in to comment.