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

This commit is contained in:
jordi fita mas 2023-10-13 21:59:45 +02:00
parent d1b43e5062
commit 9b240cf8c2
4 changed files with 268 additions and 73 deletions

View File

@ -8,7 +8,7 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: camper\n" "Project-Id-Version: camper\n"
"Report-Msgid-Bugs-To: jordi@tandem.blog\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" "PO-Revision-Date: 2023-07-22 23:45+0200\n"
"Last-Translator: jordi fita mas <jordi@tandem.blog>\n" "Last-Translator: jordi fita mas <jordi@tandem.blog>\n"
"Language-Team: Catalan <ca@dodds.net>\n" "Language-Team: Catalan <ca@dodds.net>\n"
@ -77,41 +77,56 @@ msgstr "Descobreix lentorn"
msgid "Come and enjoy!" msgid "Come and enjoy!"
msgstr "Vine a gaudir!" 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 dentrada"
#: 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/option/form.gohtml:58
#: web/templates/admin/campsite/type/form.gohtml:73 #: web/templates/admin/campsite/type/form.gohtml:73
msgctxt "title" msgctxt "title"
msgid "Prices" msgid "Prices"
msgstr "Preus" msgstr "Preus"
#: web/templates/public/campsite/type.gohtml:49 #: web/templates/public/campsite/type.gohtml:71
msgid "Starting from %s €/night" msgid "Starting from %s €/night"
msgstr "A partir de %s €/nit" msgstr "A partir de %s €/nit"
#: web/templates/public/campsite/type.gohtml:51 #: web/templates/public/campsite/type.gohtml:73
msgid "%s €/night" msgid "%s €/night"
msgstr "%s €/nit" msgstr "%s €/nit"
#: web/templates/public/campsite/type.gohtml:54 #: web/templates/public/campsite/type.gohtml:76
msgid "*Minimum %d nights per stay" msgid "*Minimum %d nights per stay"
msgstr "*Mínim %d nits per estada" msgstr "*Mínim %d nits per estada"
#: web/templates/public/campsite/type.gohtml:63 #: web/templates/public/campsite/type.gohtml:90
msgctxt "title" msgctxt "title"
msgid "Features" msgid "Features"
msgstr "Característiques" msgstr "Característiques"
#: web/templates/public/campsite/type.gohtml:74 #: web/templates/public/campsite/type.gohtml:101
msgctxt "title" msgctxt "title"
msgid "Info" msgid "Info"
msgstr "Informació" msgstr "Informació"
#: web/templates/public/campsite/type.gohtml:78 #: web/templates/public/campsite/type.gohtml:105
msgctxt "title" msgctxt "title"
msgid "Facilities" msgid "Facilities"
msgstr "Equipaments" msgstr "Equipaments"
#: web/templates/public/campsite/type.gohtml:82 #: web/templates/public/campsite/type.gohtml:109
msgctxt "title" msgctxt "title"
msgid "Description" msgid "Description"
msgstr "Descripció" msgstr "Descripció"

View File

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

View File

@ -386,12 +386,12 @@ nav .has-submenu:hover ul, nav .has-submenu:focus-within ul {
padding: 1.5rem 2rem; 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; display: inline-block;
transition: transform 0.5s ease; 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); 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 { .outside_activities {
margin-top: 2rem; margin-top: 2rem;
} }
@ -669,6 +651,98 @@ dt {
align-items: center; 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 { .campsite_type_features li {
flex: 1; flex: 1;
font-size: 2.4rem; font-size: 2.4rem;
@ -680,40 +754,103 @@ dt {
padding-top: 7.2rem; 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; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
} }
footer div, .campsite_type_features, .campsite_type_detail { body > footer div, .campsite_type_features, .campsite_type_detail {
padding: 5rem 0; padding: 5rem 0;
border-top: 3px solid black; border-top: 3px solid black;
} }
footer div { .campsite_type_detail {
padding-bottom: 2.5rem;
}
body > footer div {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 0 2.5rem; margin: 0 2.5rem;
border-bottom: 3px solid black; border-bottom: 3px solid black;
} }
footer section { body > footer section {
width: 25%; width: 25%;
} }
footer h2 { body > footer h2 {
font-size: 2.4rem; font-size: 2.4rem;
margin-bottom: 2rem; margin-bottom: 2rem;
border-bottom: 1px solid black; border-bottom: 1px solid black;
} }
footer ul { body > footer ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
} }
footer li a::before { body > footer li a::before {
font-size: 1.25em; font-size: 1.25em;
content: "→"; content: "→";
display: inline-block; display: inline-block;
@ -721,11 +858,11 @@ footer li a::before {
transition: transform .5s ease; transition: transform .5s ease;
} }
footer li a:hover::before { body > footer li a:hover::before {
transform: translateX(.6rem); transform: translateX(.6rem);
} }
footer span { body > footer span {
font-size: 1.5rem; font-size: 1.5rem;
text-align: center; text-align: center;
padding: 2.5rem; padding: 2.5rem;

View File

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