Refine HTML layout

This commit improves the page structure and unifies the layout. Some
reusable parts of the HTML code have been moved into
page_fragments.html.
main 0.6.0
Jan Dittberner 5 years ago
parent 1f32b6d25b
commit ea9641cfb1

@ -219,7 +219,9 @@ func motionListHandler(w http.ResponseWriter, r *http.Request) {
templateContext.PrevPage = params.Page - 1 templateContext.PrevPage = params.Page - 1
} }
renderTemplate(w, r, []string{"motions.html", "motion_fragments.html", "header.html", "footer.html"}, templateContext) renderTemplate(w, r, []string{
"motions.html", "motion_fragments.html", "page_fragments.html", "header.html", "footer.html",
}, templateContext)
} }
func motionHandler(w http.ResponseWriter, r *http.Request) { func motionHandler(w http.ResponseWriter, r *http.Request) {
@ -252,7 +254,7 @@ func motionHandler(w http.ResponseWriter, r *http.Request) {
} }
templateContext.Decision = decision templateContext.Decision = decision
templateContext.PageTitle = fmt.Sprintf("Motion %s: %s", decision.Tag, decision.Title) templateContext.PageTitle = fmt.Sprintf("Motion %s: %s", decision.Tag, decision.Title)
renderTemplate(w, r, []string{"motion.html", "motion_fragments.html", "header.html", "footer.html"}, templateContext) renderTemplate(w, r, []string{"motion.html", "motion_fragments.html", "page_fragments.html", "header.html", "footer.html"}, templateContext)
} }
func singleDecisionHandler(w http.ResponseWriter, r *http.Request, tag string, handler func(http.ResponseWriter, *http.Request)) { func singleDecisionHandler(w http.ResponseWriter, r *http.Request, tag string, handler func(http.ResponseWriter, *http.Request)) {
@ -326,7 +328,7 @@ func (a *withDrawMotionAction) Handle(w http.ResponseWriter, r *http.Request) {
http.Error(w, http.StatusText(http.StatusPreconditionFailed), http.StatusPreconditionFailed) http.Error(w, http.StatusText(http.StatusPreconditionFailed), http.StatusPreconditionFailed)
return return
} }
templates := []string{"withdraw_motion_form.html", "header.html", "footer.html", "motion_fragments.html"} templates := []string{"withdraw_motion_form.html", "header.html", "footer.html", "motion_fragments.html", "page_fragments.html"}
var templateContext struct { var templateContext struct {
PageTitle string PageTitle string
Decision *DecisionForDisplay Decision *DecisionForDisplay
@ -366,7 +368,7 @@ func (h *newMotionHandler) Handle(w http.ResponseWriter, r *http.Request) {
http.Error(w, http.StatusText(http.StatusPreconditionFailed), http.StatusPreconditionFailed) http.Error(w, http.StatusText(http.StatusPreconditionFailed), http.StatusPreconditionFailed)
} }
templates := []string{"create_motion_form.html", "header.html", "footer.html"} templates := []string{"create_motion_form.html", "page_fragments.html", "header.html", "footer.html"}
var templateContext struct { var templateContext struct {
Form NewDecisionForm Form NewDecisionForm
PageTitle string PageTitle string
@ -428,7 +430,7 @@ func (a editMotionAction) Handle(w http.ResponseWriter, r *http.Request) {
http.Error(w, http.StatusText(http.StatusPreconditionFailed), http.StatusPreconditionFailed) http.Error(w, http.StatusText(http.StatusPreconditionFailed), http.StatusPreconditionFailed)
return return
} }
templates := []string{"edit_motion_form.html", "header.html", "footer.html"} templates := []string{"edit_motion_form.html", "page_fragments.html", "header.html", "footer.html"}
var templateContext struct { var templateContext struct {
Form EditDecisionForm Form EditDecisionForm
PageTitle string PageTitle string
@ -560,7 +562,7 @@ func (h *directVoteHandler) Handle(w http.ResponseWriter, r *http.Request) {
http.Redirect(w, r, "/motions/", http.StatusMovedPermanently) http.Redirect(w, r, "/motions/", http.StatusMovedPermanently)
default: default:
templates := []string{"direct_vote_form.html", "header.html", "footer.html", "motion_fragments.html"} templates := []string{"direct_vote_form.html", "header.html", "footer.html", "motion_fragments.html", "page_fragments.html"}
var templateContext struct { var templateContext struct {
Decision *DecisionForDisplay Decision *DecisionForDisplay
VoteChoice VoteChoice VoteChoice VoteChoice
@ -601,7 +603,7 @@ func (h *proxyVoteHandler) Handle(w http.ResponseWriter, r *http.Request) {
http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError) http.Error(w, http.StatusText(http.StatusInternalServerError), http.StatusInternalServerError)
return return
} }
templates := []string{"proxy_vote_form.html", "header.html", "footer.html", "motion_fragments.html"} templates := []string{"proxy_vote_form.html", "header.html", "footer.html", "motion_fragments.html", "page_fragments.html"}
var templateContext struct { var templateContext struct {
Form ProxyVoteForm Form ProxyVoteForm
Decision *DecisionForDisplay Decision *DecisionForDisplay

@ -1,12 +1,5 @@
{{ template "header.html" . }} {{ template "header.html" . }}
<div class="column"> {{ template "return_header" . }}
<div class="ui basic segment">
<div class="ui floated right secondary menu">
<a href="/motions/" class="item" title="Show all votes">Back to motions</a>
</div>
</div>
</div>
<div class="column">
<div class="ui raised segment"> <div class="ui raised segment">
<form action="/newmotion/" method="post"> <form action="/newmotion/" method="post">
{{ csrfField }} {{ csrfField }}
@ -70,5 +63,4 @@
</div> </div>
</form> </form>
</div> </div>
</div>
{{ template "footer.html" . }} {{ template "footer.html" . }}

@ -1,17 +1,23 @@
{{ template "header.html" . }} {{ template "header.html" . }}
<div class="column"> <div class="ui container">
<div class="ui negative message"> <div class="ui negative icon message">
<div class="header.html">You are not authorized to act here!</div> <i class="ban icon "></i>
<div class="content">
<div class="header">You are not authorized to act here!</div>
<p>If you think this is in error, please contact the administrator.</p> <p>If you think this is in error, please contact the administrator.</p>
<p>If you don't know who that is, it is definitely not an error ;)</p> <p>If you don't know who that is, it is definitely not an error ;)</p>
{{ if .Emails }} {{ if .Emails }}
<p>The following addresses were present in your certificate:<p> <p>The following addresses were present in your certificate:<p>
<ul> <div class="ui list">
{{ range .Emails }} {{ range .Emails }}
<li>{{ . }}</li> <div class="item">
<i class="address card outline icon"></i>
<div class="content">{{ . }}</div>
</div>
{{ end }} {{ end }}
</ul> </div>
{{ end }} {{ end }}
</div> </div>
</div> </div>
</div>
{{ template "footer.html" . }} {{ template "footer.html" . }}

@ -1,17 +1,9 @@
{{ template "header.html" . }} {{ template "header.html" . }}
<div class="column"> {{ template "return_header" . }}
<div class="ui basic segment">
<div class="ui floated right secondary menu">
<a href="/motions/" class="item" title="Show all votes">Back to motions</a>
</div>
</div>
</div>
{{ with .Decision }} {{ with .Decision }}
<div class="column">
<div class="ui raised segment"> <div class="ui raised segment">
{{ template "motion_fragment" . }} {{ template "motion_fragment" . }}
</div> </div>
</div>
{{ end }} {{ end }}
<form action="/vote/{{ .Decision.Tag }}/{{ .VoteChoice }}" method="post"> <form action="/vote/{{ .Decision.Tag }}/{{ .VoteChoice }}" method="post">
{{ csrfField }} {{ csrfField }}

@ -1,13 +1,8 @@
{{ template "header.html" . }} {{ template "header.html" . }}
<div class="column"> {{ template "return_header" . }}
<div class="ui floated right secondary menu">
<a href="/motions/" class="item" title="Show all votes">Back to
motions</a>
</div>
</div>
<div class="column">
<div class="ui raised segment"> <div class="ui raised segment">
<form action="/motions/{{ .Form.Decision.Tag }}/edit" method="post"> <form action="/motions/{{ .Form.Decision.Tag }}/edit" method="post">
{{ csrfField }}
<div class="ui form{{ if .Form.Errors }} error{{ end }}"> <div class="ui form{{ if .Form.Errors }} error{{ end }}">
<div class="three fields"> <div class="three fields">
<div class="field"> <div class="field">
@ -68,5 +63,4 @@
</div> </div>
</form> </form>
</div> </div>
</div>
{{ template "footer.html" . }} {{ template "footer.html" . }}

@ -7,11 +7,27 @@
<link rel="stylesheet" type="text/css" href="/static/semantic.min.css"/> <link rel="stylesheet" type="text/css" href="/static/semantic.min.css"/>
<script type="text/javascript" src="/static/jquery.min.js"></script> <script type="text/javascript" src="/static/jquery.min.js"></script>
<script type="text/javascript" src="/static/semantic.min.js"></script> <script type="text/javascript" src="/static/semantic.min.js"></script>
<link rel="icon" href="/static/images/favicon.ico">
</head> </head>
<body class="site"> <body id="cacert-boardvoting">
<div class="pusher">
<div class="ui vertical masthead center aligned segment">
<div class="ui left secondary container">
<img src="/static/images/CAcert-logo-colour.svg" alt="CAcert" height="40rem"/>
</div>
<div class="ui text container">
<h1 class="ui header">
{{ template "pagetitle" . }}
{{ if .Voter }}
<div class="ui left pointing label">Authenticated as {{ .Voter.Name }} &lt;{{ .Voter.Reminder }}&gt;
</div>{{ end }}
</h1>
</div>
</div>
</div>
<div class="ui container"> <div class="ui container">
<h1 class="ui header">{{ template "pagetitle" . }}{{ if .Voter }}<div class="ui left pointing label">Authenticated as {{ .Voter.Name }} &lt;{{ .Voter.Reminder }}&gt;</div>{{ end }}</h1>
{{ with .Flashes }} {{ with .Flashes }}
<div class="basic segment">
<div class="ui info message"> <div class="ui info message">
<i class="close icon"></i> <i class="close icon"></i>
<div class="ui list"> <div class="ui list">
@ -20,7 +36,6 @@
{{ end }} {{ end }}
</div> </div>
</div> </div>
{{ end }}
</div> </div>
<div class="ui one column grid container"> {{ end }}
{{ end }} {{ end }}

@ -1,19 +1,20 @@
{{ template "header.html" . }} {{ template "header.html" . }}
{{ $voter := .Voter }} {{ $voter := .Voter }}
<div class="column">
<div class="ui basic segment"> <div class="ui basic segment">
<div class="ui floated right secondary menu"> <div class="ui secondary pointing menu">
<a href="/motions/" class="item" title="Show all votes">All votes</a> <a href="/motions/" class="item" title="Show all votes">All votes</a>
{{ if $voter }}<a href="/motions/?unvoted=1" class="item" title="Show my outstanding votes">My outstanding votes</a>{{ end }} {{ if $voter }}
<a href="/motions/?unvoted=1" class="item" title="Show my outstanding votes">My outstanding votes</a>
<div class="right item">
<a class="ui primary button" href="/newmotion/">New motion</a>
</div> </div>
{{ end }}
</div> </div>
</div> </div>
{{ with .Decision }} {{ with .Decision }}
<div class="column">
<div class="ui raised segment"> <div class="ui raised segment">
{{ template "motion_fragment" . }} {{ template "motion_fragment" . }}
{{ if $voter }}{{ template "motion_actions" . }}{{ end }} {{ if $voter }}{{ template "motion_actions" . }}{{ end }}
</div> </div>
</div>
{{ end}} {{ end}}
{{ template "footer.html" . }} {{ template "footer.html" . }}

@ -49,16 +49,20 @@
</table> </table>
{{ end }} {{ end }}
{{ define "status_class" }}{{ if eq . 0 }}blue{{ else if eq . 1 }}green{{ else if eq . -1 }}red{{ else if eq . -2 }}grey {{ define "status_class" }}{{ if eq . 0 }}blue{{ else if eq . 1 }}green{{ else if eq . -1 }}red{{ else if eq . -2 }}grey{{ end }}{{ end }}
{{ end }}{{ end }}
{{ define "motion_actions" }} {{ define "motion_actions" }}
{{ if eq .Status 0 }} {{ if eq .Status 0 }}
<a class="ui compact right labeled green icon button" href="/vote/{{ .Tag }}/aye"><i class="check circle icon"></i> Aye</a> <a class="ui compact right labeled green icon button" href="/vote/{{ .Tag }}/aye"><i
<a class="ui compact right labeled red icon button" href="/vote/{{ .Tag }}/naye"><i class="minus circle icon"></i> Naye</a> class="check circle icon"></i> Aye</a>
<a class="ui compact right labeled grey icon button" href="/vote/{{ .Tag }}/abstain"><i class="circle icon"></i> Abstain</a> <a class="ui compact right labeled red icon button" href="/vote/{{ .Tag }}/naye"><i
<a class="ui compact left labeled icon button" href="/proxy/{{ .Tag }}"><i class="users icon"></i> Proxy Vote</a> class="minus circle icon"></i> Naye</a>
<a class="ui compact right labeled grey icon button" href="/vote/{{ .Tag }}/abstain"><i class="circle icon"></i>
Abstain</a>
<a class="ui compact left labeled icon button" href="/proxy/{{ .Tag }}"><i class="users icon"></i> Proxy
Vote</a>
<a class="ui compact left labeled icon button" href="/motions/{{ .Tag }}/edit"><i class="edit icon"></i> Modify</a> <a class="ui compact left labeled icon button" href="/motions/{{ .Tag }}/edit"><i class="edit icon"></i> Modify</a>
<a class="ui compact left labeled icon button" href="/motions/{{ .Tag }}/withdraw"><i class="trash icon"></i> Withdraw</a> <a class="ui compact left labeled icon button" href="/motions/{{ .Tag }}/withdraw"><i class="trash icon"></i>
Withdraw</a>
{{ end }} {{ end }}
{{ end }} {{ end }}

@ -1,52 +1,45 @@
{{ template "header.html" . }} {{ template "header.html" . }}
{{ $voter := .Voter }} {{ $voter := .Voter }}
<div class="column"> {{ $page := . }}
<div class="ui basic segment"> <div class="ui basic segment">
<div class="ui floated right secondary menu"> <div class="ui secondary pointing menu">
<a href="/motions/" class="{{ if not .Params.Flags.Unvoted }}active {{ end }}item" title="Show all votes">All
<a href="/motions/" class="{{ if not .Params.Flags.Unvoted }}active {{ end }}item" title="Show all votes">All votes</a> votes</a>
{{ if $voter }}<a href="/motions/?unvoted=1" class="{{ if .Params.Flags.Unvoted }}active {{ end}}item" title="Show my outstanding votes">My outstanding votes</a>{{ end }} {{ if $voter }}
</div> <a href="/motions/?unvoted=1" class="{{ if .Params.Flags.Unvoted }}active {{ end}}item"
{{ if $voter }}<a class="ui primary button" href="/newmotion/">New motion</a>{{ end }} title="Show my outstanding votes">My outstanding votes</a>
{{ if .PrevPage -}} <div class="right item">
<a href="?page={{ .PrevPage }}{{ if .Params.Flags.Unvoted }}&unvoted=1{{ end }}" <a class="ui primary button" href="/newmotion/">New motion</a>
class="ui left labeled icon button" title="newer motions"><i class="left arrow icon"></i> newer</a> </div>
{{- end }} {{ end }}
{{ if .NextPage -}}
<a href="?page={{ .NextPage }}{{ if .Params.Flags.Unvoted }}&unvoted=1{{ end }}"
class="ui right labeled icon button" title="older motions"><i class="right arrow icon"></i> older</a>
{{- end }}
</div> </div>
</div> </div>
{{ if .Decisions }} {{ if .Decisions }}
<div class="ui labeled icon menu">
{{ template "pagination_fragment" $page }}
</div>
{{ range .Decisions }} {{ range .Decisions }}
<div class="column">
<div class="ui raised segment"> <div class="ui raised segment">
{{ template "motion_fragment" . }} {{ template "motion_fragment" . }}
{{ if $voter }}{{ template "motion_actions" . }}{{ end }} {{ if $voter }}{{ template "motion_actions" . }}{{ end }}
</div> </div>
</div>
{{ end }} {{ end }}
<div class="column"> <div class="ui labeled icon menu">
<div class="ui basic segment"> {{ template "pagination_fragment" $page }}
{{ if $voter }}<a class="ui primary button" href="/newmotion/">New motion</a>{{ end }}
{{ if .PrevPage -}}
<a href="?page={{ .PrevPage }}{{ if .Params.Flags.Unvoted }}&unvoted=1{{ end }}"
class="ui left labeled icon button" title="newer motions">
<i class="left arrow icon"></i> newer</a>
{{- end }}
{{ if .NextPage -}}
<a href="?page={{ .NextPage }}{{ if .Params.Flags.Unvoted }}&unvoted=1{{ end }}"
class="ui right labeled icon button" title="older motions">
<i class="right arrow icon"></i> older</a>
{{- end }}
</div>
</div> </div>
{{ else }} {{ else }}
<div class="ui basic segment">
<div class="ui icon message">
<i class="inbox icon"></i>
<div class="content">
<div class="header">No motions available</div>
{{ if .Params.Flags.Unvoted }} {{ if .Params.Flags.Unvoted }}
<p>There are no motions requiring a vote from you.</p> <p>There are no motions requiring a vote from you.</p>
{{ else }} {{ else }}
<p>There are no motions in the system yet.</p> <p>There are no motions in the system yet.</p>
{{ end }} {{ end }}
</div>
</div>
</div>
{{ end }} {{ end }}
{{ template "footer.html" . }} {{ template "footer.html" . }}

@ -0,0 +1,20 @@
{{ define "pagination_fragment" }}
{{ if .PrevPage -}}
<a class="item" href="?page={{ .PrevPage }}{{ if .Params.Flags.Unvoted }}&unvoted=1{{ end }}">
<i class="left arrow icon"></i> newer
</a>
{{- end }}
{{ if .NextPage -}}
<a class="right item" href="?page={{ .NextPage }}{{ if .Params.Flags.Unvoted }}&unvoted=1{{ end }}">
<i class="right arrow icon"></i> older
</a>
{{- end }}
{{ end }}
{{ define "return_header" }}
<div class="ui basic segment">
<div class="ui secondary pointing menu">
<a href="/motions/" class="item" title="Show all votes">Back to motions</a>
</div>
</div>
{{ end }}

@ -1,14 +1,6 @@
{{ template "header.html" . }} {{ template "header.html" . }}
{{ template "return_header" . }}
{{ $form := .Form }} {{ $form := .Form }}
<div class="column">
<div class="ui basic segment">
<div class="ui floated right secondary menu">
<a href="/motions/" class="item" title="Show all votes">Back to
motions</a>
</div>
</div>
</div>
<div class="column">
<div class="ui raised segment"> <div class="ui raised segment">
{{ with .Decision }} {{ with .Decision }}
{{ template "motion_fragment" . }} {{ template "motion_fragment" . }}
@ -52,5 +44,4 @@
</div> </div>
</form> </form>
</div> </div>
</div>
{{ template "footer.html" . }} {{ template "footer.html" . }}

@ -1,22 +1,17 @@
{{ template "header.html" . }} {{ template "header.html" . }}
<div class="column"> {{ template "return_header" . }}
<div class="ui basic segment">
<div class="ui floated right secondary menu">
<a href="/motions/" class="item" title="Show all votes">Back to motions</a>
</div>
</div>
</div>
{{ with .Decision }} {{ with .Decision }}
<div class="column">
<div class="ui raised segment"> <div class="ui raised segment">
{{ template "motion_fragment" . }} {{ template "motion_fragment" . }}
</div> </div>
</div>
{{ end }} {{ end }}
<div class="ui basic segment">
<form action="/motions/{{ .Decision.Tag }}/withdraw" method="post"> <form action="/motions/{{ .Decision.Tag }}/withdraw" method="post">
{{ csrfField }} {{ csrfField }}
<div class="ui form"> <div class="ui form">
<button class="ui primary left labeled icon button" type="submit"><i class="trash icon"></i> Withdraw</button> <button class="ui primary left labeled icon button" type="submit"><i class="trash icon"></i> Withdraw
</button>
</div> </div>
</form> </form>
</div>
{{ template "footer.html" . }} {{ template "footer.html" . }}
Loading…
Cancel
Save