From 5b886d4e60f1f6fa2116a33b7a13d7fa3dbe480d Mon Sep 17 00:00:00 2001
From: Denys Vuika <denis.vuyka@gmail.com>
Date: Tue, 13 Dec 2016 10:47:00 +0000
Subject: [PATCH] UI polish for Home page

- improve feature list UI (remove bullet styles, improve icon and text
positioning)
- improve card headers (icons and text positioning)
---
 .../app/components/home/home.component.css    | 23 +++++
 .../app/components/home/home.component.html   | 97 +++++++++++++------
 2 files changed, 90 insertions(+), 30 deletions(-)

diff --git a/demo-shell-ng2/app/components/home/home.component.css b/demo-shell-ng2/app/components/home/home.component.css
index f708d9b9a1..1ed9877dc1 100644
--- a/demo-shell-ng2/app/components/home/home.component.css
+++ b/demo-shell-ng2/app/components/home/home.component.css
@@ -23,3 +23,26 @@
     cursor: pointer;
     height: 70px;
 }
+
+.home--card__icon {
+    padding-top: 2px;
+    margin-right: 4px;
+}
+
+.home--feature-list {
+    list-style: none;
+    padding-left: 0;
+}
+
+.home--feature-list__icon {
+    float: left;
+}
+
+.home--feature-list__text {
+    padding-top: 2px;
+}
+
+span.home--feature-list__text:before {
+    content: '';
+    padding-left: 4px;
+}
diff --git a/demo-shell-ng2/app/components/home/home.component.html b/demo-shell-ng2/app/components/home/home.component.html
index 172595fd44..c889158838 100644
--- a/demo-shell-ng2/app/components/home/home.component.html
+++ b/demo-shell-ng2/app/components/home/home.component.html
@@ -1,25 +1,32 @@
 <!-- DOCUMENT LIST-->
 <div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
         <div class="mdl-card__title mdl-card--expand" routerLink="/files">
-            <h2 class="mdl-card__title-text"><i class="material-icons">dvr</i> DocumentList - ECM</h2>
+            <h2 class="mdl-card__title-text">
+                <i class="material-icons home--card__icon">dvr</i>
+                <span>DocumentList - ECM</span>
+            </h2>
         </div>
     <div class="mdl-card__supporting-text">
         Demonstrates multiple Alfresco ECM components used together to show the files of you ECM instance :
-        <ul>
+        <ul class="home--feature-list">
             <li>
-                <i class="material-icons">brightness_1</i> Comunication with the Rest Api and core services
+                <i class="material-icons home--feature-list__icon">brightness_1</i>
+                <span class="home--feature-list__text">Comunication with the Rest Api and core services</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
             </li>
             <li>
-                <i class="material-icons">dvr</i> Document List
+                <i class="material-icons home--feature-list__icon">dvr</i>
+                <span class="home--feature-list__text">Document List</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-documentlist" target="_blank">ng2-alfresco-documentlist</a>
             </li>
             <li>
-                <i class="material-icons">file_upload</i> Upload
+                <i class="material-icons home--feature-list__icon">file_upload</i>
+                <span class="home--feature-list__text">Upload</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-upload" target="_blank">ng2-alfresco-upload</a>
             </li>
             <li>
-                <i class="material-icons">view_module</i> DataTable
+                <i class="material-icons home--feature-list__icon">view_module</i>
+                <span class="home--feature-list__text">DataTable</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
             </li>
         </ul>
@@ -30,38 +37,48 @@
 <!-- ACTIVITI-->
 <div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
         <div class="mdl-card__title mdl-card--expand" routerLink="/activiti">
-            <h2 class="mdl-card__title-text"><i class="material-icons">apps</i> Activiti - BPM</h2>
+            <h2 class="mdl-card__title-text">
+                <i class="material-icons home--card__icon">apps</i>
+                <span>Activiti - BPM</span>
+            </h2>
         </div>
     <div class="mdl-card__supporting-text">
         Demonstrates multiple Alfresco BPM components used together to show your BPM prorcess and tasks:
-        <ul>
+        <ul class="home--feature-list">
             <li>
-                <i class="material-icons">brightness_1</i> Comunication with the Rest Api and core services
+                <i class="material-icons home--feature-list__icon">brightness_1</i>
+                <span class="home--feature-list__text">Comunication with the Rest Api and core services</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
             </li>
             <li>
-                <i class="material-icons">view_module</i> App List
+                <i class="material-icons home--feature-list__icon">view_module</i>
+                <span class="home--feature-list__text">App List</span>
                 <a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-apps</a>
             </li>
             <li>
-                <i class="material-icons">view_headline</i> Task List
+                <i class="material-icons home--feature-list__icon">view_headline</i>
+                <span class="home--feature-list__text">Task List</span>
                 <a href="https://www.npmjs.com/package/ng2-activiti-tasklist" target="_blank">ng2-activiti-tasklist</a>
             </li>
             <li>
-                <i class="material-icons">view_headline</i> Process List
+                <i class="material-icons home--feature-list__icon">view_headline</i>
+                <span class="home--feature-list__text">Process List</span>
                 <a href="https://www.npmjs.com/package/ng2-activiti-processlist" target="_blank">ng2-activiti-processlist</a>
             </li>
             <li>
-                <i class="material-icons">view_quilt</i> Form
+                <i class="material-icons home--feature-list__icon">view_quilt</i>
+                <span class="home--feature-list__text">Form</span>
                 <a href="https://www.npmjs.com/package/ng2-activiti-form" target="_blank">ng2-activiti-form</a>
             </li>
             <li>
