Add the booking form to type, and style page according to design
This commit is contained in:
parent
d1b43e5062
commit
9b240cf8c2
33
po/ca.po
33
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ó"
|
||||
|
|
|
|||
33
po/es.po
33
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"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -33,33 +33,61 @@
|
|||
</div>
|
||||
{{- end }}
|
||||
|
||||
{{ with .Prices -}}
|
||||
<article>
|
||||
<h3>{{( pgettext "Prices" "title" )}}</h3>
|
||||
<dl class="price-list">
|
||||
{{ range . -}}
|
||||
<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>
|
||||
<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 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 }}
|
||||
{{ if gt .MinNights 1 -}}
|
||||
<dd>{{ printf (gettext "*Minimum %d nights per stay") .MinNights }}</dd>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</dl>
|
||||
</article>
|
||||
{{- 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue