efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: dark theme, font icons 

courtesy of https://github.com/tailwindlabs/heroicons
This commit is contained in:
efim 2023-09-26 15:21:03 +00:00
parent 0f30e1fc41
commit 51319b036b
4 changed files with 226 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

225
16-countries-page-from-api/src/main/resources/public/output.css
View File

@ -584,10 +584,6 @@ video {
height: 1.25rem; height: 1.25rem;
} }
.h-60 {
height: 15rem;
}
.h-9 { .h-9 {
height: 2.25rem; height: 2.25rem;
} }
@ -596,17 +592,45 @@ video {
height: 350px; height: 350px;
} }
.h-full { .h-fit {
height: 100%; height: -moz-fit-content;
height: fit-content;
} }
.h-screen { .h-screen {
height: 100vh; height: 100vh;
} }
.h-fit { .h-6 {
height: -moz-fit-content; height: 1.5rem;
height: fit-content; }
.h-8 {
height: 2rem;
}
.h-full {
height: 100%;
}
.h-10 {
height: 2.5rem;
}
.h-3 {
height: 0.75rem;
}
.h-4 {
height: 1rem;
}
.h-7 {
height: 1.75rem;
}
.h-16 {
height: 4rem;
} }
.max-h-60 { .max-h-60 {
@ -637,12 +661,20 @@ video {
width: 275px; width: 275px;
} }
.w-full {
width: 100%;
}
.w-screen { .w-screen {
width: 100vw; width: 100vw;
} }
.w-full { .w-8 {
width: 100%; width: 2rem;
}
.w-12 {
width: 3rem;
} }
.max-w-screen-xl { .max-w-screen-xl {
@ -687,18 +719,10 @@ video {
place-content: center; place-content: center;
} }
.content-center {
align-content: center;
}
.items-center { .items-center {
align-items: center; align-items: center;
} }
.justify-center {
justify-content: center;
}
.justify-between { .justify-between {
justify-content: space-between; justify-content: space-between;
} }
@ -772,6 +796,11 @@ video {
border-width: 1px; border-width: 1px;
} }
.border-yellow-400 {
--tw-border-opacity: 1;
border-color: rgb(250 204 21 / var(--tw-border-opacity));
}
.bg-very-light-gray { .bg-very-light-gray {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: hsl(0 0% 98% / var(--tw-bg-opacity)); background-color: hsl(0 0% 98% / var(--tw-bg-opacity));
@ -782,11 +811,6 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity)); background-color: rgb(255 255 255 / var(--tw-bg-opacity));
} }
.bg-red-200 {
--tw-bg-opacity: 1;
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
.p-8 { .p-8 {
padding: 2rem; padding: 2rem;
} }
@ -826,6 +850,11 @@ video {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
.px-12 {
padding-left: 3rem;
padding-right: 3rem;
}
.pb-10 { .pb-10 {
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
} }
@ -856,6 +885,21 @@ video {
font-weight: 700; font-weight: 700;
} }
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.shadow-lg { .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: 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); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@ -929,23 +973,46 @@ html {
outline-offset: 2px; outline-offset: 2px;
} }
:is(.dark .dark\:border-dark-blue) {
--tw-border-opacity: 1;
border-color: hsl(209 23% 22% / var(--tw-border-opacity));
}
:is(.dark .dark\:bg-dark-blue) {
--tw-bg-opacity: 1;
background-color: hsl(209 23% 22% / var(--tw-bg-opacity));
}
:is(.dark .dark\:bg-dark-gray) {
--tw-bg-opacity: 1;
background-color: hsl(0 0% 52% / var(--tw-bg-opacity));
}
:is(.dark .dark\:bg-very-dark-blue) {
--tw-bg-opacity: 1;
background-color: hsl(207 26% 17% / var(--tw-bg-opacity));
}
:is(.dark .dark\:text-white) {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
:is(.dark .dark\:placeholder\:text-white)::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
:is(.dark .dark\:placeholder\:text-white)::placeholder {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
@media (min-width: 768px) { @media (min-width: 768px) {
.md\:col-span-full { .md\:col-span-full {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
.md\:row-span-full {
grid-row: 1 / -1;
}
.md\:row-end-\[-1\] {
grid-row-end: -1;
}
.md\:row-end-3 {
grid-row-end: 3;
}
.md\:flex { .md\:flex {
display: flex; display: flex;
} }
@ -958,12 +1025,8 @@ html {
height: 8rem; height: 8rem;
} }
.md\:h-full { .md\:h-48 {
height: 100%; height: 12rem;
}
.md\:h-screen {
height: 100vh;
} }
.md\:h-max { .md\:h-max {
@ -971,99 +1034,55 @@ html {
height: max-content; height: max-content;
} }
.md\:h-3\/5 { .md\:h-16 {
height: 60%; height: 4rem;
}
.md\:h-\[375px\] {
height: 375px;
}
.md\:h-60 {
height: 15rem;
}
.md\:h-48 {
height: 12rem;
}
.md\:h-\[400px\] {
height: 400px;
} }
.md\:w-1\/4 { .md\:w-1\/4 {
width: 25%; width: 25%;
} }
.md\:w-full {
width: 100%;
}
.md\:w-\[375px\] {
width: 375px;
}
.md\:w-\[450px\] {
width: 450px;
}
.md\:w-\[455px\] {
width: 455px;
}
.md\:w-9\/12 {
width: 75%;
}
.md\:w-10\/12 { .md\:w-10\/12 {
width: 83.333333%; width: 83.333333%;
} }
.md\:w-11\/12 {
width: 91.666667%;
}
.md\:w-32 { .md\:w-32 {
width: 8rem; width: 8rem;
} }
.md\:grid-cols-\[repeat\(auto-fill\2c _275px\)\] { .md\:w-full {
grid-template-columns: repeat(auto-fill, 275px); width: 100%;
} }
.md\:grid-cols-2 { .md\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.md\:flex-row { .md\:grid-cols-\[repeat\(auto-fill\2c _275px\)\] {
flex-direction: row; grid-template-columns: repeat(auto-fill, 275px);
} }
.md\:flex-col { .md\:flex-row {
flex-direction: column; flex-direction: row;
} }
.md\:items-center { .md\:items-center {
align-items: center; align-items: center;
} }
.md\:justify-center {
justify-content: center;
}
.md\:justify-around { .md\:justify-around {
justify-content: space-around; justify-content: space-around;
} }
.md\:gap-y-10 {
row-gap: 2.5rem;
}
.md\:gap-x-2 { .md\:gap-x-2 {
-moz-column-gap: 0.5rem; -moz-column-gap: 0.5rem;
column-gap: 0.5rem; column-gap: 0.5rem;
} }
.md\:gap-y-10 {
row-gap: 2.5rem;
}
.md\:place-self-center { .md\:place-self-center {
place-self: center; place-self: center;
} }
@ -1073,18 +1092,14 @@ html {
padding-right: 5rem; padding-right: 5rem;
} }
.md\:py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.md\:py-1 { .md\:py-1 {
padding-top: 0.25rem; padding-top: 0.25rem;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
} }
.md\:pr-1 { .md\:py-10 {
padding-right: 0.25rem; padding-top: 2.5rem;
padding-bottom: 2.5rem;
} }
.md\:pr-2 { .md\:pr-2 {

71
16-countries-page-from-api/src/main/resources/templates/country.html
View File

@ -13,7 +13,10 @@
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory --> <!-- Place favicon.ico in the root directory -->
</head> </head>
<body class="bg-very-light-gray h-screen flex flex-col" hx-boost="true"> <body
class="bg-very-light-gray h-screen flex flex-col dark:bg-very-dark-blue dark:text-white"
hx-boost="true"
>
<!--[if lt IE 8]> <!--[if lt IE 8]>
<p class="browserupgrade"> <p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please You are using an <strong>outdated</strong> browser. Please
@ -21,24 +24,37 @@
your experience. your experience.
</p> </p>
<![endif]--> <![endif]-->
<header <header th:replace="~{index :: header}">
class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center"
th:replace="~{index :: header}"
>
<div <div
class="flex-1 max-w-screen-xl h-20 flex flex-row justify-between items-center px-4" class="flex-1 max-w-screen-xl h-20 flex flex-row justify-between items-center px-4"
> >
<a th:href="@{~/}" href="index.html" <a th:href="@{~/}" href="index.html"
><h1 class="grow font-bold md:text-2xl">Where in the world?</h1> ><h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
</a> </a>
<div class="flex flex-row gap-x-2"> <button class="flex flex-row gap-x-2">
<img <svg
src="../public/icons/half-moon-shape-svgrepo-com.svg" class="text-black dark:text-white h-6"
class="w-4" viewBox="0 0 24 24"
alt="" fill="none"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.7519 15.0019C20.597 15.4839 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 5.99999C8.25 4.67039 8.51614 3.40296 8.99806 2.24805C5.47566 3.71785 3 7.19481 3 11.25C3 16.6348 7.36522 21 12.75 21C16.8052 21 20.2821 18.5243 21.7519 15.0019Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<p>Dark Mode</p> <p>Dark Mode</p>
</div> </button>
<script type="text/javascript">
document
.getElementById("toggleDarkMode")
.addEventListener("click", function () {
document.documentElement.classList.toggle("dark");
});
</script>
</div> </div>
</header> </header>
<nav <nav
@ -46,13 +62,30 @@
> >
<a href="index.html" th:href="@{~/}" class="h-fit"> <a href="index.html" th:href="@{~/}" class="h-fit">
<div <div
class="h-9 w-28 bg-white drop-shadow-[0_0_3px_rgba(0,0,0,0.5)] text-md rounded px-5 py-2 flex flex-row gap-x-3 place-content-center" class="h-9 w-28 bg-white drop-shadow-[0_0_3px_rgba(0,0,0,0.5)] text-md rounded px-5 py-2 flex flex-row gap-x-3 place-content-center dark:bg-dark-blue"
> >
<img <!-- Back icon -->
src="../public/icons/back-svgrepo-com.svg" <svg
class="w-4 h-5" class="text-black dark:text-white h-full"
alt="" width="24"
/> height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.5 19.5L3 12M3 12L10.5 4.5M3 12H21"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<!-- <img
src="../public/icons/back-svgrepo-com.svg"
class="w-4 h-5"
alt=""
/> -->
<p>Back</p> <p>Back</p>
</div> </div>
</a> </a>
@ -131,7 +164,7 @@
<div class="grid grid-cols-3 gap-2"> <div class="grid grid-cols-3 gap-2">
<a <a
href="/" href="/"
class="text-center min-h-9 bg-white drop-shadow text-md rounded px-5 py-2 md:w-32 md:py-1" class="text-center min-h-9 bg-white drop-shadow text-md rounded px-5 py-2 md:w-32 md:py-1 dark:bg-dark-blue"
th:each="border : ${borderCountries}" th:each="border : ${borderCountries}"
th:text="${border}" th:text="${border}"
th:href="@{~/country(countryName=${border})}" th:href="@{~/country(countryName=${border})}"

70
16-countries-page-from-api/src/main/resources/templates/index.html
View File

@ -12,7 +12,10 @@
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory --> <!-- Place favicon.ico in the root directory -->
</head> </head>
<body class="bg-very-light-gray h-screen flex flex-col" hx-boost="true"> <body
class="bg-very-light-gray h-screen flex flex-col dark:bg-very-dark-blue dark:text-white"
hx-boost="true"
>
<!--[if lt IE 8]> <!--[if lt IE 8]>
<p class="browserupgrade"> <p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please You are using an <strong>outdated</strong> browser. Please
@ -21,7 +24,7 @@
</p> </p>
<![endif]--> <![endif]-->
<header <header
class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center flex-none" class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center flex-none dark:bg-dark-blue"
> >
<div <div
class="flex-1 max-w-screen-xl h-20 flex flex-row justify-between items-center px-4" class="flex-1 max-w-screen-xl h-20 flex flex-row justify-between items-center px-4"
@ -29,14 +32,30 @@
<a th:href="@{~/}" href="index.html" <a th:href="@{~/}" href="index.html"
><h1 class="grow font-bold md:text-2xl">Where in the world?</h1> ><h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
</a> </a>
<div class="flex flex-row gap-x-2"> <button id="toggleDarkMode" class="flex flex-row gap-x-2">
<img <svg
src="../public/icons/half-moon-shape-svgrepo-com.svg" class="text-black dark:text-white h-6"
class="w-4" viewBox="0 0 24 24"
alt="" fill="none"
/> xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.7519 15.0019C20.597 15.4839 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 5.99999C8.25 4.67039 8.51614 3.40296 8.99806 2.24805C5.47566 3.71785 3 7.19481 3 11.25C3 16.6348 7.36522 21 12.75 21C16.8052 21 20.2821 18.5243 21.7519 15.0019Z"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
<p>Dark Mode</p> <p>Dark Mode</p>
</div> </button>
<script type="text/javascript">
document
.getElementById("toggleDarkMode")
.addEventListener("click", function () {
document.documentElement.classList.toggle("dark");
});
</script>
</div> </div>
</header> </header>
<nav <nav
@ -51,16 +70,25 @@
hx-push-url="true" hx-push-url="true"
class="md:w-1/4" class="md:w-1/4"
> >
<div class="flex flex-row bg-white shadow-md h-14 rounded-lg md:w-full"> <div
class="flex flex-row items-center bg-white shadow-md h-14 md:h-16 rounded-lg md:w-full dark:bg-dark-blue"
>
<!-- <p class="w-16 grid place-content-center">IC</p> --> <!-- <p class="w-16 grid place-content-center">IC</p> -->
<img <svg
src="../public/icons/search-svgrepo-com.svg" class="text-black dark:text-white h-6 px-7"
th:src="@{~/public/icons/search-svgrepo-com.svg}" viewBox="0 0 20 20"
class="w-6 mx-5" fill="none"
alt="" xmlns="http://www.w3.org/2000/svg"
/> >
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M9 3.5C5.96243 3.5 3.5 5.96243 3.5 9C3.5 12.0376 5.96243 14.5 9 14.5C10.519 14.5 11.893 13.8852 12.8891 12.8891C13.8852 11.893 14.5 10.519 14.5 9C14.5 5.96243 12.0376 3.5 9 3.5ZM2 9C2 5.13401 5.13401 2 9 2C12.866 2 16 5.13401 16 9C16 10.6625 15.4197 12.1906 14.4517 13.3911L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L13.3911 14.4517C12.1906 15.4197 10.6625 16 9 16C5.13401 16 2 12.866 2 9Z"
fill="currentColor"
/>
</svg>
<input <input
class="appearance-none flex-grow focus:outline-none mr-2" class="appearance-none flex-grow focus:outline-none mr-2 dark:bg-dark-blue dark:placeholder:text-white"
type="text" type="text"
id="country-name-input" id="country-name-input"
name="countryName" name="countryName"
@ -79,7 +107,7 @@
<form> <form>
<select <select
name="region" name="region"
class="block w-62 mt-1 h-12 w-64 bg-white shadow-lg rounded-md shadow-sm focus:outline-none px-7" class="block w-62 mt-1 h-14 md:h-16 w-64 bg-white shadow-lg rounded-md shadow-sm focus:outline-none px-7 dark:bg-dark-blue"
hx-get="/countries-cards" hx-get="/countries-cards"
hx-target="#countries-main-list" hx-target="#countries-main-list"
> >
@ -116,7 +144,7 @@
th:each="country : ${countriesList}" th:each="country : ${countriesList}"
id="germany" id="germany"
th:id="${country.alpha3Code}" th:id="${country.alpha3Code}"
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg" class="bg-white h-[350px] w-[275px] flex flex-col rounded-lg shadow-lg dark:bg-dark-blue"
> >
<a <a
href="country.html" href="country.html"
@ -165,7 +193,7 @@
<article <article
id="usa" id="usa"
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg" class="bg-white h-[350px] w-[275px] flex flex-col rounded-lg shadow-lg dark:bg-dark-blue"
th:remove="all" th:remove="all"
> >
<img <img
@ -194,7 +222,7 @@
<article <article
id="Brazil" id="Brazil"
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg" class="bg-white h-[350px] w-[275px] flex flex-col rounded-lg shadow-lg dark:bg-dark-blue"
th:remove="all" th:remove="all"
> >
<img <img

7
16-countries-page-from-api/tailwind.config.js
View File

@ -1,11 +1,14 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ["./src/main/resources/**/*.html"], content: ["./src/main/resources/**/*.html"],
darkMode: 'class',
theme: { theme: {
extend: { extend: {
colors: { colors: {
'dark-gray': 'hsl(0, 0%, 52%)', 'dark-gray': 'hsl(0, 0%, 52%)', // light mode input
'very-light-gray': 'hsl(0, 0%, 98%)', 'very-light-gray': 'hsl(0, 0%, 98%)', // light mode bg
'dark-blue': 'hsl(209, 23%, 22%)', // dark mode elements
'very-dark-blue': 'hsl(207, 26%, 17%)', // dark mode bg
}, },
fontFamily: { fontFamily: {
'sans': ['NunitoSans', 'sans-serif'], 'sans': ['NunitoSans', 'sans-serif'],