[func] calendar and memberships tabs

core/templates/calendar.html

@@ -1,12 +1,29 @@
 {% extends 'base.html' %} {% block title %}Kalendarz | pdlzbs{% endblock %}
 <!---->
 {% load static tailwind_tags wysiwyg %} {% block content %}
+<!---->
+
+{% if calendars %}
+<ul class="flex justify-center gap-4">
+  {% for calendar in calendars %}
+  <li>
+    <a
+      href="{% url 'calendar' %}#{{ calendar.year }}"
+      class="button py-2 active:ring-2 {% if forloop.counter0|divisibleby:2 %} sky color {% else %} green color {% endif %}"
+    >
+      {{ calendar.year }}
+    </a>
+  </li>
+  {% endfor %}
+</ul>
+{% endif %}
+
 <div class="flex flex-col items-center gap-4">
   {% for calendar in calendars %}
-  <article class="w-full pb-4">{% content calendar %}</article>
-  {% if not forloop.last %}
-  <hr class="w-36 border-b border-stone-200" />
-  {% endif %} {% empty %}
+  <article class="w-full py-4 hidden target:block" id="{{ calendar.year }}">
+    {% content calendar %}
+  </article>
+  {% empty %}
   <span class="py-4 text-xl">Brak kalendarzy</span>
   {% endfor %}
 </div>

core/templates/league.html

@@ -17,7 +17,7 @@
           href="{{ score.link }}"
           target="_blank"
           rel="noreferrer noopener"
-          class="button {% if forloop.counter0|divisibleby:2 %} pink color {% else %} rose color {% endif %}"
+          class="button {% if forloop.counter0|divisibleby:2 %} sky color {% else %} green color {% endif %}"
         >
           Wyniki {{score.rank}} ligi DMP {{score.year}}-{{score.year|add:"1"}}
         </a>

core/templates/membership.html

@@ -3,12 +3,29 @@
 {% block title %}Składki Członkowskie | pdlzbs{% endblock %}
 <!---->
 {% load static tailwind_tags wysiwyg %} {% block content %}
+<!---->
+
+{% if memberships %}
+<ul class="flex justify-center gap-4">
+  {% for membership in memberships %}
+  <li>
+    <a
+      href="{% url 'membership' %}#{{ membership.year }}"
+      class="button py-2 active:ring-2 {% if forloop.counter0|divisibleby:2 %} sky color {% else %} green color {% endif %}"
+    >
+      {{ membership.year }}
+    </a>
+  </li>
+  {% endfor %}
+</ul>
+{% endif %}
+
 <div class="flex flex-col items-center gap-4">
   {% for membership in memberships %}
-  <article class="w-full pb-4">{% content membership %}</article>
-  {% if not forloop.last %}
-  <hr class="w-36 border-b border-stone-200" />
-  {% endif %} {% empty %}
+  <article class="w-full py-4 hidden target:block" id="{{ membership.year }}">
+    {% content membership %}
+  </article>
+  {% empty %}
   <span class="py-4 text-xl">Brak dokumentów</span>
   {% endfor %}
 </div>

core/templates/tournaments-reverse.html

@@ -8,9 +8,6 @@
     {% if focus.show_title %}
     <h1 class="font-medium text-center mb-2">{{ focus.title }}</h1>
     {% endif %}
-    <div class="flex flex-wrap gap-4 items-center justify-center">
-      {% buttons focus.buttons %}
-    </div>
     <figure class="flex flex-col mt-2">
       <a
         href="{{ focus.buttons | firstbutton }}"
@@ -23,6 +20,9 @@
       /></a>
       <figcaption>{% content focus %}</figcaption>
     </figure>
+    <div class="flex flex-wrap gap-4 items-center justify-center">
+      {% buttons focus.buttons %}
+    </div>
   </article>
 </div>
 {% endblock %}

core/templates/tournaments.html

@@ -11,9 +11,6 @@
     {% if tournament.show_title %}
     <h2 class="font-medium text-center mb-2">{{ tournament.title }}</h2>
     {% endif %}
-    <div class="flex flex-wrap gap-4 items-center justify-center">
-      {% buttons tournament.buttons %}
-    </div>
     <figure class="flex flex-col mt-2">
       <a
         href="{{ tournament.buttons | firstbutton }}"
@@ -26,6 +23,9 @@
       /></a>
       <figcaption>{% content tournament %}</figcaption>
     </figure>
+    <div class="flex flex-wrap gap-4 items-center justify-center">
+      {% buttons tournament.buttons %}
+    </div>
   </article>
   {% if not forloop.last %}
   <hr class="w-36 border-b border-stone-200" />

core/templates/youth-reverse.html

@@ -7,11 +7,10 @@
   <article class="w-full max-w-screen-lg p-4">
     {% if focus.show_title %}
     <h1 class="font-medium text-center mb-2">{{ focus.title }}</h1>
-    {% endif %}
+    {% endif %} {% content focus %}
     <div class="flex flex-wrap gap-4 items-center justify-center">
       {% buttons focus.buttons %}
     </div>
-    {% content focus %}
   </article>
 </div>
 {% endblock %}

core/templates/youth.html

@@ -8,11 +8,10 @@
   <article class="w-full max-w-screen-lg p-4">
     {% if article.show_title %}
     <h1 class="font-medium text-center mb-2">{{ article.title }}</h1>
