Fix first row items misposition

css/style.css

@@ -11,15 +11,19 @@
 
 .documentslist { padding:5px; }
 
+.documentslist .document, 
+.documentslist .progress,
 .documentslist .add-document{
 	display: inline-block;
 	height: 200px;
 	width: 200px;
+	float: left;
 	background-color: #e8e8e8;
-	margin: 1em;
+	margin: 14px;
 	vertical-align: top;
 	border-radius: 5px;
 }
+
 .add-document a {
 	display: inline-block;
 	position: relative;
@@ -58,19 +62,9 @@
 	text-align: center;
 }
 
-.documentslist .document, .documentslist .progress {
-	display: inline-block;
-	height: 200px;
-	width: 200px;
-	background-color: #e8e8e8;
-	margin: 1em;
-	vertical-align: top;
-	border-radius: 5px;
-}
-
-
 .documentslist .progress{
 	position:absolute;
+	left:232px;
 	z-index:5;
 	background: #e8e8e8 url('%webroot%/core/img/loading.gif') 50% 50% no-repeat;
 }

js/documents.js

@@ -209,6 +209,11 @@ var documentsMain = {
 			
 	onCreate: function(event){
 		event.preventDefault();
+		var docElem = $('.documentslist .template').clone();
+		docElem.removeClass('template');
+		docElem.addClass('document');
+		docElem.insertAfter('.documentslist .template');
+		docElem.show();
 		$.post(
 			OC.Router.generate('documents_documents_create'),
 			{},

templates/documents.php

@@ -28,8 +28,7 @@
 				</form>
 			</div>
 		</li>
-		<li class="progress">
-		</li>
+		<li class="progress">&nbsp;</li>
 		<li class="document template" data-id="" style="display:none;">
 			<a target="_blank" href=""><label></label></a>
 		</li>