Use the whole viewport. Ref #19

css/style.css

@@ -5,7 +5,7 @@
 
 .documentslist { padding:5px; }
 
-.documentslist .add-document {
+.documentslist .add-document{
 	display: inline-block;
 	height: 200px;
 	width: 200px;
@@ -16,10 +16,10 @@
 	display: inline-block;
 	position: relative;
 	height: 200px;
-	width: 98px;
+	width: 200px;
 	background-repeat: no-repeat;
 	background-size: 64px;
-	background-position: 18px;
+	background-position: 50% 68px;
 }
 .add-document .add {
 	background-image: url('%webroot%/core/img/actions/add.svg');
@@ -66,18 +66,20 @@
 	text-align: center;
 }
 
-#odf_close{
+#odf-toolbar{
+	position: absolute;
+	width: 100%;
+	z-index: 500;
+}
+
+#odf-close{
 	float:left;
 }
 
-#odf_invite{
+#odf-invite{
 	float:right;
 }
 
-#editor-content #mainContainer{
-	background-color: transparent;
-}
-
 #mainContainer #collaboration{
 	float:right;position: relative;z-index: 1;
 	width: 70px;padding:5px;
@@ -99,6 +101,7 @@
 
 #mainContainer{
 	position:absolute;
+	z-index:500;
 }
 
 #documents-overlay,  #documents-overlay-below{
@@ -107,20 +110,20 @@
     left: 0;
     width: 100%;
     height: 100%;
-    filter:alpha(opacity=50);
+    filter:alpha(opacity=30);
-    opacity: 0.5;
+    opacity: 0.3;
     z-index: 1000;
 	background: #000 url('%webroot%/core/img/loading-dark.gif') 50% 50% no-repeat;
 }
 #documents-overlay-below{
-	left:85px;
+	left:0;
-	top:48px;
+	top:0;
     filter:alpha(opacity=100);
     opacity: 1;
 	background:#f0f0f0;
 	z-index: 999;
 }
 
-#documents-content #editor, #documents-content #members{
+#members{
 	padding-top: 3em !important;
 }

js/documents.js

@@ -8,7 +8,6 @@ var documentsMain = {
 	onStartup: function() {
 		"use strict";
 		$('<div id="documents-overlay"></div> <div id="documents-overlay-below"></div>').hide().appendTo(document.body);
-		$('#documents-overlay-below').css({left: $('#navigation').width()+4});
 		OC.addScript('documents', 'dojo-amalgamation', function() {
 			OC.addScript('documents', 'webodf-debug').done(function() {
 				// preload stuff in the background
@@ -33,19 +32,19 @@ var documentsMain = {
 
 		require({ }, ["webodf/editor/server/owncloud/ServerFactory", "webodf/editor/Editor"], function (ServerFactory, Editor) {
 			// fade out file list and show WebODF canvas
-			$('.documentslist, #emptyfolder').fadeOut('slow').promise().done(function() {
+			$('#content').fadeOut('slow').promise().done(function() {
 				// odf action toolbar
 				var odfToolbarHtml =
-					'<div id="odf-toolbar">' +
+					'<div id="odf-toolbar" class="dijitToolbar">' +
-					'  <button id="odf_close">' +
+					'  <button id="odf-close">' +
-						t('files_odfviewer', 'Close') +
+						t('documents', 'Close') +
 					'  </button>' +
-					'  <button id="odf_invite">' +
+					'  <button id="odf-invite">' +
-						t('files_odfviewer', 'Invite') +
+						t('documents', 'Invite') +
 					'  </button>' +
 					'  <span id="toolbar" class="claro"></span>' +
 					'</div>';
-				$('#controls').append(odfToolbarHtml);
+				$(document.body).prepend(odfToolbarHtml);
 
 				var memberId, odfelement, odfcanvas, canvashtml =
 					'<div id = "mainContainer" class="claro" style="">' +
@@ -67,7 +66,7 @@ var documentsMain = {
 				var serverFactory = new ServerFactory();
 
 				$(document.body).addClass("claro");
-				$('.documentslist, #emptyfolder').after(canvashtml);
+				$(document.body).prepend(canvashtml);
 				// in case we are on the public sharing page we shall display the odf into the preview tag
 				$('#preview').html(canvashtml);
 					
@@ -159,7 +158,7 @@ var documentsMain = {
 					$('#mainContainer').remove();
 					$('#odf-toolbar').remove();
 					$('.actions,#file_access_panel').fadeIn('slow');
-					$('.documentslist, #emptyfolder').fadeIn('slow');
+					$('#content').fadeIn('slow');
 					$(document.body).removeClass('claro');
 				});
 				documentsMain.isEditorMode = false;
@@ -270,10 +269,10 @@ $(document).ready(function() {
 		}
 	});
 	
-	$('#content').on('click', '#odf_close', documentsMain.onClose);
+	$(document.body).on('click', '#odf-close', documentsMain.onClose);
-	$('#content').on('click', '#odf_invite', documentsMain.onInvite);
+	$(document.body).on('click', '#odf-invite', documentsMain.onInvite);
-	$('#content').on('click', '#invite-send', documentsMain.sendInvite);
+	$(document.body).on('click', '#invite-send', documentsMain.sendInvite);
-	$('#content').on('click', '#invitee-list li', function(){
+	$(document.body).on('click', '#invitee-list li', function(){
 		$(this).remove();
 	});
 	

templates/documents.php

@@ -1,12 +1,14 @@
-<div id="controls">
+<!-- <div id="controls">
 	<div id="invite-block" style="display:none">
 		<input id="inivite-input" type="text" />
 		<ul id="invitee-list"></ul>
 		<button id="invite-send"><?php p('Send Invitation') ?></button>
 	</div>
 </div>
+-->
+<div id="editor-content">
+</div>
 <div id="documents-content">
-	<div id="editor-content">
 	<ul class="documentslist">
 		<li class="add-document">
 			<!-- <a class="add svg" target="_blank" href="">
@@ -20,5 +22,4 @@
 			<a target="_blank" href=""><label></label></a>
 		</li>
 	</ul>
-	</div>
 </div>