barebones noscript layout

This commit is contained in:
Ginger Wong 2020-07-18 17:44:18 -07:00
parent 38a279485b
commit d775924c59
2 changed files with 29 additions and 4 deletions

View file

@ -15,8 +15,7 @@
</head> </head>
<body class="bg-gray-300 text-gray-800"> <body class="bg-gray-300 text-gray-800">
<div id="app-container" v-cloak class="flex no-chat">
<div id="app-container" class="flex no-chat">
<div id="top-content"> <div id="top-content">
<header class="flex border-b border-gray-900 border-solid shadow-md"> <header class="flex border-b border-gray-900 border-solid shadow-md">
<h1 v-cloak class="flex text-gray-400"> <h1 v-cloak class="flex text-gray-400">
@ -165,7 +164,6 @@
</div> </div>
<script src="js/usercolors.js"></script> <script src="js/usercolors.js"></script>
<script src="js/utils.js"></script> <script src="js/utils.js"></script>
<script src="js/message.js"></script> <script src="js/message.js"></script>
@ -179,5 +177,32 @@
app.init(); app.init();
})(); })();
</script> </script>
<noscript>
<style>
[v-cloak] { display: none; }
.noscript {
text-align: center;
padding: 30px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.noscript a {
display: inline;
color: blue;
text-decoration: underline;
}
</style>
<div class="noscript">
<img src="https://github.com/gabek/owncast/raw/master/doc/logo.png">
<br/>
<p>
This <a href="https://github.com/gabek/owncast" target="_blank">Owncast</a> stream requires Javascript to play.
</p>
</div>
</noscript>
</body> </body>
</html> </html>

View file

@ -11,10 +11,10 @@ body {
font-size: 14px; font-size: 14px;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
/* vuejs attribute to hide things before content ready */
[v-cloak] { visibility: hidden; } [v-cloak] { visibility: hidden; }
::-webkit-scrollbar { ::-webkit-scrollbar {