-    {% endif %}
+    {% endif %} {% content article %}
     <div class="flex flex-wrap gap-4 items-center justify-center">
       {% buttons article.buttons %}
     </div>
-    {% content article %}
   </article>
   {% if not forloop.last %}
   <hr class="w-36 border-b border-stone-200" />

core/templatetags/wysiwyg.py

@@ -46,7 +46,7 @@ def buttons(value: str):
                 target = 'target="_self"'
 
             stripped = text.strip()
-            return f'<a href={url} {target} class="inline px-12 py-3 button red color">{stripped}</a>' if stripped else ''
+            return f'<a href={url} {target} class="inline px-14 py-2 button red color">{stripped}</a>' if stripped else ''
         except:
             return ''
 

static/css/dist/styles.css

@@ -1293,10 +1293,6 @@ select {
   margin-top: 1.5rem;
 }
 
-.mb-8 {
-  margin-bottom: 2rem;
-}
-
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -1553,11 +1549,6 @@ select {
   font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1577,6 +1568,11 @@ select {
   font-size: 15px;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-\[2\.25rem\] {
   font-size: 2.25rem;
 }
@@ -1586,14 +1582,14 @@ select {
   line-height: 1;
 }
 
-.font-medium {
-  font-weight: 500;
-}
-
 .font-light {
   font-weight: 300;
 }
 
+.font-medium {
+  font-weight: 500;
+}
+
 .font-normal {
   font-weight: 400;
 }
@@ -1710,6 +1706,26 @@ select {
     background-color: rgb(186 230 253 / var(--tw-bg-opacity));
   }
 
+.color.green {
+    --tw-border-opacity: 1;
+    border-color: rgb(187 247 208 / var(--tw-border-opacity));
+  }
+
+.color.green {
+    --tw-bg-opacity: 1;
+    background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+  }
+
+.color.green:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(134 239 172 / var(--tw-border-opacity));
+  }
+
+.color.green:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+  }
+
 .color.indigo {
     --tw-border-opacity: 1;
     border-color: rgb(199 210 254 / var(--tw-border-opacity));
@@ -1775,6 +1791,20 @@ h4 {
   display: block;
 }
 
+.last\:hidden:last-child {
+  display: none;
+}
+
+.target\:block:target {
+  display: block;
+}
+
+.active\:ring-2:active {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 .prose-h2\:mb-2 :is(:where(h2):not(:where([class~="not-prose"] *))) {
   margin-bottom: 0.5rem;
 }

theme/static/css/dist/styles.css

@@ -1293,10 +1293,6 @@ select {
   margin-top: 1.5rem;
 }
 
-.mb-8 {
-  margin-bottom: 2rem;
-}
-
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -1309,10 +1305,6 @@ select {
   margin-bottom: auto;
 }
 
-.mt-0 {
-  margin-top: 0px;
-}
-
 .block {
   display: block;
 }
@@ -1557,11 +1549,6 @@ select {
   font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
 }
 
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1581,6 +1568,11 @@ select {
   font-size: 15px;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .text-\[2\.25rem\] {
   font-size: 2.25rem;
 }
@@ -1590,14 +1582,14 @@ select {
   line-height: 1;
 }
 
-.font-medium {
-  font-weight: 500;
-}
-
 .font-light {
   font-weight: 300;
 }
 
+.font-medium {
+  font-weight: 500;
+}
+
 .font-normal {
   font-weight: 400;
 }
@@ -1622,10 +1614,6 @@ select {
   line-height: 1.5;
 }
 
-.leading-3 {
-  line-height: .75rem;
-}
-
 .tracking-normal {
   letter-spacing: 0em;
 }
@@ -1718,6 +1706,26 @@ select {
     background-color: rgb(186 230 253 / var(--tw-bg-opacity));
   }
 
+.color.green {
+    --tw-border-opacity: 1;
+    border-color: rgb(187 247 208 / var(--tw-border-opacity));
+  }
+
+.color.green {
+    --tw-bg-opacity: 1;
+    background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+  }
+
+.color.green:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(134 239 172 / var(--tw-border-opacity));
+  }
+
+.color.green:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+  }
+
 .color.indigo {
     --tw-border-opacity: 1;
     border-color: rgb(199 210 254 / var(--tw-border-opacity));
@@ -1783,8 +1791,18 @@ h4 {
   display: block;
 }
 
-.prose-headings\:mt-0 :is(:where(h1, h2, h3, h4, th):not(:where([class~="not-prose"] *))) {
-  margin-top: 0px;
+.last\:hidden:last-child {
+  display: none;
+}
+
+.target\:block:target {
+  display: block;
+}
+
+.active\:ring-2:active {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
 .prose-h2\:mb-2 :is(:where(h2):not(:where([class~="not-prose"] *))) {

theme/static_src/src/styles.css

@@ -64,6 +64,10 @@ h4 {
       @apply border-sky-200 bg-sky-100 hover:border-sky-300 hover:bg-sky-200;
     }
 
+    &.green {
+      @apply border-green-200 hover:border-green-300 bg-green-100 hover:bg-green-200;
+    }
+
     &.indigo {
       @apply border-indigo-200 bg-indigo-100 hover:border-indigo-300 hover:bg-indigo-200;
     }