feat: index page for desktop
This commit is contained in:
efim
parent
aca8599d6e
commit
ae33d7e72a
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
Loading…
Reference in New Issue