sjw/MovieNight
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

extract inlined css into conditional classes

Browse Source
This commit is contained in:
Alex Dunn 2020-06-06 15:55:03 -07:00
parent fb32ba7348
commit d4d513420c
4 changed files with 39 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
static/base.html
View File

@ -15,9 +15,7 @@
<body class="scrollbar">
<img id="remote" src="/static/img/remote.png" onclick="flipRemote();" />
<div id="devKeys"></div>
<div class="root">
{{template "body" .}}
</div>
{{template "body" .}}
</body>
</html>
</html>

33
static/css/site.css
View File

@ -56,12 +56,13 @@ input[type=text] {
font-weight: bold;
}
.root {
max-width: var(--var-max-width);
max-height: var(--var-max-height);
height: var(--var-max-height);
width: var(--var-max-width);
margin: 0px 1vw;
.grid-root {
display: grid;
height: var(--var-max-height);
margin: 0px 1vw;
max-height: var(--var-max-height);
max-width: var(--var-max-width);
width: var(--var-max-width);
}
.pretty-button {
@ -200,7 +201,7 @@ input[type=text] {
height: 100%;
width: 100%;
position: absolute;
background-color: rgb(0, 0, 0, 0.75);
background-color: rgba(0, 0, 0, 0.75);
z-index: 3;
text-align: center;
vertical-align: middle;
@ -400,3 +401,21 @@ input[type=text] {
z-index: 99;
color: var(--var-contrast-color);
}
/* ------------------- */
/* CONDITIONAL CLASSES */
/* ------------------- */
/* ------------- */
/* COMBINED MODE */
/* ------------- */
.combined {
grid-template-columns: 5fr 1fr;
}
/* --------------- */
/* VIDEO ONLY MODE */
/* --------------- */
.video-only #videoElement {
height: 99vh;
}

2
static/help.html
View File

@ -29,4 +29,4 @@
</dl>
{{end}}
</div>
{{end}}
{{end}}

29
static/main.html
View File

@ -6,35 +6,26 @@
<script>
maxMessageCount = {{.MessageHistoryCount }}
</script>
<style>
.root {
display: grid;
}
</style>
{{end}}
{{if .Video}}
<script type="application/javascript" src="/static/js/flv.min.js"></script>
<script type="application/javascript" src="/static/js/video.js"></script>
{{if not .Chat}}
<style>
#videoElement {
height: 99vh;
}
</style>
{{end}}
{{end}}
{{if and .Video .Chat}}
<style>
.root {
grid-template-columns: 5fr 1fr;
}
</style>
{{end}}
{{/* end define header */}}
{{end}}
{{define "body"}}
{{ if and .Chat .Video }}
<div class="grid-root combined">
{{ else if .Video }}
<div class="grid-root video-only">
{{ else }}
<div class="grid-root">
{{ end }}
{{if .Video}}
<div id="videoWrapper">
<div id="videoOverlay">