-                <i class="material-icons">pie_chart</i> Analytics
+                <i class="material-icons home--feature-list__icon">pie_chart</i>
+                <span class="home--feature-list__text">Analytics</span>
                 <a href="https://www.npmjs.com/package/ng2-activiti-analytics" target="_blank">ng2-activiti-analytics</a>,
                 <a href="https://www.npmjs.com/package/ng2-activiti-diagrams" target="_blank">ng2-activiti-diagrams</a>
             </li>
             <li>
-                <i class="material-icons">view_module</i> DataTable
+                <i class="material-icons home--feature-list__icon">view_module</i>
+                <span class="home--feature-list__text">DataTable</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-datatable" target="_blank">ng2-alfresco-datatable</a>
             </li>
         </ul>
@@ -72,13 +89,17 @@
 <!-- DATATABLE-->
 <div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
         <div class="mdl-card__title mdl-card--expand" routerLink="/datatable">
-            <h2 class="mdl-card__title-text"><i class="material-icons">view_module</i> DataTable-ECM&BPM</h2>
+            <h2 class="mdl-card__title-text">
+                <i class="material-icons home--card__icon">view_module</i>
+                <span>DataTable-ECM&BPM</span>
+            </h2>
         </div>
     <div class="mdl-card__supporting-text">
         Basic table component:
-        <ul>
+        <ul class="home--feature-list">
             <li>
-                <i class="material-icons">brightness_1</i> Comunication with the Rest Api and core services
+                <i class="material-icons home--feature-list__icon">brightness_1</i>
+                <span class="home--feature-list__text">Comunication with the Rest Api and core services</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
             </li>
         </ul>
@@ -88,13 +109,17 @@
 <!-- UPLOADER-->
 <div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
         <div class="mdl-card__title mdl-card--expand" routerLink="/uploader">
-            <h2 class="mdl-card__title-text"><i class="material-icons">file_upload</i> Uploader - ECM</h2>
+            <h2 class="mdl-card__title-text">
+                <i class="material-icons home--card__icon">file_upload</i>
+                <span>Uploader - ECM</span>
+            </h2>
         </div>
     <div class="mdl-card__supporting-text">
         Basic table uploader component for the ECM and BPM:
-        <ul>
+        <ul class="home--feature-list">
             <li>
-                <i class="material-icons">brightness_1</i> Comunication with the Rest Api and core services
+                <i class="material-icons home--feature-list__icon">brightness_1</i>
+                <span class="home--feature-list__text">Comunication with the Rest Api and core services</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
             </li>
         </ul>
@@ -104,13 +129,17 @@
 <!-- LOGIN-->
 <div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
         <div class="mdl-card__title mdl-card--expand" routerLink="/login">
-            <h2 class="mdl-card__title-text"><i class="material-icons">account_circle</i> Login - ECM & BPM</h2>
+            <h2 class="mdl-card__title-text">
+                <i class="material-icons home--card__icon">account_circle</i>
+                <span>Login - ECM & BPM</span>
+            </h2>
         </div>
     <div class="mdl-card__supporting-text">
         Login component for the ECM and BPM:
-        <ul>
+        <ul class="home--feature-list">
             <li>
-                <i class="material-icons">brightness_1</i> Comunication with the Rest Api and core services
+                <i class="material-icons home--feature-list__icon">brightness_1</i>
+                <span class="home--feature-list__text">Comunication with the Rest Api and core services</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
             </li>
         </ul>
@@ -120,13 +149,17 @@
 <!-- WEBSCRIPT-->
 <div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
     <div class="mdl-card__title mdl-card--expand" routerLink="/webscript">
-        <h2 class="mdl-card__title-text"><i class="material-icons">extension</i> Webscript - ECM</h2>
+        <h2 class="mdl-card__title-text">
+            <i class="material-icons home--card__icon">extension</i>
+            <span>Webscript - ECM</span>
+        </h2>
     </div>
     <div class="mdl-card__supporting-text">
         Shows and create webscripts in your ECM instance:
-        <ul>
+        <ul class="home--feature-list">
             <li>
-                <i class="material-icons">brightness_1</i> Comunication with the Rest Api and core services
+                <i class="material-icons home--feature-list__icon">brightness_1</i>
+                <span class="home--feature-list__text">Comunication with the Rest Api and core services</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
             </li>
         </ul>
@@ -136,13 +169,17 @@
 <!-- TAG-->
 <div class="demo-card-square mdl-card mdl-shadow--2dp home-cards">
         <div class="mdl-card__title mdl-card--expand" routerLink="/tag">
-            <h2 class="mdl-card__title-text"><i class="material-icons">local_offer</i> Tag - ECM</h2>
+            <h2 class="mdl-card__title-text">
+                <i class="material-icons home--card__icon">local_offer</i>
+                <span>Tag - ECM</span>
+            </h2>
         </div>
     <div class="mdl-card__supporting-text">
         Shows and add tags to the node of your ECM instance:
-        <ul>
+        <ul class="home--feature-list">
             <li>
-                <i class="material-icons">brightness_1</i> Comunication with Rest
+                <i class="material-icons home--feature-list__icon">brightness_1</i>
+                <span class="home--feature-list__text">Comunication with Rest</span>
                 <a href="https://www.npmjs.com/package/ng2-alfresco-core" target="_blank">ng2-alfresco-core</a>
             </li>
         </ul>