redesign incoming

src/css/style.less

@@ -558,22 +558,56 @@ input[type='radio'].nice-radio {
 }
 
 .app-card {
-    margin-bottom: 20px;
+    // margin-bottom: 20px;
-    width: 30%;
+    // width: 30%;
-    float: left;
+    // float: left;
-    min-height: 1px;
+    // min-height: 1px;
-    margin-right: 10px;
+    // margin-right: 10px;
-    margin-left: 10px;
+    // margin-left: 10px;
-    border-radius: 4px;
+    border-radius: .5rem;
+}
+
+.grid {
+    display: grid;
+    grid-auto-rows: minmax(125px, auto);
+    grid-gap: .5rem;
+}
+
+.app-card-desc {
+    height: 6rem;
+    overflow: hidden;
+}
+
+.app-card-date-maintainer {
+    text-align: right;
+    max-height: 18px;
+    margin-bottom: 3px;
+    margin-right: 7px;
+    margin-top: -5px;
 }
 
 .btn-group {
     width: 100%;
-    margin-left: 0px;
+    .btn:first-child{
+      border-bottom-left-radius: .5rem;
+    }
+    .btn:last-child{
+      border-bottom-right-radius: .5rem;
+      margin-left: 0;
+    }
 }
 
 .panel-body {
-    padding: 15px;
+    padding: 1.5rem;
+
+    h3 {
+      margin-top: 0;
+      margin-bottom: .5rem;
+    }
+
+    .category {
+      margin-bottom: .5rem;
+    }
 }
 
 
@@ -619,6 +653,11 @@ input[type='radio'].nice-radio {
         }
     }
 
+    .grid {
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 10px;
+    }
+
     #flashMessage {
         position: fixed;
         top: 0;

src/js/yunohost/controllers/apps.js

@@ -17,6 +17,18 @@
         });
     });
 
+    function levelToColor(level){
+      if (level > 6){
+        return 'success'
+      }
+      else if (level > 2){
+        return 'warning'
+      }
+      else {
+        return 'danger'
+      }
+    }
+
     // List available apps
     app.get('#/apps/install', function (c) {
         c.api('/apps', function(data) { // http://api.yunohost.org/#!/app/app_list_get_8
@@ -27,12 +39,12 @@
                     if ((!v['installed'] || dataraw[v['id']].manifest.multi_instance) && !v['id'].match(/__[0-9]{1,5}$/)) {
                         // Check app source
                         dataraw[v['id']]['official'] = (dataraw[v['id']]['repository'] == 'yunohost');
+                        dataraw[v['id']]['color'] = levelToColor(dataraw[v['id']]['level'])
 
                         jQuery.extend(dataraw[v['id']], v);
                         apps.push(dataraw[v['id']]);
                     }
                 });
-
                 // Sort app list
                 c.arraySortById(apps);
                 c.view('app/app_list_install', {apps: apps});

src/views/app/app_list_install.ms

@@ -15,32 +15,29 @@
 
 <div class="separator"></div>
 
-<div class="list-group">
+<div class="list-group grid">
 {{#apps}}
-  <div class="app-card_ampache app-card panel panel-default" id="app-card_ampache">
+  <div class="app-card panel panel-default">
         <div class="panel-body">
             <h3>{{name}}</h3>
-            <div class="category"> <span class="label label-success label-as-badge">{{level}}</span>
+            <div class="category"> <span class="label label-{{color}} label-as-badge">{{level}}</span>
             <span class="label label-success label-as-badge app-validated">validated</span>
             <span class="label label-default">AGPL-3.0</span></div>
             <div class="app-card-desc">{{description}}</div>
         </div>
             <div class="app-card-date-maintainer">
-                <span class="glyphicon glyphicon-refresh"></span> 10 April 2018 -
+                <i class="fas fa-sync"></i> 10 April 2018 -
-                <span title="Current maintainer of this package" class="maintained"><span class="glyphicon glyphicon-user"></span> aymhce</span>
+                <span title="Current maintainer of this package" class="maintained"></span><i class="fa-user"></i> aymhce</span>
             </div>
             <div class="btn-group" role="group">
-                <a href="https://github.com/YunoHost-Apps/ampache_ynh" target="_BLANK" type="button" class="btn btn-default col-sm-4">
+                <a href="github.com" target="_BLANK" type="button" class="btn btn-default col-sm-4">
-                    <span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
+                    <i class="fa-globe"></i> Code
-                    Code
                 </a>
                 <a href="#/app_ampache_en" target="_BLANK" type="button" class="btn btn-default col-sm-4">
-                    <span class="glyphicon glyphicon-book" aria-hidden="true"></span>
+                    <i class="fa-book"></i> Doc
-                    Doc
                 </a>
-                <a href="#/apps/install/{{id}}" target="_BLANK" type="button" class="btn btn-success col-sm-4 active">
+                <a href="#/apps/install/{{id}}" type="button" class="btn btn-{{color}} col-sm-4 active">
-                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
+                    <i class="fa-plus"></i> Install
-                    Install
                 </a>
             </div>
     </div>