feat: desktop styling of country page
This commit is contained in:
efim
parent
11d5d6254a
commit
0f30e1fc41
|
|
@ -556,6 +556,10 @@ video {
|
|||
display: grid;
|
||||
}
|
||||
|
||||
.contents {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.h-12 {
|
||||
height: 3rem;
|
||||
}
|
||||
|
|
@ -592,15 +596,19 @@ video {
|
|||
height: 350px;
|
||||
}
|
||||
|
||||
.h-max {
|
||||
height: -moz-max-content;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-fit {
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.max-h-60 {
|
||||
max-height: 15rem;
|
||||
}
|
||||
|
|
@ -633,21 +641,8 @@ video {
|
|||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-max {
|
||||
width: -moz-max-content;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.max-w-screen-sm {
|
||||
max-width: 640px;
|
||||
}
|
||||
|
||||
.max-w-screen-md {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
.max-w-screen-lg {
|
||||
max-width: 1024px;
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.max-w-screen-xl {
|
||||
|
|
@ -658,6 +653,10 @@ video {
|
|||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.flex-none {
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
@ -688,6 +687,10 @@ video {
|
|||
place-content: center;
|
||||
}
|
||||
|
||||
.content-center {
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -744,6 +747,10 @@ video {
|
|||
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.place-self-center {
|
||||
place-self: center;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
|
@ -775,6 +782,11 @@ video {
|
|||
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 {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
|
@ -918,6 +930,26 @@ html {
|
|||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:col-span-full {
|
||||
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 {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.md\:grid {
|
||||
display: grid;
|
||||
}
|
||||
|
|
@ -926,86 +958,114 @@ html {
|
|||
height: 8rem;
|
||||
}
|
||||
|
||||
.md\:w-96 {
|
||||
width: 24rem;
|
||||
.md\:h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.md\:w-60 {
|
||||
width: 15rem;
|
||||
.md\:h-screen {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.md\:h-max {
|
||||
height: -moz-max-content;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.md\:h-3\/5 {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.md\:h-\[375px\] {
|
||||
height: 375px;
|
||||
}
|
||||
|
||||
.md\:h-60 {
|
||||
height: 15rem;
|
||||
}
|
||||
|
||||
.md\:h-48 {
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
.md\:h-\[400px\] {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.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-\[375px\] {
|
||||
width: 375px;
|
||||
}
|
||||
|
||||
.md\:w-\[450px\] {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
.md\:w-\[455px\] {
|
||||
width: 455px;
|
||||
}
|
||||
|
||||
.md\:w-9\/12 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.md\:w-10\/12 {
|
||||
width: 83.333333%;
|
||||
}
|
||||
|
||||
.md\:grid-flow-col {
|
||||
grid-auto-flow: column;
|
||||
.md\:w-11\/12 {
|
||||
width: 91.666667%;
|
||||
}
|
||||
|
||||
.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\:w-32 {
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
.md\:grid-cols-\[repeat\(auto-fill\2c _275px\)\] {
|
||||
grid-template-columns: repeat(auto-fill, 275px);
|
||||
}
|
||||
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.md\:place-content-center {
|
||||
place-content: center;
|
||||
.md\:flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.md\:items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.md\:justify-between {
|
||||
justify-content: space-between;
|
||||
.md\:justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.md\:justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.md\:px-10 {
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 2.5rem;
|
||||
.md\:gap-y-10 {
|
||||
row-gap: 2.5rem;
|
||||
}
|
||||
|
||||
.md\:px-12 {
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
.md\:gap-x-2 {
|
||||
-moz-column-gap: 0.5rem;
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.md\:place-self-center {
|
||||
place-self: center;
|
||||
}
|
||||
|
||||
.md\:px-20 {
|
||||
|
|
@ -1013,18 +1073,31 @@ html {
|
|||
padding-right: 5rem;
|
||||
}
|
||||
|
||||
.md\:px-24 {
|
||||
padding-left: 6rem;
|
||||
padding-right: 6rem;
|
||||
.md\:py-10 {
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.md\:text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
.md\:py-1 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.md\:pr-1 {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.md\:pr-2 {
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.md\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.md\:text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<!-- Place favicon.ico in the root directory -->
|
||||
</head>
|
||||
<body class="bg-very-light-gray">
|
||||
<body class="bg-very-light-gray h-screen flex flex-col" hx-boost="true">
|
||||
<!--[if lt IE 8]>
|
||||
<p class="browserupgrade">
|
||||
You are using an <strong>outdated</strong> browser. Please
|
||||
|
|
@ -22,98 +22,123 @@
|
|||
</p>
|
||||
<![endif]-->
|
||||
<header
|
||||
class="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"
|
||||
th:replace="~{index :: header}"
|
||||
>
|
||||
<h1 class="font-bold">Where in the world?</h1>
|
||||
<p>Dark Mode</p>
|
||||
</header>
|
||||
<nav class="h-32 px-8 py-10">
|
||||
<a
|
||||
href="/"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<img src="../public/icons/back-svgrepo-com.svg"
|
||||
class="w-4 h-5"
|
||||
alt="" />
|
||||
<p> Back </p>
|
||||
</div>
|
||||
</a
|
||||
<div
|
||||
class="flex-1 max-w-screen-xl h-20 flex flex-row justify-between items-center px-4"
|
||||
>
|
||||
<a th:href="@{~/}" href="index.html"
|
||||
><h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
|
||||
</a>
|
||||
<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-none h-32 px-8 py-10 max-w-screen-xl place-self-center w-full md:h-48 items-center"
|
||||
>
|
||||
<a href="index.html" th:href="@{~/}" class="h-fit">
|
||||
<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"
|
||||
>
|
||||
<img
|
||||
src="../public/icons/back-svgrepo-com.svg"
|
||||
class="w-4 h-5"
|
||||
alt=""
|
||||
/>
|
||||
<p>Back</p>
|
||||
</div>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<main class="px-8 pb-10 flex flex-col gap-y-10">
|
||||
<main
|
||||
class="px-8 pb-10 flex flex-col gap-y-10 md:grid md:grid-cols-2 md:h-max md:place-self-center w-full max-w-screen-xl"
|
||||
>
|
||||
<img
|
||||
src="https://flagcdn.com/de.svg"
|
||||
th:src="${country.flag}"
|
||||
th:alt="|flag of ${country.name}|"
|
||||
class="h-60"
|
||||
class="w-full md:w-10/12"
|
||||
/>
|
||||
<h1 class="text-2xl font-bold pt-2 -mb-4" th:text="${country.name}">
|
||||
Germany
|
||||
</h1>
|
||||
|
||||
<dl class="space-y-2" id="main-stats">
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Native name:</dt>
|
||||
<dd th:text="${country.nativeName}">Belgie</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Population:</dt>
|
||||
<dd
|
||||
th:text="${#numbers.formatInteger(country.population, 3, 'COMMA')}"
|
||||
>
|
||||
81,771,900
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Region:</dt>
|
||||
<dd th:text="${country.region}">Europe</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Sub Region:</dt>
|
||||
<dd th:text="${country.subregion}">Western Europe</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Capital:</dt>
|
||||
<dd th:text="${country.capital}">Berlin</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<dl class="space-y-2" id="additional-stats">
|
||||
<div th:if="${country.topLevelDomain.nonEmpty()}" class="flex">
|
||||
<dt class="font-bold mr-2">Top Level Domain:</dt>
|
||||
<dd th:text="${country.topLevelDomain.get()}">.be</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Currencies:</dt>
|
||||
<!-- <dd th:text="${#strings.listJoin(country.currencies.map(_.name),',')}">Euro</dd> -->
|
||||
<dd th:text="${#strings.listJoin(country.currenciesView, ',')}">
|
||||
Euro
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Languages:</dt>
|
||||
<dd th:text="${#strings.listJoin(country.languagesView, ', ')}">
|
||||
Dutch, French, German
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<section id="neighboring-countries">
|
||||
<h2 class="font-bold text-lg">Border Countries:</h2>
|
||||
<div
|
||||
class="grid grid-cols-3 gap-2"
|
||||
<section
|
||||
id="stat-block"
|
||||
class="contents md:grid md:grid-cols-2 md:gap-y-10 md:py-10"
|
||||
>
|
||||
<h1
|
||||
class="text-2xl font-bold pt-2 -mb-4 md:col-span-full md:text-3xl"
|
||||
th:text="${country.name}"
|
||||
>
|
||||
Germany
|
||||
</h1>
|
||||
<dl class="space-y-2" id="main-stats">
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Native name:</dt>
|
||||
<dd th:text="${country.nativeName}">Belgie</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Population:</dt>
|
||||
<dd
|
||||
th:text="${#numbers.formatInteger(country.population, 3, 'COMMA')}"
|
||||
>
|
||||
81,771,900
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Region:</dt>
|
||||
<dd th:text="${country.region}">Europe</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Sub Region:</dt>
|
||||
<dd th:text="${country.subregion}">Western Europe</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Capital:</dt>
|
||||
<dd th:text="${country.capital}">Berlin</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<dl class="space-y-2" id="additional-stats">
|
||||
<div th:if="${country.topLevelDomain.nonEmpty()}" class="flex">
|
||||
<dt class="font-bold mr-2">Top Level Domain:</dt>
|
||||
<dd th:text="${country.topLevelDomain.get()}">.be</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Currencies:</dt>
|
||||
<!-- <dd th:text="${#strings.listJoin(country.currencies.map(_.name),',')}">Euro</dd> -->
|
||||
<dd th:text="${#strings.listJoin(country.currenciesView, ',')}">
|
||||
Euro
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<dt class="font-bold mr-2">Languages:</dt>
|
||||
<dd th:text="${#strings.listJoin(country.languagesView, ', ')}">
|
||||
Dutch, French, German
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<section
|
||||
id="neighboring-countries"
|
||||
class="md:col-span-full md:flex md:flex-row md:items-center md:gap-x-2"
|
||||
>
|
||||
<h2 class="font-bold text-lg md:pr-2">Border Countries:</h2>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<a
|
||||
href="/"
|
||||
class="text-center min-h-9 bg-white drop-shadow text-md rounded px-5 py-2"
|
||||
th:each="border : ${borderCountries}"
|
||||
th:text="${border}"
|
||||
th:href="@{~/country(countryName=${border})}"
|
||||
>France</a
|
||||
>
|
||||
</div>
|
||||
href="/"
|
||||
class="text-center min-h-9 bg-white drop-shadow text-md rounded px-5 py-2 md:w-32 md:py-1"
|
||||
th:each="border : ${borderCountries}"
|
||||
th:text="${border}"
|
||||
th:href="@{~/country(countryName=${border})}"
|
||||
>France</a
|
||||
>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
<!-- Place favicon.ico in the root directory -->
|
||||
</head>
|
||||
<body class="bg-very-light-gray" hx-boost="true">
|
||||
<body class="bg-very-light-gray h-screen flex flex-col" hx-boost="true">
|
||||
<!--[if lt IE 8]>
|
||||
<p class="browserupgrade">
|
||||
You are using an <strong>outdated</strong> browser. Please
|
||||
|
|
@ -21,12 +21,14 @@
|
|||
</p>
|
||||
<![endif]-->
|
||||
<header
|
||||
class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center"
|
||||
class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center flex-none"
|
||||
>
|
||||
<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>
|
||||
<a th:href="@{~/}" href="index.html"
|
||||
><h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
|
||||
</a>
|
||||
<div class="flex flex-row gap-x-2">
|
||||
<img
|
||||
src="../public/icons/half-moon-shape-svgrepo-com.svg"
|
||||
|
|
@ -38,7 +40,7 @@
|
|||
</div>
|
||||
</header>
|
||||
<nav
|
||||
class="flex flex-col md:flex-row px-6 my-4 justify-around h-48 md:h-32 md:items-center"
|
||||
class="flex flex-col flex-none md:flex-row px-6 my-4 justify-around h-48 md:h-32 md:items-center"
|
||||
>
|
||||
<form
|
||||
method="get"
|
||||
|
|
@ -116,7 +118,10 @@
|
|||
th:id="${country.alpha3Code}"
|
||||
class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
|
||||
>
|
||||
<a href="" th:href="@{~/country(countryName=${country.name})}">
|
||||
<a
|
||||
href="country.html"
|
||||
th:href="@{~/country(countryName=${country.name})}"
|
||||
>
|
||||
<img
|
||||
src="https://flagcdn.com/de.svg"
|
||||
th:src="${country.flag}"
|
||||
|
|
|
|||
Loading…
Reference in New Issue