mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-03-10 11:29:07 +00:00
Kevin Midboe
0c4c30d1a0
Update page structure:
- Rename wrapper class to 'activity' (matches AdminPage pattern)
- Update h1 to activity__title with consistent styling
- Organize content with BEM naming convention
Redesign controls:
- Replace basic input with styled input-wrapper component
- Add input-suffix "days" label inside input container
- Custom number input styling with hover/focus states
- Better ToggleButton integration with control-label
- Responsive flex layout with proper mobile handling
Enhance chart presentation:
- Wrap each graph in chart-card component
- Add background, borders, and rounded corners
- Clear chart-card__title headers
- Fixed height charts (35vh desktop, 30vh mobile)
- Minimum height prevents squashing (300px/250px)
- Consistent spacing and padding
Improve top content section:
- Grid layout for top content items (3 cols → 1 col mobile)
- Card-based items with borders and hover effects
- Hover: border highlight + translateY animation
- Better visual hierarchy with section-title
Styling details:
- Use CSS variables (--background-ui, --text-color-50, etc.)
- Match AdminPage typography (2rem title, 300 weight)
- Consistent border-radius (12px cards, 8px inputs)
- Proper mobile-only responsive breakpoints
- Remove old commented-out code
Result: Professional, cohesive design matching rest of site ✨
Seasoned Request
Seasoned request is frontend vue application for searching, requesting and viewing account watch activity.
Config setup
# make copy of example environment file
cp .env.example .env
# .env sane default values
SEASONED_API=
ELASTIC=
ELASTIC_INDEX=shows,movies
SEASONED_DOMAIN=
- Leave SEASONED_API empty to request
/apifrom same origin and proxy passed by nginx, set if hosting seasonedShows backend api locally. - Elastic is optional and can be used for a instant search feature for all movies and shows registered in tmdb, leave empty to disable.
# .env example values
SEASONED_API=http://localhost:31459
ELASTIC=http://localhost:9200
ELASTIC_INDEX=shows,movies
SEASONED_DOMAIN=request.movie
Build Steps
# install dependencies
yarn
# build vue project using webpack
yarn build
# test or host built files using docker, might require sudo:
docker build -t seasoned .
docker run -d -p 5000:5000 --name seasoned-request --env-file .env seasoned
Development Steps
# serve project with hot reloading at localhost:8080
yarn dev
To proxy requests to /api either update SEASONED_API in .env or run set environment variable, e.g.:
# export and run
export SEASONED_API=http://localhost:31459
yarn dev
# or run with environment variable inline
SEASONED_API=http://localhost:31459 yarn dev
Documentation
All api functions are documented in /docs and found here.
html version also available