Use masonry-grid plugin to show images in app page. (#374)

* install ember masonry grid

* redesign app page

* fix settings position button

* app settings button on the right

* margin bottom for app

assets/app/components/icon-component/template.hbs

@@ -1,5 +1,5 @@
 {{#if materialIcon }}
-  <i class='rel icon-element material-icons {{if spin "spin"}} {{animate}}' {{action "userClickPopup"}}>{{ materialIcon }}</i>
+  <i class='rel icon-element material-icons {{if spin "spin"}} {{animate}} {{iconClass}}' {{action "userClickPopup"}}>{{ materialIcon }}</i>
 {{/if}}
 
 {{#if fontAwesome }}

assets/app/protected/apps/index/template.hbs

@@ -12,35 +12,30 @@
       </div>
     {{/if}}
   {{/if}}
-  <div class="container">
-    <div class="row">
-      {{#each data as |image|}}
-      <div class="col-sm-4">
-        <div class="card card-block">
-          <h4 class="card-title">{{image.name}}
-          {{#if session.user.isAdmin}}
-            {{#link-to 'protected.apps.image' image.id}}
-            <span class="fright">
-              {{icon-component class='color-gray-dark icon_link va-bl-mid' materialIcon="settings" size=14}}
-            </span>
-            {{/link-to}}
-          {{/if}}</h4>
-          <ul class="list-group list-group-flush">
-            {{#each image.apps as |app|}}
-            <li {{action 'launch' target='app'}} class="list-group-item">{{app.model.displayName}}
-              {{#if session.user.isAdmin}}
-                {{#link-to 'protected.apps.app' app.model}}
-                <span class="fright">
-                  {{icon-component class='color-gray-dark icon_link va-bl-mid' materialIcon="settings" size=14}}
-                </span>
-                {{/link-to}}
-              {{/if}}
-            </li>
-            {{/each}}
-          </ul>
-        </div>
+
+  {{#masonry-grid items=data customLayout=true itemSelector="" as |image|}}
+    {{#masonry-item class="card m-r-1 m-b-2 radius" item=item grid=grid}}
+      <div class="image-card card-block">
+        <h3 class="card-title truncate in-bl ">{{image.name}}</h3>
+        {{#if session.user.isAdmin}}
+          {{#link-to 'protected.apps.image' image.id}}
+            {{icon-component class='va-top mx-l-1' hover-lighter=true iconClass='va-bl-mid' materialIcon="settings" size=18}}
+          {{/link-to}}
+        {{/if}}
+        <hr>
+        {{#each image.apps as |app|}}
+          <div class='m-b-1'>
+            <div {{action 'launch' target='app'}} class='option-button clickable btn btn-primary'>
+              {{app.name}}
+            </div>
+            {{#if session.user.isAdmin}}
+              {{#link-to 'protected.apps.app' app.model}}
+                {{icon-component class='va-tt color-primary fright' hover-lighter=true iconClass='va-bl-mid' materialIcon="settings" size=16}}
+              {{/link-to}}
+            {{/if}}
+          </div>
+        {{/each}}
       </div>
-      {{/each}}
-    </div>
-  </div>
+    {{/masonry-item}}
+  {{/masonry-grid}}
 </div>

assets/app/styles/global.scss

@@ -272,7 +272,7 @@ h1 {
 }
 
 .in-bl {
-  display: inline-block;
+  display: inline-block !important;
 }
 
 .inl {
@@ -380,6 +380,12 @@ h1 {
   width: 100%;
 }
 
+.image-card {
+  .card-title { 
+    max-width: 300px;
+  }
+}
+
 .sortableTable td, 
 {
   max-width: 200px;

assets/bower.json

@@ -12,6 +12,8 @@
     "humanize-duration": "^3.9.0",
     "ckeditor": "^4.5.11",
     "sweetalert": "~1.1.0",
-    "spectrum": "^1.8.0"
+    "spectrum": "^1.8.0",
+    "masonry": "^4.1.1",
+    "imagesloaded": "^4.1.1"
   }
 }

assets/package.json

@@ -42,6 +42,7 @@
     "ember-data": "2.4.3",
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.5.1",
+    "ember-masonry-grid": "1.1.0",
     "ember-modal-dialog": "0.8.3",
     "ember-models-table": "1.8.1-beta.3",
     "ember-moment": "7.0.0-beta.3",