Skip to content

Commit 366b1ba

Browse files
RewryteRewryte
committed
[Dev] Update presentation styling
1 parent 224973a commit 366b1ba

File tree

1 file changed

+23
-31
lines changed

1 file changed

+23
-31
lines changed

‎dev/presentation.html‎

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,24 @@
66
<title>Congregation</title>
77
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
88
</head>
9-
<body class="overflow-hidden" style="transition: background 0.5s, color 0.5s;">
10-
<div id="PresentationElement" class="overflow-hidden" style="max-width: 960px;height: 720px;">
11-
<div id="LoadView" class="container position-absolute top-50 start-50 translate-middle" style="width: 960px;height: 720px;">
12-
<div id="LoadViewInt" class="container position-absolute top-50 start-50 translate-middle text-center">
13-
<h1 class="display-2">Congregation</h1>
14-
<div class="fs-3">Instant Presentations</div><br>
15-
<button id="TestBtn" type="button" class="btn btn-secondary btn-lg">Fullscr</button>
16-
<div class="spinner-border text-primary" role="status"></div>
9+
<body style="transition: background 0.5s, color 0.5s;">
10+
<div id="PresentationPreview" class="container p-0 border border-2 overflow-hidden" style="max-width: 960px;max-height: 720px;height: 50vh;">
11+
<div id="PresentationElement" class="bg-black overflow-hidden" style="width: 100%;height: 100%">
12+
<div id="LoadView" class="position-relative top-50 start-50 translate-middle text-center" style="">
13+
<h1 class="display-2">Congregation</h1>
14+
<div class="fs-3">Instant Presentations</div><br>
15+
<div class="spinner-border text-primary" role="status"></div>
1716
</div>
18-
</div>
19-
<div id="TextView" class="container position-absolute top-50 start-50 translate-middle" style="display: none;transform-origin: top left;transition: width 2s, height 2s, scale 2s;">
20-
<div id="TextViewInt" class="container position-absolute top-50 start-50 translate-middle" style="">
21-
<h1 id="Title" class="display-2 text-center"></h1>
22-
<ul id="BulletList" class="list-group list-group-flush"></ul>
17+
<div id="TextView" class="position-relative top-50 start-50 translate-middle" style="display: none;transform-origin: top left;transition: width 2s, height 2s, scale 2s;">
18+
<h1 id="Title" class="display-2 text-center"></h1>
19+
<ul id="BulletList" class="list-group list-group-flush"></ul>
2320
</div>
21+
<iframe id="WebView" class="overflow-hidden" style="height: 100%;width: 100%;scale: 1;transform-origin: top left;transition: width 2s, height 2s, scale 2s;display: none;"></iframe>
22+
<iframe id="FullWebView" class="overflow-hidden" style="height: 100%;width: 100%;display: none;"></iframe>
23+
</div>
24+
<img id="ImageView" class="object-fit-contain" style="height: 100%;width: 100%;display: none;scale: 1;transition: width 2s, height 2s, scale 2s;" alt="image viewer">
25+
<video id="VideoView" class="" style="height: 100%;width: 100%;display: none;" controls autoplay></video>
2426
</div>
25-
<div id="WebView" class="container-fluid vw-100 vh-100 bg-black overflow-hidden" style="display: none;">
26-
<iframe id="WebIframe" style="height: 100%;width: 100%;scale: 1;transform-origin: top left;transition: width 2s, height 2s, scale 2s;"></iframe>
27-
</div>
28-
<div id="FullWebView" class="container-fluid vw-100 vh-100 bg-black overflow-hidden" style="display: none;">
29-
<iframe id="FullWebIframe" style="height: 100%;width: 100%;"></iframe>
30-
</div>
31-
<div id="ImageView" class="container-fluid vw-100 vh-100 bg-black align-items-center" style="display: none;">
32-
<img id="ImageObj" class="object-fit-contain bg-black" style="height: 100%;width: 100%;scale: 1;transition: width 2s, height 2s, scale 2s;" alt="image viewer">
33-
</div>
34-
<video id="VideoView" class="vw-100 vh-100 bg-black align-items-center" style="display: none;" controls autoplay></video>
3527
</div>
3628
<div class="container">
3729
<h3>Select presentation display from the list below</h3>
@@ -81,7 +73,7 @@ <h3>Select presentation display from the list below</h3>
8173
TargetElement.style.scale = ( TargetScale * 100 ) + "%";
8274
break;
8375
case "WebView":
84-
TargetElement = document.getElementById( "WebIframe" );
76+
TargetElement = document.getElementById( "WebView" );
8577
// Fix width but maintain aspect ratio
8678
TargetWidth = Math.floor( 960 / ZoomFloat );
8779
TargetHeight = Math.floor( TargetWidth / window.innerWidth * window.innerHeight );
@@ -92,8 +84,8 @@ <h3>Select presentation display from the list below</h3>
9284
TargetElement.style.scale = ( TargetScale * 100 ) + "%";
9385
break;
9486
case "ImageView":
95-
TargetElement = document.getElementById( "ImageObj" );
96-
TargetElement.style.scale = ( ZoomFloat * 100) + "%";
87+
TargetElement = document.getElementById( "ImageView" );
88+
TargetElement.style.scale = ( ZoomFloat * 100 ) + "%";
9789
break;
9890
}
9991
}
@@ -118,15 +110,15 @@ <h3>Select presentation display from the list below</h3>
118110
SwitchView( "TextView" );
119111
}
120112
function HandleURL( url ) {
121-
document.getElementById( "WebIframe" ).src = url;
113+
document.getElementById( "WebView" ).src = url;
122114
SwitchView( "LoadView" );
123115
}
124116
function HandleURLFullRes( url ) {
125-
document.getElementById( "FullWebIframe" ).src = url;
117+
document.getElementById( "FullWebView" ).src = url;
126118
SwitchView( "LoadView" );
127119
}
128120
function HandleImage( data ) {
129-
document.getElementById( "ImageObj" ).src = data;
121+
document.getElementById( "ImageView" ).src = data;
130122
SwitchView( "ImageView" );
131123
}
132124
function HandleVideo( data ) {
@@ -189,11 +181,11 @@ <h3>Select presentation display from the list below</h3>
189181
PopulateDisplays();
190182
});
191183

192-
document.getElementById( "WebIframe" ).addEventListener( "load", () => {
184+
document.getElementById( "WebView" ).addEventListener( "load", () => {
193185
SwitchView( "WebView" );
194186
});
195187

196-
document.getElementById( "FullWebIframe" ).addEventListener( "load", () => {
188+
document.getElementById( "FullWebView" ).addEventListener( "load", () => {
197189
SwitchView( "FullWebView" );
198190
});
199191
</script>

0 commit comments

Comments
 (0)