From ae33d7e72a1d1d2abfca196848d4cb074db82ca2 Mon Sep 17 00:00:00 2001
From: efim <efim666@bk.ru>
Date: Sun, 24 Sep 2023 19:58:05 +0000
Subject: [PATCH] feat: index page for desktop

---
 .../src/main/resources/public/output.css      | 388 +++++++++---------
 .../src/main/resources/templates/index.html   |  39 +-
 .../src/main/scala/example/Routes.scala       |  34 +-
 3 files changed, 247 insertions(+), 214 deletions(-)

diff --git a/16-countries-page-from-api/src/main/resources/public/output.css b/16-countries-page-from-api/src/main/resources/public/output.css
index 27007a9..62cab85 100644
--- a/16-countries-page-from-api/src/main/resources/public/output.css
+++ b/16-countries-page-from-api/src/main/resources/public/output.css
@@ -522,9 +522,9 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-.my-8 {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+.mx-5 {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
 }
 
 .my-4 {
@@ -532,19 +532,8 @@ video {
   margin-bottom: 1rem;
 }
 
-.mx-4 {
-  margin-left: 1rem;
-  margin-right: 1rem;
-}
-
-.mx-5 {
-  margin-left: 1.25rem;
-  margin-right: 1.25rem;
-}
-
-.mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
+.-mb-4 {
+  margin-bottom: -1rem;
 }
 
 .mr-2 {
@@ -555,10 +544,6 @@ video {
   margin-top: 0.25rem;
 }
 
-.-mb-4 {
-  margin-bottom: -1rem;
-}
-
 .block {
   display: block;
 }
@@ -583,56 +568,37 @@ video {
   height: 5rem;
 }
 
-.h-48 {
-  height: 12rem;
-}
-
-.h-\[375px\] {
-  height: 375px;
-}
-
-.h-\[350px\] {
-  height: 350px;
-}
-
 .h-32 {
   height: 8rem;
 }
 
-.h-28 {
-  height: 7rem;
+.h-48 {
+  height: 12rem;
 }
 
-.h-36 {
-  height: 9rem;
-}
-
-.h-52 {
-  height: 13rem;
-}
-
-.h-56 {
-  height: 14rem;
+.h-5 {
+  height: 1.25rem;
 }
 
 .h-60 {
   height: 15rem;
 }
 
-.h-10 {
-  height: 2.5rem;
-}
-
-.h-8 {
-  height: 2rem;
-}
-
 .h-9 {
   height: 2.25rem;
 }
 
-.h-5 {
-  height: 1.25rem;
+.h-\[350px\] {
+  height: 350px;
+}
+
+.h-max {
+  height: -moz-max-content;
+  height: max-content;
+}
+
+.h-full {
+  height: 100%;
 }
 
 .max-h-60 {
@@ -643,20 +609,8 @@ video {
   width: 4rem;
 }
 
-.w-64 {
-  width: 16rem;
-}
-
-.w-\[275px\] {
-  width: 275px;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.w-20 {
-  width: 5rem;
+.w-28 {
+  width: 7rem;
 }
 
 .w-4 {
@@ -667,34 +621,51 @@ video {
   width: 1.5rem;
 }
 
-.w-9 {
-  width: 2.25rem;
+.w-64 {
+  width: 16rem;
 }
 
-.w-10 {
-  width: 2.5rem;
+.w-\[275px\] {
+  width: 275px;
 }
 
-.w-8 {
-  width: 2rem;
+.w-screen {
+  width: 100vw;
 }
 
-.w-36 {
-  width: 9rem;
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
 }
 
-.w-32 {
-  width: 8rem;
+.max-w-screen-sm {
+  max-width: 640px;
 }
 
-.w-28 {
-  width: 7rem;
+.max-w-screen-md {
+  max-width: 768px;
+}
+
+.max-w-screen-lg {
+  max-width: 1024px;
+}
+
+.max-w-screen-xl {
+  max-width: 1280px;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
 }
 
 .flex-grow {
   flex-grow: 1;
 }
 
+.grow {
+  flex-grow: 1;
+}
+
 .appearance-none {
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -721,6 +692,10 @@ video {
   align-items: center;
 }
 
+.justify-center {
+  justify-content: center;
+}
+
 .justify-between {
   justify-content: space-between;
 }
@@ -729,10 +704,6 @@ video {
   justify-content: space-around;
 }
 
-.gap-8 {
-  gap: 2rem;
-}
-
 .gap-10 {
   gap: 2.5rem;
 }
@@ -741,51 +712,30 @@ video {
   gap: 0.5rem;
 }
 
-.gap-y-8 {
-  row-gap: 2rem;
-}
-
-.gap-y-9 {
-  row-gap: 2.25rem;
-}
-
-.gap-y-10 {
-  row-gap: 2.5rem;
-}
-
 .gap-x-2 {
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
 }
 
-.gap-y-2 {
-  row-gap: 0.5rem;
-}
-
-.gap-y-6 {
-  row-gap: 1.5rem;
-}
-
-.gap-x-6 {
-  -moz-column-gap: 1.5rem;
-       column-gap: 1.5rem;
-}
-
 .gap-x-3 {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
 }
 
+.gap-y-10 {
+  row-gap: 2.5rem;
+}
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
-.space-y-5 > :not([hidden]) ~ :not([hidden]) {
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
@@ -794,10 +744,8 @@ video {
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
 
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+.rounded {
+  border-radius: 0.25rem;
 }
 
 .rounded-lg {
@@ -808,10 +756,6 @@ video {
   border-radius: 0.375rem;
 }
 
-.rounded {
-  border-radius: 0.25rem;
-}
-
 .rounded-t-lg {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -831,16 +775,6 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-blue-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
-}
-
-.bg-red-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
-}
-
 .p-8 {
   padding: 2rem;
 }
@@ -850,9 +784,9 @@ video {
   padding-right: 1rem;
 }
 
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
 }
 
 .px-6 {
@@ -860,29 +794,28 @@ video {
   padding-right: 1.5rem;
 }
 
+.px-7 {
+  padding-left: 1.75rem;
+  padding-right: 1.75rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .py-10 {
   padding-top: 2.5rem;
   padding-bottom: 2.5rem;
 }
 
-.py-3 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
-}
-
-.px-7 {
-  padding-left: 1.75rem;
-  padding-right: 1.75rem;
+.pb-10 {
+  padding-bottom: 2.5rem;
 }
 
 .pb-8 {
@@ -893,10 +826,6 @@ video {
   padding-top: 0.5rem;
 }
 
-.pb-10 {
-  padding-bottom: 2.5rem;
-}
-
 .text-center {
   text-align: center;
 }
@@ -906,11 +835,6 @@ video {
   line-height: 2rem;
 }
 
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -920,12 +844,6 @@ video {
   font-weight: 700;
 }
 
-.shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -944,47 +862,11 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-xl {
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.drop-shadow-xl {
-  --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.drop-shadow-\[0_0_15px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
-  --tw-drop-shadow: drop-shadow(0 0 15px rgba(0,0,0,0.25));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.drop-shadow-\[0_0_25px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
-  --tw-drop-shadow: drop-shadow(0 0 25px rgba(0,0,0,0.25));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .drop-shadow {
   --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.drop-shadow-\[0_0_15px_rgba\(0\2c 0\2c 0\2c 0\.75\)\] {
-  --tw-drop-shadow: drop-shadow(0 0 15px rgba(0,0,0,0.75));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.drop-shadow-\[0_0_5px_rgba\(0\2c 0\2c 0\2c 0\.75\)\] {
-  --tw-drop-shadow: drop-shadow(0 0 5px rgba(0,0,0,0.75));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.drop-shadow-\[0_0_3px_rgba\(0\2c 0\2c 0\2c 0\.75\)\] {
-  --tw-drop-shadow: drop-shadow(0 0 3px rgba(0,0,0,0.75));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .drop-shadow-\[0_0_3px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
   --tw-drop-shadow: drop-shadow(0 0 3px rgba(0,0,0,0.5));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1034,3 +916,115 @@ html {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+
+@media (min-width: 768px) {
+  .md\:grid {
+    display: grid;
+  }
+
+  .md\:h-32 {
+    height: 8rem;
+  }
+
+  .md\:w-96 {
+    width: 24rem;
+  }
+
+  .md\:w-60 {
+    width: 15rem;
+  }
+
+  .md\:w-1\/4 {
+    width: 25%;
+  }
+
+  .md\:w-1\/3 {
+    width: 33.333333%;
+  }
+
+  .md\:w-1\/2 {
+    width: 50%;
+  }
+
+  .md\:w-full {
+    width: 100%;
+  }
+
+  .md\:w-10\/12 {
+    width: 83.333333%;
+  }
+
+  .md\:grid-flow-col {
+    grid-auto-flow: column;
+  }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .md\:grid-cols-\[auto-fill\] {
+    grid-template-columns: auto-fill;
+  }
+
+  .md\:grid-cols-\[repeat\(autofill\2c _250px\)\] {
+    grid-template-columns: repeat(autofill, 250px);
+  }
+
+  .md\:grid-cols-\[repeat\(auto-fill\2c _250px\)\] {
+    grid-template-columns: repeat(auto-fill, 250px);
+  }
+
+  .md\:grid-cols-\[repeat\(auto-fill\2c _275px\)\] {
+    grid-template-columns: repeat(auto-fill, 275px);
+  }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:place-content-center {
+    place-content: center;
+  }
+
+  .md\:items-center {
+    align-items: center;
+  }
+
+  .md\:justify-between {
+    justify-content: space-between;
+  }
+
+  .md\:justify-around {
+    justify-content: space-around;
+  }
+
+  .md\:px-10 {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+
+  .md\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .md\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
+  .md\:px-24 {
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+
+  .md\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
+  .md\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
diff --git a/16-countries-page-from-api/src/main/resources/templates/index.html b/16-countries-page-from-api/src/main/resources/templates/index.html
index 7538822..6916b76 100644
--- a/16-countries-page-from-api/src/main/resources/templates/index.html
+++ b/16-countries-page-from-api/src/main/resources/templates/index.html
@@ -21,19 +21,25 @@
       </p>
     <![endif]-->
     <header
-      class="bg-white h-20 flex flex-row justify-between items-center px-4 shadow-md"
+      class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center"
     >
-      <h1 class="font-bold">Where in the world?</h1>
-      <div class="flex flex-row gap-x-2">
-        <img
-          src="../public/icons/half-moon-shape-svgrepo-com.svg"
-          class="w-4"
-          alt=""
-        />
-        <p>Dark Mode</p>
+      <div
+        class="flex-1 max-w-screen-xl h-20 flex flex-row justify-between items-center px-4"
+      >
+        <h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
+        <div class="flex flex-row gap-x-2">
+          <img
+            src="../public/icons/half-moon-shape-svgrepo-com.svg"
+            class="w-4"
+            alt=""
+          />
+          <p>Dark Mode</p>
+        </div>
       </div>
     </header>
-    <nav class="flex flex-col px-6 my-4 justify-around h-48">
+    <nav
+      class="flex flex-col md:flex-row px-6 my-4 justify-around h-48 md:h-32 md:items-center"
+    >
       <form
         method="get"
         id="search-country"
@@ -41,8 +47,9 @@
         hx-get="/country"
         hx-target="body"
         hx-push-url="true"
+        class="md:w-1/4"
       >
-        <div class="flex flex-row bg-white shadow-md h-14 rounded-lg">
+        <div class="flex flex-row bg-white shadow-md h-14 rounded-lg md:w-full">
           <!-- <p class="w-16 grid place-content-center">IC</p> -->
           <img
             src="../public/icons/search-svgrepo-com.svg"
@@ -70,7 +77,7 @@
       <form>
         <select
           name="region"
-          class="block w-62 mt-1 h-12 w-64 bg-white shadow-md rounded-md shadow-sm focus:outline-none px-7"
+          class="block w-62 mt-1 h-12 w-64 bg-white shadow-lg rounded-md shadow-sm focus:outline-none px-7"
           hx-get="/"
           hx-target="#countries-main-list"
           hx-select="#countries-main-list"
@@ -101,11 +108,11 @@
       </form>
     </nav>
     <main
-      class="flex flex-col items-center gap-10 pb-8"
+      class="flex flex-col items-center gap-10 pb-8 md:grid md:grid-cols-[repeat(auto-fill,_275px)] md:px-20 md:justify-around"
       id="countries-main-list"
-      th:fragment="countries-main (countriesList)"
     >
       <article
+        th:fragment="cards-of-countries (countriesList)"
         th:each="country : ${countriesList}"
         id="germany"
         th:id="${country.alpha3Code}"
@@ -145,12 +152,12 @@
         </a>
       </article>
       <div
+        th:fragment="infiniteScrollAnchor (nextPage, selectedRegion)"
         th:if="${nextPage != -1}"
         id="next-page-anchor"
         hx-trigger="revealed"
-        th:hx-get="@{~/(region=${selectedRegion},page=${nextPage})}"
+        th:hx-get="@{~/countries-cards(region=${selectedRegion},page=${nextPage})}"
         hx-swap="outerHTML"
-        hx-select="#countries-main-list"
       ></div>
 
       <article
diff --git a/16-countries-page-from-api/src/main/scala/example/Routes.scala b/16-countries-page-from-api/src/main/scala/example/Routes.scala
index 541f2ff..6e4be24 100644
--- a/16-countries-page-from-api/src/main/scala/example/Routes.scala
+++ b/16-countries-page-from-api/src/main/scala/example/Routes.scala
@@ -30,7 +30,7 @@ case class Routes(countries: List[Country])(implicit
   }
   val engine: TemplateEngine = buildTemplateEngine()
 
-  private val pageSize = 10
+  private val pageSize = 12
 
   @cask.get("/")
   def indexPage(region: Option[String] = None, page: Int = 0) = {
@@ -62,6 +62,38 @@ case class Routes(countries: List[Country])(implicit
     )
   }
 
+  /**
+   * this method returns directly set of cards
+   * and new anchor for loading next page of cards
+   *
+   * intended to be called from "next-page-anchor" with htmx
+   */
+  @cask.get("/countries-cards")
+  def getPageOfCountriesCards(region: Option[String] = None, page: Int = 0) = {
+    val context = new Context()
+
+    val selectedCountries = region match {
+      case None                 => countries
+      case Some("")             => countries
+      case Some(selectedRegion) => countries.filter(_.region == selectedRegion)
+    }
+
+    val startIndex = page * pageSize
+    val countriesPage =
+      selectedCountries.slice(startIndex, startIndex + pageSize)
+    // if current page is not full - there will be no next page
+    val nextPage = if (countriesPage.length == pageSize) page + 1 else -1
+    context.setVariable("countriesList", countriesPage.asJava)
+    context.setVariable("selectedRegion", region.getOrElse(""))
+    context.setVariable("nextPage", nextPage)
+
+    val cards = engine.process("index", Set("cards-of-countries", "infiniteScrollAnchor").asJava, context)
+    Response(
+      cards,
+      headers = Seq("Content-Type" -> "text/html; charset=utf-8")
+    )
+  }
+
   @cask.get("/country")
   def getCountryPage(countryName: String) = {
     val context = new Context()