Add the booking form to type, and style page according to design

po/ca.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: camper\n"
 "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
-"POT-Creation-Date: 2023-10-13 20:40+0200\n"
+"POT-Creation-Date: 2023-10-13 21:27+0200\n"
 "PO-Revision-Date: 2023-07-22 23:45+0200\n"
 "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
 "Language-Team: Catalan <ca@dodds.net>\n"
@@ -77,41 +77,56 @@ msgstr "Descobreix l’entorn"
 msgid "Come and enjoy!"
 msgstr "Vine a gaudir!"
 
-#: web/templates/public/campsite/type.gohtml:38
+#: web/templates/public/campsite/type.gohtml:40
+msgctxt "input"
+msgid "Check-in Date"
+msgstr "Data d’entrada"
+
+#: web/templates/public/campsite/type.gohtml:46
+msgctxt "input"
+msgid "Check-out Date"
+msgstr "Data de sortida"
+
+#: web/templates/public/campsite/type.gohtml:53
+msgctxt "action"
+msgid "Book"
+msgstr "Reserva"
+
+#: web/templates/public/campsite/type.gohtml:59
 #: web/templates/admin/campsite/option/form.gohtml:58
 #: web/templates/admin/campsite/type/form.gohtml:73
 msgctxt "title"
 msgid "Prices"
 msgstr "Preus"
 
-#: web/templates/public/campsite/type.gohtml:49
+#: web/templates/public/campsite/type.gohtml:71
 msgid "Starting from %s €/night"
 msgstr "A partir de %s €/nit"
 
-#: web/templates/public/campsite/type.gohtml:51
+#: web/templates/public/campsite/type.gohtml:73
 msgid "%s €/night"
 msgstr "%s €/nit"
 
-#: web/templates/public/campsite/type.gohtml:54
+#: web/templates/public/campsite/type.gohtml:76
 msgid "*Minimum %d nights per stay"
 msgstr "*Mínim %d nits per estada"
 
-#: web/templates/public/campsite/type.gohtml:63
+#: web/templates/public/campsite/type.gohtml:90
 msgctxt "title"
 msgid "Features"
 msgstr "Característiques"
 
-#: web/templates/public/campsite/type.gohtml:74
+#: web/templates/public/campsite/type.gohtml:101
 msgctxt "title"
 msgid "Info"
 msgstr "Informació"
 
-#: web/templates/public/campsite/type.gohtml:78
+#: web/templates/public/campsite/type.gohtml:105
 msgctxt "title"
 msgid "Facilities"
 msgstr "Equipaments"
 
-#: web/templates/public/campsite/type.gohtml:82
+#: web/templates/public/campsite/type.gohtml:109
 msgctxt "title"
 msgid "Description"
 msgstr "Descripció"

po/es.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: camper\n"
 "Report-Msgid-Bugs-To: jordi@tandem.blog\n"
-"POT-Creation-Date: 2023-10-13 20:40+0200\n"
+"POT-Creation-Date: 2023-10-13 21:27+0200\n"
 "PO-Revision-Date: 2023-07-22 23:46+0200\n"
 "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
 "Language-Team: Spanish <es@tp.org.es>\n"
@@ -77,41 +77,56 @@ msgstr "Descubre el entorno"
 msgid "Come and enjoy!"
 msgstr "¡Ven a disfrutar!"
 
-#: web/templates/public/campsite/type.gohtml:38
+#: web/templates/public/campsite/type.gohtml:40
+msgctxt "input"
+msgid "Check-in Date"
+msgstr "Fecha de entrada"
+
+#: web/templates/public/campsite/type.gohtml:46
+msgctxt "input"
+msgid "Check-out Date"
+msgstr "Fecha de salida"
+
+#: web/templates/public/campsite/type.gohtml:53
+msgctxt "action"
+msgid "Book"
+msgstr "Reservar"
+
+#: web/templates/public/campsite/type.gohtml:59
 #: web/templates/admin/campsite/option/form.gohtml:58
 #: web/templates/admin/campsite/type/form.gohtml:73
 msgctxt "title"
 msgid "Prices"
 msgstr "Precios"
 
-#: web/templates/public/campsite/type.gohtml:49
+#: web/templates/public/campsite/type.gohtml:71
 msgid "Starting from %s €/night"
 msgstr "A partir de %s €/noche"
 
-#: web/templates/public/campsite/type.gohtml:51
+#: web/templates/public/campsite/type.gohtml:73
 msgid "%s €/night"
 msgstr "%s €/noche"
 
-#: web/templates/public/campsite/type.gohtml:54
+#: web/templates/public/campsite/type.gohtml:76
 msgid "*Minimum %d nights per stay"
 msgstr "*Mínimo %d noches por estancia"
 
-#: web/templates/public/campsite/type.gohtml:63
+#: web/templates/public/campsite/type.gohtml:90
 msgctxt "title"
 msgid "Features"
 msgstr "Características"
 
