implement design requirements/fixes - homepage, articles, candidates

majak_uistyleguide/static/images/europarl/logo-full-black.svg

@@ -5,31 +5,8 @@
    viewBox="0 0 235.44282 40.335538"
    version="1.1"
    id="svg24"
-   sodipodi:docname="logo-full-black.svg"
-   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview37"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     showgrid="false"
-     inkscape:zoom="6.6281837"
-     inkscape:cx="115.41623"
-     inkscape:cy="20.367571"
-     inkscape:window-width="1920"
-     inkscape:window-height="1004"
-     inkscape:window-x="0"
-     inkscape:window-y="44"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg24" />
   <defs
      id="defs28" />
   <g
@@ -189,15 +166,45 @@
      height="40.189453"
      x="153.40904"
      y="0.1460845" />
-  <text
-     xml:space="preserve"
-     style="font-size:21.3333px;font-family:'Roboto Condensed';-inkscape-font-specification:'Roboto Condensed, ';fill:#000000"
-     x="161.56567"
-     y="27.358948"
-     id="text395"><tspan
-       sodipodi:role="line"
-       id="tspan393"
-       x="161.56567"
-       y="27.358948"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:21.3333px;font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue';fill:#000000">Eurovolby</tspan></text>
+  <g
+     aria-label="Eurovolby"
+     id="text395"
+     style="font-size:21.3333px;font-family:'Roboto Condensed';-inkscape-font-specification:'Roboto Condensed, '">
+    <path
+       d="m 162.44034,27.358948 h 6.39999 v -2.13333 H 164.787 v -4.58666 h 3.22133 v -2.13333 H 164.787 v -3.94666 h 4.05333 v -2.13333 h -6.39999 z"
+       style="font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue'"
+       id="path290" />
+    <path
+       d="m 173.59767,27.572281 c 2.304,0 3.49866,-1.365331 3.49866,-3.754661 V 12.425638 H 174.835 v 11.562648 c 0,1.066665 -0.44799,1.450665 -1.19466,1.450665 -0.74667,0 -1.19466,-0.384 -1.19466,-1.450665 V 12.425638 h -2.34667 V 23.81762 c 0,2.38933 1.19467,3.754661 3.49866,3.754661 z"
+       style="font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue'"
+       id="path292" />
+    <path
+       d="m 178.76034,27.358948 h 2.34666 v -6.39999 h 0.81067 c 1.06666,0 1.472,0.447999 1.472,1.834664 v 2.730662 c 0,1.215998 0.0853,1.450664 0.21333,1.834664 h 2.38933 c -0.23467,-0.554666 -0.256,-1.087999 -0.256,-1.813331 v -2.623996 c 0,-1.68533 -0.384,-2.794662 -1.55733,-3.157328 v -0.04267 c 1.04533,-0.426666 1.536,-1.407997 1.536,-2.943995 v -0.917332 c 0,-2.303996 -1.04534,-3.434661 -3.47733,-3.434661 h -3.47733 z m 2.34666,-8.53332 v -4.26666 h 1.06667 c 0.832,0 1.19466,0.469333 1.19466,1.535998 v 1.151998 c 0,1.194665 -0.53333,1.578664 -1.40799,1.578664 z"
+       style="font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue'"
+       id="path294" />
+    <path
+       d="m 190.74965,27.572281 c 2.304,0 3.56266,-1.365331 3.56266,-3.754661 v -7.850654 c 0,-2.38933 -1.25866,-3.754661 -3.56266,-3.754661 -2.30399,0 -3.56266,1.365331 -3.56266,3.754661 v 7.850654 c 0,2.38933 1.25867,3.754661 3.56266,3.754661 z m 0,-2.13333 c -0.74666,0 -1.216,-0.405333 -1.216,-1.471998 v -8.14932 c 0,-1.066665 0.46934,-1.471998 1.216,-1.471998 0.74667,0 1.216,0.405333 1.216,1.471998 v 8.14932 c 0,1.066665 -0.46933,1.471998 -1.216,1.471998 z"
+       style="font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue'"
+       id="path296" />
+    <path
+       d="m 197.49095,27.358948 h 3.11466 l 2.26133,-14.93331 h -2.15466 l -1.536,11.583982 h -0.0427 l -1.53599,-11.583982 h -2.368 z"
+       style="font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue'"
+       id="path298" />
+    <path
+       d="m 207.34692,27.572281 c 2.30399,0 3.56266,-1.365331 3.56266,-3.754661 v -7.850654 c 0,-2.38933 -1.25867,-3.754661 -3.56266,-3.754661 -2.304,0 -3.56266,1.365331 -3.56266,3.754661 v 7.850654 c 0,2.38933 1.25866,3.754661 3.56266,3.754661 z m 0,-2.13333 c -0.74667,0 -1.216,-0.405333 -1.216,-1.471998 v -8.14932 c 0,-1.066665 0.46933,-1.471998 1.216,-1.471998 0.74666,0 1.216,0.405333 1.216,1.471998 v 8.14932 c 0,1.066665 -0.46934,1.471998 -1.216,1.471998 z"
+       style="font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue'"
+       id="path300" />
+    <path
+       d="m 212.48823,27.358948 h 6.20799 v -2.13333 h -3.86132 v -12.79998 h -2.34667 z"
+       style="font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue'"
+       id="path302" />
+    <path
+       d="m 219.82689,27.358948 h 3.69066 c 2.34666,0 3.56266,-1.237332 3.56266,-3.541328 v -1.279998 c 0,-1.578664 -0.49067,-2.687996 -1.74933,-3.114662 v -0.04267 c 1.04533,-0.426666 1.51466,-1.386665 1.51466,-2.922662 v -0.597333 c 0,-2.303996 -1.04533,-3.434661 -3.47733,-3.434661 h -3.54132 z m 2.34666,-8.85332 v -3.94666 h 1.13066 c 0.832,0 1.19467,0.469333 1.19467,1.535998 v 0.831998 c 0,1.194665 -0.53333,1.578664 -1.408,1.578664 z m 0,6.71999 v -4.58666 h 1.04533 c 1.06667,0 1.51467,0.426666 1.51467,1.813331 v 1.301331 c 0,1.109332 -0.42667,1.471998 -1.216,1.471998 z"
+       style="font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue'"
+       id="path304" />
+    <path
+       d="m 230.25884,27.358948 h 2.34666 v -6.357324 l 2.83733,-8.575986 h -2.28267 l -1.59999,5.482658 h -0.0427 l -1.6,-5.482658 h -2.49599 l 2.83733,8.575986 z"
+       style="font-family:'Bebas Neue';-inkscape-font-specification:'Bebas Neue'"
+       id="path306" />
+  </g>
 </svg>

majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html

 <div
   class="
-    flex flex-col mb-8 bg-grey-180 drop-shadow
+    flex flex-col bg-grey-180 drop-shadow
 
     {{ classes }}
   "

majak_uistyleguide/templates/patterns/molecules/navbar/additional_button.html

 <a
   class="
-    btn__body-wrap hover:no-underline
+    hover:no-underline
 
     hidden lg:inline
   "
@@ -8,11 +8,9 @@
 >
   <div
     class="
-      btn__body border-none border-4 w-24 h-11 py-4 px-6
+      navbar__border-button
 
-      {% block desktop_color_classes %}
-        bg-pirati-yellow text-black hover:bg-yellow-600
-      {% endblock %}
+      flex items-center justify-center border-none duration-150 border-4 w-24 h-11 py-4 px-6
 
       xl:w-auto
     "
@@ -28,18 +26,14 @@
     lg:hidden inline
   "
 >
-  <div class="btn__body-wrap">
+  <div>
     <div
       class="
-        btn__body px-0 group border-4 bg-transparent w-48 h-11 py-8
+        flex justify-center items-center group border-4 bg-transparent border-yellow-500 text-black w-48 h-11 py-8 px-0
 
         group-hover:border-yellow-600
 
         xl:w-auto
-
-        {% block mobile_color_classes %}
-          border-yellow-500 text-black
-        {% endblock %}
       "
     >{{ button.name }}</div>
   </div>

majak_uistyleguide/templates/patterns/organisms/articles/europarl/candidate_articles_section.html

 {% extends 'patterns/organisms/articles/articles_section.html' %}
 
 {% block heading_classes %} head-10xl {% endblock %}
+
+{% block button_wrapper_classes %}
+  flex justify-center pt-12 pb-20
+
+  xl:py-24
+{% endblock %}

majak_uistyleguide/templates/patterns/organisms/articles/main_articles_timeline.html

@@ -5,7 +5,8 @@
       <div class="text-center">
         <h2 class="head-9xl">{{ month_1 }}</h2>
       </div>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-12 lg:mb-6">
         {% include 'patterns/molecules/articles/article_timeline_preview.html' %}
         {% include 'patterns/molecules/articles/article_timeline_preview.html' %}
         {% include 'patterns/molecules/articles/article_timeline_preview.html' %}
