organicmaps/website
13
Fork 1
Code Issues 31 Pull requests 8 Projects Releases Wiki Activity Actions

add UI news

Browse source
This commit is contained in:
borntojesus 2024-02-05 23:02:59 +02:00
parent 5ce640c13c
commit 4dca62e4c1
7 changed files with 226 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
sass/common/bred-crum.scss
View file

@ -7,4 +7,15 @@
display: flex;
gap: 10rem;
}
&__item {
display: flex;
align-items: center;
}
&__link {
max-width: 230rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}

11
sass/component/post-min.scss
View file

@ -14,7 +14,16 @@
&__img {
margin-bottom: 20rem;
width: 100%;
&--one {
max-height: 278rem;
object-fit: cover;
object-position: center;
border-radius: 10rem;
height: 100%;
&:not(:first-of-type) {
display: none;
}
}
&--single {
max-width: 500rem;
float: right;

5
sass/global/index.scss
View file

@ -50,4 +50,9 @@ overflow: hidden;
}
}
}
a {
color: var(--black-white);
}

2
sass/pages/faq-page.scss
View file

@ -2,11 +2,13 @@
.faq-page {
padding-top: 0;
}
.faq-page-list {
a {
text-decoration: none;
color: var(--black-white);
}
&__title {
color: var(--black-white);

96
templates/base.html
View file

@ -116,59 +116,59 @@
</header>
<main class="main">
{% if page.taxonomies and page.taxonomies.faq %}{# Show FAQ breadcrumbs #}
<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>
<!-- {% if page.taxonomies and page.taxonomies.faq %}{# Show FAQ breadcrumbs #}-->
<!-- <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&#45;&#45;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">
<!-- </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&#45;&#45;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>
<!-- {% for item in categories %}-->
<!-- <a class="button button&#45;&#45;line-min" href="{{ get_taxonomy_url(kind="faq", name=item.name) }}">{{ item.name }}</a>-->
<!-- {% endfor %}-->
<!-- </div>-->
</div>
</section>
{% endif %}
<!-- </div>-->
<!-- </section>-->
<!-- {% endif %}-->
{% block content %}{% endblock %}
</main>

146
templates/news.html
View file

@ -10,70 +10,118 @@
{% endblock meta %}
{% block content %}
<section class="hero-sub" style="background-image: url(/images/news/hero-img.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="/news">News</a>
</li>
</ul>
</nav>
<div class="hero-sub__content">
<h1 class="h1 hero-sub__title">
{{ resource.title }}
</h1>
<h1>{{ resource.title }}</h1>
</div>
</div>
</section>
<div class="container main-news__nav">
<div class="main-news__nav-row">
<button class="button button--main">All</button>
<button class="button button--line">News</button>
<button class="button button--line">Releases</button>
</div>
</div>
<div class="container main-news__row">
{# Iterate and use en sections by default and use localized versions only if they are present #}
{% set enNewsSectionTranslation = section.translations | filter(attribute='lang', value='en') | first %}
{% set enNewsSection = get_section(path=enNewsSectionTranslation.path) %}
{# Iterate and use en sections by default and use localized versions only if they are present #}
{% set enNewsSectionTranslation = section.translations | filter(attribute='lang', value='en') | first %}
{% set enNewsSection = get_section(path=enNewsSectionTranslation.path) %}
{% for sectionStr in enNewsSection.subsections | sort | reverse %}
{% for sectionStr in enNewsSection.subsections | sort | reverse %}
{% set section = get_section(path=sectionStr) %}
{% for page in section.pages %}
{% for page in section.pages %}
{% set translatedPage = page.translations | filter(attribute='lang', value=lang) | first %}
{% if translatedPage %}
{% if translatedPage %}
{# set page = get_page(path=translatedPage.path) #}
{% endif %}
{% endif %}
<section class="news__item" {% if page.translations | length <= 1 %} dir="auto"{% endif %}>
<section class="post-min" {% if page.translations | length
<= 1 %} dir="auto"{% endif %}>
<div class="news_date">&nbsp;<a href="{{ page.path | safe }}">{{ page.date | date(format='%B %e, %Y') }}</a>&nbsp;</div>
{# Display wide images below the text instead of to the right. #}
{% set_global noflex = '' %}
{% for photo in page.assets %}
{# Display wide images below the text instead of to the right. #}
{% set_global noflex = '' %}
{% for photo in page.assets %}
{% set meta = get_image_metadata(path=photo) %}
{% if meta.width > meta.height %}
{% set_global noflex = '_noflex' %}
{% break %}
{% set_global noflex = '_noflex' %}
{% break %}
{% endif %}
{% endfor %}
{% if page.assets %}
{% for photo in page.assets | sort %}
<img class="post-min__img post-min__img--one" src="{{ page.path | safe }}{{ photo | split(pat='/') | last }}"/>
<!-- need to set firs image and discuss-->
{% endfor %}
{% else %}
<img class="post-min__img post-min__img--one" src="/"/>
{% endif %}
{% endfor %}
<style>
.news__wrapper {
display: flex;
justify-content: space-between;
}
.news__item {
width: 48%;
display: inline-block;
}
.news__item img {
max-width: 100%;
max-height: 100vh;
border: 2px solid red;
}
</style>
<div class="news__somr">
{% if page.title %}
<div class="news_title">
title:
<h2 class="h2-sub_v2 post-min__title">
{{ page.title | safe }}
</div>
</h2>
{% endif %}
<div class="line post-min__line"></div>
<div class="post-min__dates">
<div class="post-min__date">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
<g clip-path="url(#clip0_43_1027)">
<path d="M11.3181 0.764648H10.171V1.91171C10.171 2.14112 9.97987 2.29406 9.7887 2.29406C9.59752 2.29406 9.40634 2.14112 9.40634 1.91171V0.764648H3.2887V1.91171C3.2887 2.14112 3.09752 2.29406 2.90634 2.29406C2.71517 2.29406 2.52399 2.14112 2.52399 1.91171V0.764648H1.37693C0.803401 0.764648 0.382812 1.26171 0.382812 1.91171V3.28818H12.6181V1.91171C12.6181 1.26171 11.9299 0.764648 11.3181 0.764648ZM0.382812 4.09112V11.0882C0.382812 11.7764 0.803401 12.2352 1.41517 12.2352H11.3563C11.9681 12.2352 12.6563 11.7382 12.6563 11.0882V4.09112H0.382812ZM3.78575 10.5146H2.86811C2.71517 10.5146 2.56222 10.3999 2.56222 10.2088V9.25288C2.56222 9.09994 2.67693 8.947 2.86811 8.947H3.82399C3.97693 8.947 4.12987 9.06171 4.12987 9.25288V10.2088C4.09164 10.3999 3.97693 10.5146 3.78575 10.5146ZM3.78575 7.07347H2.86811C2.71517 7.07347 2.56222 6.95877 2.56222 6.76759V5.81171C2.56222 5.65877 2.67693 5.50583 2.86811 5.50583H3.82399C3.97693 5.50583 4.12987 5.62053 4.12987 5.81171V6.76759C4.09164 6.95877 3.97693 7.07347 3.78575 7.07347ZM6.84458 10.5146H5.8887C5.73575 10.5146 5.58281 10.3999 5.58281 10.2088V9.25288C5.58281 9.09994 5.69752 8.947 5.8887 8.947H6.84458C6.99752 8.947 7.15046 9.06171 7.15046 9.25288V10.2088C7.15046 10.3999 7.03575 10.5146 6.84458 10.5146ZM6.84458 7.07347H5.8887C5.73575 7.07347 5.58281 6.95877 5.58281 6.76759V5.81171C5.58281 5.65877 5.69752 5.50583 5.8887 5.50583H6.84458C6.99752 5.50583 7.15046 5.62053 7.15046 5.81171V6.76759C7.15046 6.95877 7.03575 7.07347 6.84458 7.07347ZM9.9034 10.5146H8.94752C8.79458 10.5146 8.64164 10.3999 8.64164 10.2088V9.25288C8.64164 9.09994 8.75634 8.947 8.94752 8.947H9.9034C10.0563 8.947 10.2093 9.06171 10.2093 9.25288V10.2088C10.2093 10.3999 10.0946 10.5146 9.9034 10.5146ZM9.9034 7.07347H8.94752C8.79458 7.07347 8.64164 6.95877 8.64164 6.76759V5.81171C8.64164 5.65877 8.75634 5.50583 8.94752 5.50583H9.9034C10.0563 5.50583 10.2093 5.62053 10.2093 5.81171V6.76759C10.2093 6.95877 10.0946 7.07347 9.9034 7.07347Z"
fill="#AEC5BA"/>
</g>
<defs>
<clipPath id="clip0_43_1027">
<rect width="13" height="13" fill="white"/>
</clipPath>
</defs>
</svg>
<span class="p-sm post-min__date-title">{{ page.date | date(format='%B %e, %Y') }}</span>
</div>
<div class="post-min__date">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none">
<path d="M8.66671 1.08337L2.16671 1.08337C1.8795 1.08375 1.60417 1.198 1.40109 1.40109C1.198 1.60417 1.08375 1.8795 1.08337 2.16671L1.08337 10.2917C1.08385 10.7225 1.2552 11.1356 1.55985 11.4402C1.86449 11.7449 2.27754 11.9162 2.70837 11.9167L9.20837 11.9167C9.27952 11.9167 9.34997 11.9028 9.41571 11.8756C9.48145 11.8484 9.54117 11.8085 9.59148 11.7581C9.64179 11.7078 9.68169 11.6481 9.70889 11.5824C9.7361 11.5166 9.75008 11.4462 9.75004 11.375L9.75004 2.16671C9.74967 1.8795 9.63541 1.60417 9.43233 1.40109C9.22925 1.198 8.95391 1.08375 8.66671 1.08337ZM3.52087 3.25004L5.14587 3.25004C5.28953 3.25004 5.42731 3.30711 5.52889 3.40869C5.63047 3.51027 5.68754 3.64805 5.68754 3.79171C5.68754 3.93537 5.63047 4.07314 5.52889 4.17472C5.42731 4.27631 5.28953 4.33337 5.14587 4.33337L3.52087 4.33337C3.37722 4.33337 3.23944 4.27631 3.13786 4.17472C3.03628 4.07314 2.97921 3.93537 2.97921 3.79171C2.97921 3.64805 3.03628 3.51027 3.13786 3.40869C3.23944 3.30711 3.37722 3.25004 3.52087 3.25004ZM7.31254 10.0209L3.52087 10.0209C3.37722 10.0209 3.23944 9.96381 3.13786 9.86222C3.03628 9.76064 2.97921 9.62287 2.97921 9.47921C2.97921 9.33555 3.03628 9.19777 3.13786 9.09619C3.23944 8.99461 3.37722 8.93754 3.52087 8.93754L7.31254 8.93754C7.4562 8.93754 7.59398 8.99461 7.69556 9.09619C7.79714 9.19777 7.85421 9.33555 7.85421 9.47921C7.85421 9.62287 7.79714 9.76064 7.69556 9.86222C7.59398 9.96381 7.4562 10.0209 7.31254 10.0209ZM7.31254 8.12504L3.52087 8.12504C3.37722 8.12504 3.23944 8.06797 3.13786 7.96639C3.03628 7.86481 2.97921 7.72703 2.97921 7.58337C2.97921 7.43972 3.03628 7.30194 3.13786 7.20036C3.23944 7.09878 3.37722 7.04171 3.52087 7.04171L7.31254 7.04171C7.4562 7.04171 7.59398 7.09878 7.69556 7.20036C7.79714 7.30194 7.85421 7.43971 7.85421 7.58337C7.85421 7.72703 7.79714 7.86481 7.69556 7.96639C7.59398 8.06797 7.4562 8.12504 7.31254 8.12504ZM7.31254 6.22921L3.52087 6.22921C3.37722 6.22921 3.23944 6.17214 3.13786 6.07056C3.03628 5.96897 2.97921 5.8312 2.97921 5.68754C2.97921 5.54388 3.03628 5.40611 3.13786 5.30452C3.23944 5.20294 3.37722 5.14587 3.52087 5.14587L7.31254 5.14587C7.4562 5.14587 7.59397 5.20294 7.69556 5.30452C7.79714 5.40611 7.85421 5.54388 7.85421 5.68754C7.85421 5.8312 7.79714 5.96897 7.69556 6.07056C7.59398 6.17214 7.4562 6.22921 7.31254 6.22921Z"
fill="#AEC5BA"/>
<path d="M10.2917 11.9167L9.20842 11.9167C9.13727 11.9167 9.06682 11.9028 9.00108 11.8756C8.93534 11.8484 8.87562 11.8085 8.82531 11.7581C8.775 11.7078 8.7351 11.6481 8.7079 11.5824C8.68069 11.5166 8.66671 11.4462 8.66675 11.375L8.66675 4.87504C8.66671 4.8039 8.68069 4.73344 8.7079 4.66771C8.7351 4.60197 8.775 4.54224 8.82531 4.49193C8.87561 4.44163 8.93534 4.40173 9.00108 4.37452C9.06682 4.34732 9.13727 4.33333 9.20841 4.33337L11.3751 4.33337C11.4462 4.33333 11.5167 4.34732 11.5824 4.37452C11.6482 4.40173 11.7079 4.44163 11.7582 4.49193C11.8085 4.54224 11.8484 4.60197 11.8756 4.66771C11.9028 4.73344 11.9168 4.8039 11.9167 4.87504L11.9167 10.2917C11.9163 10.7225 11.7449 11.1356 11.4403 11.4402C11.1356 11.7449 10.7226 11.9162 10.2917 11.9167ZM9.75008 10.8334L10.2917 10.8334C10.4354 10.8333 10.5731 10.7762 10.6747 10.6746C10.7762 10.5731 10.8333 10.4353 10.8334 10.2917L10.8334 5.41671L9.75008 5.41671L9.75008 10.8334Z"
fill="#AEC5BA"/>
</svg>
<span class="p-sm post-min__date-title">News</span>
</div>
</div>
{% if page.description %}
<div class="news_description">
description:
{{ page.description | safe }}</div>
<p class="p-card post-min__text">
{{ page.description | safe }}
</p>
{% endif %}
<a class="p-sm post-min__link" href="{{ page.path | safe }}">More</a>
<span class="news_images">
{% for photo in page.assets | sort %}
<img class="news_image" src="{{ page.path | safe }}{{ photo | split(pat='/') | last }}" />
<!-- need to set firs image and discuss-->
{% endfor %}
</span>
</section>
{% endfor %}
{% endfor %}
</section>
{% endfor %}
{% endfor %}
</div>
{% endblock content %}

55
templates/page.html
View file

@ -2,8 +2,59 @@
{% block content %}
<h1>{{ resource.title }}</h1>
{% if page.taxonomies and page.taxonomies.faq %}{# Show FAQ breadcrumbs #}
<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="/faq">Faq</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="/{{ resource.title }}">{{ resource.title }}</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&#45;&#45;full"></div>-->
<h2 class="h1-inter faq-page-list__title">{{ resource.title }}</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>
{% endif %}
{{ resource.content | safe }}
</div>
</section>
{% endblock content %}