From 84d21ab6556d862a39a84014586d48f74d2d38b7 Mon Sep 17 00:00:00 2001 From: Justin Gray Date: Sun, 17 Jan 2016 01:31:46 -0600 Subject: [PATCH 1/6] Sample Table Style Changed the style of the add/manage users table. --- static/css/main.css | 31 +++++++++++++++++++++++++++++++ static/js/app/users.js | 6 +++++- templates/users.html | 2 +- 3 files changed, 37 insertions(+), 2 deletions(-) diff --git a/static/css/main.css b/static/css/main.css index dcdb603b..3a48879e 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -341,3 +341,34 @@ float:none !important; } } + +/* Table Styling */ +.modal-content .dataTable tbody td { + font-size: 16px;/* Smaller font on modal tables */ +} +.dataTables_info{ + font-size: 15px; +} + +/* Sort Icons */ +table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after { + font-family: 'FontAwesome' !important; + position: relative !important; + display: initial !important; + top: initial!important; + right: initial!important; + left: 6px; + color: #1abc9c; +} +table.dataTable thead .sorting:after{ + content: "\f0dc" !important; +} +table.dataTable thead .sorting_asc:after { + content: "\f0de" !important; + opacity: .8 !important; +} +table.dataTable thead .sorting_desc:after { + content: "\f0dd" !important; + opacity: .8 !important; +} + diff --git a/static/js/app/users.js b/static/js/app/users.js index feb0e9ac..0aa8c68c 100644 --- a/static/js/app/users.js +++ b/static/js/app/users.js @@ -52,7 +52,11 @@ function dismiss(){ } function edit(idx){ - targets = $("#targetsTable").dataTable() + targets = $("#targetsTable").dataTable({ + columnDefs: [ + { orderable: false, targets: -1 } + ] + }) $("#modalSubmit").unbind('click').click(function(){save(idx)}) if (idx == -1) { group = {} diff --git a/templates/users.html b/templates/users.html index 4ee56f64..4d25e4fd 100644 --- a/templates/users.html +++ b/templates/users.html @@ -94,7 +94,7 @@
- +
From 2ff2cbd1cae6c0a967de7498a080686b3fef1a4c Mon Sep 17 00:00:00 2001 From: Justin Gray Date: Sun, 17 Jan 2016 14:37:18 -0600 Subject: [PATCH 2/6] Changed Sortable Icon Color Changed the color of the sortable icon back to the initial color. Adds a little more contrast to the enabled icon. --- static/css/main.css | 1 + 1 file changed, 1 insertion(+) diff --git a/static/css/main.css b/static/css/main.css index 3a48879e..631014fe 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -362,6 +362,7 @@ table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, } table.dataTable thead .sorting:after{ content: "\f0dc" !important; + color: initial; } table.dataTable thead .sorting_asc:after { content: "\f0de" !important; From b9fd654f8a698b86e64e755694de84439628c894 Mon Sep 17 00:00:00 2001 From: Justin Gray Date: Sun, 17 Jan 2016 15:27:11 -0600 Subject: [PATCH 3/6] Added no-sort options to tables MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added a no-sort class to column headers where sorting doesn’t make sense. Still have the attachments table in the templates page to do, there was something strange happening. --- static/js/app/campaigns.js | 12 ++++++++++-- static/js/app/dashboard.js | 6 +++++- static/js/app/landing_pages.js | 6 +++++- static/js/app/templates.js | 6 +++++- static/js/app/users.js | 9 +++++++-- templates/campaigns.html | 4 ++-- templates/dashboard.html | 2 +- templates/landing_pages.html | 2 +- templates/templates.html | 2 +- templates/users.html | 4 ++-- 10 files changed, 39 insertions(+), 14 deletions(-) diff --git a/static/js/app/campaigns.js b/static/js/app/campaigns.js index 4c3a1045..6ef3159b 100644 --- a/static/js/app/campaigns.js +++ b/static/js/app/campaigns.js @@ -95,7 +95,11 @@ $(document).ready(function(){ $("#loading").hide() if (campaigns.length > 0){ $("#campaignTable").show() - campaignTable = $("#campaignTable").DataTable(); + campaignTable = $("#campaignTable").DataTable({ + columnDefs: [ + { orderable: false, targets: "no-sort" } + ] + }); $.each(campaigns, function(i, campaign){ label = labels[campaign.status] || "label-default"; campaignTable.row.add([ @@ -131,7 +135,11 @@ $(document).ready(function(){ return false; }) // Create the group typeahead objects - groupTable = $("#groupTable").DataTable() + groupTable = $("#groupTable").DataTable({ + columnDefs: [ + { orderable: false, targets: "no-sort" } + ] + }) group_bh = new Bloodhound({ datumTokenizer: function(g) { return Bloodhound.tokenizers.whitespace(g.name) }, queryTokenizer: Bloodhound.tokenizers.whitespace, diff --git a/static/js/app/dashboard.js b/static/js/app/dashboard.js index c8445b9f..81084adf 100644 --- a/static/js/app/dashboard.js +++ b/static/js/app/dashboard.js @@ -33,7 +33,11 @@ $(document).ready(function(){ showLabel: false } var average = 0 - campaignTable = $("#campaignTable").DataTable(); + campaignTable = $("#campaignTable").DataTable({ + columnDefs: [ + { orderable: false, targets: "no-sort" } + ] + }); $.each(campaigns, function(i, campaign){ var campaign_date = moment(campaign.created_date).format('MMMM Do YYYY h:mm:ss a') var label = labels[campaign.status] || "label-default"; diff --git a/static/js/app/landing_pages.js b/static/js/app/landing_pages.js index dd7b30cb..edbead61 100644 --- a/static/js/app/landing_pages.js +++ b/static/js/app/landing_pages.js @@ -92,7 +92,11 @@ function load(){ $("#loading").hide() if (pages.length > 0){ $("#pagesTable").show() - pagesTable = $("#pagesTable").DataTable(); + pagesTable = $("#pagesTable").DataTable({ + columnDefs: [ + { orderable: false, targets: "no-sort" } + ] + }); pagesTable.clear() $.each(pages, function(i, page){ pagesTable.row.add([ diff --git a/static/js/app/templates.js b/static/js/app/templates.js index 4da16ac1..85ece065 100644 --- a/static/js/app/templates.js +++ b/static/js/app/templates.js @@ -178,7 +178,11 @@ function load(){ $("#loading").hide() if (templates.length > 0){ $("#templateTable").show() - templateTable = $("#templateTable").DataTable(); + templateTable = $("#templateTable").DataTable({ + columnDefs: [ + { orderable: false, targets: "no-sort" } + ] + }); templateTable.clear() $.each(templates, function(i, template){ templateTable.row.add([ diff --git a/static/js/app/users.js b/static/js/app/users.js index 0aa8c68c..5a9a7d37 100644 --- a/static/js/app/users.js +++ b/static/js/app/users.js @@ -53,8 +53,9 @@ function dismiss(){ function edit(idx){ targets = $("#targetsTable").dataTable({ + destroy: true,// Destroy any other instantiated table - http://datatables.net/manual/tech-notes/3#destroy columnDefs: [ - { orderable: false, targets: -1 } + { orderable: false, targets: "no-sort" } ] }) $("#modalSubmit").unbind('click').click(function(){save(idx)}) @@ -123,7 +124,11 @@ function load(){ groups = gs $("#emptyMessage").hide() $("#groupTable").show() - groupTable = $("#groupTable").DataTable(); + groupTable = $("#groupTable").DataTable({ + columnDefs: [ + { orderable: false, targets: "no-sort" } + ] + }); groupTable.clear(); $.each(groups, function(i, group){ var targets = "" diff --git a/templates/campaigns.html b/templates/campaigns.html index 8c8354c6..e2c3c48b 100644 --- a/templates/campaigns.html +++ b/templates/campaigns.html @@ -47,7 +47,7 @@ - + @@ -113,7 +113,7 @@
First NameName Created Date Status
- +
Group Name
diff --git a/templates/dashboard.html b/templates/dashboard.html index 3d652870..52083259 100644 --- a/templates/dashboard.html +++ b/templates/dashboard.html @@ -67,7 +67,7 @@ Name Created Date Status - + diff --git a/templates/landing_pages.html b/templates/landing_pages.html index 837307ad..6efe51f8 100644 --- a/templates/landing_pages.html +++ b/templates/landing_pages.html @@ -44,7 +44,7 @@ Name Last Modified Date - + diff --git a/templates/templates.html b/templates/templates.html index 70fde2d6..ac84b37f 100644 --- a/templates/templates.html +++ b/templates/templates.html @@ -46,7 +46,7 @@ Name Modified Date - + diff --git a/templates/users.html b/templates/users.html index 4d25e4fd..00812643 100644 --- a/templates/users.html +++ b/templates/users.html @@ -47,7 +47,7 @@ Name Members Modified Date - + @@ -101,7 +101,7 @@ Last Name Email Position - + From 22c2f659e8dc7915bc847e76ea99e79985ad2cd0 Mon Sep 17 00:00:00 2001 From: Justin Gray Date: Wed, 20 Jan 2016 19:42:41 -0600 Subject: [PATCH 4/6] Fixed the attachments table Fixed the sorting on the attachments table, there could be opportunity to clean this up a little. --- static/js/app/templates.js | 28 ++++++++++++++++++++++------ templates/templates.html | 8 ++++---- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/static/js/app/templates.js b/static/js/app/templates.js index 85ece065..48dd0f1c 100644 --- a/static/js/app/templates.js +++ b/static/js/app/templates.js @@ -78,7 +78,14 @@ function deleteTemplate(idx){ } function attach(files){ - attachmentsTable = $("#attachmentsTable").DataTable(); + attachmentsTable = $("#attachmentsTable").DataTable({ + destroy: true, + "order": [[ 1, "asc" ]], + columnDefs: [ + { orderable: false, targets: "no-sort" }, + { sClass: "datatable_hidden", targets:[3,4]} + ] + }); $.each(files, function(i, file){ var reader = new FileReader(); /* Make this a datatable */ @@ -107,14 +114,23 @@ function edit(idx){ $("#attachmentsTable").show() attachmentsTable = null if ( $.fn.dataTable.isDataTable('#attachmentsTable') ) { - attachmentsTable = $('#attachmentsTable').DataTable(); + attachmentsTable = $('#attachmentsTable').DataTable({ + destroy: true, + "order": [[ 1, "asc" ]], + columnDefs: [ + { orderable: false, targets: "no-sort" }, + { sClass: "datatable_hidden", targets:[3,4]} + ] + }); } else { attachmentsTable = $("#attachmentsTable").DataTable({ - "aoColumnDefs" : [{ - "targets" : [3,4], - "sClass" : "datatable_hidden" - }] + destroy: true, + "order": [[ 1, "asc" ]], + columnDefs: [ + { orderable: false, targets: "no-sort" }, + { sClass: "datatable_hidden", targets:[3,4]} + ] }); } var template = {attachments:[]} diff --git a/templates/templates.html b/templates/templates.html index ac84b37f..5be682f1 100644 --- a/templates/templates.html +++ b/templates/templates.html @@ -102,11 +102,11 @@ - + - - - + + + From 0bdc4a751d1a43bfed334f96017340bae822625d Mon Sep 17 00:00:00 2001 From: Justin Gray Date: Wed, 20 Jan 2016 20:33:59 -0600 Subject: [PATCH 5/6] Remove unnecessary code Removed check and just always destroy and rebuild datatables. --- static/js/app/templates.js | 29 ++++++++--------------------- 1 file changed, 8 insertions(+), 21 deletions(-) diff --git a/static/js/app/templates.js b/static/js/app/templates.js index 48dd0f1c..fb04e267 100644 --- a/static/js/app/templates.js +++ b/static/js/app/templates.js @@ -112,27 +112,14 @@ function edit(idx){ $("#attachmentUpload").unbind('click').click(function(){this.value=null}) $("#html_editor").ckeditor() $("#attachmentsTable").show() - attachmentsTable = null - if ( $.fn.dataTable.isDataTable('#attachmentsTable') ) { - attachmentsTable = $('#attachmentsTable').DataTable({ - destroy: true, - "order": [[ 1, "asc" ]], - columnDefs: [ - { orderable: false, targets: "no-sort" }, - { sClass: "datatable_hidden", targets:[3,4]} - ] - }); - } - else { - attachmentsTable = $("#attachmentsTable").DataTable({ - destroy: true, - "order": [[ 1, "asc" ]], - columnDefs: [ - { orderable: false, targets: "no-sort" }, - { sClass: "datatable_hidden", targets:[3,4]} - ] - }); - } + attachmentsTable = $('#attachmentsTable').DataTable({ + destroy: true, + "order": [[ 1, "asc" ]], + columnDefs: [ + { orderable: false, targets: "no-sort" }, + { sClass: "datatable_hidden", targets:[3,4]} + ] + }); var template = {attachments:[]} if (idx != -1) { template = templates[idx] From 964ce6f1525aa486dde613403ad8c2780a53bd95 Mon Sep 17 00:00:00 2001 From: Justin Gray Date: Wed, 20 Jan 2016 20:35:51 -0600 Subject: [PATCH 6/6] Fixed Double Instantiation When a modal was closed and the data was loaded again it tried to instantiate the table again, so always destroy the table on load. --- static/js/app/landing_pages.js | 1 + static/js/app/templates.js | 1 + static/js/app/users.js | 1 + 3 files changed, 3 insertions(+) diff --git a/static/js/app/landing_pages.js b/static/js/app/landing_pages.js index edbead61..c1f809f0 100644 --- a/static/js/app/landing_pages.js +++ b/static/js/app/landing_pages.js @@ -93,6 +93,7 @@ function load(){ if (pages.length > 0){ $("#pagesTable").show() pagesTable = $("#pagesTable").DataTable({ + destroy: true, columnDefs: [ { orderable: false, targets: "no-sort" } ] diff --git a/static/js/app/templates.js b/static/js/app/templates.js index fb04e267..fde003fe 100644 --- a/static/js/app/templates.js +++ b/static/js/app/templates.js @@ -182,6 +182,7 @@ function load(){ if (templates.length > 0){ $("#templateTable").show() templateTable = $("#templateTable").DataTable({ + destroy: true, columnDefs: [ { orderable: false, targets: "no-sort" } ] diff --git a/static/js/app/users.js b/static/js/app/users.js index 5a9a7d37..b8f116cf 100644 --- a/static/js/app/users.js +++ b/static/js/app/users.js @@ -125,6 +125,7 @@ function load(){ $("#emptyMessage").hide() $("#groupTable").show() groupTable = $("#groupTable").DataTable({ + destroy: true, columnDefs: [ { orderable: false, targets: "no-sort" } ]
NameContentTypeContentType