Deuxfleurs/alps
24
1
Fork 0
Code Issues Pull requests 1 Projects Releases Wiki Activity

Design work for mailbox subscriptions

Browse source
This commit is contained in:
Drew DeVault 2020-11-13 13:23:29 -05:00
parent 18ad982c53
commit 1d0630dde9
3 changed files with 117 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
themes/alps/assets/style.css
View file

@ -127,10 +127,60 @@ footer { text-align: right; }
aside { flex: 0 0 180px; } aside { flex: 0 0 180px; }
aside a,
aside .noselect { width: 100%; display: block; padding: 0.4rem 0 0.4rem 0.5rem; }
aside a.active { font-weight: bold; color: black; text-decoration: none; }
aside img { display: block; } aside img { display: block; }
aside ul {
list-style: none;
margin: 0;
padding: 0;
}
aside li {
width: 100%;
display: flex;
padding: 0.4rem 0 0.4rem 0.5rem;
}
aside li a {
flex-grow: 1;
}
aside .active {
font-weight: bold;
color: black;
text-decoration: none;
}
aside .active,
aside .new.active {
background-color: #f6f6f6;
}
aside .new.active {
color: #008d47;
}
aside button {
margin: 0;
cursor: pointer;
text-decoration: none;
text-align: center;
display: inline-block;
padding: 0 0.3rem;
margin-right: 0.3rem;
border: none;
background: transparent;
}
aside .active button:hover {
background: white;
}
aside button:hover {
background: #f6f6f6;
}
main { main {
flex: 1 100%; flex: 1 100%;
display: flex; display: flex;
@ -151,15 +201,6 @@ main.login > section {
padding: 1rem; padding: 1rem;
} }
aside a.active,
aside a.new.active {
background-color: #f6f6f6;
}
aside a.new.active {
color: #008d47;
}
aside a.new.active, aside a.new.active,
main.create-update { main.create-update {
background-color: #f6fff6; background-color: #f6fff6;
@ -455,6 +496,11 @@ main.create-update .event-date input {
border: none; border: none;
color: #BFA300; color: #BFA300;
font-size: 13pt; font-size: 13pt;
background: transparent;
}
.message-list-unread.message-list-flags .flag-button:hover {
background: #f8f8f8;
} }
.message-list-subject a { color: #77c; } .message-list-subject a { color: #77c; }

2
themes/alps/mailbox.html
View file

@ -5,7 +5,7 @@
<div class="page-wrap"> <div class="page-wrap">
{{ template "aside" . }} {{ template "aside" . }}
<div class="container"> <div class="container">
<form id="messages-form" method="post"></form> <form id="messages-form" method="POST"></form>
<main class="message-list"> <main class="message-list">
<section class="actions"> <section class="actions">
{{ template "messages-header.html" . }} {{ template "messages-header.html" . }}

89
themes/alps/util.html
View file

@ -1,42 +1,69 @@
{{ define "mbox-link" }} {{ define "mbox-link" }}
{{ if not (.HasAttr "\\Noselect") }} {{ if not (.HasAttr "\\Noselect") }}
<a href="{{.URL}}" {{ if .Active }}class="active"{{ end }}> <li {{ if .Active }}class="active"{{ end }}>
{{- if eq .Name "INBOX" -}} <a href="{{.URL}}">
Inbox {{- if eq .Name "INBOX" -}}
{{- else -}} Inbox
{{ .Name }} {{- else -}}
{{- end -}} {{ .Name }}
{{- if .HasAttr "\\HasChildren" }}/{{ end }} {{- end -}}
</a> {{- if .HasAttr "\\HasChildren" }}/{{ end }}
</a>
<!-- TODO: Rig up this form -->
<button
type="submit"
name="subscribe"
value="{{.Name}}"
form="subscribe-form"
{{ if eq .Name "INBOX" }}
title="Unsubscribe"
{{ else }}
title="Subscribe"
{{ end }}
>
{{ if eq .Name "INBOX" }}
◉
{{ else }}
○
{{ end }}
</button>
</li>
{{ else }} {{ else }}
<span class="noselect"> <li class="noselect">
{{.Name}}{{- if .HasAttr "\\HasChildren" }}/{{ end }} {{.Name}}{{- if .HasAttr "\\HasChildren" }}/{{ end }}
</span> </li>
{{ end }} {{ end }}
{{ end }} {{ end }}
{{ define "aside" }} {{ define "aside" }}
<form id="subscribe-form" method="POST"></form>
<aside> <aside>
<!-- the logo image, dimensions 200x32 may be present or not --> <ul>
<a href="/compose" class="new <!-- the logo image, dimensions 200x32 may be present or not -->
{{ if eq $.GlobalData.URL.Path "/compose" }}active{{ end }} <li>
">Compose&nbsp;mail</a> <a href="/compose" class="new
{{ with .CategorizedMailboxes }} {{ if eq $.GlobalData.URL.Path "/compose" }}active{{ end }}
{{ with .Common.Inbox }}{{ template "mbox-link" . }}{{ end }} ">Compose&nbsp;mail</a>
{{ with .Common.Drafts }}{{ template "mbox-link" . }}{{ end }} </li>
{{ with .Common.Sent }}{{ template "mbox-link" . }}{{ end }} {{ with .CategorizedMailboxes }}
{{ with .Common.Junk }}{{ template "mbox-link" . }}{{ end }} {{ with .Common.Inbox }}{{ template "mbox-link" . }}{{ end }}
{{ with .Common.Trash }}{{ template "mbox-link" . }}{{ end }} {{ with .Common.Drafts }}{{ template "mbox-link" . }}{{ end }}
{{ with .Common.Archive }}{{ template "mbox-link" . }}{{ end }} {{ with .Common.Sent }}{{ template "mbox-link" . }}{{ end }}
{{ if .Additional }} {{ with .Common.Junk }}{{ template "mbox-link" . }}{{ end }}
<hr /> {{ with .Common.Trash }}{{ template "mbox-link" . }}{{ end }}
{{ range .Additional }} {{ with .Common.Archive }}{{ template "mbox-link" . }}{{ end }}
{{ template "mbox-link" . }} {{ if .Additional }}
{{ end }} <hr />
{{ end }} {{ range .Additional }}
{{ end }} {{ template "mbox-link" . }}
<a href="/new-mailbox" class="new {{ end }}
{{ if eq $.GlobalData.URL.Path "/new-mailbox" }}active{{ end }} {{ end }}
">Create&nbsp;new&nbsp;folder</a> {{ end }}
<li>
<a href="/new-mailbox" class="new
{{ if eq $.GlobalData.URL.Path "/new-mailbox" }}active{{ end }}
">Create&nbsp;new&nbsp;folder</a>
</li>
</ul>
</aside> </aside>
{{ end }} {{ end }}