golang/owncast
1
0
Fork 0
mirror of https://github.com/owncast/owncast.git synced 2025-10-31 18:18:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add noscript for browsers without JS (#2592)

Browse Source 
* Make OwncastLogo more versatile

* Add noscript tag

* Commit updated API documentation

* Show all content on vertical overflow

---------

Co-authored-by: Owncast <owncast@owncast.online>
This commit is contained in:
Michael David Kuckuk
2023-02-01 20:04:24 +01:00
committed by GitHub
parent 50ac4602f3
commit c6136fc35c
5 changed files with 101 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
web/components/ui/Noscript/Noscript.module.scss Normal file
View File

@ -0,0 +1,50 @@
@import '../../../styles/mixins.scss';
.noscript {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 2em;
font-size: large;
background-color: var(--theme-color-background-main);
z-index: 999;
h2 {
margin-top: 25px;
margin-bottom: 5px;
font-weight: bold;
font-size: inherit;
}
}
// Necessary in case content y-overflows becuase
// align-items: center would otherwise hide some
// of the content
.scrollContainer {
max-height: 100%;
overflow: auto;
}
.content {
max-width: 100%;
width: 70ch;
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
width: 70%;
// For some weir reason, the logo isn't displayed on screens <= 767px.
// This coincides with the tablet breakpoint, but god knows what exactly
// the issue is. Since it's just a design element, just hide the logo on
// those smaller screens. For more information, see
// https://github.com/owncast/owncast/pull/2592
@include screen(tablet) {
display: none;
}
}