[Fix] Made the hero case container responsive so the card component appears on smaller screens

Vanessa082 commented 1 month ago

Fixes

Fixes #231 by @SumaiyaaRq
Description

This PR made the hero case container responsive so the card component appears on smaller screens. Removed the is-hidden-touch class name that made it disappear on screens 1023px and lower

Technical details

found that the is-hidden-touch class name was an important predefined class name that will give elements a display value of none for screens <= 1023px.
Removed this class name and balanced styles for a better responsive feel with
- float: none;
- margin: 0 $space-bigger; and
- max-width: unset;
Added an extra holder div with the case-holder class name and gave it a flex direction of column-reverse on screens 650px and lower
This later disrupted the hide topic filters button (causing its content to break), which I then Fixed with the styles
- white-space: nowrap;
- gap: $space-smaller;

Screenshots

Screencast from 2024-10-22 08-48-23.webm

Checklist

[x] My pull request has a descriptive title (not a vague title like Update index.md).
[x] My pull request targets the default branch of the repository (main or master).
[x] My commit messages follow best practices.
[x] My code follows the established code style of the repository.
[ ] I added or updated tests for the changes I made (if applicable).
[ ] I added or updated documentation (if applicable).
[x] I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

For the purposes of this DCO, "license" is equivalent to "license or public domain dedication," and "open source license" is equivalent to "open content license or public domain dedication."

Developer Certificate of Origin

``` Developer Certificate of Origin Version 1.1 Copyright (C) 2004, 2006 The Linux Foundation and its contributors. 1 Letterman Drive Suite D4700 San Francisco, CA, 94129 Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. Developer's Certificate of Origin 1.1 By making a contribution to this project, I certify that: (a) The contribution was created in whole or in part by me and I have the right to submit it under the open source license indicated in the file; or (b) The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate open source license and I have the right under that license to submit that work with modifications, whether created in whole or in part by me, under the same open source license (unless I am permitted to submit under a different license), as indicated in the file; or (c) The contribution was provided directly to me by some other person who certified (a), (b) or (c) and I have not modified it. (d) I understand and agree that this project and the contribution are public and that a record of the contribution (including all personal information I submit with it, including my sign-off) is maintained indefinitely and may be redistributed consistent with this project or the open source license(s) involved. ```

Vanessa082 commented 1 month ago

Hi @TimidRobot, I've updated the PR just as you requested 😊

Vanessa082 commented 1 month ago

good work!!

Thanks @TimidRobot 😊

TimidRobot commented 1 month ago

Deployed to Production

Per deploy_to_heroku.md:

git push heroku main; date

Enumerating objects: 100, done.
Counting objects: 100% (71/71), done.
Delta compression using up to 10 threads
Compressing objects: 100% (37/37), done.
Writing objects: 100% (40/40), 7.57 KiB | 7.57 MiB/s, done.
Total 40 (delta 23), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Updated 148 paths from cce6f2f
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Building on the Heroku-24 stack
remote: -----> Using buildpack: heroku/python
remote: -----> Python app detected
remote: -----> Using Python 3.12 specified in Pipfile.lock
remote: -----> Using cached install of Python 3.12.7
remote: -----> Installing pip 24.0, setuptools 70.3.0 and wheel 0.44.0
remote: -----> Installing Pipenv 2024.0.1
remote: -----> Installing SQLite3
remote: -----> Installing dependencies with Pipenv
remote:        Installing dependencies from Pipfile.lock (2b6da2)...
remote: -----> $ python manage.py collectstatic --noinput
remote:        480 static files copied to '/tmp/build_008edaa2/staticfiles', 884 post-processed.
remote: 
remote: -----> Discovering process types
remote:        Procfile declares types -> release, web
remote: 
remote: -----> Compressing...
remote:        Done: 62.8M
remote: -----> Launching...
remote:  !     Release command declared: this new release will not be available until the command succeeds.
remote:        Released v68
remote:        https://fast-eyrie-10628.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
remote: Running release command...
remote: 
remote: Operations to perform:
remote:   Apply all migrations: admin, auth, contenttypes, legal_db, sessions, taggit
remote: Running migrations:
remote:   No migrations to apply.
To https://git.heroku.com/fast-eyrie-10628.git
   fd63eb3..fb273cc  main -> main
Tue Oct 22 14:21:33 PDT 2024

creativecommons / legaldb