Skip to content

Commit

Permalink
Make root categories stack to each other; closes #52, fixes #49
Browse files Browse the repository at this point in the history
  • Loading branch information
@saki7
saki7 committed Nov 12, 2017
1 parent 49ad588 commit 048c6b3
Show file tree
Hide file tree
Showing 6 changed files with 234 additions and 99 deletions.
66 changes: 37 additions & 29 deletions css/kunai/site/sidebar-ext.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,53 +86,37 @@
}
}

li.top {
> a.title {
&:before {
@include fa-patch;

margin-right: .15em;
color: darker;
}
ul.root > li.top {
> .heading > a.title:before {
@include fa-patch;
}

&[data-top-id="implementation"] > a.title:before {
&[data-top-id="implementation"] > .heading > a.title:before {
@extend .fa-cogs;
}
&[data-top-id="implementation-status"] > a.title:before {
&[data-top-id="implementation-status"] > .heading > a.title:before {
@extend .fa-calendar-check-o;
}
&[data-top-id="mailing-lists"] > a.title:before {
&[data-top-id="mailing-lists"] > .heading > a.title:before {
@extend .fa-inbox;
}
&[data-top-id="third_party_library"] > a.title:before {
&[data-top-id="third_party_library"] > .heading > a.title:before {
@extend .fa-university;
}
&[data-top-id="working_style"] > a.title:before {
&[data-top-id="working_style"] > .heading > a.title:before {
@extend .fa-pencil-square-o;
}
&[data-top-id="editors_doc"] > a.title:before {
&[data-top-id="editors_doc"] > .heading > a.title:before {
@extend .fa-text-height;
}
&[data-top-id="article"] > a.title:before {
&[data-top-id="article"] > .heading > a.title:before {
@extend .fa-book;
}
&[data-top-id="lang"] > a.title:before {
&[data-top-id="lang"] > .heading > a.title:before {
@extend .fa-superscript;
}
&[data-top-id="reference"] {
> a.title:before {
@extend .fa-tags;
}

// .articles {
// > .article {
// > a:before {
// @include fa-patch;
// @extend .fa-paragraph;
// }
// }
// }
&[data-top-id="reference"] > .heading > a.title:before {
@extend .fa-tags;
}
}
}
Expand All @@ -150,6 +134,30 @@
}
}

.kunai-sidebar {
ul.stackable {
> li.stack {
> .heading > .expander {
&:before {
@include fa-patch;
}
}

&.expanded {
> .heading > .expander:before {
@extend .fa-compress;
}
}

&:not(.expanded) {
> .heading > .expander:before {
@extend .fa-expand;
}
}
}
}
}

.kunai-sidebar > .tree.v2 > ul.root > li.top {
&:not([data-top-id="lang"]) {
.kunai-branch > ul.branch.articles {
Expand Down
139 changes: 107 additions & 32 deletions css/kunai/site/sidebar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,22 +152,18 @@ main[role="main"] .kunai-sidebar.force-legacy {

display: flex;

// temporary workaround
overflow-y: scroll;

flex-direction: column;
margin: 0;
padding: .5rem .8rem .5rem 1rem;
padding: .5rem .1rem .5rem .25rem;
box-sizing: border-box;

font-family: sans-serif;
line-height: 1.5;

height: 100%;

.kunai-branch {
overflow-x: hidden;
overflow-y: auto;
max-height: 28rem;
overflow: hidden;

margin: .2rem 0 0 0;
padding: 0;
Expand All @@ -177,8 +173,6 @@ main[role="main"] .kunai-sidebar.force-legacy {
$c: rgba(20, 20, 20, 0.1);
box-shadow: 0px 6px 10px -6px $c inset, 0px -6px 10px -6px $c inset;

direction: rtl;

> .preview {
display: flex;
width: 100%;
Expand Down Expand Up @@ -225,22 +219,23 @@ main[role="main"] .kunai-sidebar.force-legacy {
}

> ul.branch {
direction: ltr;
display: flex;
flex-direction: column;

// position: relative;

list-style: none;
margin: 0;
padding: 0 0 0 .2rem;
padding: 0;

> li {
display: flex;
flex-direction: column;
align-items: stretch;
font-size: .9rem;
margin: .1em 0;

box-sizing: border-box;
padding: .1em 0;

&:before {
flex-basis: 1.2em;
Expand Down Expand Up @@ -323,6 +318,95 @@ main[role="main"] .kunai-sidebar.force-legacy {
}
}

ul.stackable {
display: flex;
flex-direction: column;

height: 100%;

> li.stack {
display: flex;
flex-direction: column;
align-content: flex-start;
box-sizing: border-box;

flex-shrink: 0;

border-top: 1px solid transparent;
border-bottom: 1px solid transparent;

> .heading {
display: flex;
flex-direction: row;
flex-shrink: 0;
}

&.expanded:not(.empty) {
flex-grow: 1;
flex-shrink: 1;

$b: #DDD;

&:not(:first-child) {
border-top-color: $b;
}

&:not(:last-child) {
border-bottom-color: $b;
}

> .content-wrapper {
overflow-y: scroll;
}
}

&:not(.expanded) {
> .content-wrapper {
display: none;
}
}

&.empty > .heading > .expander:before {
visibility: hidden;
}

> .heading > .expander {
display: inline-flex;
align-items: center;
padding: .1em .3em .1em .1em;

&:before {
color: #444;
transform: rotate(-45deg);
cursor: pointer;

display: block;
line-height: 1;
}
}

> .heading > a.title {
user-select: none;
word-break: keep-all;

padding: .25em 0;
box-sizing: border-box;
}

> .content-wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;

> .content {
display: flex;
flex-direction: column;
flex-shrink: 0;
}
}
}
}

> ul.root {
display: flex;
flex-direction: column;
Expand All @@ -343,16 +427,18 @@ main[role="main"] .kunai-sidebar.force-legacy {
}

> li.top {
flex-shrink: 0;

&:not(:last-child) {
margin-bottom: 1rem;
}

> a.title {
> .heading > a.title {
font-size: 1.1em;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);

display: inline-flex;
flex-direction: row-reverse;
align-items: baseline;

&:before {
margin-left: .2em;
}

&:not(:last-child):after {
@mixin big-hr;
}
Expand All @@ -361,7 +447,7 @@ main[role="main"] .kunai-sidebar.force-legacy {
&:not([href]) {
color: color($cl-text tint(50%));
text-decoration: none;
cursor: help;
// cursor: help;
border-bottom: 1px solid transparent;

/*
Expand Down Expand Up @@ -439,7 +525,7 @@ main[role="main"] .kunai-sidebar.force-legacy {
// min-height: 4.6em;

&:not(:first-child) {
margin-top: 1em;
padding-top: 1em;
}

.cr-index > .title {
Expand Down Expand Up @@ -481,8 +567,6 @@ main[role="main"] .kunai-sidebar.force-legacy {
flex-direction: column;

> .kunai-branch {
max-height: 16rem;
overflow-y: scroll;
}

&:not(:first-child):before {
Expand Down Expand Up @@ -665,15 +749,6 @@ main[role="main"] .kunai-sidebar.force-legacy {
}

&[data-top-id="reference"] {
display: flex;
flex-direction: column;
margin-bottom: 2em;

border-bottom: 3px dashed rgba(120, 120, 220, 0.6);

min-height: 40rem;
max-height: 90vh;

> .kunai-branch {
> ul.branch {
margin-bottom: .5em;
Expand Down
13 changes: 5 additions & 8 deletions js/kunai.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,23 +45,19 @@ class Kunai {
content: null,
}
this.initUI()
this.getSidebar = this.initSidebar()

this.wand = new Wand(this.log)

this.yatas = new Map
}

async cpprefjp() {
this.load_impl(['cpprefjp', 'site'])
this.afterCR = this.initCRSearch(true)
this.crs = await this.afterCR
this.crs = this.initCRSearch(true)
}

async boostjp() {
this.load_impl(['boostjp', 'site'])
this.afterCR = this.initCRSearch(false)
this.crs = await this.afterCR
this.crs = this.initCRSearch(false)
}

async load_impl(config) {
Expand Down Expand Up @@ -119,17 +115,18 @@ class Kunai {
}

async onDatabase(db) {
// this.log.debug(`onDatabase`, db)
await this.ui.sidebar.onDatabase(db)
await this.ui.sidebar.treeview.onPageID(this.meta.page_id)
}

async initCRSearch(isEnabled) {
if (!isEnabled) return null

await this.getSidebar
await this.initSidebar()

let crs = new CRSearch({
onDatabase: ::this.onDatabase,
onDatabase: this.onDatabase.bind(this),
})
crs.database('https://cpprefjp.github.io/static/crsearch/crsearch.json')

Expand Down
Loading

0 comments on commit 048c6b3

Please sign in to comment.