Skip to content

Commit

Permalink
Usability tweaks to header
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidmerfield
davidmerfield committed Mar 29, 2019
1 parent 430fd6e commit a0e51d1
Show file tree
Hide file tree
Showing 3 changed files with 189 additions and 106 deletions.
24 changes: 15 additions & 9 deletions app/brochure/routes/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,21 @@ brochure.get("/css/finder.css", function(req, res) {
res.send(finder.css());
});

brochure.use(function(req, res, next) {
res.locals.base = "";
res.locals.selected = {};

req.originalUrl.split('/').forEach(function(slug){
res.locals.selected[slug] = 'selected';
});

console.log(res.locals.selected, req.originalUrl);
// Handle index page of site.
if (req.originalUrl === '/') res.locals.selected.index = 'selected';

next();
});

brochure.get("/about", function(req, res) {
res.locals.title = "Blot – About";
res.render("about");
Expand Down Expand Up @@ -76,39 +91,30 @@ brochure.use("/sign-up", require("./sign-up"));

brochure.use("/log-in", require("./log-in"));

brochure.use(function(req, res, next) {
res.locals.base = "";
res.locals.selected = {};
next();
});

brochure.param("section", function(req, res, next, section) {
var title = TITLES[section] || capitalize(section);
res.locals.sectionTitle = title;
res.locals.selected[section] = "selected";
res.locals.breadcrumbs.add(title, section);
next();
});

brochure.param("subsection", function(req, res, next, subsection) {
var title = TITLES[subsection] || capitalize(subsection);
res.locals.sectionTitle = title;
res.locals.selected[subsection] = "selected";
res.locals.breadcrumbs.add(title, subsection);
next();
});

brochure.param("subsubsection", function(req, res, next, subsubsection) {
var title = TITLES[subsubsection] || capitalize(subsubsection);
res.locals.sectionTitle = title;
res.locals.selected[subsubsection] = "selected";
res.locals.breadcrumbs.add(title, subsubsection);
next();
});

brochure.get("/", require("./featured"), function(req, res) {
res.locals.title = "Blot – A blogging platform with no interface";
res.locals.selected.index = "selected";
res.locals.featured = res.locals.featured.slice(0, 6);
res.render("index");
});
Expand Down
269 changes: 173 additions & 96 deletions app/brochure/views/layout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,132 +2,209 @@

<body>
<link rel="stylesheet" href="/css/tex.css">
<main class="has-sidebar">
<style type="text/css">
header row,
header ul {
display: flex;
align-items: baseline;
max-width: none
}

header {
padding: 0 1em;
margin: 1em
}

header a {
color: #005eb8
}
/*
header a:visited {
color: #330072
}*/

header a:focus {
background-color: #ffb81c;
box-shadow: 0 0 0 4px #ffb81c;
color: #212b32;
outline: 4px solid transparent;
outline-offset: 4px
}

header a:hover {
background-color: #ffcd60;
box-shadow: 0 0 0 4px #ffcd60;
color: #212b32;
text-decoration: none
}

a:active {
color: #374047
}

header a.selected {
color: black;
text-decoration: none;
}

header hr {
border: none;
border-bottom: 1px solid #e7e7e5
}

header a svg {
fill: white;
stroke: #aaa;
width: 23px;
margin-right: 0.5em;
vertical-align: text-bottom;
}

.header-button {
background-color: red;
box-shadow: 0 0 0 4px red;
color: white;
margin: 0 0.5em;
text-decoration: none
}

header ul {
list-style-type: none;
padding: 0;
margin: 0
}

header ul a {
text-decoration: underline;
}

header ul a:hover {
text-decoration: none;
background: gold
}

header .logo {
margin-right: 1em;
margin-left: 0.25em
}

header li {
margin: 0 0.5em;
}

</style>
<header>

<label for="toggle">—<br>—<br>—</label>

<input type="checkbox" name="toggle" id="toggle">

<ul class="sidebar">
<row>

<a class="logo {{selected.index}}" href="/">{{>logo}} Blot is a blogging platform with no interface</a>

{{^user}}
<a class="in {{selected.index}}" href="/">Blot is a blogging platform<br> with no interface</a>
<br>
<div class="buttons">
<a class="action-button" href="/log-in">Log in</a>
<a class="action-button" href="/sign-up">Sign up</a>
</div>
{{/user}}
{{#user}}
<a class="in {{selected.index}}" href="/">←  Back to dashboard</a>
<br>
{{/user}}
<br>
<li class="has-list {{selected.publishing}}">
<input type="checkbox" name="publishing" id="publishing" {{#selected.publishing}} checked{{/selected.publishing}}> <a href="{{{base}}}/publishing">How to use Blot<label for="publishing"></label>
</a>
<ul>
<li class="{{selected.pages}}">
<a href="{{{base}}}/publishing/pages">Pages</a>
</li>
<li class="{{selected.drafts}}">
<a href="{{{base}}}/publishing/drafts">Drafts</a>
</li>
<li class="{{selected.public-files}}">
<a href="{{{base}}}/publishing/public-files">Public files</a>
</li>
<li class="{{selected.metadata}}">
<a href="{{{base}}}/publishing/metadata">Metadata</a>
</li>
<li>
<a href="/publishing/formatting">Formatting guide</a>
</li>
<li class="{{selected.configuring}}">
<a href="{{{base}}}/publishing/configuring">Configuring your blog</a>
</li>
<li class="{{selected.domain}}">
<a href="{{{base}}}/publishing/domain">Use your own domain</a>
</li>
<!-- <li class="{{selected.redirects}}">
<a href="{{{base}}}/publishing/redirects">Redirects</a>
</li>
<li class="{{selected.urls}}">
<a href="{{{base}}}/publishing/urls">URLs</a>
</li>
-->

<li>
<a class="{{selected.publishing}}" href="{{{base}}}/publishing">How to use Blot<label for="publishing"></label>
</a>

</li>
<li>
<a class="{{selected.templates}}" href="{{{base}}}/templates">Templates</a>

<li class="{{selected.redirects}}">
<a href="{{{base}}}/publishing/clients">Clients</a>
</li>
<!--
<li class="{{selected.account-billing}}">
<a href="{{{base}}}/account-billing">Account and billing</a>
</li>
-->
<li><a class="{{selected.news}}" href="/news">News</a></li>
<li><a class="{{selected.about}}" href="/about">About</a></li>
<li><a class="{{selected.support}}" href="/support">Support</a></li>

<br>
</ul>
<a class="header-button" href="/log-in">Log in</a>
<a class="header-button" href="/sign-up">Sign up</a>
</row>
<hr>

{{#if selected.publishing}}
<ul>
<li>
<a class="{{selected.pages}}" href="{{{base}}}/publishing/pages">Pages</a>
</li>
<li>
<a class="{{selected.drafts}}" href="{{{base}}}/publishing/drafts">Drafts</a>
</li>
<li>
<a class="{{selected.public-files}}" href="{{{base}}}/publishing/public-files">Public files</a>
</li>
<li>
<a class="{{selected.metadata}}" href="{{{base}}}/publishing/metadata">Metadata</a>
</li>
<li>
<a class="{{selected.formatting}}" href="/publishing/formatting">Formatting guide</a>
</li>
<li>
<a class="{{selected.configuring}}" href="{{{base}}}/publishing/configuring">Configuring your blog</a>
</li>
<li>
<a class="{{selected.domain}}" href="{{{base}}}/publishing/domain">Use your own domain</a>
</li>

<li class="{{selected.redirects}}">
<a href="{{{base}}}/publishing/clients">Clients</a>
</li>
<li class="has-list {{selected.templates}}">
<input type="checkbox" name="templates" id="templates" {{#selected.templates}} checked{{/selected.templates}}> <a href="{{{base}}}/templates">Templates<label for="templates"></label>
</a>
<ul>

<li class="{{selected.console}}">
<a href="{{{base}}}/templates/console">
<br>
</ul>
{{/if}}

{{#if selected.templates}}
<ul>

<li >
<a class="{{selected.console}}" href="{{{base}}}/templates/console">
Console
</a>
</li>
<li class="{{selected.default}}">
<a href="{{{base}}}/templates/default">
</li>
<li >
<a class="{{selected.default}}" href="{{{base}}}/templates/default">
Default
</a>
</li>
<li class="{{selected.grid}}">
<a href="{{{base}}}/templates/grid">
</li>
<li >
<a class="{{selected.grid}}" href="{{{base}}}/templates/grid">
Grid
</a>
</li>
<li class="{{selected.magazine}}">
<a href="{{{base}}}/templates/magazine">
</li>
<li >
<a class="{{selected.magazine}}" href="{{{base}}}/templates/magazine">
Magazine
</a>
</li>
<li class="{{selected.photos}}">
<a href="{{{base}}}/templates/photos">
</li>
<li >
<a class="{{selected.photos}}" href="{{{base}}}/templates/photos">
Photos
</a>
</li>
<li class="{{selected.portfolio}}">
<a href="{{{base}}}/templates/portfolio">
</li>
<li >
<a class="{{selected.portfolio}}" href="{{{base}}}/templates/portfolio">
Portfolio
</a>
</li>
<li class="{{selected.rosa}}">
<a href="{{{base}}}/templates/rosa">
</li>
<li >
<a class="{{selected.rosa}}" href="{{{base}}}/templates/rosa">
Rosa
</a>
</li>
<br>
</ul>
</li>

<li class="{{selected.account-billing}}">
<a href="{{{base}}}/account-billing">Account and billing</a>
</li>

<!-- <li>
<a href="/support">Support</a>
</li>
--> <br>

<li><a href="/support">Support</a></li>
<li><a href="/about">About</a></li>
<li><a href="/news">News</a></li>

<!-- <li><a href="/developers">Developers</a></li>
<li><a href="/terms">Terms of use</a></li>
<li><a href="/privacy">Privacy policy</a></li>
-->
<br>
</ul>
{{/if}}
</header>
<main>

<content>
{{> breadcrumbs}}
{{{body}}}
Expand All @@ -137,4 +214,4 @@
{{> footer}}
</body>

</html>
</html>
2 changes: 1 addition & 1 deletion app/brochure/views/news/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@
section > p,
section > details {padding-left: 2em;position: relative;}

hr {border: none;border-bottom: 1px solid #eee;margin: 2em 0}
content hr {border: none;border-bottom: 1px solid #eee;margin: 2em 0}

ol li a:before,
section > p:before,
Expand Down

0 comments on commit a0e51d1

Please sign in to comment.