Left menu improvements

dev
Baptiste Gelez 5 years ago
parent 48d5746ae0
commit 126655aa72

@ -2,9 +2,6 @@
<ul>
<li>
<a href="https://joinplu.me"><img src="/images/logo.svg" alt="Plume logo">Plume</a>
</li>
<li>
<a href="/">Documentation</a>
</li>
<li>
<a href="https://contribute.joinplu.me/">Contribute</a>

@ -7,6 +7,7 @@ and which parts of these standards are available or not in Plume.'
To federate with other Fediverse software (and itself), Plume uses various
protocols:
- [ActivityPub](http://activitypub.rocks/), as the main federation protocol.
- [WebFinger](https://webfinger.net/), to find other users and blog easily.
- [HTTP Signatures](https://tools.ietf.org/id/draft-cavage-http-signatures-01.html), to
@ -15,6 +16,7 @@ authenticate activities.
federation itself, but that gives some metadata about each instance.
Currently, the following are federated:
- User profiles
- Blogs
- Articles
@ -23,6 +25,7 @@ Currently, the following are federated:
- Reshares
And these parts are not federated, but may be in the future:
- Media gallery
- Instance metadata
@ -116,6 +119,7 @@ activity.
Reshares an article (not available for other objects).
Makes an user (`actor`) reshare a post (`object`).
- `actor` is the ID of the user who reshared the post.
- `object` is the ID of the post to reshare.
@ -124,7 +128,8 @@ Makes an user (`actor`) reshare a post (`object`).
Creates a new article or comment.
If `object` is an `Article`:
- `object.attibutedTo` is a list containing the ID of the authors and of the blog
- `object.attibutedTo` is a list containing the ID of the authors and of the blog
in which this article have been published. If no blog ID is specified, the article
will be rejected. The `actor` of the activity corresponds to the user that clicked
the "Publish" button, and should normally be one of the author in `attributedTo`.
@ -142,6 +147,7 @@ moment).
article.
If `object` is a `Note`:
- `object.content` is the HTML source of the rendered comment.
- `object.inReplyTo` is the ID of the previous comment in the thread, or of the
post that is commented if there is no previous comment.

@ -1,5 +1,6 @@
---
title: Plume documentation
show_links: yes
---
<h1>Topics</h1>

@ -1 +1,3 @@
// This is where it all goes :)
document.getElementById('menu').addEventListener('click', evt =>
evt.target.parentElement.classList.toggle('show')
)

@ -12,21 +12,28 @@
<style><%= Rouge::Themes::Github.render(:scope => '.highlight') %></style>
</head>
<body>
<%= partial 'nav' %>
<header>
<h1><%= current_page.data.title %></h1>
<p><%= current_page.data.summary %></p>
</header>
<nav class="left-menu">
<h1><a href="/"><img src="/images/logo.svg" alt="Plume logo"><span>Plume documentation</span></a></h1>
<aside>
<i id="menu" data-feather="menu"></i>
<nav>
<h1><a href="/"><span>Plume documentation</span><img src="/images/logo.svg" alt="Plume logo"></a></h1>
<% resources = sitemap.resources
.select{ |p| p.path =~ /\.html/ && p.path != "index.html" }
.sort { |a, b| a.path <=> b.path }
%>
<%= partial :nav_item, :locals => { :items => resources.select { |r| r.url.chomp('/').split('/').size == 2 }, :resources => resources } %>
</nav>
</nav>
</aside>
<main>
<%= yield %>
<% if current_page.data.show_links %>
<%= partial 'nav' %>
<% end %>
<article>
<%= yield %>
</article>
</main>
<footer>
Website and documentation under the AGPL 3.0 license.
@ -37,4 +44,3 @@
<%= javascript_include_tag "site" %>
</body>
</html>

@ -1,6 +1,7 @@
$plume: #7765e3;
$plumedark: #6457a6;
$gray: #F4F4F4;
$black: invert($gray);
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
@ -14,19 +15,33 @@ h1, h2, h3 {
}
header {
margin: auto;
grid-area: head;
margin: 0;
padding: 20vh 20vw;
background: linear-gradient(0deg, $plumedark, $plume);
color: white;
font-size: 1.5em;
}
body > main > * {
padding: 0px 20vw;
body {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: min-content 1fr min-content;
grid-template-areas:
"menu head head head head"
"menu cont cont cont cont"
"menu foot foot foot foot";
}
body > main > nav, body > main > nav ul {
padding: 0;
li {
padding: 0;
}
}
nav {
padding: 0px 20vw;
background: $gray;
img {
@ -57,7 +72,7 @@ nav {
}
}
nav:not(.left-menu) li {
main nav li {
display: flex;
align-items: stretch;
justify-items: stretch;
@ -81,8 +96,8 @@ a, a:visited {
footer {
padding: 5em 5vw;
background: $gray;
margin-top: 10vh;
text-align: center;
grid-area: foot;
}
.highlight {
@ -92,82 +107,101 @@ footer {
}
body > main {
margin-top: 2em;
grid-area: cont;
line-height: 1.3em;
ul {
padding-left: calc(20vw + 1.5em);
padding: 0 7.5vw;
li {
padding: 0.5em 0;
}
}
}
.left-menu {
position: fixed;
top: 0;
bottom: 0;
width: 25vw;
left: -24vw;
padding: 0px;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.2);
transition: all ease-in 0.2s;
h1 a {
padding: 1em;
display: flex;
justify-content: space-around;
align-items: center;
aside {
grid-area: menu;
background: $black;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
z-index: 2;
svg {
display: none;
}
ul {
display: block;
text-transform: none;
font-weight: 400;
nav {
padding: 0px;
height: 100%;
overflow-y: auto;
li {
display: inline;
h1 {
margin: 0;
}
a {
display: block;
padding: 2em;
border-bottom: none;
border-left: 5px solid transparent;
transition: all ease-in 0.2s;
h1 a {
padding: 2em;
display: flex;
justify-content: space-between;
align-items: center;
}
&:hover {
border-left-color: $plume;
ul {
display: block;
text-transform: none;
font-weight: 400;
list-style: none;
padding: 0px;
margin: 0px;
li {
display: inline;
a {
display: block;
padding: 2em;
border-bottom: none;
border-left: 5px solid transparent;
transition: all ease-in 0.2s;
&:hover {
border-left-color: $plume;
}
}
}
}
}
& > ul {
text-transform: uppercase;
font-weight: 800;
}
& > ul {
text-transform: uppercase;
font-weight: 800;
}
& > ul > li > ul {
font-weight: 600;
& > li > a {
padding-left: 3em;
& > ul > li > ul {
font-weight: 600;
& > li > a {
padding: 1.5em;
padding-left: 3em;
}
}
}
& > ul > li > ul > li > ul > li > a {
padding-left: 4em;
& > ul > li > ul > li > ul > li > a {
padding: 1em;
padding-left: 4em;
}
}
}
&:hover {
overflow-y: auto;
left: 0vw;
}
main > article {
padding: 3em 0em;
}
main > article > * {
padding: 0 5vw;
}
.choices {
display: flex;
flex-wrap: wrap;
justify-items: stretch;
list-style: none;
padding: 2em 5vw;
& > li {
flex: 1;
a {
@ -214,23 +248,63 @@ a.action {
display: block;
padding: 20px;
max-width: 200px;
margin: 20px auto;
margin: 5em auto;
border-radius: 5px;
background: $plume;
color: white;
}
@media screen and (max-width: 1000px) {
body > main > * {
main nav li a {
padding: 15px 0px;
}
aside svg {
display: block;
position: relative;
top: 0;
left: 100%;
color: white;
padding: 0.5em;
margin: 0.5em;
background: $black;
border-radius: 5px;
}
body > main > article > * {
padding: 0 5vw;
}
header {
padding: 10vh 20vw;
padding: 10vh 0vw;
text-align: center;
}
.left-menu {
display: none;
.cards, body > main > nav ul {
grid: auto-flow / 1fr;
}
aside {
position: fixed;
left: -100vw;
top: 0;
bottom: 0;
width: 100vw;
transition: all ease-in 0.2s;
}
aside.show {
left: 0;
svg {
left: 0;
}
}
body {
grid-template-areas:
"head head head head head"
"cont cont cont cont cont"
"foot foot foot foot foot";
}
}
Loading…
Cancel
Save