Skip to content

feat(): Introduce destinations catalog #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Oct 8, 2019
Merged

feat(): Introduce destinations catalog #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bcb83a1
feat(): Introduce catalog page
bart-tonik Oct 8, 2019
7468501
chore(): Merge staging
jedrzejchalubek Oct 8, 2019
809d071
fix(): Use proper layout for home page
jedrzejchalubek Oct 8, 2019
6d0f3b0
feat(): Change placeholder text
bart-tonik Oct 8, 2019
9553113
fix()
jedrzejchalubek Oct 8, 2019
d08473b
fix(): Updating state, change behavior on click
bart-tonik Oct 8, 2019
9fe859a
fix(): Updating state, change behavior on click
bart-tonik Oct 8, 2019
5c92b9b
fix(): Change size of arrow, add default border to links and change h…
bart-tonik Oct 8, 2019
02e2351
fix(): Change height of list
bart-tonik Oct 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions js/dropdown-menu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
const COMPONENT_SELECTOR = '[data-dropdown-menu]'
const DROPDOWN_HEAD = '[data-ref="dropdown-menu[head]"]'
const DROPDOWN_HEAD_INNER = '[data-ref="dropdown-menu[head-inner]"]'
const DROPDOWN_BODY = '[data-ref="dropdown-menu[body]"]'
const DROPDOWN_LINK = '[data-ref="dropdown-menu[link]"]'
const ACTIVE_CLASS_ATTR = 'data-active-class'

export default function () {
const components = document.querySelectorAll(COMPONENT_SELECTOR)

components.forEach(component => {
const dropdownHeadInner = component.querySelector(DROPDOWN_HEAD_INNER)

const dropdownHead = component.querySelector(DROPDOWN_HEAD)
const dropdownHeadActive = dropdownHead.getAttribute(ACTIVE_CLASS_ATTR)

const dropdownBody = component.querySelector(DROPDOWN_BODY)
const dropdownBodyActive = dropdownBody.getAttribute(ACTIVE_CLASS_ATTR)

const links = component.querySelectorAll(DROPDOWN_LINK)

dropdownHead.addEventListener('click', () => {
dropdownHead.classList.toggle(dropdownHeadActive)
dropdownBody.classList.toggle(dropdownBodyActive)
})

links.forEach(link => {
link.addEventListener('click', () => {
dropdownHeadInner.innerHTML = link.innerHTML

dropdownHead.classList.remove(dropdownHeadActive)
dropdownBody.classList.remove(dropdownBodyActive)
})
})
})
}
4 changes: 3 additions & 1 deletion js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import './track/menu'
// import './track/menu'

import feedback from './feedback'
import accordion from './accordion'
import searchNavbar from './search-navbar'
import headingsAnchors from './headings-anchors'
import dropdownMenu from './dropdown-menu'

feedback()
accordion()
searchNavbar()
headingsAnchors()
dropdownMenu()
33 changes: 33 additions & 0 deletions src/_includes/sidebar/destinations-menu-mobile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{% assign destination_categories = site.data.catalog.destinations.destinations | group_by:"categories.primary" | sort: "name" %}

<div class="destination-menu-mobile" data-dropdown-menu>
<div class="destination-menu-mobile__select" data-ref="dropdown-menu[head]" data-active-class="destination-menu-mobile__select--active">
<div class="destination-menu-mobile__select-inner">
<span class="flex flex--middle" data-ref="dropdown-menu[head-inner]">
Choose category
</span>

<svg viewBox="0 0 8 5" xmlns="http://www.w3.org/2000/svg" class="destination-menu-mobile__select-arrow">
<path d="M1 1l3 3 3-3" stroke="#A5B0BA" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>

<ul class="destination-menu-mobile__list list list--unstyle" data-ref="dropdown-menu[body]" data-active-class="destination-menu-mobile__list--active">
{% for category in destination_categories %}
{% assign category_name_size = category.name | size %}
{% if category_name_size != 0 %}
{% assign category_icon = category.name | slugify %}
<li class="destination-menu-mobile__item" >
<a class="destination-menu-mobile__link" href="#{{ category.name }}" title="{{ category.name }}" data-ref="dropdown-menu[link]" >
<span class="destination-menu-mobile__icon">
{% include icons/destinations-catalog/{{ category_icon }}.svg %}
</span>
{{ category.name }}
</a>
</li>

{% endif %}
{% endfor %}
</ul>
</div>
18 changes: 18 additions & 0 deletions src/_includes/sidebar/destinations-menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{% assign destination_categories = site.data.catalog.destinations.destinations | group_by:"categories.primary" | sort: "name" %}

<div class="destination-menu">
<ul class="destination-menu__list list list--unstyle">
{% for category in destination_categories %}
{% assign category_name_size = category.name | size %}
{% if category_name_size != 0 %}
{% assign category_icon = category.name | slugify %}
<li class="destination-menu__item">
<a class="destination-menu__link" href="#{{ category.name }}" title="{{ category.name }}">
{% include icons/destinations-catalog/{{ category_icon }}.svg %}
{{ category.name }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
72 changes: 2 additions & 70 deletions src/_layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,78 +42,10 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
<link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}">

<body>
<div class="docs">
<div class="stage">
<div class="docs__aside stage__aside">
{% include navbar/logo.html %}

