Refactored repository view and integrated into drawer

This commit is contained in:
squidfunk 2016-09-23 17:46:16 +02:00
parent 2fd1740f3d
commit 71d022ef39
22 changed files with 227 additions and 157 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -24,7 +24,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-cbcef7edd5.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-a65065dc36.css">
{% for path in extra_css %}
<link rel="stylesheet" href="{{ path }}">
{% endfor %}

View File

@ -13,22 +13,10 @@
<label class="md-icon md-icon--search md-header-nav__icon" for="search"></label>
{% include "partials/search.html" %}
</div>
{% if "github." in repo_url %}
{% set platform = "md-source--github" %}
{% elif "gitlab." in repo_url %}
{% set platform = "md-source--gitlab" %}
{% elif "bitbucket." in repo_url %}
{% set platform = "md-source--bitbucket" %}
{% else %}
{% set platform = "" %}
{% endif %}
<div class="md-flex__cell md-flex__cell--shrink">
<a href="{{ repo_url }}" title="Go to repository" class="md-source {{ platform }}">
<div class="md-source__repository">{{ repo_name }}</div>
<ul class="md-source__facts">
<li class="md-source__fact">v0.2.4</li>
</ul>
</a>
<div class="md-header-nav__source">
{% include "partials/source.html" %}
</div>
</div>
</div>
</nav>

View File

@ -1,9 +1,12 @@
<nav class="md-nav md-nav--primary">
<label class="md-nav__title" for="drawer">Navigation</label>
<label class="md-nav__title" for="drawer">{{ site_name }}</label>
<ul class="md-nav__list">
{% for nav_item in nav %}
{% set path = "nav-" + loop.index | string %}
{% include "partials/nav-item.html" %}
{% endfor %}
</ul>
<div class="md-nav__source">
{% include "partials/source.html" %}
</div>
</nav>

View File

@ -0,0 +1,17 @@
{% if "github." in repo_url %}
{% set platform = "md-source--github" %}
{% elif "gitlab." in repo_url %}
{% set platform = "md-source--gitlab" %}
{% elif "bitbucket." in repo_url %}
{% set platform = "md-source--bitbucket" %}
{% else %}
{% set platform = "" %}
{% endif %}
<a href="{{ repo_url }}" title="Go to repository" class="md-source {{ platform }}">
<div class="md-source__repository">
{{ repo_name }}
<ul class="md-source__facts">
<li class="md-source__fact">v0.2.4</li>
</ul>
</div>
</a>

View File

