move back to tiles (200x200 as in pictures)

css/style.css

@@ -1,35 +1,77 @@
-#emptyfolder { position:absolute; margin:10em 0 0 10em; font-size:1.5em; font-weight:bold; color:#888; text-shadow:#fff 0 1px 0; }
+#emptyfolder {
-
+	position:absolute; margin:10em 0 0 10em;
-.documentslist { padding:5px; }
+	font-size:1.5em; font-weight:bold; color:#888; text-shadow:#fff 0 1px 0;
-.documentslist li{
-	margin:4px;
-}
-.documentslist .session-active {
-	float: left;
-	margin-left: 16px;
-	margin-top: 16px;
-	width: 20px;
-}
-.documentslist .document-info {
-	display: inline;
-	height:32px;
-}
-.documentslist .document-info a {
-	display: block;
-	background-repeat: no-repeat;
-	background-size: 32px;
-	height: 32px;
-	padding-left: 36px;
-	vertical-align: middle;
-	line-height: 32px;
 }
 
 #office-content{
 	padding-top: 3em;
 }
 
+.documentslist { padding:5px; }
+
+.documentslist .add-document {
+	display: inline-block;
+	height: 200px;
+	width: 200px;
+	margin: 1em;
+	vertical-align: top;
+}
+.add-document a {
+	display: inline-block;
+	position: relative;
+	height: 200px;
+	width: 98px;
+	background-repeat: no-repeat;
+	background-size: 64px;
+	background-position: 18px;
+}
+.add-document .add {
+	background-image: url('%webroot%/core/img/actions/add.png');
+}
+.add-document .upload {
+	background-image: url('%webroot%/core/img/actions/upload.png');
+}
+.add-document label {
+	position: absolute;
+	bottom: 5px;
+	width: 100%;
+	color: white;
+	text-shadow: 0 0 10px #000;
+	text-align: center;
+}
+.documentslist .document {
+	display: inline-block;
+	height: 200px;
+	width: 200px;
+	margin: 1em;
+	vertical-align: top;
+}
+.documentslist .session-active {
+	position: relative;
+	margin-left: 128px;
+	margin-top: 128px;
+	width: 32px;
+}
+.document a {
+	display: block;
+	position: relative;
+	height: 200px;
+	width: 200px;
+	background-repeat: no-repeat;
+	background-size: 64px;
+	background-position: 68px;
+}
+.document label {
+	position: absolute;
+	bottom: 5px;
+	width: 100%;
+	color: white;
+	text-shadow: 0 0 10px #000;
+	text-align: center;
+}
+
 #odf_close{
-float:left;
+	float:left;
 }
 
 #odf_invite{

js/office.js

@@ -234,8 +234,8 @@ officeDocuments.renderDocuments = function () {
 		docElem.attr('data-id', document.fileid);
 		
 		var a = docElem.find('a');
-		a.text(document.name);
 		a.attr('href', OC.Router.generate('download',{file:document.path}));
+		a.find('label').text(document.name);
 		
 		getMimeIcon(document.mimetype).then(function(path){
 			a.css('background-image', 'url("'+path+'")');
@@ -247,7 +247,7 @@ officeDocuments.renderDocuments = function () {
 		var docElem = $('.documentslist .document[data-id="'+session.file_id+'"]');
 		if (docElem.length > 0) {
 			docElem.attr('data-esid', session.es_id);
-			docElem.find('a').before('<img class="svg session-active" src="'+OC.imagePath('core','places/contacts-dark')+'">');
+			docElem.find('label').after('<img class="svg session-active" src="'+OC.imagePath('core','places/contacts-dark')+'">');
 			docElem.addClass('session');
 		} else {
 			console.log('Could not find file '+session.file_id+' for session '+session.es_id);

templates/documents.php

@@ -9,12 +9,15 @@
 	<div id="editor-content">
 	<ul class="documentslist">
 		<li class="add-document">
-			<img class="svg" src="<?php p(\OCP\Util::imagePath('core','actions/add.svg')) ?>" />
+			<a class="add svg" target="_blank" href="">
+				<label><?php p('Add') ?></label>
+			</a>
+			<a class="upload svg" target="_blank" href="">
+				<label><?php p('Upload') ?></label>
+			</a>
 		</li>
 		<li class="document template" data-id="" style="display:none;">
-			<div class="document-info">
+			<a target="_blank" href=""><label></label></a>
-				<a target="_blank" href=""></a>
-			</div>
 		</li>
 	</ul>
 	</div>