_includes/header.html in jekyll-theme-pirati-7.7.1 vs _includes/header.html in jekyll-theme-pirati-8.0.0.pre.alpha1
- old
+ new
@@ -1,70 +1,143 @@
-<aside class="o-section o-section--smaller c-header-bar u-center--medium-down">
- <div class="row">
- <div class="o-section-inner" style="padding: 3px;">
- <div class="medium-12 columns">
- {% if site.organization.name %}
- <a href="{{ '/' | absolute_url }}">
- <span class="c-header-bar__title">{{ site.organization.name }}</span>
- </a>
- <div class="c-header-bar-divider show-for-medium"></div>
- {% endif %}
-
- <ul class="c-header-bar-items show-for-medium">
- {% if site.facebook.profilePage %}
- <li class="c-header-bar__item c-header-bar__item--smallerSpace">
- <a href="{{ site.facebook.profilePage }}" rel="noopener noreferrer" target="_blank" title="Naše stránka na Facebooku">
- <i class="fa fa-facebook" aria-hidden="true"></i>
- </a></li>
- {% endif %}
- {% if site.twitter.profile %}
- <li class="c-header-bar__item c-header-bar__item--smallerSpace">
- <a href="https://www.twitter.com/{{ site.twitter.profile }}" rel="noopener noreferrer" target="_blank" title="Náš účet na Twitteru">
- <i class="fa fa-twitter" aria-hidden="true"></i>
+<nav class="navbar __js-root">
+ <ui-app inline-template>
+ <ui-navbar inline-template>
+ <div>
+ <div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
+ <div class="navbar__brand my-4 flex items-center lg:block lg:pr-8 lg:my-0">
+ <a href="{{ '/' | absolute_url }}">
+ <img src="{{ site.styleguide_base_url }}/images/logo-round-white.svg" class="w-8 lg:w-full lg:border-r lg:border-grey-300 lg:pr-8" />
</a>
- </li>
- {% endif %}
- {% if site.youtube.channel %}
- <li class="c-header-bar__item c-header-bar__item--smallerSpace">
- <a href="https://www.youtube.com/channel/{{ site.youtube.channel }}" rel="noopener noreferrer" target="_blank" title="Náš účet na Youtube">
- <i class="fa fa-youtube" aria-hidden="true"></i>
+ <span class="lg:hidden pl-4 font-bold text-xl">Pirátská strana</span>
+ </div>
+ <div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
+ <a href="#" @click="show = !show" class="no-underline hover:no-underline">
+ <i class="ico--menu text-3xl"></i>
</a>
- </li>
- {% endif %}
- {% if site.organization.name %}
- <li class="c-header-bar__item c-header-bar__item--smallerSpace">
- <a href="{{'/feed.xml' | relative_url }}" rel="noopener noreferrer" target="_blank" title="Články tohoto webu v RSS">
- <i class="fa fa-rss" aria-hidden="true"></i>
+ </div>
+ <div v-if="show || isLgScreenSize" class="navbar__external navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto lg:flex lg:space-x-8 lg:pb-2">
+ <div class="text-grey-200 text-sm lg:space-x-8 leading-loose lg:leading-normal">
+ {% for item in site.data.menu.top %}
+ {% include contact-line.html href=item.url icon=item.icon caption=item.link class="lg:inline-block" target="_blank" %}
+ {% endfor %}
+ </div>
+ {% include social-icon-group.html class="space-x-2 text-grey-200 py-4 lg:py-0" %}
+ </div>
+ <div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
+ {% if site.data.menu.main %}
+ <ul class="navbar-menu text-white">
+ {% for item in site.data.menu.main %}
+ <li class="navbar-menu__item">
+ {% if item.submenu %}
+ <ui-navbar-subitem label="{{ item.name }}">
+ <ul class="navbar-menu__submenu">
+ {% for subitem in item.submenu %}
+ <li><a href="{{ subitem.link }}" class="navbar-menu__link">{{ subitem.name }}</a></li>
+ {% endfor %}
+ </ul>
+ </ui-navbar-subtitem>
+ {% else %}
+ <a href="{{ item.link | relative_url }}" class="navbar-menu__link">{{ item.name }}</a>
+ {% endif %}
+ </li>
+ {% endfor %}
+ </ul>
+ {% endif %}
+ </div>
+ <div v-if="show || isLgScreenSize" class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0">
+ <a href="https://dary.pirati.cz" rel="noopener noreferrer" target="_blank" class="btn btn--icon btn--cyan-200 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base">
+ <div class="btn__body-wrap">
+ <div class="btn__body ">Přispěj</div>
+ <div class="btn__icon ">
+ <i class="ico--pig"></i>
+ </div>
+ </div>
</a>
- </li>
- {% endif %}
- {% if site.instagram.profilePage %}
- <li class="c-header-bar__item c-header-bar__item--smallerSpace">
- <a href={{ site.instagram.profilePage }} rel="noopener noreferrer" target="_blank" title="Instagram - Česká pirátská strana">
- <i class="fa fa-instagram" aria-hidden="true"></i>
+ <a href="https://nalodeni.pirati.cz" rel="noopener noreferrer" target="_blank" class="btn btn--icon btn--blue-300 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base">
+ <div class="btn__body-wrap">
+ <div class="btn__body ">Naloď se</div>
+ <div class="btn__icon ">
+ <i class="ico--anchor"></i>
+ </div>
+ </div>
</a>
- </li>
- {% endif %}
- {% if site.flicker.profilePage %}
- <li class="c-header-bar__item c-header-bar__item--smallerSpace">
- <a href={{ site.flicker.profilePage }} rel="noopener noreferrer" target="_blank" title="Flickr - Česká pirátská strana">
- <i class="fa fa-flickr" aria-hidden="true"></i>
- </a>
- </li>
- {% endif %}
- </ul>
- <div class="c-header-bar-divider show-for-large"></div>
-
- <ul class="c-header-bar-items show-for-large">
- {% for item in site.data.menu.top %}
- <li class="c-header-bar__item">
- <a href="{{ item.url }}" rel="noopener noreferrer" target="_blank">
- <i class="{{ item.icon }}" aria-hidden="true"></i>
- <span class="c-header-bar__itemDescription">{{ item.link }}</span>
- </a>
- </li>
- {% endfor %}
- </ul>
+ </div>
+ </div>
</div>
- </div>
- </div>
-</aside>
+ </ui-navbar>
+ </ui-app>
+</nav>
+
+<div class="__js-root">
+ <ui-app inline-template>
+ {% if site.env.GOOGLE_CALENDAR_APIKEY and site.calendar.id %}
+ <ui-calendar-google-provider v-slot="{ events, onShowMore, hasMore }" :calendar-id="'{{ site.calendar.id }}'" :api-key="'{{ site.env.GOOGLE_CALENDAR_APIKEY }}'">
+ {% assign calendarProvided = true %}
+ {% endif %}
+
+ <ui-view-provider :initial="{regions: false, calendar: false}" v-slot="{ isCurrentView, toggleView }">
+ <nav class="subnav">
+ <div class="container container--wide">
+ <div class="flex">
+ <button @click="toggleView('regions')" class="btn btn--condensed btn--grey-500 btn--hoveractive btn--to-white text-sm mr-2" :class="{'btn--activated': isCurrentView('regions')}">
+ <div class="btn__body">
+ <span>{{ site.organization.name }}</span>
+ <i class="ico--chevron-down ml-4"></i>
+ </div>
+ </button>
+
+ <button @click="toggleView('calendar')" class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-orange-300 text-sm" :class="{'btn--activated': isCurrentView('calendar')}">
+ <div class="btn__body">
+ <i class="btn__inline-icon ico--calendar mr-0 md:mr-2 text-orange-300"></i>
+ <span class="hidden md:block">{{ site.calendar.title }}</span>
+ </div>
+ </button>
+
+ {% if calendarProvided %}
+ <a href="#" class="btn text-sm max-w-full hidden lg:block" @click="toggleView('calendar')" v-if="events.length > 0">
+ <div class="btn__body bg-grey-800 text-grey-200 flex divide-x">
+ <span class="pr-4">{{events[0].title}}</span>
+ <span class="pl-4">{{events[0].allDay ? 'Celý den' : events[0].startDateVerbose + ', ' + events[0].startTimeVerbose}}</span>
+ </div>
+ </a>
+ {% endif %}
+
+ {% if site.facebook.profilePage %}
+ <a href="{{ site.facebook.profilePage }}" target="_blank" rel="noopener noreferrer" class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-brands-facebook text-sm ml-2">
+ <div class="btn__body">
+ <i class="btn__inline-icon ico--facebook mr-0 md:mr-2 text-brands-facebook"></i>
+ <span class="hidden md:block">{{ site.facebook.profilePageName }}</span>
+ </div>
+ </a>
+ {% endif %}
+ </div>
+ </div>
+ </nav>
+
+ <aside class="subnav-aside">
+ <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('regions')}">
+ <a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--close"></i></a>
+ <ui-region-map class="container container--default" />
+ </div>
+ <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
+ <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--close"></i></a>
+ <div class="container container--default">
+ {% if calendarProvided %}
+ <ui-calendar-renderer :events="events" :on-show-more="onShowMore" :has-more="hasMore" :name="'{{ site.calendar.title }}'"></ui-calendar-renderer>
+ {% elsif site.calendar.page %}
+ <iframe src="{{ site.calendar.page }}" style="border-width:0; width: 100%; height: 410px; border: 0; overflow: hidden;"></iframe>
+ <p class="mt-4">
+ <a class="btn btn--orange-200 btn--hoveractive" href="{{ site.calendar.page | relative_url }}">
+ <span class="btn__body">Zobrazit všechny akce</span>
+ </a>
+ </p>
+ {% endif %}
+ </div>
+ </div>
+ </aside>
+ </ui-view-provider>
+
+ {% if calendarProvided %}
+ </ui-calendar-google-provider>
+ {% endif %}
+ </ui-app>
+</div>