alpine stuff and refactor

Lean-Coders · Oct 18, 2022 · 37ea62b · 37ea62b
1 parent a593c43
commit 37ea62b
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 27 deletions.
diff --git a/src/_includes/default.njk b/src/_includes/default.njk
@@ -34,7 +34,7 @@ title: Lean Bun - Burger Testing
   <body class="bg-gray-50 min-h-screen flex flex-col">
     <div class="shadow pb-4">{% include "./partials/navbar.njk" %}</div>
 
-    <div class="container max-w-4xl mt-8 px-6 flex-grow flex flex-col">{{ content | safe }}</div>
+    <div class="container max-w-6xl mt-8 px-6 flex-grow flex flex-col">{{ content | safe }}</div>
 
     {% include "./partials/footer.njk" %}
 

diff --git a/src/_includes/partials/footer.njk b/src/_includes/partials/footer.njk
@@ -1,6 +1,6 @@
-<footer class="text-center w-full py-8 border-t-2 border-[#eee]">
+<footer class="text-center w-full py-8 border-t-2 border-[#eee]" x-data x-cloak>
   <small class="text-gray-500"
     >Copyright ©
-    <a href="{{settings.url}}">{{settings.copyright}}</a> 2022.</small
+    <a href="{{settings.url}}">{{settings.copyright}}</a> <span x-text="new Date().getFullYear()"></span>.</small
   >
 </footer>
diff --git a/src/_includes/partials/navbar.njk b/src/_includes/partials/navbar.njk
@@ -1,7 +1,7 @@
-<div class="container max-w-4xl px-6 pt-3 lg:pt-6">
+<div class="container max-w-6xl px-6 pt-3 lg:pt-6">
   <div class="container mx-auto">
     <nav
-      class="flex flex-col items-center flex-wrap py-6 max-w-4xl mx-auto gap-6"
+      class="flex flex-col items-center flex-wrap py-6 gap-6"
     >
       <!--Title-->
         <a

diff --git a/src/_includes/posts.njk b/src/_includes/posts.njk
@@ -15,13 +15,14 @@ prism: true
   <p class="text-center text-base leading-6 text-gray-500 {% if testers.length > 0 %}mb-8{% endif %}">
     {{ address }}
   </p>
-  <ul class="grid mx-auto prose lg:prose-xl">
+  <ul class="grid mx-auto prose max-w-[80ch] lg:prose-xl">
     {% for tester in testers %} 
       {% set review = tester | loadTesterJson %}
       <li
         class="py-2 sm:py-4 !px-2 sm:!px-4 not-prose bg-white rounded-md shadow-md cursor-pointer"
         x-data="{ isOpen: false }"
         @keydown.escape="isOpen = false"
+        @click.outside="isOpen = false"
         @click="isOpen = !isOpen"
       >
         <div class="grid grid-cols-[1fr,120px,32px] gap-2 items-center">
@@ -46,112 +47,112 @@ prism: true
           </div>
           <p
             class="text-sm sm:text-base !leading-8 pt-4"
-            :class="{ 'hidden': !isOpen }"
+            x-show="isOpen" x-transition:enter.opacity
           >
             Burger
           </p>
           <p
             class="col-span-2 pt-4 text-right text-sm sm:text-base !leading-8"
-            :class="{ 'hidden': !isOpen }"
+            x-show="isOpen" x-transition:enter.opacity
           >
             {{ review.burger }}
           </p>
           {% if review.bunScore > 0 %}
             <p
               class="text-sm sm:text-base !leading-8"
-              :class="{ 'hidden': !isOpen }"
+              x-show="isOpen" x-transition:enter.opacity
             >
               Bun
             </p>
-            <div class="flex justify-end col-span-2" :class="{ 'hidden': !isOpen }">
+            <div class="flex justify-end col-span-2" x-show="isOpen" x-transition:enter.opacity>
               {% rating review.bunScore, 24 %}  
             </div>
           {% endif %}
           {% if review.pattyScore > 0%}
             <p
               class="text-sm sm:text-base !leading-8"
-              :class="{ 'hidden': !isOpen }"
+              x-show="isOpen" x-transition:enter.opacity
             >
               Patty
             </p>
