jekyll-theme-pirati 8.0.0.pre.alpha4 → 8.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5a2d5bf0efa5cd7c98975f58ac635361ecf7362cc711d9d072011ccc6a0c45e4
-  data.tar.gz: 197b48523325184bfb7f8358614548766d81e8852f2c8f7fbcf67aa82b0137be
+  metadata.gz: 5a5801710828048e585dd7086e5d3d271400425d6c16c05ac12a88b65c8e2bf5
+  data.tar.gz: 2a3ba90e59f55be5ca3e15ce2f44ae27ed28598adca5bada793e1d25d0a777a8
 SHA512:
-  metadata.gz: 8125fbcce0bd61691e926d3c170521d1c7d14eea9d3d780214349e02fc49951767a36bb44c2a140a5ffea5441183bb86063139e4d5d3403cc1dc6f1d220030d5
-  data.tar.gz: 76672595c85165eab0c173a0ffc50c104b0c093d907c7e46e761c8093769b068d3f2f7b71da1f0947847545d8428b2c95cba44cca0ebb419b9f25d89a43b430e
+  metadata.gz: fb5467c9e14bf052124b728ab5b935b62015326aeeefa3fa72bf8da9978cb0e960e8126b8659a75a150d54eb896920e96a186c12a8675d4c28ffaef491c23ccc
+  data.tar.gz: e1526060d20b7ac0502318351229b2c85e8a6b8d8179c296583c3653ef6b4eb92cf83b1071901785af147cb0c2ea5738c59ff09bb25ae84b9234e0cf481fc184

data/README.md

@@ -8,6 +8,145 @@ Theme of Czech Pirate Party.
 
 For usage see [USAGE.md](USAGE.md)
 
