Merge pull request #371 from writeas/design-update

Navigation improvements

account.go

@@ -49,6 +49,7 @@ type (
 		Separator template.HTML
 		IsAdmin   bool
 		CanInvite bool
+		CollAlias string
 	}
 )
 
@@ -840,6 +841,7 @@ func viewEditCollection(app *App, u *User, w http.ResponseWriter, r *http.Reques
 		Collection: c,
 		Silenced:   silenced,
 	}
+	obj.UserPage.CollAlias = c.Alias
 
 	showUserPage(w, "collection", obj)
 	return nil
@@ -1019,6 +1021,7 @@ func viewStats(app *App, u *User, w http.ResponseWriter, r *http.Request) error
 		TopPosts:   topPosts,
 		Silenced:   silenced,
 	}
+	obj.UserPage.CollAlias = c.Alias
 	if app.cfg.App.Federation {
 		folls, err := app.db.GetAPFollowers(c)
 		if err != nil {

less/admin.less

@@ -32,6 +32,19 @@ nav#admin {
 	display: flex;
 	justify-content: center;
 
+	&:not(.pages) {
+		display: block;
+		margin: 0.5em 0;
+		a {
+			margin-left: 0;
+			.rounded(.25em);
+
+			&+a {
+				margin-left: 0.5em;
+			}
+		}
+	}
+
 	a {
 		color: #333;
 		font-family: @sansFont;

less/core.less

@@ -10,6 +10,8 @@
 @proSelectedCol: #71D571;
 @textLinkColor: rgb(0, 0, 238);
 
+@accent: #767676;
+
 body {
 	font-family: @serifFont;
 	font-size-adjust: 0.5;
@@ -743,6 +745,18 @@ input, button, select.inputform, textarea.inputform, a.btn {
 	}
 }
 
+.btn.pager {
+	border: 1px solid @lightNavBorder;
+	font-size: .86em;
+	padding: .5em 1em;
+	white-space: nowrap;
+	font-family: @sansFont;
+	&:hover {
+		text-decoration: none;
+		background: @lightNavBorder;
+	}
+}
+
 div.flat-select {
 	display: inline-block;
 	position: relative;
@@ -965,7 +979,12 @@ footer.contain-me {
 	}
 	ul {
 		&.collections {
+			padding-left: 0;
 			margin-left: 0;
+			h3 {
+				margin-top: 0;
+				font-weight: normal;
+			}
 			li {
 				&.collection {
 					a.title {
@@ -1095,7 +1114,8 @@ body#pad-sub #posts, .atoms {
 		}
 		.electron {
 			font-weight: normal;
-			margin-left: 0.5em;
+			font-size: 0.86em;
+			margin-left: 0.75rem;
 		}
 	}
 	h3, h4 {
@@ -1245,7 +1265,7 @@ header {
 		}
 	}
 	&.singleuser {
-		margin: 0.5em 0.25em;
+		margin: 0.5em 1em 0.5em 0.25em;
 		nav#user-nav {
 			nav > ul > li:first-child {
 				img {
@@ -1253,6 +1273,9 @@ header {
 				}
 			}
 		}
+		.right-side {
+			padding-top: 0.5em;
+		}
 	}
 	.dash-nav {
 		font-weight: bold;
@@ -1547,3 +1570,26 @@ div.row {
 pre.code-block {
 	overflow-x: auto;
 }
+
+#org-nav {
+	font-family: @sansFont;
+	font-size: 1.1em;
+	color: #888;
+
+	em, strong {
+		color: #000;
+	}
+	&+h1 {
+		margin-top: 0.5em;
+	}
+	a:link, a:visited, a:hover {
+		color: @accent;
+	}
+	a:first-child {
+		margin-right: 0.25em;
+	}
+	a.coll-name {
+		font-weight: bold;
+		margin-left: 0.25em;
+	}
+}

less/new-core.less

@@ -127,7 +127,6 @@ textarea {
 			&.collection {
 				a.title {
 					font-size: 1.3em;
-					font-weight: bold;
 				}
 			}
 		}

templates.go

@@ -11,6 +11,7 @@
 package writefreely
 
 import (
+	"errors"
 	"html/template"
 	"io"
 	"io/ioutil"
@@ -38,6 +39,9 @@ var (
 		"localhtml":   localHTML,
 		"tolower":     strings.ToLower,
 		"title":       strings.Title,
+		"hasPrefix":   strings.HasPrefix,
+		"hasSuffix":   strings.HasSuffix,
+		"dict":        dict,
 	}
 )
 
@@ -109,6 +113,7 @@ func initUserPage(parentDir, path, key string) {
 		filepath.Join(parentDir, templatesDir, "user", "include", "header.tmpl"),
 		filepath.Join(parentDir, templatesDir, "user", "include", "footer.tmpl"),
 		filepath.Join(parentDir, templatesDir, "user", "include", "silenced.tmpl"),
+		filepath.Join(parentDir, templatesDir, "user", "include", "nav.tmpl"),
 	))
 }
 
@@ -206,3 +211,19 @@ func localHTML(term, lang string) template.HTML {
 	s = strings.Replace(s, "write.as", "<a href=\"https://writefreely.org\">writefreely</a>", 1)
 	return template.HTML(s)
 }
+
+// from: https://stackoverflow.com/a/18276968/1549194
+func dict(values ...interface{}) (map[string]interface{}, error) {
+	if len(values)%2 != 0 {
+		return nil, errors.New("dict: invalid number of parameters")
+	}
+	dict := make(map[string]interface{}, len(values)/2)
+	for i := 0; i < len(values); i += 2 {
+		key, ok := values[i].(string)
+		if !ok {
+			return nil, errors.New("dict: keys must be strings")
+		}
+		dict[key] = values[i+1]
+	}
+	return dict, nil
+}

templates/user/admin/users.tmpl

@@ -26,7 +26,7 @@
 		{{end}}
 	</table>
 
-	<nav class="pager">
+	<nav class="pager pages">
 		{{range $n := .TotalPages}}<a href="/admin/users{{if ne $n 1}}?p={{$n}}{{end}}" {{if eq $.CurPage $n}}class="selected"{{end}}>{{$n}}</a>{{end}}
 	</nav>
 

templates/user/collection.tmpl

@@ -20,7 +20,12 @@ textarea.section.norm {
 	{{if .Silenced}}
 		{{template "user-silenced"}}
 	{{end}}
-	<h2>Customize {{.DisplayTitle}} <a href="{{if .SingleUser}}/{{else}}/{{.Alias}}/{{end}}">view blog</a></h2>
+
+	{{template "collection-breadcrumbs" .}}
+
+	<h1>Customize</h1>
+
+	{{template "collection-nav" (dict "Alias" .Alias "Path" .Path "SingleUser" .SingleUser)}}
 
 	{{if .Flashes}}<ul class="errors">
 		{{range .Flashes}}<li class="urgent">{{.}}</li>{{end}}

templates/user/collections.tmpl

@@ -12,16 +12,18 @@
 {{end}}
 <h1>Blogs</h1>
 <ul class="atoms collections">
-	{{range $i, $el := .Collections}}<li class="collection"><h3>
-		<a class="title" href="/{{.Alias}}/">{{if .Title}}{{.Title}}{{else}}{{.Alias}}{{end}}</a>
-	</h3> 
-	<h4>
-		<a class="action new-post" href="{{if $.Chorus}}/new{{else}}/{{end}}#{{.Alias}}">new post</a>
-		<a class="action" href="/me/c/{{.Alias}}">customize</a>
-		<a class="action" href="/me/c/{{.Alias}}/stats">stats</a>
-	</h4>
-	{{if .Description}}<p class="description">{{.Description}}</p>{{end}}
-</li>{{end}}
+	{{range $i, $el := .Collections}}<li class="collection">
+		<div class="row lineitem">
+			<div>
+				<h3>
+					<a class="title" href="/{{.Alias}}/" >{{if .Title}}{{.Title}}{{else}}{{.Alias}}{{end}}</a>
+					<span class="electron" {{if .IsPrivate}}style="font-style: italic"{{end}}>{{if .IsPrivate}}private{{else}}{{.DisplayCanonicalURL}}{{end}}</span>
+				</h3>
+				{{template "collection-nav" (dict "Alias" .Alias "Path" $.Path "SingleUser" $.SingleUser "CanPost" true	)}}
+				{{if .Description}}<p class="description">{{.Description}}</p>{{end}}
+			</div>
+		</div>
+	</li>{{end}}
 	<li id="create-collection">
 		{{if not .NewBlogsDisabled}}
 		<form method="POST" action="/api/collections" id="new-collection-form" onsubmit="return createCollection()">

templates/user/include/header.tmpl

@@ -1,76 +1,78 @@
 {{define "user-navigation"}}
 	<header class="{{if .SingleUser}}singleuser{{else}}multiuser{{end}}">
-		{{if .SingleUser}}
-		<nav id="user-nav">
-			<nav class="dropdown-nav">
-				<ul><li><a href="/" title="View blog" class="title">{{.SiteName}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" />
-					<ul>
-						<li><a href="/me/c/{{.Username}}">Customize</a></li>
-						<li><a href="/me/c/{{.Username}}/stats">Stats</a></li>
-						<li class="separator"><hr /></li>
-						{{if .IsAdmin}}<li><a href="/admin">Admin</a></li>{{end}}
-						<li><a href="/me/settings">Settings</a></li>
-						<li><a href="/me/import">Import posts</a></li>
-						<li><a href="/me/export">Export</a></li>
-						<li class="separator"><hr /></li>
-						<li><a href="/me/logout">Log out</a></li>
-					</ul></li>
-				</ul>
-			</nav>
-			<nav class="tabs">
-				<a href="/me/posts/"{{if eq .Path "/me/posts/"}} class="selected"{{end}}>Drafts</a>
-				<a href="/me/new">New Post</a>
-			</nav>
-		</nav>
-		{{else}}
 		<nav id="full-nav">
+		{{if .SingleUser}}
+			<nav id="user-nav">
+				<nav class="dropdown-nav">
+					<ul><li><a href="/" title="View blog" class="title">{{.SiteName}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" />
+						<ul>
+							{{if .IsAdmin}}<li><a href="/admin">Admin dashboard</a></li>{{end}}
+							<li><a href="/me/settings">Account settings</a></li>
+							<li><a href="/me/import">Import posts</a></li>
+							<li><a href="/me/export">Export</a></li>
+							<li class="separator"><hr /></li>
+							<li><a href="/me/logout">Log out</a></li>
+						</ul></li>
+					</ul>
+				</nav>
+				<nav class="tabs">
+					<a href="/me/c/{{.Username}}" {{if and (hasPrefix .Path "/me/c/") (hasSuffix .Path .Username)}}class="selected"{{end}}>Customize</a>
+					<a href="/me/c/{{.Username}}/stats" {{if hasSuffix .Path "/stats"}}class="selected"{{end}}>Stats</a>
+					<a href="/me/posts/"{{if eq .Path "/me/posts/"}} class="selected"{{end}}>Drafts</a>
+				</nav>
+			</nav>
+			<div class="right-side">
+				<a class="simple-btn" href="/me/new">New Post</a>
+			</div>
+		{{else}}
 			<div class="left-side">
 				<h1><a href="/" title="Return to editor">{{.SiteName}}</a></h1>
 			</div>
-		<nav id="user-nav">
-			{{if .Username}}
-			<nav class="dropdown-nav">
-				<ul><li class="has-submenu"><a>{{.Username}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /><ul>
-						{{if .IsAdmin}}<li><a href="/admin">Admin dashboard</a></li>{{end}}
-						<li><a href="/me/settings">Account settings</a></li>
-						<li><a href="/me/import">Import posts</a></li>
-						<li><a href="/me/export">Export</a></li>
-						{{if .CanInvite}}<li><a href="/me/invites">Invite people</a></li>{{end}}
-						<li class="separator"><hr /></li>
-						<li><a href="/me/logout">Log out</a></li>
-					</ul></li>
-				</ul>
-			</nav>
-			{{end}}
-			<nav class="tabs">
-				{{if .SimpleNav}}
-					{{ if not .SingleUser }}
-					{{if and (and .LocalTimeline .CanViewReader) .Chorus}}<a href="/"{{if eq .Path "/"}} class="selected"{{end}}>Home</a>{{end}}
-					{{ end }}
-					<a href="/about">About</a>
-					{{ if not .SingleUser }}
-						{{ if .Username }}
-					{{if gt .MaxBlogs 1}}<a href="/me/c/"{{if eq .Path "/me/c/"}} class="selected"{{end}}>Blogs</a>{{end}}
-					{{if and .Chorus (eq .MaxBlogs 1)}}<a href="/{{.Username}}/"{{if eq .Path (printf "/%s/" .Username)}} class="selected"{{end}}>My Posts</a>{{end}}
-					{{if not .DisableDrafts}}<a href="/me/posts/"{{if eq .Path "/me/posts/"}} class="selected"{{end}}>Drafts</a>{{end}}
-						{{ end }}
-					{{if and (and .LocalTimeline .CanViewReader) (not .Chorus)}}<a href="/read">Reader</a>{{end}}
-					{{if and (and (and .Chorus .OpenRegistration) (not .Username)) (or (not .Private) (ne .Landing ""))}}<a href="/signup"{{if eq .Path "/signup"}} class="selected"{{end}}>Sign up</a>{{end}}
-					{{if .Username}}<a href="/me/logout">Log out</a>{{else}}<a href="/login">Log in</a>{{end}}
-					{{ end }}
-				{{else}}
-					<a href="/me/c/"{{if eq .Path "/me/c/"}} class="selected"{{end}}>Blogs</a>
-					{{if not .DisableDrafts}}<a href="/me/posts/"{{if eq .Path "/me/posts/"}} class="selected"{{end}}>Drafts</a>{{end}}
-					{{if and (and .LocalTimeline .CanViewReader) (not .Chorus)}}<a href="/read">Reader</a>{{end}}
+			<nav id="user-nav">
+				{{if .Username}}
+				<nav class="dropdown-nav">
+					<ul><li class="has-submenu"><a>{{.Username}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /><ul>
+							{{if .IsAdmin}}<li><a href="/admin">Admin dashboard</a></li>{{end}}
+							<li><a href="/me/settings">Account settings</a></li>
+							<li><a href="/me/import">Import posts</a></li>
+							<li><a href="/me/export">Export</a></li>
+							{{if .CanInvite}}<li><a href="/me/invites">Invite people</a></li>{{end}}
+							<li class="separator"><hr /></li>
+							<li><a href="/me/logout">Log out</a></li>
+						</ul></li>
+					</ul>
+				</nav>
 				{{end}}
+				<nav class="tabs">
+					{{if .SimpleNav}}
+						{{ if not .SingleUser }}
+						{{if and (and .LocalTimeline .CanViewReader) .Chorus}}<a href="/"{{if eq .Path "/"}} class="selected"{{end}}>Home</a>{{end}}
+						{{ end }}
+						<a href="/about">About</a>
+						{{ if not .SingleUser }}
+							{{ if .Username }}
+						{{if gt .MaxBlogs 1}}<a href="/me/c/"{{if eq .Path "/me/c/"}} class="selected"{{end}}>Blogs</a>{{end}}
+						{{if and .Chorus (eq .MaxBlogs 1)}}<a href="/{{.Username}}/"{{if eq .Path (printf "/%s/" .Username)}} class="selected"{{end}}>My Posts</a>{{end}}
+						{{if not .DisableDrafts}}<a href="/me/posts/"{{if eq .Path "/me/posts/"}} class="selected"{{end}}>Drafts</a>{{end}}
+							{{ end }}
+						{{if and (and .LocalTimeline .CanViewReader) (not .Chorus)}}<a href="/read">Reader</a>{{end}}
+						{{if and (and (and .Chorus .OpenRegistration) (not .Username)) (or (not .Private) (ne .Landing ""))}}<a href="/signup"{{if eq .Path "/signup"}} class="selected"{{end}}>Sign up</a>{{end}}
+						{{if .Username}}<a href="/me/logout">Log out</a>{{else}}<a href="/login">Log in</a>{{end}}
+						{{ end }}
+					{{else}}
+						<a href="/me/c/"{{if eq .Path "/me/c/"}} class="selected"{{end}}>Blogs</a>
+						{{if not .DisableDrafts}}<a href="/me/posts/"{{if eq .Path "/me/posts/"}} class="selected"{{end}}>Drafts</a>{{end}}
+						{{if and (and .LocalTimeline .CanViewReader) (not .Chorus)}}<a href="/read">Reader</a>{{end}}
+					{{end}}
+				</nav>
 			</nav>
+			{{if .Username}}
+				<div class="right-side">
+					<a class="simple-btn" href="/{{if .CollAlias}}#{{.CollAlias}}{{end}}">New Post</a>
+				</div>
+			{{end}}
+		{{end}}
 		</nav>
-		{{if .Chorus}}{{if .Username}}<div class="right-side">
-					<a class="simple-btn" href="/new">New Post</a>
-				</div>{{end}}
-			</nav>
-		{{end}}
-		{{end}}
 	</header>
 {{end}}
 {{define "header"}}<!DOCTYPE HTML>

templates/user/include/nav.tmpl

@@ -0,0 +1,16 @@
+{{define "collection-breadcrumbs"}}
+    {{if and .Collection (not .SingleUser)}}<nav id="org-nav"><a href="/me/c/">Blogs</a> / <a class="coll-name" href="/{{.Collection.Alias}}/">{{.Collection.DisplayTitle}}</a></nav>{{end}}
+{{end}}
+
+{{define "collection-nav"}}
+    {{if not .SingleUser}}
+    <header class="admin">
+        <nav class="pager">
+            {{if .CanPost}}<a href="{{if .SingleUser}}/me/new{{else}}/#{{.Alias}}{{end}}" class="btn gentlecta">New Post</a>{{end}}
+            <a href="/me/c/{{.Alias}}" {{if and (hasPrefix .Path "/me/c/") (hasSuffix .Path .Alias)}}class="selected"{{end}}>Customize</a>
+            <a href="/me/c/{{.Alias}}/stats" {{if hasSuffix .Path "/stats"}}class="selected"{{end}}>Stats</a>
+            <a href="{{if .SingleUser}}/{{else}}/{{.Alias}}/{{end}}">View Blog &rarr;</a>
+        </nav>
+    </header>
+    {{end}}
+{{end}}

templates/user/settings.tmpl

@@ -16,7 +16,7 @@ h3 { font-weight: normal; }
 	{{if .Silenced}}
 		{{template "user-silenced"}}
 	{{end}}
-	<h1>{{if .IsLogOut}}Before you go...{{else}}Account Settings {{if .IsAdmin}}<a href="/admin">admin settings</a>{{end}}{{end}}</h1>
+	<h1>{{if .IsLogOut}}Before you go...{{else}}Account Settings{{end}}</h1>
 	{{if .Flashes}}<ul class="errors">
 		{{range .Flashes}}<li class="urgent">{{.}}</li>{{end}}
 	</ul>{{end}}

templates/user/stats.tmpl

@@ -20,7 +20,14 @@ td.none {
 	{{if .Silenced}}
 		{{template "user-silenced"}}
 	{{end}}
-	<h2 id="posts-header">{{if .Collection}}{{.Collection.DisplayTitle}} {{end}}Stats</h2>
+
+	{{template "collection-breadcrumbs" .}}
+
+	<h1 id="posts-header">Stats</h1>
+
+	{{if .Collection}}
+		{{template "collection-nav" (dict "Alias" .Collection.Alias "Path" .Path "SingleUser" .SingleUser)}}
+	{{end}}
 
 	<p>Stats for all time.</p>