@@ -15,6 +16,7 @@
       <div class="text-center">
         <h2 class="head-9xl">{{ month_1 }}</h2>
       </div>
+
       <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
         {% include 'patterns/molecules/articles/article_timeline_preview.html' %}
         {% include 'patterns/molecules/articles/article_timeline_preview.html' %}

majak_uistyleguide/templates/patterns/organisms/faq/faq_answer.html

 <template v-if="isCurrentView('view1') || isCurrentView('view2')">
-  <div
-    class="
-      sticky
-      border-y bg-white border-black
-    "
-    style="top: {{ iteration|multiply:1.9 }}em"
-  >
-    <a
-      class="container--wide py-1 flex gap-1 items-center"
-      href="#faq{{ iteration }}"
-    >
-      {% include 'patterns/atoms/icons/arrow.html' with fill='#000' %}
-
-      <span class="mt-0.5">
-        {{ section_name }}
-      </span>
-    </a>
-  </div>
+  <ui-faq-section-header
+    iteration="{{ iteration }}"
+    name="{{ section_name }}"
+  ></ui-faq-section-header>
 
   <div class="faq-answer bg-grey-150 pt-16" id="faq{{ iteration }}">
     <div class="container--wide !mb-16">
@@ -53,9 +39,9 @@
         >
           <div
             class="
-              flex flex-col justify-end items-end h-40
+              flex flex-col justify-end items-end h-64 ml-[-5.5rem]
 
-              lg:h-96
+              lg:h-96 lg:ml-0
 
               faq-answer--person--text
             "
@@ -72,7 +58,7 @@
           </div>
 
           <img
-            class="lg:h-96 h-40"
+            class="lg:h-96 h-64"
             src="{{ image_src }}"
           >
         </div>

majak_uistyleguide/templates/patterns/organisms/header/articles_header.html

 {% extends 'patterns/organisms/header/simple_header_with_tags.html' %}
 
 {% block classes %}
-  bg-black flex items-center w-full mb-12 pt-28 pb-8
+  bg-black flex items-center w-full mb-10 pt-28 pb-8
+
+  md:mb-16
 
   xl:pt-48 xl:pb-24
 

majak_uistyleguide/templates/patterns/organisms/header/europarl/articles_header.html

 {% extends 'patterns/organisms/header/europarl/simple_header_with_tags.html' %}
 
+{% block classes %}
+  bg-pirati-yellow flex items-center w-full mb-10 pt-28 pb-8
+
+  md:mb-16
+
+  xl:pt-48 xl:pb-24
+
+  {% block extra_classes %}{% endblock %}
+{% endblock %}
+
 {% block after_heading %}
   {% include 'patterns/molecules/tags/tags.html' with classes='mb-4' tag_color_classes='bg-black text-white' %}
 

majak_uistyleguide/templates/patterns/organisms/header/europarl/simple_header_with_ui_switch.html

@@ -9,6 +9,7 @@
   >
     <ui-horizontal-scrollable
       classes="switch overflow-x-scroll flex gap-2 w-[calc(100vw_-_3rem)] lg:w-[unset]"
+      scroller-classes="!text-black"
       arrow-position="bottom"
     >
       {% block switch %}

majak_uistyleguide/templates/patterns/organisms/layout/navbar.html

@@ -91,16 +91,14 @@
         {% if menu_button and additional_buttons %}
           {% block navbar_menu_button %}
             <div
-              class="group btn btn--hoveractive uppercase cursor-pointer relative"
+              class="group uppercase cursor-pointer relative"
             >
-              <div class="btn__body-wrap w-24 h-11 min-w-[9rem]">
+              <div class="w-24 h-11 min-w-[9rem]">
                 <div
                   class="
-                    navbar__border-button btn__body border-none border-4 w-24 h-11 py-4 px-6
+                    navbar__border-button
 
-                    {% block navbar_menu_button_color_classes %}
-                      bg-pirati-yellow !text-black hover:bg-yellow-600
-                    {% endblock %}
+                    flex items-center justify-center border-none border-4 w-24 h-11 py-4 px-6 duration-150
 
                     xl:w-auto
                   "

majak_uistyleguide/templates/patterns/templates/europarl/article/article_list.html

@@ -2,9 +2,8 @@
 {% include 'patterns/organisms/header/europarl/articles_header.html' %}
 
 <main role="main">
-  <div class="mt-10 md:mt-20">
   {% include 'patterns/organisms/articles/main_articles_timeline.html' %}