+## Updating to 8.x
+
+8.x version features a fully revamped UI based on our new [UI
+styleguide](https://styleguide.pir-test.eu/). The theme no longer has it's own
+CSS styles. Instead, all the styles are being provided by the styleguide itself.
+Same applies to JS: whole webpack asset pipeline has been dropped which
+resulted in a lot simpler design. This version is a transition one before
+migrating to Wagtail-driven websites. No more major updates will follow, only
+bugfixes a maybe some minor adjustments.
+
+### New features
+
+#### Sub links for campaigns
+
+You can now add sub link super buttons to campaign pages. To add it, provide the `subLinks` property of the particular campaign
+record with following shape:
+
+```
+subLinks:
+  - title: Povolební strategie
+    icon: ico--strategy
+    classes: bg-grey-125 hover:bg-black hover:text-white
+    href: /
+  - title: Financování kampaně
+    icon: ico--calculator
+    classes: bg-black text-white hover:bg-grey-125 hover:text-black
+    href: /
+```
+
+#### Transarency section in the footer
+
+Footer section listing transparent accounts and stuff can be enabled/disabled
+using `transparencySection: true/false` property in the `_data/menu.yml`.
+
+
+#### New includes
+
+- `_includes/avatar.html` - creates [avatar image](https://styleguide.pir-test.eu/latest/?p=viewall-atoms-avatars)
+- `_includes/buttons/basic.html` - a [button without icon](https://styleguide.pir-test.eu/latest/?p=atoms-button-colors)
+- `_includes/buttons/icon.html` - a [button with icon](https://styleguide.pir-test.eu/latest/?p=atoms-button-colors)
+- `_includes/buttons/super.html` - a [super button](https://styleguide.pir-test.eu/latest/?p=viewall-atoms-super-buttons)
+- `_includes/calendar.html` - a [calendar widget](https://styleguide.pir-test.eu/latest/?p=molecules-js-calendar)
+- `_includes/contact-line.html` - a generic [contact line](https://styleguide.pir-test.eu/latest/?p=viewall-atoms-contact-lines)
+- `_includes/countdown.html` - a [countdown widget](https://styleguide.pir-test.eu/latest/?p=viewall-organisms-countdown)
+- `_includes/hero/simple.html` - a [simple hero banner](https://styleguide.pir-test.eu/latest/?p=templates-pirate-center)
+- `_includes/hero/advanced.html` - a [complex hero banner](https://styleguide.pir-test.eu/latest/?p=templates-elections)
+
+#### New pagination
+
+You should update your pagination settings to `12` instead of `11`.
+
+#### Set styleguide url in the config
+
+Add `styleguide_base_url` property pointing to styleguide version you want to use.
+
+#### New pirate-center layout
+
+Provide front matter like following:
+
+```yaml
+title: ParduPiCe - Pardubické pirátské centrum
+shorthand: ParduPiCe
+openingHoursSEO: Mo-Fr 9:00-17:00
+heroHeadline: Zbrusu nové krajské pirátské centrum!
+heroDescription: V Pardubicích jsme otevřeli nové pirátské centrum pod zkratkou ParduPiCe.
+img: pardupice/1.jpg
+address: |
+  Pardubické pirátské centrum
+  Budova T-STRING
+  Masarykovo náměstí 1484
+  530 02 Pardubice I
+addressNote: Vstup do pirátského centra naleznete z boku budovy T-STRING naproti „AFI paláci“, vedle kadeřnictví. Vchod je v prostoru vjezdu na parkoviště ve vnitrobloku.
+contactPersons:
+  - id: filip.varecha
+    description: Správce coworku
+  - id: jan.bednar
+    description: Produkce
+calendarId: t60uj67580oudjh04tuh5icl8o@group.calendar.google.com
+calendarTitle: Kalendář akcí
+calendarPage: https://calendar.google.com/calendar/embed?src=t60uj67580oudjh04tuh5icl8o%40group.calendar.google.com&ctz=Europe%2FPrague
+mapIframeLink: https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10250.279531989467!2d15.770466!3d50.0381549!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd4d03352a17e038b!2zUGFyZHVQaUNlIOKAkyBQYXJkdWJpY2vDqSBQaXLDoXRza8OpIGNlbnRydW0!5e0!3m2!1scs!2scz!4v1568565921492!5m2!1scs!2scz
+```
+
+If you provide `calendarId`, it will display the event list automatically.
+
+
+#### Display party affiliation on person page
+
+To display, add `partyUid: [party_uid]` in the page front matter.
+
+#### Use customized hero background on person page
+
+To use it fully, provide `heroImg` in the person markdown file.
+
+#### Highlight important articles
+
+These will show as the [emphasized variant in black](https://styleguide.pir-test.eu/latest/?p=viewall-molecules-article-card).
+
+
+### Backwards incompatible changes
+
+#### Candidate lists
+
+New data entity `parties` has been introduced. Needs to be added as `_data/parties.yml`. It's an array with following structure:
+
+```
+- uid: [party_id]
+  name: [party_verbose_name]
+  logoImg: [party_image_in_svg_format]
+```
+
+All existing candidate lists need to be updated. Specifically, `party` property
+has to be replaced with `partyUid` pointing to actual `uid` in `parties.yml`.
+
+#### Font awesome dropped in favor of custom iconset
+
+As the result, all the `fa*` icons won't work anymore. New icons has `ico--*` naming instead. See the [styleguide](https://styleguide.pir-test.eu/latest/?p=viewall-atoms-icons) for an overview of available icons. You will need to update your icons should you used some. Namely, icons will have to be updated in the `menu.yml`.
+
+
+#### Some deleted templates
+
+- `_includes/article-box/three-in-row.html` - replaced with `_includes/article-box/list.html`
+- `_includes/rbar/bar_photo.html` - now replaced with `bar_profile.html` that already contains a picture
+- `_includes/rbar/bar_person_contact.html` - now replaced with `bar_profile.html` that already contains a contact section
+
+
+#### Obsolete JS widgets
+
+Following widgets won't work (source kept in repository for future possible use):
+
+- Agenda - replaced with calendar from styleguide
+- Intention map - no replacement
+- Custom layer map - no replacement
+- Site search - no replacement, no site search available anymore
+
+## Updating to 7.x
+
+Tag `_config.yml organization contactUid` is not used. Contacts person in bottom are popele with category `kontaktni_osoba`.
+
 ## Updating to 6.x
 
 To upgrade to v6 which features major visual upgrade, following steps are necessary:
@@ -26,9 +165,6 @@ To upgrade to v6 which features major visual upgrade, following steps are necess
       <h1 class="t-h2-alt">Přidejte se</h1>
     </div>
     ```
-## Updating to 7.x
-
-Tag `_config.yml organization contactUid` is not used. Contacts person in bottom are popele with category `kontaktni_osoba`.
 
 ## Contributing
 

data/_data/parties.yml

@@ -0,0 +1,7 @@
+- uid: pirati
+  name: Pirátská strana
+  logoImg: brand/logo.svg
+- uid: bezpp
+  name: bez politické příslušnosti
+- uid: evropani
+  name: Evropani.cz

data/_includes/article-box/article-box.html

@@ -1,18 +1,15 @@
-<div class="medium-6 large-4 {{ thecycle }} columns {% if forloop.last %} end {% endif %}">
-    <a href="{{ include.url }}">
-        <article class="article-card">
-            <img src="{{ include.image }}" alt="{{include.title}}">
-            <div class="card-content">
-                <img class="post-icon" src="{{"/assets/img/brand/logo.png" }}" alt="P">
-                <h4 class="post-author">{{ include.title }}</h4>
-                <p> {{ include.description }}
-                </p>
-                {% if include.button %}
-                <div class="text-right">
-                    <span class="label alert">{{ include.button }}</span>
-                </div>
-                {% endif %}
-            </div>
-        </article>
-    </a>
-</div>
+<article class="card">
+  <a href="{{ include.url }}">
+    <img src="{{ include.image }}" alt="{{ include.title }}" class="w-full h-48 object-cover" />
+  </a>
+  <div class="card__body p-4">
+    <h2 class="card-headline">{{ include.title }}</h2>
+    <p class="card-body-text">
+      {{ include.description }}
+    </p>
+
+    {% if include.button %}
+      {% include buttons/basic.html href=include.url cta=include.button class="btn--blue-300 btn--fullwidth btn--hoveractive mt-4" %}
+    {% endif %}
+  </div>
+</article>

data/_includes/article-box/list.html

@@ -0,0 +1,11 @@
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 {{ include.class }}">
+  {% for article-box in include.article-boxes %}
+    {% include article-box/article-box.html
+      url=article-box.url
+      image=article-box.image
+      title=article-box.title
+      description=article-box.description
+      button=article-box.button
+    %}
+  {% endfor %}
+</div>

data/_includes/calendar.html

@@ -1,4 +1,4 @@
-<div class="__js-root">
+<div class="__js-root {{ include.classes }}">
   {% if site.env.GOOGLE_CALENDAR_APIKEY and include.calendarId %}
     <ui-calendar-google-provider v-slot="{ events, onShowMore, hasMore }" :calendar-id="'{{ include.calendarId }}'" :api-key="'{{ site.env.GOOGLE_CALENDAR_APIKEY }}'">
       <ui-calendar-renderer

data/_includes/candidate-badge.html

@@ -29,15 +29,8 @@
       <div class="candidate-card__affiliation">
         {% if include.candidate.age %}<div>{{ include.candidate.age }} let</div>{% endif %}
 
-        {% if include.candidate.party %}
-          <div>
-            {% if include.candidate.partyImg %}
-              {% comment %}We expect an SVG format here to make things scalable{% endcomment %}
-              {% capture partyImg %}{{ include.candidate.partyImg | prepend: "/assets/img/" | absolute_url }}{% endcapture %}
-              {% include avatar.html class="w-6 mr-2" alt=include.candidate.party src=partyImg %}
-            {% endif %}
-            <span class="font-bold font-condensed">{{ include.candidate.party }}</span>
-          </div>
+        {% if include.candidate.partyUid %}
+          {% include party.html uid=include.candidate.partyUid %}
         {% endif %}
       </div>
       <div class="card__body candidate-card__social">

data/_includes/contact-line.html

@@ -1,4 +1,4 @@
-<{% if include.href %}a href="{{ include.href }}"{% else %}span{% endif %} class="contact-line icon-link {{ include.class }}" {% if include.target == "_blank" %}target="_blank" rel="noopener noreferrer"{% endif %}>
+<{% if include.href %}a href="{{ include.href }}"{% else %}span{% endif %} class="contact-line icon-link content-block--nostyle {{ include.class }}" {% if include.target == "_blank" %}target="_blank" rel="noopener noreferrer"{% endif %}>
   <i class="{{ include.icon }}"></i>
   <span>{{ include.caption }}</span>
 </{% if include.href %}a{% else %}span{% endif %}>

data/_includes/header.html

@@ -17,7 +17,7 @@
           <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" %}
+                {% include contact-line.html href=item.url icon=item.icon caption=item.link class="block lg:inline-block" target="_blank" %}
               {% endfor %}
             </div>
             {% include social-icon-group.html class="space-x-2 text-grey-200 py-4 lg:py-0" %}
@@ -93,7 +93,7 @@
             </button>
 
             {% if calendarProvided %}
-              <a href="#" class="btn text-sm max-w-full hidden lg:block" @click="toggleView('calendar')" v-if="events.length > 0">
+              <a href="#" class="btn text-sm max-w-full hidden lg:block" @click="toggleView('calendar')" v-if="events.length > 0" v-cloak>
                 <div class="btn__body bg-grey-800 text-grey-200 flex divide-x">
                   <span class="pr-4">&#123;{events[0].title}&#125;</span>
                   <span class="pl-4">&#123;{events[0].allDay ? 'Celý den' :  events[0].startDateVerbose + ', ' + events[0].startTimeVerbose}&#125;</span>

data/_includes/hero/simple.html

@@ -3,7 +3,7 @@
   {% if include.bgImg %}style="--image-url: url({{ include.bgImg }})"{% endif %}
 >
   <div class="container container--default">
-    <h1 class="head-alt-md md:head-alt-lg max-w-2xl">
+    <h1 class="head-alt-md md:head-alt-lg max-w-2xl {{ include.headlineClass }}">
       {{ include.headline }}
     </h1>
     <h2 class="head-xs mt-2 {{ include.descriptionClass }}">

data/_includes/page-header.html

@@ -3,7 +3,7 @@
 </header>
 
 {% if include.content %}
-  <div class="{% if include.contentClass %}{{ include.contentClass }}{% endif %}" itemprop="description">
+  <div class="{{ include.contentClass | default: page.contentClass | default: layout.contentClass }}" itemprop="description">
     {{ include.content }}
   </div>
 {% endif %}

data/_includes/party.html

@@ -0,0 +1,15 @@
+{% assign party = site.data.parties | where: "uid", include.uid  | first %}
+
+<div class="flex items-center">
+  {% if party.logoImg %}
+    {% comment %}We expect an SVG format here to make things scalable{% endcomment %}
+    {% if site.mediaStorage %}
+        {% capture partyImg %}https://a.pirati.cz/{{ site.mediaStorage }}/img/{{ party.logoImg }}{% endcapture %}
+    {%- else -%}
+        {% capture partyImg %}{{ party.logoImg | prepend: "/assets/img/" | absolute_url }}{% endcapture %}
+    {%- endif -%}
+    {% include avatar.html class="w-6 mr-2" alt=party.name src=partyImg %}
+  {% endif %}
+
+  <span class="font-bold font-condensed">{{ party.name }}</span>
+</div>

data/_includes/people/profile-badge.html

@@ -35,7 +35,7 @@
 
   <div class="badge__body">
     <h2 class="{% if include.headlineClass %}{{ include.headlineClass }}{% else %}head-heavy-2xs{% endif %} badge__title">
-      <a href="{{ url }}" title="{{ label }}">{{ label }}</a>
+      <a href="{{ url }}" title="{{ label }}" class="content-block--nostyle">{{ label }}</a>
     </h2>
 
     {% unless include.showDescription == false %}

data/_includes/program/list.html

@@ -1,11 +1,11 @@
-<div class="row small-up-2 medium-up-4 large-up-8">
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
 {% for item in include.program %}
-<div class="column column-block">
-  <a href="{{item.url | relative_url }}">
-    <img class="program-icon" src="{{ item.img | prepend: 'assets/img/' | relative_url}}" alt="{{item.title}}" />
-    <center>
-    <h2>{{item.title}}</h2>
-    </center>
-  </a>
-</div>
+  <div class="card elevation-3">
+    <div class="card__body">
+      <a href="{{item.url | relative_url }}">
+        <img class="program-icon" src="{{ item.img | prepend: 'assets/img/' | relative_url}}" alt="{{item.title}}" />
+        <h2>{{item.title}}</h2>
+      </a>
+    </div>
+  </div>
 {% endfor %}

data/_includes/right-bar/bar_board.html

@@ -1,32 +1,22 @@
 
 {% if page.board %}
-  <aside class="o-section">
-    <div class="o-section-inner o-section-inner--rightBlock">
-      <div class="o-section-block">
-        <div class="c-widget-accordion" data-accordion="" data-allow-all-closed="true">
-          <div class="c-widget-accordion-content" data-tab-content="">
-            {% if page.boardName %}
-              <h3> {{ page.boardName }} </h3>
-            {% else %}
-              <h3>Předsednictvo</h3>
-            {% endif %}
-            <ul>
-              {% for chair in page.board %}
-                {% if chair.uid %}
-                    {% assign person = site.people | where_exp: "item","item.uid contains chair.uid" | first %}
-                    <li> {{chair.position}}: <strong> <a href="{{person.url}}" > {{ person.name }} </a> </strong> </li>
-                {% else %}
-                    <li> {{chair.position}}: <strong> {{ chair.name }} </strong> </li>
-                {% endif %}
-              {% endfor %}
-
-            </ul>
-            {% if page.boardTurn %}
-                konec mandátu: <a href="{{ page.boardTurn.electionUrl }}" style="text-decoration:underline"> {{ page.boardTurn.endDate }} </a></li>
-            {% endif %}
-          </div>
-        </div>
-      </div>
-    </div>
-  </aside>
+  <div class="content-block">
+  <h2>{{ page.boardName | default: "Předsednictvo" }}</h2>
+  <ul class="unordered-list unordered-list--linked">
+    {% for chair in page.board %}
+      {% if chair.uid %}
+          {% assign person = site.people | where_exp: "item","item.uid contains chair.uid" | first %}
+          <li>
+            <span>{{ chair.position }}: <a class="content-block--nostyle font-bold" href="{{ person.url }}">{{ person.name }}</a></span>
+          </li>
+      {% else %}
+          <li>
+            <span>{{ chair.position }}: <strong>{{ chair.name }}</strong></span>
+          </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+  {% if page.boardTurn %}
+      <p>Konec mandátu: <a href="{{ page.boardTurn.electionUrl }}" style="text-decoration:underline"> {{ page.boardTurn.endDate }} </a></p>
+  {% endif %}
 {% endif %}

data/_includes/right-bar/bar_fb.html

@@ -1,21 +1,11 @@
-<div class="o-section-block show-for-medium">
-  <ul class="c-widget-accordion" data-accordion="" data-allow-all-closed="true">
-    <li class="c-widget-accordion-item is-active" data-accordion-item="">
-      <a href="#" class="c-widget-accordion-link c-widget-accordion-link--fb">
-        <span class="c-widget-accordion__title">Facebook</span>
+<h2 class="head-heavy-sm mb-2">Facebook</h2>
+<div class="fb-page" data-href="{{ site.facebook.profilePage }}" data-tabs="timeline" data-width="500" data-height="550" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
+  <div class="fb-xfbml-parse-ignore">
+    <blockquote cite="{{ site.facebook.profilePage }}">
+      <a href="{{ site.facebook.profilePage }}">
+        Najdete nás na Facebooku:<br>
+        {% if site.facebook.profilePageName %}{{ site.facebook.profilePageName }}{% else %}{{ site.organization.name }}{% endif %}
       </a>
-      <div class="c-widget-accordion-content" data-tab-content="">
-        <div class="fb-page" data-href="{{ site.facebook.profilePage }}" data-tabs="timeline" data-width="500" data-height="550" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
-          <div class="fb-xfbml-parse-ignore">
-            <blockquote cite="{{ site.facebook.profilePage }}">
-              <a href="{{ site.facebook.profilePage }}">
-                Najdete nás na Facebooku:<br>
-                {% if site.facebook.profilePageName %}{{ site.facebook.profilePageName }}{% else %}{{ site.organization.name }}{% endif %}
-              </a>
-            </blockquote>
-          </div>
-        </div>
-      </div>
-    </li>
-  </ul>
+    </blockquote>
+  </div>
 </div>

data/_includes/right-bar/bar_garant.html

@@ -1,5 +1,5 @@
 {% if page.garant %}
-{% assign garant = site.people | where:"uid",page.garant | first %}
-{% include people/profile-badge.html item=garant description="Garant" class="badge--condensed" %}
+  {% assign garant = site.people | where:"uid",page.garant | first %}
+  {% include people/profile-badge.html item=garant description="Garant" class="badge--condensed" %}
 {% endif %}
 

data/_includes/right-bar/bar_kodo.html

@@ -1,19 +1,12 @@
-<div class="o-section-block">
-	<ul class="c-widget-accordion" data-accordion="" data-allow-all-closed="true">
-		<li class="c-widget-accordion-item is-active" data-accordion-item="">
-			<a href="#" class="c-widget-accordion-link c-widget-accordion-link--nofill">
-				<span class="c-widget-accordion__title">Koordinátoři dobrovolníků</span>
-			</a>
-			<div class="c-widget-accordion-content" data-tab-content="">
-				{% assign kodos = site.people | where_exp: "item","item.categories contains 'kodo'" | sort:"ordkodo" %}
-				{% for person in kodos %}
-				{% include people/profile-badge.html item=person style='card' showContactInfo=false class='c-profile-badge--stacked c-profile-badge--bottomalign' headlineClass='t-h6-super' %}
-				{% endfor %}
-				<div class="c-widget-accordion-content__cta">
-					{% assign peopleCol = site.collections | where: "label", "people" | first %}
-					<a class="expanded button large u-0margin" href="{% if peopleCol.root %}{{ peopleCol.root }}{% else %}{{ '/kontakt/' | relative_url }}{% endif %}"> Ozvi se nám! </a>
-				</div>
-			</div>
-		</li>
-	</ul>
+<h2 class="head-heavy-sm mb-2">Koordinátoři dobrovolníků</h2>
+{% assign kodos = site.people | where_exp: "item","item.categories contains 'kodo'" | sort:"ordkodo" %}
+
+<div class="space-y-4">
+  {% for person in kodos %}
+    {% include people/profile-badge.html item=person  %}
+  {% endfor %}
 </div>
+
+{% assign peopleCol = site.collections | where: "label", "people" | first %}
+{% capture href %}{% if peopleCol.root %}{{ peopleCol.root }}{% else %}{{ '/kontakt/' | relative_url }}{% endif %}{% endcapture %}
+{% include buttons/icon.html href=href cta="Ozvi se nám" icon="ico--chevron-right" class="btn--black btn--hoveractive btn--fullwidth mt-4" %}