Customer told us that the minimum number of nights is per campsite type,
not per season. And he wants this, along with the maximum number of
nights, in order to limit the range of departure dates that guests can
choose when booking.
It seems that we have to highlight the map zones too. On the previous
website, they had a mouseover effect that displayed a tooltip, but here
we can not do that because we use the mouse to select accommodations.
This is just a test to see whether Oriol likes how it is shown, thus the
red is likely to change to something else more pleasant to look at.
This does nothing but bring useless work to the browser, that has to
move the SVG group to the top for nothing, as the accommodations do not
overlap anything else.
There are many installations on the map that are drawn with rect
instead of path. I could transform them with Inkscape, but i finally
found out about DOMMatrix, that helps me a lot to convert points, as
it can parse the values of the `transform` attribute.
I also saw that SVGGraphicElements has getCTM() and getScreenCTM(), but
neither of them worked for me: the resulting transformation was “shrunk”
on the map (i.e., like it was scaled down).
This is more or less the same as the campsites, as public information
goes, but for buildings and other amenities that the camping provides
that are not campsites.
A small page with a brief description, carousel, and feature list of
each individual accommodation.
Most of the relations and functions for carousel and features are like
the ones for campsite types, but i had to use the accommodation’s label
to find them, because they do not have slugs; i did not even though
these would be public, and they already have a label, although not
unique for all companies, like UUID slugs are.
I can not use <a> in that map because Leaflet handles the mouse over
before the anchors sees it, thus it is impossible to click on them; i
have to use a Leaflet layer.
Fortunately, i can just use the <path>’s coordinates as
the polygon points, because with CRS.Simple the coordinates map to
pixel, except for the reversed Y/latitude coordinate. Unfortunately,
<path> coordinates are not straightforward to get: I have to follow the
drawing coordinates, taking into account the current transformation
(CTM), and keeping the last point around for relative coordinates.
Bézier curves are simplified to a straight line from start to end.
There is one single accommodation that started with a relative move
command (m), which apparently have to be treated as an absolute
move (M), but subsequent pairs are treated as relative coordinates[0].
It was easier for me to convert that relative move to absolute and add
a relative lineto command (l) to the next pair.
For now, all i do is highlight the accommodation and zoom it on click,
because i do not know how i should the accommodation’s information.
[0]: https://www.w3.org/TR/SVG11/paths.html#PathDataMovetoCommands
In the map i added in e3503187d, paths around each accommodation
inherited the fill and stroke from the group, thus i could just override
that fill at the anchor level, but the current map sets the fill to each
accommodation’s path, party because the text is not a path too, partly
because Affinity is a visual tool only and does not give a shit about
mark up.
If we keep the text in a group, however, we can set the fill of the area
using CSS too, although it is not nice due to `!important`, but still.
There was a plot, however, #93, that had the area in a group too, and
i had to remove that group manually.
It seems that the prefix got removed in one of the edits.
Also, Affinity does not give a fuck to what classes we give to the
elements, and just removes them, thus .guest-only no longer matches, and
had to hide the layers by id. Hope they hold this time.
There is no kayaking, canoe, or raft icon in Font Awesome[0], so i redid
the kayak icon in more or less the same style, but shittier, of course.
Oriol also asked me to add the sailboat, that may replace the use of
kayak.
[0]: https://github.com/FortAwesome/Font-Awesome/issues/10772
We were using what was very clearly a campfire as the icon for the
barbecue service, when we first replaced it with a Font Awesome icon
we chose an icon that was neither campfire nor barbecue (flame-curved),
but now Oriol wanted one that left no doubt it was a barbecue.
Instead of replacing the campfire SVG with that of the barbecue, i have
chosen a campfire image from Font Awesome for our icon, and added a
separate icon for that service.
Previously, the only type with options was plots, that was always the
third fieldset, which was the wrong thing to hardcode, but it was done
in a hurry. Now there are more types with options, so we have to do it
properly.
I tried to use ../, and ../../ to make the routes relatives, but it
would not work well because the same page would have two URLs, one
ending with slash and another without, and the relative links would be
different on each case.
I need to have a single top-level element in order to serialize to XML
when returning the editor’s content back to the text area, because,
unlike PostgreSQL, XMLSerializer only works with XML documents.
I added a <div> because this is the least “semantic” block element there
is, but Oriol seems to have trouble in services when trying to align
services using a grid due to this extra div.
Now i still use the div to serialize to XML, but then remove that
top-level element from the output string by stripping out its label. I
can not be sure that all browsers would serialize the <div> in the
same way, thus i can not use fixed indices in call to substring.
This is mostly because it is required for the “Digital Kit”, but it also
works in our favor because now i can version the URL to the static
resources.
Go 1.18 adds the info from git if the package is build from a git
repository, but this is not the case in OBS, so i instead relay on a
constant for the version number. This constant is “updated” by Debian’s
rules, mostly due to the discussion in [0].
[0]: https://github.com/golang/go/issues/22706
Without the position relative, the booking button is no longer on top
of the carousel depending on the screen resolution, and Oriol wants less
gap between the carrousel and the next section.
I misunderstood Oriol, and what he really wanted was to have the arrows
on top of the image, not just move the arrows from below to above. Thus,
I no longer need the carrousel to be a flex because the buttons are now
absolutely position (slick.css already sets the container to relative
position).
These arrows need to be visually inside a single container, to have a
white background, but Slick adds the two arrows separately. I had to
move them close together, remove the radius from the “common edge”, and
use padding to “move” the arrows, rather than translation, in order to
avoid showing a gap.
Oriol did not like that this carousel was different from the rest, and
wanted to have it like the rest, but showing only one slide at a time,
like the customer wants.
He also wanted the arrows for **all** carousels to be in the top-right
corner instead of bottom-right, mostly because the customer complains
that she does not see the arrows if they are on the bottom, and Oriol
does not like the arrows to the sides.
This is a separate carousel from the one displayed at the bottom with
location info; it is, i suppose, a carousel for the hero image.
For the database, it works exactly as the home carousel, but on the
front had to use AlpineJS instead of Slick because it needs to show a
text popping up from the bottom when the slide is show, something i do
not know how to do in Slick.
It now makes no sense to have the carousel inside the “nature” section,
because the heading is no longer in there, and moved it out into a new
“hero” div.
Since i now have two carousels in home, i had to add additional
attributes to carousel.AdminHandler to know which URL to point to when
POSTing, PUTting, or redirecting.
Customer does not want the new “masonry-like” design of the surroundings
page, and wants the same style they already had: a regular list with
text and photo, alternating the photo’s side.
And, of course, they want to be able to add and edit them themselves. It
is like another carousel, but with an additional rich-text description.
The photos that we had in that page are no longer of use.
Had to create a custom build of CKEditor with the following plugins
added-in:
* Autoformat
* Block quote
* Bold
* General HTML Support
* Heading
* Image
* Image caption
* Image resize
* Image style
* Image toolbar
* Image upload
* Indent
* Italic
* Link
* Link image
* List
* Media embed
* Simple upload adapter
* Source editing
* Table
* Table toolbar
* Text transformation
The important bit is the “Simple uploader adapter”, that i modified to
upload the file as `media` instead of the default `upload` (i.e.,
modified ckeditor.js to replace "upload" with "media").
I also had to add the CSRF header somewhere in the HTML document for
JavaScript to be able to retrieve it and pass it to the uploader
adapter, or i would have to disable CSRF validation in that form, which
i did not like at all.
oriol carbonell pujolàs
jordi fita mas