* feat(mobile): refactor mobile chat into modal
- Make page always scrollable
- Move mobile chat into a standalone modal
* fix(test): split out mobile browser test specs
* fix(mobile): force chat button to render on top of footer
* fix: some small updates from review
* fix: hide/show hide chat menu option based on width
* fix: chat button icon getting cut off
* chore(tests): add browser tests for mobile chat modal
* chore(tests): add story for ChatModal component
* fix(test): quiet shellcheck
* fix: remove unused import
* fix(tests): silence storybook linting warning
* fix(ui): reposition chat modal button icon with transform
* quick fix for mobile menu button overlap
* - use new dynamic vh css prop to handle ios safari double scrolling
- only force tabs height when online
* cleanup
* add comment
* - set vars for player container height and status bar height
- use them to calculate mobile top spacing to adjust for tab content positioning
* give main content section a min height, place footer absolutely at bottom; rm all the fixed footer styling
* cleanup; restructure tabbed display logic and css a bit
* Prettified Code!
* cleanup
* fix(story): footer story needs to be wrapped in RecoilRoot if it is to use Recoil
* revert adding footer to mobile about section
* prevent double scrolling
---------
Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
* feat: mock window.WebSocket to prevent WS calls from Main layout story
* Prettified Code!
---------
Co-authored-by: Pranav2612000 <Pranav2612000@users.noreply.github.com>
* Inject services with useContext
* Extract service for video settings
* Create mock factories for services
* Create test data for chat history
* Add story to visualize different layouts
* Fix renaming mistake
* Add landscape and portrait viewports
* Add landscape stories
---------
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
* Make OwncastLogo more versatile
* Add noscript tag
* Commit updated API documentation
* Show all content on vertical overflow
---------
Co-authored-by: Owncast <owncast@owncast.online>
Instead of doing manual layout switching use the Nextjs nested layout
support. Also add some additional lazy loading of components. This is to
work on performance score re: #2167.
* hide footer on mobile to avoid double scrollbars
* fix double scrollbars on desktop by removing scroll behaviour from main section
* add scrollbar styles to body and html
* add vertical scrolling back to main section
* prevent header from collapsing and messing around with scrolling
* prevent body from scrolling for main layout
* move tablet breakpoint into breakpoint mixin
* preffify code
* remove js height calc for lower section on mobile and use css
* enable scrolling within a tab on mobile
* remove scrollbar from main section on mobile
* adjust header height on mobile
* add react use to web
* lock body scroll for main layout
This commit makes the footer always attach to the bottom of the screen.
This is done by setting the minWidth of the main antd layout component
to 100vh and moving the footer component outside the spinner, since antd
does not allow granular component inside the spin component.
This commit also removes some styles which were not being used due to
invalid antd api.
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