{% include menu/menu.html %}
</div>

<main class="docs__body stage__body">
<div>
<div class="search">
{% include navbar/search.html %}
</div>

<nav class="navbar-mobile" data-search-navbar data-active-class="navbar-mobile--active">
<div class="flex flex--middle">
<div class="flex__column">
{% include navbar/logo.html %}
</div>

<div class="flex__column flex__column--shrink">
<div class="flex flex--medium gutter gutter--large">
<div class="flex__column">
<button class="search-button" data-ref="search-navbar[trigger]">
{% include icons/symbols/search.svg %}
</button>
</div>

<div class="flex__column">
<button class="menu-button">
<span class="menu-button__line"></span>
</button>
</div>
</div>
</div>
</div>

<div class="navbar-mobile__search">
{% include navbar/search.html %}
</div>
</nav>
</div>

<div class="stage__content">
{{ content }}
</div>
</main>

<div class="docs__sidebar stage__sidebar">
{% include navbar/nav.html %}

<div class="sidebar sidebar--sticky">
{%- unless page.hide_toc -%}
<div data-menu-side>
{% include sidebar/menu-side.html class="menu-side" anchor_class="menu-side__link" html=content h_min=2 h_max=2 %}
</div>
{%- endunless -%}

{% if page.feedback != false %}
{% include sidebar/feedback.html %}
{% endif %}
</div>
</div>
</div>

<footer>
{% include components/footer.html %}
</footer>
</div>
{{ content }}

<div id="consent-manager"></div>

Expand Down
81 changes: 81 additions & 0 deletions src/_layouts/destinations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
---
layout: default
---

<div class="docs">
<div class="stage">
<div class="docs__aside stage__aside">
{% include navbar/logo.html %}

{% include menu/menu.html %}
</div>

<main class="docs__body stage__body">
<div>
<div class="search">
{% include navbar/search.html %}
</div>

<nav class="navbar-mobile" data-search-navbar data-active-class="navbar-mobile--active">
<div class="flex flex--middle">
<div class="flex__column">
{% include navbar/logo.html %}
</div>

<div class="flex__column flex__column--shrink">
<div class="flex flex--medium gutter gutter--large">
<div class="flex__column">
<button class="search-button" data-ref="search-navbar[trigger]">
{% include icons/symbols/search.svg %}
</button>
</div>

<div class="flex__column">
<button class="menu-button">
<span class="menu-button__line"></span>
</button>
</div>
</div>
</div>
</div>

<div class="navbar-mobile__search">
{% include navbar/search.html %}
</div>
</nav>
</div>


<div class="stage__content">
<article class="destinations">
{% include components/breadcrumbs.html %}

{%- if page.title -%}
<h1 id="{{ page.title | downcase }}" class="destinations__heading">
{{ page.title }}
</h1>
{%- endif -%}

{% include sidebar/destinations-menu-mobile.html %}

<div class="destinations__body markdown">
{{ content }}
</div>
</article>
</div>
</main>

<div class="docs__sidebar stage__sidebar">
{% include navbar/nav.html %}

<div class="sidebar sidebar--sticky">
{% include sidebar/destinations-menu.html %}
{% include sidebar/feedback.html %}
</div>
</div>
</div>

<footer>
{% include components/footer.html %}
</footer>
</div>
2 changes: 1 addition & 1 deletion src/_layouts/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
layout: default
layout: main
---

<article class="home page">
Expand Down
73 changes: 73 additions & 0 deletions src/_layouts/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
---
layout: default
---

<div class="docs">
<div class="stage">
<div class="docs__aside stage__aside">
{% include navbar/logo.html %}

{% include menu/menu.html %}
</div>

<main class="docs__body stage__body">
<div>
<div class="search">
{% include navbar/search.html %}
</div>

<nav class="navbar-mobile" data-search-navbar data-active-class="navbar-mobile--active">
<div class="flex flex--middle">
<div class="flex__column">
{% include navbar/logo.html %}
</div>

<div class="flex__column flex__column--shrink">
<div class="flex flex--medium gutter gutter--large">
<div class="flex__column">
<button class="search-button" data-ref="search-navbar[trigger]">
{% include icons/symbols/search.svg %}
</button>
</div>

<div class="flex__column">
<button class="menu-button">
<span class="menu-button__line"></span>
</button>
</div>
</div>
</div>
</div>

<div class="navbar-mobile__search">
{% include navbar/search.html %}
</div>
</nav>
</div>

<div class="stage__content">
{{ content }}
</div>
</main>

<div class="docs__sidebar stage__sidebar">
{% include navbar/nav.html %}

<div class="sidebar sidebar--sticky">
{%- unless page.hide_toc -%}
<div data-menu-side>
{% include sidebar/menu-side.html class="menu-side" anchor_class="menu-side__link" html=content h_min=2 h_max=2 %}
</div>
{%- endunless -%}

{% if page.feedback != false %}
{% include sidebar/feedback.html %}
{% endif %}
</div>
</div>
</div>

<footer>
{% include components/footer.html %}
</footer>
</div>
2 changes: 1 addition & 1 deletion src/_layouts/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
layout: default
layout: main
---

<article class="page">
Expand Down
Loading