From fd48908835fd69d4d8cdbe7b61162414cca9fab3 Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Mon, 27 Feb 2017 14:58:05 +0100
Subject: [PATCH] fix css table history
---
modules/visa/Views/signatureBook.html | 11 +-
modules/visa/css/module.css | 159 ++++++++++++++++++++++++--
modules/visa/js/aController.js | 5 +-
3 files changed, 163 insertions(+), 12 deletions(-)
diff --git a/modules/visa/Views/signatureBook.html b/modules/visa/Views/signatureBook.html
index a975bb9ef22..5811f8759b2 100644
--- a/modules/visa/Views/signatureBook.html
+++ b/modules/visa/Views/signatureBook.html
@@ -48,15 +48,15 @@
<iframe id="leftPanelShow_iframe" ng-src="{{signatureBook.linkVisaCircuit}}"></iframe>
</div>
<div class="contentShow" ng-if="signatureBook.headerTab == 4">
- <table ng-table="historyTable" class="table">
+ <table ng-table="historyTable" class="table" id="historyTable">
<tr ng-repeat="history in $data">
- <td title="'Date'" sortable="'event_date'">
+ <td title="'Date'" sortable="'event_date'" style="width:20%;">
{{history.event_date | datetimeFormat}}
</td>
- <td title="'Utilisateur'" sortable="'lastname'">
+ <td title="'Utilisateur'" sortable="'lastname'" filter="{ lastname: 'text'}" style="width:20%;">
{{history.firstname + " " + history.lastname}}
</td>
- <td title="'Evènement'" sortable="'info'">
+ <td title="'Evènement'" sortable="'info'" style="width:60%;">
{{history.info}}
</td>
</tr>
@@ -116,15 +116,18 @@
<span>Edition de PJ</span>
</div>
<div class="panelRight">
+
<div class="item panelRightAddPj" ng-click="changeRightViewer(-1)" ng-class="{'panelSelectedThumbnail': signatureBook.rightSelectedThumbnail == -1}">
<i class="fa fa-plus fa-2x"></i>
</div>
+ <div class="panelRightConten">
<div class="item" ng-repeat="(index, attachment) in signatureBook.attachments" ng-click="changeRightViewer(index)" ng-class="{'panelSelectedThumbnail': index == signatureBook.rightSelectedThumbnail}">
<span class="fa-stack fa-lg">
<i class="fa fa-file-o fa-stack-2x"></i>
<i class="fa {{attachment.icon}} fa-stack-1x"></i>
</span>
</div>
+ </div>
</div>
</div>
diff --git a/modules/visa/css/module.css b/modules/visa/css/module.css
index 50b68db7dd0..969f0a77e08 100644
--- a/modules/visa/css/module.css
+++ b/modules/visa/css/module.css
@@ -258,6 +258,11 @@
vertical-align: top;
}
+.panelRightConten{
+ height: 75vh;
+ overflow: auto;
+}
+
.panelRight .item{
padding:10px;
cursor: pointer;
@@ -270,6 +275,7 @@
}
.contentLeft .contentShow{
height: 95vh;
+ overflow: auto;
}
.contentRight .contentShow,.contentLeft .contentShow{
@@ -371,6 +377,10 @@ img.panelSelectedThumbnail,img:hover.panelSelectedThumbnail{
color:white;
}
+.panelRightAddPj{
+ height: 45px;
+}
+
.panelRightAddPj:hover{
color: #009DC5;
}
@@ -394,18 +404,153 @@ img.panelSelectedThumbnail,img:hover.panelSelectedThumbnail{
+/* NG TABLE */
+.ng-table th{
+ text-align:left;
+ padding: 5px;
+ -webkit-touch-callout:none;
+ -webkit-user-select:none;
+ -moz-user-select:none;
+ -ms-user-select:none;
+ user-select:none;
+}
+
+.ng-table th.sortable{
+ cursor:pointer;
+}
+
+.ng-table th.sortable .sort-indicator{
+ padding-right:18px;
+ position:relative;
+}
+.ng-table th.sortable .sort-indicator:after,.ng-table th.sortable .sort-indicator:before{
+ content:"";
+ border-width:0 4px 4px;
+ border-style:solid;
+ border-color:#000 transparent;
+ visibility:visible;
+ right:5px;
+ top:50%;
+ position:absolute;
+ opacity:.3;
+ margin-top:-4px;
+}
+
+.ng-table th.sortable .sort-indicator:before{
+ margin-top:2px;
+ border-bottom:none;
+ border-left:4px solid transparent;
+ border-right:4px solid transparent;
+ border-top:4px solid #000;
+}
+
+.ng-table th.sortable .sort-indicator:hover:after,.ng-table th.sortable .sort-indicator:hover:before{
+ opacity:1;
+ visibility:visible;
+}
+
+.ng-table th.sortable.sort-asc,.ng-table th.sortable.sort-desc{
+ background-color:rgba(141,192,219,.25);
+ text-shadow:0 1px 1px hsla(0,0%,100%,.75);
+}
+
+.ng-table th.sortable.sort-asc .sort-indicator:after,.ng-table th.sortable.sort-desc .sort-indicator:after{
+ margin-top:-2px;
+}
+
+.ng-table th.sortable.sort-asc .sort-indicator:before,.ng-table th.sortable.sort-desc .sort-indicator:before{
+ visibility:hidden;
+}
+
+.ng-table th.sortable.sort-asc .sort-indicator:after,.ng-table th.sortable.sort-asc .sort-indicator:hover:after,.ng-table th.sortable.sort-desc .sort-indicator:after{
+ visibility:visible;
+ filter:alpha(opacity=60);
+ -khtml-opacity:.6;
+ -moz-opacity:.6;
+ opacity:.6;
+}
+
+.ng-table th.sortable.sort-desc .sort-indicator:after{
+ border-bottom:none;
+ border-left:4px solid transparent;
+ border-right:4px solid transparent;
+ border-top:4px solid #000;
+ box-shadow:none;
+}
+.ng-table th.filter .input{
+ margin:0;display:block;
+ width:auto;
+ /*min-height:30px;*/
+ font-size: 9px;
+ box-sizing:border-box;
+}
-.ng-table th{text-align:center;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ng-table th.sortable{cursor:pointer}.ng-table th.sortable .sort-indicator{padding-right:18px;position:relative}.ng-table th.sortable .sort-indicator:after,.ng-table th.sortable .sort-indicator:before{content:"";border-width:0 4px 4px;border-style:solid;border-color:#000 transparent;visibility:visible;right:5px;top:50%;position:absolute;opacity:.3;margin-top:-4px}.ng-table th.sortable .sort-indicator:before{margin-top:2px;border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000}.ng-table th.sortable .sort-indicator:hover:after,.ng-table th.sortable .sort-indicator:hover:before{opacity:1;visibility:visible}.ng-table th.sortable.sort-asc,.ng-table th.sortable.sort-desc{background-color:rgba(141,192,219,.25);text-shadow:0 1px 1px hsla(0,0%,100%,.75)}.ng-table th.sortable.sort-asc .sort-indicator:after,.ng-table th.sortable.sort-desc .sort-indicator:after{margin-top:-2px}.ng-table th.sortable.sort-asc .sort-indicator:before,.ng-table th.sortable.sort-desc .sort-indicator:before{visibility:hidden}.ng-table th.sortable.sort-asc .sort-indicator:after,.ng-table th.sortable.sort-asc .sort-indicator:hover:after,.ng-table th.sortable.sort-desc .sort-indicator:after{visibility:visible;filter:alpha(opacity=60);-khtml-opacity:.6;-moz-opacity:.6;opacity:.6}.ng-table th.sortable.sort-desc .sort-indicator:after{border-bottom:none;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid #000;box-shadow:none}.ng-table th.filter .input-filter{margin:0;display:block;width:100%;min-height:30px;box-sizing:border-box}.ng-table .ng-table-group-header th{text-align:left}.ng-table .ng-table-group-selector{display:block}.ng-table .ng-table-group-close,.ng-table .ng-table-group-toggle{float:right}.ng-table .ng-table-group-toggle{margin-right:5px}@media only screen and (max-width:800px){.ng-table-responsive{border-bottom:1px solid #999}.ng-table-responsive tr{border-top:1px solid #999;border-left:1px solid #999;border-right:1px solid #999}.ng-table-responsive td:before{position:absolute;padding:8px;left:0;top:0;width:50%;white-space:nowrap;text-align:left;font-weight:700}.ng-table-responsive thead tr th{text-align:left}.ng-table-responsive thead tr.ng-table-filters th{padding:0}.ng-table-responsive thead tr.ng-table-filters th form>div{padding:8px}.ng-table-responsive td{border:none;border-bottom:1px solid #eee;position:relative;padding-left:50%;white-space:normal;text-align:left}.ng-table-responsive td:before{content:attr(data-title-text)}.ng-table-responsive,.ng-table-responsive tbody,.ng-table-responsive td,.ng-table-responsive th,.ng-table-responsive thead,.ng-table-responsive tr{display:block}}.ng-table-pagination{margin-top:0}.filter:after,.filter:before,.ng-table-group-selector:after,.ng-table-group-selector:before{display:table;content:" "}.filter:after,.ng-table-group-selector:after{clear:both}.filter>.filter-cell{float:left;box-sizing:border-box}.filter-horizontal>.filter-cell{padding:0 2px}.filter-horizontal>.filter-cell:first-child{padding-left:0}.filter-horizontal>.filter-cell.last,.filter-horizontal>.filter-cell:last-child{padding-right:0}.s12{width:100%}.s11{width:91.66666666666666%}.s10{width:83.33333333333334%}.s9{width:75%}.s8{width:66.66666666666666%}.s7{width:58.333333333333336%}.s6{width:50%}.s5{width:41.66666666666667%}.s4{width:33.33333333333333%}.s3{width:25%}.s2{width:16.666666666666664%}.s1{width:8.333333333333332%}@media all and (max-width:468px){.s1,.s2,.s3,.s4,.s5,.s6,.s7,.s8,.s9,.s10,.s11,.s12{width:100%}.filter>.filter-cell{padding:0}}
+.ng-table .ng-table-group-header th{
+ text-align:left;
+}
+.ng-table .ng-table-group-selector{display:block}.ng-table .ng-table-group-close,.ng-table .ng-table-group-toggle{float:right}.ng-table .ng-table-group-toggle{margin-right:5px}@media only screen and (max-width:800px){.ng-table-responsive{border-bottom:1px solid #999}.ng-table-responsive tr{border-top:1px solid #999;border-left:1px solid #999;border-right:1px solid #999}.ng-table-responsive td:before{position:absolute;padding:8px;left:0;top:0;width:50%;white-space:nowrap;text-align:left;font-weight:700}.ng-table-responsive thead tr th{text-align:left}.ng-table-responsive thead tr.ng-table-filters th{padding:0}.ng-table-responsive thead tr.ng-table-filters th form>div{padding:8px}.ng-table-responsive td{border:none;border-bottom:1px solid #eee;position:relative;padding-left:50%;white-space:normal;text-align:left}.ng-table-responsive td:before{content:attr(data-title-text)}.ng-table-responsive,.ng-table-responsive tbody,.ng-table-responsive td,.ng-table-responsive th,.ng-table-responsive thead,.ng-table-responsive tr{display:block}}.ng-table-pagination{margin-top:0}.filter:after,.filter:before,.ng-table-group-selector:after,.ng-table-group-selector:before{display:table;content:" "}.filter:after,.ng-table-group-selector:after{clear:both}.filter>.filter-cell{float:left;box-sizing:border-box}.filter-horizontal>.filter-cell{padding:0 2px}.filter-horizontal>.filter-cell:first-child{padding-left:0}.filter-horizontal>.filter-cell.last,.filter-horizontal>.filter-cell:last-child{padding-right:0}.s12{width:100%}.s11{width:91.66666666666666%}.s10{width:83.33333333333334%}.s9{width:75%}.s8{width:66.66666666666666%}.s7{width:58.333333333333336%}.s6{width:50%}.s5{width:41.66666666666667%}.s4{width:33.33333333333333%}.s3{width:25%}.s2{width:16.666666666666664%}.s1{width:8.333333333333332%}@media all and (max-width:468px){.s1,.s2,.s3,.s4,.s5,.s6,.s7,.s8,.s9,.s10,.s11,.s12{width:100%}.filter>.filter-cell{padding:0}}
-.table {
+.ng-table {
margin-bottom: 20px;
max-width: 100%;
width: 100%;
-}
-table {
background-color: transparent;
-}
-table {
border-collapse: collapse;
border-spacing: 0;
-}
\ No newline at end of file
+ border-bottom: solid 1px #009DC5;
+}
+
+.ng-table td{
+ text-align: left;
+ padding: 10px;
+}
+
+.ng-table th{
+ border-bottom: solid 1px #009DC5;
+}
+
+.ng-table-counts{
+ display:none;
+}
+
+.ng-table-pagination li{
+ display: inline-block;
+ border: solid 1px #009DC5;
+ padding: 5px;
+ margin:5px;
+ border-radius: 10px;
+}
+
+.ng-table-pagination li.active{
+ background : #009DC5;
+ color: white;
+}
+
+.ng-table-pagination li.active a{
+ color: white;
+}
+
+.ng-table-pagination li:hover{
+ background : #009DC5;
+ color: white;
+}
+
+.ng-table-pagination li:hover a{
+ color: white;
+}
+
+#historyTable.ng-table tr:nth-child(even) {
+ background-color: rgba(141,192,219,.25);
+}
+
+#historyTable.ng-table th:nth-child(1) {
+ width:20%;
+}
+
+#historyTable.ng-table th:nth-child(2) {
+ width:20%;
+}
+
+#historyTable.ng-table th:nth-child(3) {
+ width:60%;
+}
diff --git a/modules/visa/js/aController.js b/modules/visa/js/aController.js
index 7e9bb79eb57..9894391e342 100644
--- a/modules/visa/js/aController.js
+++ b/modules/visa/js/aController.js
@@ -31,7 +31,10 @@ mainApp.controller("visaCtrl", ["$scope", "$http", "$routeParams", "$interval",
$scope.historyTable = new NgTableParams({
page: 1,
- count: 10
+ count: 20,
+ sorting: {
+ event_date: 'desc'
+ }
}, {
total: $scope.signatureBook.histories.length,
dataset: $scope.signatureBook.histories
--
GitLab