refs #7090 #4789 Improve the look of data tables, entity tables, forms, ...

3 files changed, 34 insertions, 18 deletions

diff --git a/plugins/MultiSites/angularjs/dashboard/dashboard.directive.html b/plugins/MultiSites/angularjs/dashboard/dashboard.directive.html
index c870f8fe22..4d8655eb52 100644
--- a/plugins/MultiSites/angularjs/dashboard/dashboard.directive.html
+++ b/plugins/MultiSites/angularjs/dashboard/dashboard.directive.html
@@ -17,17 +17,17 @@
                 <span ng-class="{multisites_asc: !model.reverse && 'label' == model.sortColumn, multisites_desc: model.reverse && 'label' == model.sortColumn}" class="arrow"></span>
             </th>
             <th id="visits" class="multisites-column" ng-click="model.sortBy('nb_visits')" ng-class="{columnSorted: 'nb_visits' == model.sortColumn}">
-                <span class="heading">{{ 'General_ColumnNbVisits'|translate }}</span>
                 <span ng-class="{multisites_asc: !model.reverse && 'nb_visits' == model.sortColumn, multisites_desc: model.reverse && 'nb_visits' == model.sortColumn}" class="arrow"></span>
+                <span class="heading">{{ 'General_ColumnNbVisits'|translate }}</span>
             </th>
             <th id="pageviews" class="multisites-column" ng-click="model.sortBy('nb_pageviews')" ng-class="{columnSorted: 'nb_pageviews' == model.sortColumn}">
-                <span class="heading">{{ 'General_ColumnPageviews'|translate }}</span>
                 <span ng-class="{multisites_asc: !model.reverse && 'nb_pageviews' == model.sortColumn, multisites_desc: model.reverse && 'nb_pageviews' == model.sortColumn}" class="arrow"></span>
+                <span class="heading">{{ 'General_ColumnPageviews'|translate }}</span>
             </th>
 
             <th ng-if="displayRevenueColumn" id="revenue" class="multisites-column" ng-click="model.sortBy('revenue')" ng-class="{columnSorted: 'revenue' == model.sortColumn}">
-                <span class="heading">{{ 'General_ColumnRevenue'|translate }}</span>
                 <span ng-class="{multisites_asc: !model.reverse && 'revenue' == model.sortColumn, multisites_desc: model.reverse && 'revenue' == model.sortColumn}" class="arrow"></span>
+                <span class="heading">{{ 'General_ColumnRevenue'|translate }}</span>
             </th>
 
             <th id="evolution" colspan="{{ showSparklines ? 2 : 1 }}" ng-class="{columnSorted: evolutionSelector == model.sortColumn}">
@@ -69,7 +69,6 @@
                 date-sparkline="dateSparkline"
                 show-sparklines="showSparklines"
                 metric="model.sortColumn"
-                ng-class-odd="'columnodd'"
                 display-revenue-column="displayRevenueColumn"
                 ng-repeat="website in model.sites">
             </tr>
diff --git a/plugins/MultiSites/angularjs/dashboard/dashboard.directive.less b/plugins/MultiSites/angularjs/dashboard/dashboard.directive.less
index b6442b66a7..d2656bd1eb 100644
--- a/plugins/MultiSites/angularjs/dashboard/dashboard.directive.less
+++ b/plugins/MultiSites/angularjs/dashboard/dashboard.directive.less
@@ -8,6 +8,10 @@
   padding: 0 15px;
   font-size: 14px;
 
+  h2 {
+    border-bottom: 0px;
+  }
+
   .notification-error {
     margin-top: 15px;
   }
@@ -30,13 +34,26 @@
     border: 0 !important;
   }
 
+  .multisites-evolution,
+  .multisites-column {
+    text-align: right;
+  }
+
+  .multisites-evolution {
+    width:170px;
+  }
+
   td, tr, .sparkline {
     text-align: center;
     vertical-align: middle;
-    padding: 1px;
+    padding: 2px 6px 2px 12px;
     margin: 0;
   }
 
+  th {
+    padding: 12px 6px 12px 12px;
+  }
+
   .indicator {
     background: url(plugins/Morpheus/images/loading-blue.gif) no-repeat center;
     height: 20px;
@@ -48,6 +65,7 @@
   .paging {
     padding: 5px;
     font-size: 10px;
+    border-bottom: 0px !important;
 
     .previous {
       padding-right: 20px;
@@ -68,9 +86,13 @@
   th {
     cursor: pointer;
     border-left: 0px;
-    text-align: center;
+    text-align: right;
     border-bottom: 0px;
 
+    &#evolution {
+      text-align: center;
+    }
+
     &.columnSorted {
       font-weight: normal !important;
     }
@@ -96,14 +118,6 @@
     margin-right: 0px;
   }
 
-  tr.columnodd:hover td, tr.columnodd td {
-    background: #F2F2F2 !important;
-  }
-
-  tr:hover td {
-    background: @theme-color-background-base !important;
-  }
-
   tr.group {
     font-weight: bold;
     height: 30px;
@@ -112,7 +126,6 @@
     padding-left: 50px;
   }
   td.multisites-label {
-    padding-left: 15px;
     text-align: left;
     width: 250px;
   }
@@ -171,6 +184,10 @@
     margin: -6px 0 0 5px;
   }
 
+  .label .arrow {
+    margin-left: 2px;
+  }
+
   .multisites_asc,
   .multisites_desc {
     float: none;
diff --git a/plugins/MultiSites/angularjs/site/site.directive.html b/plugins/MultiSites/angularjs/site/site.directive.html
index dbca619b87..b415df3d3c 100644
--- a/plugins/MultiSites/angularjs/site/site.directive.html
+++ b/plugins/MultiSites/angularjs/site/site.directive.html
@@ -20,11 +20,11 @@
         {{ website.revenue }}
     </td>
 
-    <td ng-if="period != 'range'" style="width:170px;">
+    <td ng-if="period != 'range'" class="multisites-evolution">
         <div class="visits" ng-if="!website.isGroup">
-            <span ng-show="website[evolutionMetric] > 0"><img src="plugins/MultiSites/images/arrow_up.png" alt="" /> <span style="color: green;">{{ website[evolutionMetric] }}%&nbsp;</span></span>
+            <span ng-show="website[evolutionMetric] > 0"><img src="plugins/MultiSites/images/arrow_up.png" alt="" /> <span style="color: green;">{{ website[evolutionMetric] }}%</span></span>
             <span ng-show="website[evolutionMetric] == 0"><img src="plugins/MultiSites/images/stop.png" alt="" /> <span>{{ website[evolutionMetric] }}%</span></span>
-            <span ng-show="website[evolutionMetric] < 0"><img src="plugins/MultiSites/images/arrow_down.png" alt="" /> <span style="color: red;">{{ website[evolutionMetric] }}%&nbsp;</span></span>
+            <span ng-show="website[evolutionMetric] < 0"><img src="plugins/MultiSites/images/arrow_down.png" alt="" /> <span style="color: red;">{{ website[evolutionMetric] }}%</span></span>
         </div>
     </td>