-  </div>
 </main>
 
+{% include 'patterns/organisms/main_section/newsletter_section.html' %}
 {% include 'patterns/organisms/layout/footer.html' %}

majak_uistyleguide/templates/patterns/templates/europarl/faq/faq.html

@@ -8,7 +8,7 @@
     {% include 'patterns/organisms/header/europarl/faq_header.html' %}
 
     <main role="main" class="bg-grey-150 pb-10">
-      <div class="flex flex-col __js-root">
+      <div class="flex flex-col">
         {% include 'patterns/organisms/faq/faq_answer.html' with iteration=0 %}
         {% include 'patterns/organisms/faq/faq_answer.html' with iteration=1 %}
         {% include 'patterns/organisms/faq/faq_answer.html' with iteration=2 %}

src/css/organisms/navbar.pcss

@@ -9,7 +9,7 @@
   }
 
   .navbar__border-button {
-    @apply text-black xl:text-white
+    @apply bg-pirati-yellow text-black hover:bg-yellow-600
   }
 
   .navbar__menu-item--selected {
@@ -27,12 +27,20 @@
       @apply inline
     }
 
+    .navbar__border-button {
+      @apply bg-black text-pirati-yellow hover:bg-grey-600
+    }
+
     .bar1, .bar2, .bar3 {
       @apply bg-black
     }
 
     &.navbar--europarl-transparent {
       @apply bg-transparent;
+
+      .navbar__border-button {
+        @apply bg-pirati-yellow text-black hover:bg-yellow-600
+      }
     }
   }
 
@@ -47,9 +55,6 @@
     .navbar__logo--black {
       @apply inline
     }
-    .navbar__border-button {
-      @apply text-black
-    }
 
     .bar1, .bar2, .bar3 {
       @apply bg-black
@@ -65,9 +70,6 @@
       .navbar__logo--black {
         @apply hidden
       }
-      .navbar__border-button {
-        @apply text-white
-      }
 
       .bar1, .bar2, .bar3 {
         @apply bg-white

src/js/components/CandidatePrimaryBox.vue

@@ -70,7 +70,7 @@
         ref="image"
       >
         <img
-          class="lg:w-1/2"
+          class="w-3/4 lg:w-1/2"
           :src="imageSource"
         >
       </div>

src/js/components/FaqSectionHeader.vue

+<script setup>
+  import { isLgScreenSize } from "../utils"
+</script>
+
+<template>
+  <div
+    class="
+      sticky
+      border-y bg-white border-black
+    "
+    :style="
+      'top: ' + this.top + 'em'
+    "
+  >
+    <a
+      class="container--wide py-1 flex gap-1 items-center"
+      :href="'#faq' + this.iteration"
+    >
+      <svg width="20" height="21" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g>
+          <path
+            d="M0 16.5H4.40178L11 10.0002L4.40228 3.5H0L6.60069 10.0002L0 16.5Z"
+            fill="#000"
+            class="arrow-icon"
+          />
+        </g>
+      </svg>
+
+      <span class="mt-0.5">
+        {{ name }}
+      </span>
+    </a>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "FaqSectionHeader",
+    props: ["iteration", "name"],
+    data () {
+      return {
+        top: (
+          isLgScreenSize() ?
+          (parseInt(this.iteration) * 1.9) :
+          (parseInt(this.iteration) * 1.9 + 3.8)
+        )
+      }
+    }
+  }
+</script>

src/js/main.js

@@ -14,6 +14,7 @@ import Popout from "./components/popout/Popout";
 import PopoutContent from "./components/popout/PopoutContent";
 import PopoutItem from "./components/popout/PopoutItem";
 import FooterCollapsible from "./components/footer/FooterCollapsible";
+import FaqSectionHeader from "./components/FaqSectionHeader";
 import HorizontalScrollable from "./components/HorizontalScrollable";
 import CardProgram from "./components/card_program/CardProgram"
 import CandidatePrimaryBox from "./components/CandidatePrimaryBox";
@@ -32,6 +33,7 @@ Vue.component("ui-popout", Popout);
 Vue.component("ui-popout-content", PopoutContent);
 Vue.component("ui-popout-item", PopoutItem);
 Vue.component("ui-footer-collapsible", FooterCollapsible);
+Vue.component("ui-faq-section-header", FaqSectionHeader);
 Vue.component("ui-horizontal-scrollable", HorizontalScrollable);
 Vue.component("ui-candidate-primary-box", CandidatePrimaryBox);
 Vue.component("ui-card-program", CardProgram);