clasick
/
documentation
forked from plume/documentation
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Left menu improvements

Browse Source
stable
Baptiste Gelez 5 years ago
parent 48d5746ae0
commit 126655aa72
6 changed files with 155 additions and 69 deletions
Show Stats Download Patch File Download Diff File

3
source/_nav.erb
Unescape Escape View File

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

8
source/federation.html.md
Unescape Escape View File

@ -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 To federate with other Fediverse software (and itself), Plume uses various
protocols: protocols:
- [ActivityPub](http://activitypub.rocks/), as the main federation protocol. - [ActivityPub](http://activitypub.rocks/), as the main federation protocol.
- [WebFinger](https://webfinger.net/), to find other users and blog easily. - [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 - [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. federation itself, but that gives some metadata about each instance.
Currently, the following are federated: Currently, the following are federated:
- User profiles - User profiles
- Blogs - Blogs
- Articles - Articles
@ -23,6 +25,7 @@ Currently, the following are federated:
- Reshares - Reshares
And these parts are not federated, but may be in the future: And these parts are not federated, but may be in the future:
- Media gallery - Media gallery
- Instance metadata - Instance metadata
@ -116,6 +119,7 @@ activity.
Reshares an article (not available for other objects). Reshares an article (not available for other objects).
Makes an user (`actor`) reshare a post (`object`). Makes an user (`actor`) reshare a post (`object`).
- `actor` is the ID of the user who reshared the post. - `actor` is the ID of the user who reshared the post.
- `object` is the ID of the post to reshare. - `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. Creates a new article or comment.
If `object` is an `Article`: 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 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 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`. the "Publish" button, and should normally be one of the author in `attributedTo`.
@ -142,6 +147,7 @@ moment).
article. article.
If `object` is a `Note`: If `object` is a `Note`:
- `object.content` is the HTML source of the rendered comment. - `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 - `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. post that is commented if there is no previous comment.

1
source/index.html.erb
Unescape Escape View File

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

4
source/javascripts/site.js
Unescape Escape View File

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

18
source/layouts/layout.erb
Unescape Escape View File

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

190
source/stylesheets/site.css.scss
Unescape Escape View File

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