Adjust main layout to changes in server

Main layout elements (navigation, content and sidebar) are no longer
children of the "#app" element in the standard layout in the server, so
those changes are reflected in Talk too.

Note, however, that the "#app" element is still kept as an, in practice,
invisible element, as it is used as a holder for some values (like the
token or the signaling settings) used in scripts.

Besides that, although the layout of the server is mainly mimicked in
Talk, there are also some differences needed for its specific UI.

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

2 files changed, 97 insertions, 39 deletions

diff --git a/css/style.scss b/css/style.scss
index be6d35610..f040b6460 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -1,8 +1,64 @@
+/* The standard layout defined in the server includes a fixed header with a
+ * sticky sidebar. This causes the scroll bar for the main area to appear to the
+ * right of the sidebar, which looks confusing for the chat. Thus that layout is
+ * overridden with a full set of flex containers to cascade parent element
+ * height to the main view to limit the vertical scroll bar only to it (same
+ * thing done for the sidebar and the chat view). */
+#body-user {
+	display: flex;
+	flex-direction: column;
+}
+
+#body-user #header {
+	/* Override fixed position from server to include it in the flex layout */
+	position: static;
+	flex-shrink: 0;
+}
+
+#content-wrapper {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+
+	flex-grow: 1;
+
+	/* Override "min-height: 100%" set in server, as the header is part of the
+	 * flex layout and thus the whole body is not available for the content. */
+	min-height: 0;
+}
+
+#content {
+	display: flex;
+	flex-direction: row;
+	overflow: hidden;
+
+	flex-grow: 1;
+
+	/* Override margin used in server, as the header is part of the flex layout
+	 * and thus the content does not need to be pushed down. */
+	margin-top: 0;
+}
+
+#app-content {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+
+	flex-grow: 1;
+}
+
+#app-content-wrapper {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+
+	flex-grow: 1;
+}
+
 #body-public {
 	height: 100%;
 }
 
-.app-spreed #app-content,
 #body-public #app-content {
 	overflow: hidden;
 }
diff --git a/templates/index.php b/templates/index.php
index 1b0880cb9..d56c20ff2 100644
--- a/templates/index.php
+++ b/templates/index.php
@@ -46,53 +46,55 @@ script(
 	<script type="text/json" id="signaling-settings">
 	<?php echo json_encode($_['signaling-settings']) ?>
 	</script>
-	<div id="app-navigation" class="icon-loading">
-		<form id="oca-spreedme-add-room">
-			<input id="select-participants" class="select2-offscreen" type="text" placeholder="<?php p($l->t('New conversation …')) ?>"/>
-		</form>
-		<ul id="spreedme-room-list" class="with-icon">
-		</ul>
-	</div>
+</div>
+
+<div id="app-navigation" class="icon-loading">
+	<form id="oca-spreedme-add-room">
+		<input id="select-participants" class="select2-offscreen" type="text" placeholder="<?php p($l->t('New conversation …')) ?>"/>
+	</form>
+	<ul id="spreedme-room-list" class="with-icon">
+	</ul>
+</div>
 
-	<div id="app-content" class="participants-1">
+<div id="app-content" class="participants-1">
 
-		<div id="app-content-wrapper">
+	<div id="app-content-wrapper">
 		<button id="video-fullscreen" class="icon-fullscreen icon-white icon-shadow hidden" data-placement="bottom" data-toggle="tooltip" data-original-title="<?php p($l->t('Fullscreen (f)')) ?>"></button>
 
 		<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>
@@ -102,8 +104,8 @@ script(
 				<input id="shareRoomInput" class="share-room-input hidden" readonly="readonly" type="text"/>
 				<div id="shareRoomClipboardButton" class="shareRoomClipboard icon-clippy hidden" data-clipboard-target="#shareRoomInput"></div>
 			</div>
-		</div>
 
 		</div>
+
 	</div>
 </div>