-#: web/templates/public/campsite/type.gohtml:74
+#: web/templates/public/campsite/type.gohtml:101
 msgctxt "title"
 msgid "Info"
 msgstr "Información"
 
-#: web/templates/public/campsite/type.gohtml:78
+#: web/templates/public/campsite/type.gohtml:105
 msgctxt "title"
 msgid "Facilities"
 msgstr "Equipamento"
 
-#: web/templates/public/campsite/type.gohtml:82
+#: web/templates/public/campsite/type.gohtml:109
 msgctxt "title"
 msgid "Description"
 msgstr "Descripción"

web/static/public.css

@@ -386,12 +386,12 @@ nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
     padding: 1.5rem 2rem;
 }
 
-.nature div:first-child a span, .services a span, .surroundings .spiel a:hover span {
+.nature div:first-child a span, .services a span, .surroundings .spiel a:hover span, .campsite_type_booking form button span {
     display: inline-block;
     transition: transform 0.5s ease;
 }
 
-.nature div:first-child a:hover span, .services a:hover span, .spiel a:hover span {
+.nature div:first-child a:hover span, .services a:hover span, .spiel a:hover span, .campsite_type_booking form button:hover span {
     transform: translateX(1.3rem);
 }
 
@@ -565,24 +565,6 @@ dt {
     }
 }
 
-.price-list {
-    flex-direction: column;
-    gap: 0;
-}
-
-.price-list dt {
-    display: flex;
-    align-items: center;
-    gap: .5rem;
-    border: none;
-    padding: 0;
-    margin-bottom: 0;
-}
-
-.price-list dd + dt {
-    margin-top: 2rem;
-}
-
 .outside_activities {
     margin-top: 2rem;
 }
@@ -669,6 +651,98 @@ dt {
     align-items: center;
 }
 
+.campsite_type.carousel .spiel {
+    min-width: calc((100vw - 5rem/* main margin */ - 5rem/* booking gap */) * .40111/* flex: .4 of form */ + 5rem /* booking gap again */);
+    flex-shrink: 0;
+}
+
+.campsite_type_booking {
+    margin-top: 2.5rem;
+    display: flex;
+    gap: 5rem;
+}
+
+@media (max-width: 48rem) {
+    .campsite_type_booking {
+        flex-direction: column;
+    }
+}
+
+.campsite_type_booking form {
+    flex: .4;
+    background-color: var(--accent);
+    padding: 2rem;
+}
+
+.campsite_type_booking form fieldset {
+    display: flex;
+    gap: 2.5rem;
+    padding: 0;
+    border: none;
+}
+
+.campsite_type_booking form label {
+    flex: 1;
+    font-size: 2rem;
+}
+
+.campsite_type_booking form input {
+    padding: 1.5rem .5rem;
+    width: 100%;
+    background-color: var(--base);
+}
+
+.campsite_type_booking form footer {
+    margin-top: 2rem;
+}
+
+.campsite_type_booking form button {
+    width: 100%;
+    text-align: left;
+    background-color: var(--clar);
+    padding: 1.5rem 2rem;
+    cursor: pointer;
+    font-size: calc(1.8rem + .8vw);
+    font-weight: 600;
+    line-height: 0.9em;
+}
+
+.campsite_type_booking form,
+.campsite_type_booking form button,
+.campsite_type_booking form input {
+    border: none;
+    border-radius: 5px;
+}
+
+.campsite_type_prices {
+    flex: .6;
+    padding: 2.5rem;
+    border-radius: 5px;
+    border: 3px solid black;
+}
+
+.campsite_type_prices dl {
+    display: flex;
+    justify-content: space-between;
+    gap: 2.5rem;
+}
+
+.campsite_type_prices div {
+    flex-basis: unset;
+}
+
+.campsite_type_prices dt {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    border: none;
+    padding: 0;
+}
+
+.campsite_type_calendar {
+    padding: 5rem 0 2.5rem;
+}
+
 .campsite_type_features li {
     flex: 1;
     font-size: 2.4rem;
@@ -680,40 +754,103 @@ dt {
     padding-top: 7.2rem;
 }
 
-footer {
+.campsite_type_features ul {
+    gap: 2.5rem;
+}
+
+.campsite_type_detail {
+    display: flex;
+    gap: 5rem;
+}
+
+.campsite_type_detail section {
+    flex: 1;
+}
+
+.campsite_type_detail section:last-child {
+    flex: 2;
+}
+
+.campsite_type_detail h4 {
+    font-size: 2.4rem;
+    font-weight: 400;
+    margin-bottom: 1.5rem;
+}
+
+.campsite_type_detail ul + h4 {
+    margin-top: 2.5rem;
+}
+
+@media (max-width: 64rem) {
+    .campsite_type_features ul, .campsite_type_detail {
+        flex-wrap: wrap;
+    }
+
+    .campsite_type_features li {
+        flex: unset;
+        width: calc((100% - 2.5rem * 2) / 3);
+    }
+
+    .campsite_type_detail section {
+        flex: unset;
+        width: calc((100% - 5rem) / 2);
+    }
+
+    .campsite_type_detail section:last-child {
+        width: 100%;
+    }
+}
+
+@media (max-width: 48rem) {
+    .campsite_type_features ul, .campsite_type_detail {
+        flex-wrap: nowrap;
+        flex-direction: column;
+    }
+
+    .campsite_type_features li, .campsite_type_detail section {
+        width: 100%;
+    }
+}
+
+
+body > footer {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }
 
-footer div, .campsite_type_features, .campsite_type_detail {
+body > footer div, .campsite_type_features, .campsite_type_detail {
     padding: 5rem 0;
     border-top: 3px solid black;
 }
 
-footer div {
+.campsite_type_detail {
+    padding-bottom: 2.5rem;
+}
+
+body > footer div {
     display: flex;
     justify-content: space-between;
     margin: 0 2.5rem;
     border-bottom: 3px solid black;
 }
 
-footer section {
+body > footer section {
     width: 25%;
 }
 
-footer h2 {
+body > footer h2 {
     font-size: 2.4rem;
     margin-bottom: 2rem;
     border-bottom: 1px solid black;
 }
 
-footer ul {
+body > footer ul {
     list-style: none;
     padding: 0;
 }
 
-footer li a::before {
+body > footer li a::before {
     font-size: 1.25em;
     content: "→";
     display: inline-block;
@@ -721,11 +858,11 @@ footer li a::before {
     transition: transform .5s ease;
 }
 
-footer li a:hover::before {
+body > footer li a:hover::before {
     transform: translateX(.6rem);
 }
 
-footer span {
+body > footer span {
     font-size: 1.5rem;
     text-align: center;
     padding: 2.5rem;

web/templates/public/campsite/type.gohtml

@@ -33,14 +33,37 @@
         </div>
     {{- end }}
 
+    <div class="campsite_type_booking">
+        <form action="/{{ currentLocale }}/booking" method="get">
+            <fieldset>
+                <label>
+                    {{( pgettext "Check-in Date" "input")}}
+                    <br>
+                    <input name="checkin_date" type="date" required>
+                    <br>
+                </label>
+                <label>
+                    {{( pgettext "Check-out Date" "input")}}
+                    <br>
+                    <input name="checkout_date" type="date" required>
+                    <br>
+                </label>
+            </fieldset>
+            <footer>
+                <button type="submit">{{( pgettext "Book" "action" )}} <span>→</span></button>
+            </footer>
+        </form>
+
         {{ with .Prices -}}
-        <article>
+            <article class="campsite_type_prices">
-            <h3>{{( pgettext "Prices" "title" )}}</h3>
+                <h3 class="sr-only">{{( pgettext "Prices" "title" )}}</h3>
-            <dl class="price-list">
+                <dl>
                     {{ range . -}}
+                        <div>
                             <dt>
                                 <svg width="20px" height="20px">
-                            <circle cx="50%" cy="50%" r="49%" fill="{{ .SeasonColor }}" stroke="#000" stroke-width=".5"/>
+                                    <circle cx="50%" cy="50%" r="49%" fill="{{ .SeasonColor }}" stroke="#000"
+                                            stroke-width=".5"/>
                                 </svg>
                                 {{ .SeasonName }}
                             </dt>
@@ -52,14 +75,19 @@
                             {{ if gt .MinNights 1 -}}
                                 <dd>{{ printf (gettext "*Minimum %d nights per stay") .MinNights }}</dd>
                             {{- end }}
+                        </div>
                     {{- end }}
                 </dl>
             </article>
         {{- end }}
+    </div>
+
+    <div class="campsite_type_calendar">
+    </div>
 
     {{ with .Features -}}
         <article class="campsite_type_features">
-            <h3>{{( pgettext "Features" "title" )}}</h3>
+            <h3 class="sr-only">{{( pgettext "Features" "title" )}}</h3>
             <ul>
                 {{ range . -}}
                     <li class="icon_{{ .Icon }}">{{ .Name }}</li>
@@ -70,15 +98,15 @@
 
     <article class="campsite_type_detail">
         <section>
-            <h3>{{( pgettext "Info" "title" )}}</h3>
+            <h3 class="sr-only">{{( pgettext "Info" "title" )}}</h3>
             {{ .Info }}
         </section>
         <section>
-            <h3>{{( pgettext "Facilities" "title" )}}</h3>
+            <h3 class="sr-only">{{( pgettext "Facilities" "title" )}}</h3>
             {{ .Facilities }}
         </section>
         <section>
-            <h3>{{( pgettext "Description" "title" )}}</h3>
+            <h3 class="sr-only">{{( pgettext "Description" "title" )}}</h3>
             {{ .Description }}
         </section>
     </article>