This is somewhat inefficient because each list item has its own instance
of a intersectionObserver.
Improvements include:
- Poster has placeholder image as source from mount
- When component mounts we attach the observer
- When observerd in viewport find
- Find the correct image height based on the placeholders height
- Change src to dynamic poster url
- Accessibility
- Tabindex updated for search <input> to have priority over nav items.
- Aria label
- Search icon clickable for searching.
- Filter for adult and searchType.
- When clicking a autocomplete search result, the clicked item is set as
selectedResult.
- Remove duplicates from elastic search result.
- Added filter parameters to our $router.push function.
Supplementary and content text are now wrapped in a <li> item. This with
better styling selectors formats the icon correctly alongside the text.
Fixed active icon ref function that had an incorrect if statement so the
activeIconRef would never be returned.
Use the toggleButton for filtering release types in torrent response.
There is a click to expand the full name of the torrent. This is mostly
for mobile where the name is hidden. Fixed an issue where the expanded
list element would not get the correct styling and break the table in
half. Now we also set an data attribute for the expanded element. This
allows our scoped styling to reach the expanded element.
Also increased padding on expanded content.
- On empty search responses Search page show a error message that there
where no respones.
- For page loads directly to the search page new url query parameters
are checked: adult and media_type. These are then used to fetch updated
tmdb search parameters. Adult = true disables filtering for adult
material and media_type decides if the search is multi, movie, show or
person. (Frontend for filtering media_type is not added yet.)
- Increased the z-index of the darkmode toggle emoji icon.
- supported function for checking the browser for prefered color scheme.
This is mainly to set the current mode to dark if the color scheme is
currently dark.
New loading var for holding the state of the request. This makes it
easier to show the loading and an error if the result is empty but the
request is finished.
More header info! The header now displays list elements of info in a
column on the right side of header. Used here for result and page
current and total count.
the response body).
nesteDataToString is simplified in the way it parses its input data.
getMovie uses optional second parameter check_existance to check if the
file exists in plex.
components we have made and to use update function definition.
Changed the message system with SeasonedMessages. This means simpler
interaction and less duplicate code now that the messagesystem is a
separate component that both interface with.
variables.scss file and defining css variables in :root and alterting
them based on prefered color scheme. This gives us a mechanism to set
custom color schemes for the entire site from one place and changing
between them just by setting a class to the body element. This is done
by overwriting the css variables and then our scss variables use these
changes and apply them downward. This seems like a really nice setup for
the switching between- and adding color schemes.
Also did a lot of cleanup of unused, duplicate or errors styling
throughout the application.