@ -126,28 +126,31 @@ document.addEventListener('DOMContentLoaded', function() {
var stars = data.stargazers_count;
var forks = data.forks_count;
// store in session!!!
var list = document.querySelector('.md-source__facts');
// list.innerHTML += '<li class="md-source__fact">' + stars + ' Stars</li>\n';
// list.innerHTML += '<li>' + forks + ' Forks</li>\n';
var lists = document.querySelectorAll('.md-source__facts');
[].forEach.call(lists, function(list) {
// list.innerHTML += '<li class="md-source__fact">' + stars + ' Stars</li>\n';
// list.innerHTML += '<li>' + forks + ' Forks</li>\n';
var li = document.createElement('li');
li.className = 'md-source__fact md-source__fact--hidden';
li.innerText = stars + ' Stars';
list.appendChild(li);
var li = document.createElement('li');
li.className = 'md-source__fact md-source__fact--hidden';
li.innerText = stars + ' Stars';
list.appendChild(li);
setTimeout(function(li) {
li.classList.remove('md-source__fact--hidden');
}, 100, li);
setTimeout(function(li) {
li.classList.remove('md-source__fact--hidden');
}, 100, li);
li = document.createElement('li');
li.className = 'md-source__fact md-source__fact--hidden';
li.innerText = forks + ' Forks';
list.appendChild(li);
li = document.createElement('li');
li.className = 'md-source__fact md-source__fact--hidden';
li.innerText = forks + ' Forks';
list.appendChild(li);
setTimeout(function(li) {
li.classList.remove('md-source__fact--hidden');
}, 500, li);
})
setTimeout(function(li) {
li.classList.remove('md-source__fact--hidden');
}, 500, li);
// setTimeout(function() {
// li.classList.remove('md-source__fact--hidden');

View File

@ -253,49 +253,3 @@ mark {
margin: 0 -16px;
padding: 0 16px;
}
// [tablet -]: Adjust spacing on screens
@include break-to-device(tablet) {
.md-sidebar--primary {
.md-nav--secondary .md-nav {
position: static; // TODO DODODODODO
.md-nav__item {
padding-left: 1.2rem;
}
}
// second level list!
.md-nav--secondary .md-nav__list .md-nav__list {
position: static;
pointer-events: initial; //!!!
}
.md-nav__item {
// transition: background .25s;
//
// & :hover {
// background: lighten($md-color-primary, 50%);
// }
}
}
}
// .md-nav--secondary > .md-nav__title {
// // -webkit-overflow-scrolling: touch;
// @include z-depth(1);
// }
// .md-nav__toggle:checked ~ .md-nav > .md-nav__list {
//
// > :first-child {
// border-top: 0;
// }
//
// background:
// linear-gradient(white 10%, rgba(255,255,255,0)), // cover
// linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0) 60%); // shadow
// background-repeat: no-repeat;
// background-color: white;
// background-size: 100% 20px, 100% 4px;
//
// /* Opera doesn't support this in the shorthand */
// background-attachment: local, scroll;
// }

View File

@ -26,6 +26,7 @@
// Default fonts
body {
color: $md-color-black;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 400;
font-feature-settings: "kern", "onum", "liga";
@ -44,6 +45,7 @@ body {
pre,
code,
kbd {
color: $md-color-black;
font-family: "Roboto Mono", "Courier New", Courier, monospace;
font-weight: 400;
font-feature-settings: "kern", "onum", "liga";
@ -60,7 +62,6 @@ kbd {
// Content that is typeset
.md-content--typeset {
color: $md-color-black;
font-size: ms(0);
line-height: 1.6;

View File

@ -44,14 +44,16 @@
// Make permalink visible on hover
&:hover .headerlink,
&:target .headerlink {
&:target .headerlink,
& .headerlink:focus {
transform: translate3d(0, 0, 0);
opacity: 1;
}
// Active or targeted permalink
&:hover .headerlink:hover,
&:target .headerlink {
&:target .headerlink,
& .headerlink:focus {
color: $md-color-accent;
}
}

View File

@ -139,7 +139,7 @@ hr {
// Shrink to minimum width
&--shrink {
width: 1%;
width: 0%;
}
// Stretch to maximum width

View File

@ -71,4 +71,17 @@
font-size: 1.8rem;
line-height: 4.8rem;
}
// Repository containing source
&__source {
display: none;
// [tablet landscape +]: Show the reposistory from tablet
@include break-from-device(tablet landscape) {
display: block;
width: 23.0rem;
max-width: 23.0rem;
padding-right: 1.2rem;
}
}
}

View File

@ -27,21 +27,20 @@
// Nested navigation
.md-nav {
font-size: ms(-1);
line-height: 1.2;
line-height: 1.3;
// Table of contents
&--secondary {
border-left: px2rem(4px) solid $md-color-primary;
}
// Title
// List title
&__title {
display: block;
margin: 0;
padding: 1.2rem 1.2rem 0;
font-size: inherit;
font-weight: 700;
line-height: inherit;
text-overflow: ellipsis;
overflow: hidden;
// Icon, hidden by default
&::before {
@ -62,11 +61,10 @@
// List item
&__item {
padding: 0.625em 1.2rem 0;
line-height: 1.3;
// Add bottom spacing to last item
&:last-child {
padding-bottom: 0.625em;
padding-bottom: 1.2rem;
}
// 2nd+ level items
@ -98,12 +96,13 @@
}
}
// Hide link to table of contents by default
&[for="toc"] {
// Hide link to table of contents by default - this will only match the
// table of contents inside the drawer below and including tablet portrait.
html &[for="toc"] {
display: none;
// Hide table of contents by default
html & ~ .md-nav {
& ~ .md-nav {
display: none;
}
@ -126,6 +125,11 @@
}
}
// Repository containing source
&__source {
display: none;
}
// [tablet -]: Layered navigation
@include break-to-device(tablet) {
@ -138,7 +142,6 @@
right: 0;
left: 0;
flex-direction: column;
width: auto;
height: 100%;
z-index: 1;
}
@ -155,8 +158,9 @@
background: $md-color-white;
}
// Title
.md-nav__title {
// List title - higher specificity is necessary to ensure that the title
// inside the drawer is always styled accordingly.
html & .md-nav__title {
position: relative;
padding: 0.4rem 1.6rem 0.4rem 5.6rem;
background: $md-color-black--lightest;
@ -164,10 +168,8 @@
font-size: 1.8rem;
font-weight: 400;
line-height: 4.8rem;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
overflow: hidden;
// Icon
&::before {
@ -178,6 +180,11 @@
height: 4.0rem;
color: $md-color-black--light;
}
// Remove border for first ist item
~ .md-nav__list > .md-nav__item:first-child {
border-top: 0;
}
}
// List of items
@ -190,7 +197,11 @@
.md-nav__item {
padding: 0;
border-top: 0.1rem solid $md-color-black--lightest;
font-size: 1.6rem;
// Increase spacing to account for icon
&--nested > .md-nav__link {
padding-right: 4.8rem;
}
}
// Link inside item
@ -201,11 +212,42 @@
// Rotate icon
&::after {
position: absolute;
top: 50%;
right: 1.2rem;
transform: rotate(-90deg);
transform: translateY(-50%) rotate(-90deg);
transition: inherit;
color: $md-color-black--light;
font-size: 2.4rem;
line-height: 2.0rem;
}
// Color of icon should inherit link color on hover
&:hover::after {
color: $md-color-accent;
}
}
// Set nested navigation for table of contents to static
.md-nav--secondary .md-nav {
position: static;
// 3rd level link
.md-nav__link {
padding-left: 2.8rem;
}
// 4th level link
.md-nav .md-nav__link {
padding-left: 4.0rem;
}
// 5th level link
.md-nav .md-nav .md-nav__link {
padding-left: 5.2rem;
}
// 6th level link
.md-nav .md-nav .md-nav .md-nav__link {
padding-left: 6.4rem;
}
}
}
@ -236,6 +278,13 @@
opacity: 1;
}
}
// List item
.md-nav__title,
.md-nav__item {
font-size: 1.6rem;
line-height: 1.4;
}
}
// [tablet portrait -]: Show table of contents in drawer
@ -246,13 +295,15 @@
border-left: 0;
}
// Show link to table of contents
&__link[for="toc"] {
// Show link to table of contents - higher specificity is necessary to
// display the table of contents inside the drawer.
html &__link[for="toc"] {
display: block;
// Unrotate icon for table of contents
&::after {
transform: none;
transform: translateY(-50%);
color: $md-color-accent;
content: "toc";
}
@ -262,10 +313,18 @@
}
// Show table of contents
html & ~ .md-nav {
& ~ .md-nav {
display: flex;
}
}
// Repository containing source
&__source {
display: block;
padding: 0.4rem;
background: $md-color-black;
color: $md-color-white;
}
}
// [screen +]: Tree-like navigation
@ -282,7 +341,7 @@
max-height: 100%;
}
// Title
// List title
&__title {
// Hide titles for nested navigation

View File

@ -48,7 +48,8 @@
width: 24.2rem;
height: 100%;
transform: translate3d(0, 0, 0);
transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0);
transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1.0),
box-shadow 0.25s;
background: $md-color-white;
z-index: 2;
@ -59,6 +60,8 @@
// Expanded drawer
.md-toggle--drawer:checked ~ .md-container & {
@include z-depth(8);
transform: translate3d(24.2rem, 0, 0);
// Just show drawer, if browser doesn't support 3D transforms
@ -100,7 +103,7 @@
&__scrollwrap {
margin: 2.4rem 0.4rem;
overflow-y: scroll;
// -webkit-overflow-scrolling: touch; // TODO: define on sidebar
// -webkit-overflow-scrolling: touch; // TODO: problems with iOS
// [tablet -]: Adjust margins
@include break-to-device(tablet) {

View File

@ -26,17 +26,11 @@
// Repository containing source
.md-source {
display: table-cell;
position: relative;
min-width: 23.0rem;
max-width: 23.0rem;
height: 4.8rem;
padding: 0 1.2rem;
display: block;
transition: opacity 0.25s;
font-size: 1.3rem;
line-height: 1.2;
white-space: nowrap;
vertical-align: middle;
// Hovered source information
&:hover {
@ -47,20 +41,17 @@
&--bitbucket,
&--github,
&--gitlab {
padding-left: 4.0rem;
// Platform icon
&::before {
display: block;
position: absolute;
top: 50%;
left: $md-icon-padding;
width: $md-icon-size;
height: $md-icon-size;
transform: translateY(-50%);
display: inline-block;
width: 4.8rem;
height: 4.8rem;
background-repeat: no-repeat;
background-position: center;
background-size: $md-icon-size $md-icon-size;
content: "";
vertical-align: middle;
}
}
@ -81,18 +72,23 @@
// Repository name
&__repository {
display: inline-block;
max-width: 100%;
margin-left: -4.4rem;
padding-left: 4.0rem;
font-weight: 700;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: middle;
}
// Source facts (statistics etc.)
&__facts {
margin: 0;
padding: 0;
color: $md-color-white--light;
font-size: 1.1rem;
font-weight: 700;
opacity: 0.75;
list-style-type: none;
}
@ -104,21 +100,21 @@
transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
opacity: 1;
// Facts are hidden by default
&--hidden {
transform: translateY(100%);
opacity: 0;
}
// Middle dots before fact
&::before {
margin: 0 0.2rem;
content: "\00B7";
}
&:first-child {
&::before {
display: none;
}
// Remove middle dot on first fact
&:first-child::before {
display: none;
}
}
}

View File

@ -49,29 +49,11 @@
{% include "partials/search.html" %}
</div>
<!--
Check whether the repository is hosted on one of the supported code
hosting platforms (Github, Gitlab or Bitbucket) to show icon.
-->
{% if "github." in repo_url %}
{% set platform = "md-source--github" %}
{% elif "gitlab." in repo_url %}
{% set platform = "md-source--gitlab" %}
{% elif "bitbucket." in repo_url %}
{% set platform = "md-source--bitbucket" %}
{% else %}
{% set platform = "" %}
{% endif %}
<!-- Link to repository -->
<!-- Repository containing source -->
<div class="md-flex__cell md-flex__cell--shrink">
<a href="{{ repo_url }}" title="Go to repository"
class="md-source {{ platform }}">
<div class="md-source__repository">{{ repo_name }}</div>
<ul class="md-source__facts">
<li class="md-source__fact">v0.2.4</li> <!-- TODO: make dynamic -->
</ul>
</a>
<div class="md-header-nav__source">
{% include "partials/source.html" %}
</div>
</div>
</div>
</nav>

View File

@ -22,11 +22,14 @@
<!-- Main navigation -->
<nav class="md-nav md-nav--primary">
<label class="md-nav__title" for="drawer">Navigation</label>
<label class="md-nav__title" for="drawer">{{ site_name }}</label>
<ul class="md-nav__list">
{% for nav_item in nav %}
{% set path = "nav-" + loop.index | string %}
{% include "partials/nav-item.html" %}
{% endfor %}
</ul>
<div class="md-nav__source">
{% include "partials/source.html" %}
</div>
</nav>

46
src/partials/source.html Normal file
View File

@ -0,0 +1,46 @@
<!--
Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
<!--
Check whether the repository is hosted on one of the supported code hosting
platforms (Github, Gitlab or Bitbucket) to show icon.
-->
{% if "github." in repo_url %}
{% set platform = "md-source--github" %}
{% elif "gitlab." in repo_url %}
{% set platform = "md-source--gitlab" %}
{% elif "bitbucket." in repo_url %}
{% set platform = "md-source--bitbucket" %}
{% else %}
{% set platform = "" %}
{% endif %}
<!-- Repository containing source -->
<a href="{{ repo_url }}" title="Go to repository"
class="md-source {{ platform }}">
<div class="md-source__repository">
{{ repo_name }}
<ul class="md-source__facts">
<li class="md-source__fact">v0.2.4</li> <!-- TODO: make dynamic -->
</ul>
</div>
</a>