Adjust public layout for guest users to changes in server

Until now the public layout for guest users was based on the "base"
layout of the server, which was almost empty, and the "index-public"
template had to provide all the elements mimicking those used for public
pages in the server. The recent layout changes in the server have
introduced some structure changes in that base layout, which is now more
cumbersome to use with Talk.

Fortunately, in Nextcloud 14 a standard layout for public pages was
introduced, so now the public layout for guest users is based on that
public layout of the server instead. Therefore, it is no longer needed
to provide a header in the template, and the CSS rules used for the main
layout can be reused for the public layout.

There is a drawback, though; as the header is no longer a descendant of
"#app-content" it is no longer possible to make it transparent based on
the ".participants-XXX" classes set for that element. For now, and until
it is addressed, the header will still be visible during calls in guest
pages.

Also note that the public layout of the server does not provide at this
time a notification container, so that element must be kept.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>

1 files changed, 37 insertions, 52 deletions

diff --git a/templates/index-public.php b/templates/index-public.php
index b77cd315f..82454e53d 100644
--- a/templates/index-public.php
+++ b/templates/index-public.php
@@ -46,67 +46,52 @@ script(
 	<script type="text/json" id="signaling-settings">
 	<?php echo json_encode($_['signaling-settings']) ?>
 	</script>
-	<div id="app-content" class="participants-1">
+</div>
 
-		<header>
-			<div id="header" class="spreed-public">
-				<div id="header-left">
-					<a href="<?php print_unescaped(link_to('', 'index.php')); ?>" title="" id="nextcloud" target="_blank">
-						<div class="logo logo-icon svg">
-							<h1 class="hidden-visually">
-								<?php p($theme->getName() . ' ' . $l->t('Talk')); ?>
-							</h1>
-						</div>
-					</a>
-				</div>
-				<div id="header-right">
-				</div>
-			</div>
-		</header>
+<div id="app-content" class="participants-1">
 
-		<div id="app-content-wrapper">
-			<button id="video-fullscreen" class="icon-fullscreen icon-white icon-shadow public" data-placement="bottom" data-toggle="tooltip" data-original-title="<?php p($l->t('Fullscreen (f)')) ?>"></button>
+	<div id="app-content-wrapper">
+		<button id="video-fullscreen" class="icon-fullscreen icon-white icon-shadow public" data-placement="bottom" data-toggle="tooltip" data-original-title="<?php p($l->t('Fullscreen (f)')) ?>"></button>
 
-			<div id="video-speaking">
+		<div id="video-speaking">
 
-			</div>
-			<div id="videos">
-				<div class="videoView videoContainer hidden" id="localVideoContainer">
-					<video id="localVideo"></video>
-					<div class="avatar-container hidden">
-						<div class="avatar"></div>
-					</div>
-					<div class="nameIndicator">
-						<button id="mute" class="icon-audio icon-white icon-shadow" data-placement="top" data-toggle="tooltip" data-original-title="<?php p($l->t('Mute audio (m)')) ?>"></button>
-						<button id="hideVideo" class="icon-video icon-white icon-shadow" data-placement="top" data-toggle="tooltip" data-original-title="<?php p($l->t('Disable video (v)')) ?>"></button>
-						<button id="screensharing-button" class="app-navigation-entry-utils-menu-button icon-screen-off icon-white icon-shadow screensharing-disabled" data-placement="top" data-toggle="tooltip" data-original-title="<?php p($l->t('Share screen')) ?>"></button>
-						<div id="screensharing-menu" class="app-navigation-entry-menu">
-							<ul>
-								<li>
-									<button id="show-screen-button">
-										<span class="icon-screen"></span>
-										<span><?php p($l->t('Show your screen'));?></span>
-									</button>
-								</li>
-								<li>
-									<button id="stop-screen-button">
-										<span class="icon-screen-off"></span>
-										<span><?php p($l->t('Stop screensharing'));?></span>
-									</button>
-								</li>
-							</ul>
-						</div>
+		</div>
+		<div id="videos">
+			<div class="videoView videoContainer hidden" id="localVideoContainer">
+				<video id="localVideo"></video>
+				<div class="avatar-container hidden">
+					<div class="avatar"></div>
+				</div>
+				<div class="nameIndicator">
+					<button id="mute" class="icon-audio icon-white icon-shadow" data-placement="top" data-toggle="tooltip" data-original-title="<?php p($l->t('Mute audio (m)')) ?>"></button>
+					<button id="hideVideo" class="icon-video icon-white icon-shadow" data-placement="top" data-toggle="tooltip" data-original-title="<?php p($l->t('Disable video (v)')) ?>"></button>
+					<button id="screensharing-button" class="app-navigation-entry-utils-menu-button icon-screen-off icon-white icon-shadow screensharing-disabled" data-placement="top" data-toggle="tooltip" data-original-title="<?php p($l->t('Share screen')) ?>"></button>
+					<div id="screensharing-menu" class="app-navigation-entry-menu">
+						<ul>
+							<li>
+								<button id="show-screen-button">
+									<span class="icon-screen"></span>
+									<span><?php p($l->t('Show your screen'));?></span>
+								</button>
+							</li>
+							<li>
+								<button id="stop-screen-button">
+									<span class="icon-screen-off"></span>
+									<span><?php p($l->t('Stop screensharing'));?></span>
+								</button>
+							</li>
+						</ul>
 					</div>
 				</div>
 			</div>
+		</div>
 
-			<div id="screens"></div>
+		<div id="screens"></div>
 
-			<div id="emptycontent">
-				<div id="emptycontent-icon" class="icon-video"></div>
-				<h2><?php p($l->t('Join a conversation or start a new one')) ?></h2>
-				<p class="uploadmessage"></p>
-			</div>
+		<div id="emptycontent">
+			<div id="emptycontent-icon" class="icon-video"></div>
+			<h2><?php p($l->t('Join a conversation or start a new one')) ?></h2>
+			<p class="uploadmessage"></p>
 		</div>
 	</div>
 </div>