From 9b240cf8c24ba0b33138f8563260ecb8816bb6ad Mon Sep 17 00:00:00 2001 From: jordi fita mas Date: Fri, 13 Oct 2023 21:59:45 +0200 Subject: [PATCH] Add the booking form to type, and style page according to design --- po/ca.po | 33 +++- po/es.po | 33 +++- web/static/public.css | 195 ++++++++++++++++++---- web/templates/public/campsite/type.gohtml | 80 ++++++--- 4 files changed, 268 insertions(+), 73 deletions(-) diff --git a/po/ca.po b/po/ca.po index 336de78..379d5ec 100644 --- a/po/ca.po +++ b/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 \n" "Language-Team: Catalan \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ó" diff --git a/po/es.po b/po/es.po index 46d2a40..7a910e5 100644 --- a/po/es.po +++ b/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 \n" "Language-Team: Spanish \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" diff --git a/web/static/public.css b/web/static/public.css index d8745dd..0abc68f 100644 --- a/web/static/public.css +++ b/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; diff --git a/web/templates/public/campsite/type.gohtml b/web/templates/public/campsite/type.gohtml index c7b71c7..d894f8f 100644 --- a/web/templates/public/campsite/type.gohtml +++ b/web/templates/public/campsite/type.gohtml @@ -33,33 +33,61 @@ {{- end }} - {{ with .Prices -}} -
-

{{( pgettext "Prices" "title" )}}

-
- {{ range . -}} -
- - - - {{ .SeasonName }} -
- {{ if .HasOptions -}} -
{{ printf (gettext "Starting from %s €/night") .PricePerNight }}
- {{- else -}} -
{{ printf (gettext "%s €/night") .PricePerNight }}
+
+
+
+ + +
+
+ +
+
+ + {{ with .Prices -}} +
+

{{( pgettext "Prices" "title" )}}

+
+ {{ range . -}} +
+
+ + + + {{ .SeasonName }} +
+ {{ if .HasOptions -}} +
{{ printf (gettext "Starting from %s €/night") .PricePerNight }}
+ {{- else -}} +
{{ printf (gettext "%s €/night") .PricePerNight }}
+ {{- end }} + {{ if gt .MinNights 1 -}} +
{{ printf (gettext "*Minimum %d nights per stay") .MinNights }}
+ {{- end }} +
{{- end }} - {{ if gt .MinNights 1 -}} -
{{ printf (gettext "*Minimum %d nights per stay") .MinNights }}
- {{- end }} - {{- end }} -
-
- {{- end }} +
+
+ {{- end }} + + +
+
{{ with .Features -}}
-

{{( pgettext "Features" "title" )}}

+

{{( pgettext "Features" "title" )}}

    {{ range . -}}
  • {{ .Name }}
    • @@ -70,15 +98,15 @@
    -

    {{( pgettext "Info" "title" )}}

    +

    {{( pgettext "Info" "title" )}}

    {{ .Info }}
    -

    {{( pgettext "Facilities" "title" )}}

    +

    {{( pgettext "Facilities" "title" )}}

    {{ .Facilities }}
    -

    {{( pgettext "Description" "title" )}}

    +

    {{( pgettext "Description" "title" )}}

    {{ .Description }}