-            <div class="flex justify-end col-span-2" :class="{ 'hidden': !isOpen }">
+            <div class="flex justify-end col-span-2" x-show="isOpen" x-transition:enter.opacity>
               {% rating review.pattyScore, 24 %}  
             </div>
           {% endif %}
           {% if review.timingScore > 0 %}
             <p
               class="text-sm sm:text-base !leading-8"
-              :class="{ 'hidden': !isOpen }"
+              x-show="isOpen" x-transition:enter.opacity
             >
               Timing
             </p>
-            <div class="flex justify-end col-span-2" :class="{ 'hidden': !isOpen }">
+            <div class="flex justify-end col-span-2" x-show="isOpen" x-transition:enter.opacity>
               {% rating review.timingScore, 24 %}  
             </div>
           {% endif %}
           {% if review.drinksScore > 0 %}
             <p
               class="text-sm sm:text-base !leading-8"
-              :class="{ 'hidden': !isOpen }"
+              x-show="isOpen" x-transition:enter.opacity
             >
               Drinks
             </p>
-            <div class="flex justify-end col-span-2" :class="{ 'hidden': !isOpen }">
+            <div class="flex justify-end col-span-2" x-show="isOpen" x-transition:enter.opacity>
               {% rating review.drinksScore, 24 %}  
             </div>
           {% endif %}
           {% if review.varietyScore > 0 %}
             <p
               class="text-sm sm:text-base !leading-8"
-              :class="{ 'hidden': !isOpen }"
+              x-show="isOpen" x-transition:enter.opacity
             >
               Variety
             </p>
-            <div class="flex justify-end col-span-2" :class="{ 'hidden': !isOpen }">
+            <div class="flex justify-end col-span-2" x-show="isOpen" x-transition:enter.opacity>
               {% rating review.varietyScore, 24 %}  
             </div>
           {% endif %}
           {% if review.ingredientScore > 0 %}
             <p
               class="text-sm sm:text-base !leading-8"
-              :class="{ 'hidden': !isOpen }"
+              x-show="isOpen" x-transition:enter.opacity
             >
               Ingredients
             </p>
-            <div class="flex justify-end col-span-2" :class="{ 'hidden': !isOpen }">
+            <div class="flex justify-end col-span-2" x-show="isOpen" x-transition:enter.opacity>
               {% rating review.ingredientScore, 24 %}  
             </div>
           {% endif %}
           {% if review.valueForMoneyScore > 0 %}
             <p
               class="text-sm sm:text-base !leading-8"
-              :class="{ 'hidden': !isOpen }"
+              x-show="isOpen" x-transition:enter.opacity
             >
               Value for Money
             </p>
-            <div class="flex justify-end col-span-2" :class="{ 'hidden': !isOpen }">
+            <div class="flex justify-end col-span-2" x-show="isOpen" x-transition:enter.opacity>
               {% rating review.valueForMoneyScore, 24 %}  
             </div>
           {% endif %}
           {% if review.serviceScore > 0 %}
             <p
               class="text-sm sm:text-base !leading-8"
-              :class="{ 'hidden': !isOpen }"
+              x-show="isOpen" x-transition:enter.opacity
             >
               Service
             </p>
-            <div class="flex justify-end col-span-2" :class="{ 'hidden': !isOpen }">
+            <div class="flex justify-end col-span-2" x-show="isOpen" x-transition:enter.opacity>
               {% rating review.serviceScore, 24 %}  
             </div>
           {% endif %}
           {% if review.ambienteScore > 0 %}
             <p
               class="text-sm sm:text-base !leading-8"
-              :class="{ 'hidden': !isOpen }"
+              x-show="isOpen" x-transition:enter.opacity
             >
               Ambiente
             </p>
-            <div class="flex justify-end col-span-2" :class="{ 'hidden': !isOpen }">
+            <div class="flex justify-end col-span-2" x-show="isOpen" x-transition:enter.opacity>
               {% rating review.ambienteScore, 24 %}  
             </div>
           {% endif %}
@@ -160,4 +161,4 @@ prism: true
     {% endfor %}
   </ul>
 </div>
-<article class="prose lg:prose-xl pt-4 pb-8 mx-auto">{{ content | safe }}</article>
+<article class="prose max-w-[80ch] lg:prose-xl pt-4 pb-8 mx-auto">{{ content | safe }}</article>