forked from organicmaps/website
add UI
This commit is contained in:
borntojesus
parent
6571e8c61c
commit
d7bd6e2a91
6 changed files with 188 additions and 22 deletions
|
|
@ -5,6 +5,9 @@ padding-top: 0;
|
|||
}
|
||||
|
||||
.faq-page-list {
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
&__title {
|
||||
color: var(--black-white);
|
||||
margin-bottom: 20rem;
|
||||
|
|
@ -13,6 +16,9 @@ padding-top: 0;
|
|||
|
||||
}
|
||||
}
|
||||
&__table-title {
|
||||
color: var(--black-white);
|
||||
}
|
||||
&__row {
|
||||
display: flex;
|
||||
gap: 10rem;
|
||||
|
|
|
|||
BIN
static/images/faq/hero_image.png
Normal file
BIN
static/images/faq/hero_image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
|
|
@ -117,11 +117,57 @@
|
|||
|
||||
<main class="main">
|
||||
{% if page.taxonomies and page.taxonomies.faq %}{# Show FAQ breadcrumbs #}
|
||||
F.A.Q.
|
||||
{% set categories = get_taxonomy(kind='faq') | get(key="items") %}
|
||||
{% for item in categories %}
|
||||
• <a href="{{ get_taxonomy_url(kind="faq", name=item.name) }}">{{ item.name }}</a>
|
||||
{% endfor %}
|
||||
<section class="hero-sub" style="background-image: url(/faq/hero_image.png)" >
|
||||
<div class="container hero-sub__container">
|
||||
<nav class="bred-crum">
|
||||
<ul class="bred-crum__row">
|
||||
<li class="bred-crum__item">
|
||||
<a class="nav-bred bred-crum__link" href="/">Home</a>
|
||||
</li>
|
||||
<li class="bred-crum__item">
|
||||
<span class="nav-bred">
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
<li class="bred-crum__item">
|
||||
<a class="nav-bred bred-crum__link bred-crum--active"
|
||||
href="/faq">Faq</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="hero-sub__content">
|
||||
<h1 class="h1 hero-sub__title">
|
||||
Faq
|
||||
</h1>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="search">
|
||||
<div class="container search__container">
|
||||
<label class="search__label" for="inpSearch">
|
||||
{% include 'ui/search.html' %}
|
||||
<input class="search__input" id="inpSearch" type="text" placeholder="Search">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<section class="faq-post">
|
||||
<div class="container faq-page-list__row">
|
||||
{% set categories = get_taxonomy(kind='faq') | get(key="items") %}
|
||||
<h2 class="h2-inter faq-page-list__title">App</h2>
|
||||
<div class="line line--full"></div>
|
||||
<h2 class="h1-inter faq-page-list__title">How to edit or move bookmarks?</h2>
|
||||
<div class="faq-page-list__buttons">
|
||||
|
||||
{% for item in categories %}
|
||||
<a class="button button--line-min" href="{{ get_taxonomy_url(kind="faq", name=item.name) }}">{{ item.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,65 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>F.A.Q.</h1>
|
||||
{%- for term in terms -%}
|
||||
<h3><a href="{{term.permalink}}">{{term.name}} questions</a></h3>
|
||||
<ul>
|
||||
{%- for faq_page in term.pages | sort(attribute="extra.order") -%}
|
||||
<li><a href="{{ faq_page.permalink }}">{{ faq_page.title }}</a></li>
|
||||
<section class="hero-sub" style="background-image: url(/faq/hero_image.png)" >
|
||||
<div class="container hero-sub__container">
|
||||
<nav class="bred-crum">
|
||||
<ul class="bred-crum__row">
|
||||
<li class="bred-crum__item">
|
||||
<a class="nav-bred bred-crum__link" href="/">Home</a>
|
||||
</li>
|
||||
<li class="bred-crum__item">
|
||||
<span class="nav-bred">
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
<li class="bred-crum__item">
|
||||
<a class="nav-bred bred-crum__link bred-crum--active"
|
||||
href="/faq">Faq</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="hero-sub__content">
|
||||
<h1 class="h1 hero-sub__title">
|
||||
Faq
|
||||
</h1>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="search">
|
||||
<div class="container search__container">
|
||||
<label class="search__label" for="inpSearch">
|
||||
{% include 'ui/search.html' %}
|
||||
<input class="search__input" id="inpSearch" type="text" placeholder="Search">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<section class="faq-page-list">
|
||||
<div class="container faq-page-list__row">
|
||||
<h2 class="h2-inter faq-page-list__title">Faq</h2>
|
||||
{%- for term in terms -%}
|
||||
|
||||
<ul class="faq-page-list__table">
|
||||
<li class="faq-page-list__table-item"><a class="h5-boold faq-page-list__table-title" href="{{term.permalink}}">{{term.name}} questions</a></li>
|
||||
{%- for faq_page in term.pages | sort(attribute="extra.order") -%}
|
||||
<li class="faq-page-list__table-item"><a class="h5 faq-page-list__table-link" href="{{ faq_page.permalink }}">{{ faq_page.title }}</a></li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
{%- endfor -%}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="faq-page-footer">
|
||||
<div class="container faq-page-footer__row">
|
||||
<h2 class="h2-inter faq-page-footer__title">Need more help? Contact us directly:</h2>
|
||||
</div>
|
||||
{% include 'section/social-icon.html' %}
|
||||
</section>
|
||||
{% include 'section/donate.html' %}
|
||||
{% endblock content %}
|
||||
|
|
|
|||
|
|
@ -5,18 +5,80 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
F.A.Q.
|
||||
{% set categories = get_taxonomy(kind='faq') | get(key="items") %}
|
||||
{% set categories = get_taxonomy(kind='faq') | get(key="items") %}
|
||||
<section class="hero-sub" style="background-image: url(/faq/hero_image.png)" >
|
||||
<div class="container hero-sub__container">
|
||||
<nav class="bred-crum">
|
||||
<ul class="bred-crum__row">
|
||||
<li class="bred-crum__item">
|
||||
<a class="nav-bred bred-crum__link" href="/">Home</a>
|
||||
</li>
|
||||
<li class="bred-crum__item">
|
||||
<span class="nav-bred">
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
<li class="bred-crum__item">
|
||||
|
||||
{% for item in categories %}
|
||||
{% if term.name == item.name %}
|
||||
<a href="/{{ item.name }}" class="nav-bred bred-crum__link bred-crum--active">{{ item.name }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="hero-sub__content">
|
||||
|
||||
{% for item in categories %}
|
||||
{% if term.name == item.name %}
|
||||
<h1 class="h1 hero-sub__title">{{ item.name }}</h1>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="search">
|
||||
<div class="container search__container">
|
||||
<label class="search__label" for="inpSearch">
|
||||
{% include 'ui/search.html' %}
|
||||
<input class="search__input" id="inpSearch" type="text" placeholder="Search">
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<section class="faq-post">
|
||||
<div class="container faq-page-list__row">
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="faq-page-list__buttons">
|
||||
|
||||
|
||||
{% for item in categories %}
|
||||
•
|
||||
|
||||
{% if term.name == item.name %}
|
||||
<span>{{ item.name }}</span>
|
||||
|
||||
|
||||
|
||||
{% else %}
|
||||
<a href="{{ get_taxonomy_url(kind="faq", name=item.name) }}">{{ item.name }}</a>
|
||||
|
||||
<a class="button button--line-min" href="{{ get_taxonomy_url(kind="faq", name=item.name) }}">{{ item.name }}</a>
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<h2>{{ term.name }} questions</h2>
|
||||
{%- for faq_page in term.pages | sort(attribute="extra.order") -%}
|
||||
<h3><a href="{{ faq_page.permalink }}">{{ faq_page.title }}</a></h3>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
<div class="faq-page-list__table">
|
||||
<div class="faq-page-list__table-item">
|
||||
<h3 class="h5-boold faq-page-list__table-title">{{ term.name }} questions</h3>
|
||||
</div>
|
||||
{%- for faq_page in term.pages | sort(attribute="extra.order") -%}
|
||||
<h3 class="faq-page-list__table-item"><a class="h5 faq-page-list__table-link" href="{{ faq_page.permalink }}">{{ faq_page.title }}</a></h3>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
|
|
|||
0
yarn.lock
Normal file
0
yarn.lock
Normal file
Loading…
Add table
Reference in a new issue