From 95222c309cb76f8237cbbe8843c34da6ac6b276b Mon Sep 17 00:00:00 2001 From: Mark Friedrich Date: Thu, 11 Oct 2018 19:39:54 +0200 Subject: [PATCH] - condensed layout for wh-effect modal, closed #702 --- js/app/logging.js | 5 +- js/app/login.js | 4 +- js/app/ui/dialog/jump_info.js | 2 +- js/app/ui/dialog/stats.js | 10 +-- js/app/ui/dialog/system_effects.js | 89 +++++++++++++------ js/app/ui/module/connection_info.js | 5 +- js/app/ui/module/system_killboard.js | 3 +- js/app/util.js | 3 +- public/css/v1.4.3/pathfinder.css | 2 +- public/css/v1.4.3/pathfinder.css.map | 2 +- public/js/v1.4.3/app/logging.js | 5 +- public/js/v1.4.3/app/login.js | 4 +- public/js/v1.4.3/app/ui/dialog/jump_info.js | 2 +- public/js/v1.4.3/app/ui/dialog/stats.js | 10 +-- .../js/v1.4.3/app/ui/dialog/system_effects.js | 89 +++++++++++++------ .../v1.4.3/app/ui/module/connection_info.js | 5 +- .../v1.4.3/app/ui/module/system_killboard.js | 3 +- public/js/v1.4.3/app/util.js | 3 +- sass/layout/_main.scss | 11 ++- 19 files changed, 157 insertions(+), 100 deletions(-) diff --git a/js/app/logging.js b/js/app/logging.js index c32e454e..3eb00ab6 100644 --- a/js/app/logging.js +++ b/js/app/logging.js @@ -20,7 +20,6 @@ define([ let config = { taskDialogId: 'pf-task-dialog', // id for map "task manager" dialog - dialogDynamicAreaClass: 'pf-dynamic-area', // class for dynamic areas timestampCounterClass: 'pf-timestamp-counter', // class for "timestamp" counter taskDialogStatusAreaClass: 'pf-task-dialog-status', // class for "status" dynamic area taskDialogLogTableAreaClass: 'pf-task-dialog-table', // class for "log table" dynamic area @@ -83,7 +82,7 @@ define([ requirejs(['text!templates/dialog/task_manager.html', 'mustache', 'datatables.loader'], function(templateTaskManagerDialog, Mustache){ let data = { id: config.taskDialogId, - dialogDynamicAreaClass: config.dialogDynamicAreaClass, + dialogDynamicAreaClass: Util.config.dynamicAreaClass, taskDialogStatusAreaClass: config.taskDialogStatusAreaClass, taskDialogLogTableAreaClass: config.taskDialogLogTableAreaClass }; @@ -218,7 +217,7 @@ define([ }); let graphArea = $('
', { - class: config.dialogDynamicAreaClass + class: Util.config.dynamicAreaClass }).append( graphElement ); let headline = $('

', { diff --git a/js/app/login.js b/js/app/login.js index f8bbbceb..0b7a0045 100644 --- a/js/app/login.js +++ b/js/app/login.js @@ -582,7 +582,7 @@ define([ * update all character panels -> set CSS class (e.g. after some panels were added/removed,..) */ let updateCharacterPanels = function(){ - let characterRows = $('.' + config.characterSelectionClass + ' .pf-dynamic-area').parent(); + let characterRows = $('.' + config.characterSelectionClass + ' .' + Util.config.dynamicAreaClass).parent(); let rowClassIdentifier = ((12 / characterRows.length ) <= 3) ? 3 : (12 / characterRows.length); $(characterRows).removeClass().addClass('col-sm-' + rowClassIdentifier); }; @@ -635,7 +635,7 @@ define([ // request character data for each character panel requirejs(['text!templates/ui/character_panel.html', 'mustache'], function(template, Mustache){ - $('.' + config.characterSelectionClass + ' .pf-dynamic-area').each(function(){ + $('.' + config.characterSelectionClass + ' .' + Util.config.dynamicAreaClass).each(function(){ let characterElement = $(this); characterElement.showLoadingAnimation(); diff --git a/js/app/ui/dialog/jump_info.js b/js/app/ui/dialog/jump_info.js index fe37d365..6f7f76cd 100644 --- a/js/app/ui/dialog/jump_info.js +++ b/js/app/ui/dialog/jump_info.js @@ -22,7 +22,7 @@ define([ * show jump info dialog */ $.fn.showJumpInfoDialog = function(){ - requirejs(['text!templates/dialog/jump_info.html', 'mustache'], (template, Mustache) => { + requirejs(['text!templates/dialog/jump_info.html', 'mustache', 'datatables.loader'], (template, Mustache) => { let data = { config: config, wormholes: Object.keys(Init.wormholes).map(function(k){ return Init.wormholes[k]; }), // convert Json to array diff --git a/js/app/ui/dialog/stats.js b/js/app/ui/dialog/stats.js index 2b64689c..883ec312 100644 --- a/js/app/ui/dialog/stats.js +++ b/js/app/ui/dialog/stats.js @@ -404,7 +404,7 @@ define([ */ let getStatsData = function(requestData, context){ - context.dynamicArea = $('#' + config.statsContainerId + ' .pf-dynamic-area'); + context.dynamicArea = $('#' + config.statsContainerId + ' .' + Util.config.dynamicAreaClass); context.dynamicArea.showLoadingAnimation(); $.ajax({ @@ -806,13 +806,7 @@ define([ title: 'Statistics', message: content, size: 'large', - show: false, - buttons: { - close: { - label: 'close', - className: 'btn-default' - } - } + show: false }); // model events diff --git a/js/app/ui/dialog/system_effects.js b/js/app/ui/dialog/system_effects.js index da79dc8c..49cc66c3 100644 --- a/js/app/ui/dialog/system_effects.js +++ b/js/app/ui/dialog/system_effects.js @@ -2,7 +2,6 @@ * system effects dialog */ - define([ 'jquery', 'app/init', @@ -10,12 +9,12 @@ define([ 'app/render', 'bootbox', 'app/map/util' -], function($, Init, Util, Render, bootbox, MapUtil){ +], ($, Init, Util, Render, bootbox, MapUtil) => { 'use strict'; let config = { // system effect dialog - systemEffectDialogWrapperClass: 'pf-system-effect-dialog-wrapper' // class for system effect dialog + systemEffectDialogClass: 'pf-system-effect-dialog' // class for system effect dialog }; let cache = { @@ -26,20 +25,20 @@ define([ * show system effect dialog */ $.fn.showSystemEffectInfoDialog = function(){ + requirejs(['datatables.loader'], () => { - // cache table structure - if(!cache.systemEffectDialog){ - - let dialogWrapperElement = $('
', { - class: config.systemEffectDialogWrapperClass + let rowElement = $('
', { + class: 'row' }); let systemEffectData = Util.getSystemEffectData(); - $.each( systemEffectData.wh, function(effectName, effectData ){ + let colCount = 0; + for(let [effectName, effectData] of Object.entries(systemEffectData.wh)){ + colCount++; let table = $('', { - class: ['table', 'table-condensed'].join(' ') + class: 'compact stripe order-column row-border' }); let tbody = $(''); @@ -51,8 +50,7 @@ define([ let systemEffectName = MapUtil.getEffectInfoForSystem(effectName, 'name'); let systemEffectClass = MapUtil.getEffectInfoForSystem(effectName, 'class'); - $.each( effectData, function(areaId, areaData ){ - + for(let [areaId, areaData] of Object.entries(effectData)){ let systemType = 'C' + areaId; let securityClass = Util.getSecurityClassForSystem( systemType ); @@ -61,20 +59,20 @@ define([ thead.append( rows[0] ); rows[0].append( - $('') ); tbody.append(rows[i + 1]); @@ -87,21 +85,60 @@ define([ rows[i + 1].append( $('
').html('  ' + systemEffectName).prepend( + $('').html('  ' + systemEffectName).prepend( $('', { - class: ['fas', 'fa-square', 'fa-fw', systemEffectClass].join(' ') + class: ['fas', 'fa-square', systemEffectClass].join(' ') }) ) ); } - rows[0].append( $('', { + rows[0].append( $('', { class: ['text-right', 'col-xs-1', securityClass].join(' ') }).text( systemType )); - $.each( areaData, function(i, data ){ - + for(let [i, data] of Object.entries(areaData)){ + i = parseInt(i); if(areaId === '1'){ rows.push( $('
', { class: 'text-right' }).text( data.value )); - }); + } + } + let colElement = $('
', { + class: ['col-md-6'].join(' ') + }).append( + $('
', { + class: [Util.config.dynamicAreaClass].join(' ') + }).append( + table.append(thead).append(tbody) + ) + ); - }); + rowElement.append(colElement); - dialogWrapperElement.append(table.append(thead).append(tbody)); + // add clearfix after even col count + if(colCount % 2 === 0){ + rowElement.append( + $('
', { + class: ['clearfix', 'visible-md', 'visible-lg'].join(' ') + }) + ); + } - cache.systemEffectDialog = dialogWrapperElement; + cache.systemEffectDialog = rowElement; + } + + let effectsDialog = bootbox.dialog({ + className: config.systemEffectDialogClass, + title: 'System effect information', + message: cache.systemEffectDialog, + size: 'large', + show: false }); - } - bootbox.dialog({ - title: 'System effect information', - message: cache.systemEffectDialog + effectsDialog.on('show.bs.modal', function(e){ + $(this).find('table').DataTable({ + pageLength: -1, + paging: false, + lengthChange: false, + ordering: false, + searching: false, + info: false, + columnDefs: [], + data: null // use DOM data overwrites [] default -> data.loader.js + }); + }); + + effectsDialog.on('hide.bs.modal', function(e){ + // destroy logTable + $(this).find('table').DataTable().destroy(true); + }); + + effectsDialog.modal('show'); }); - }; }); \ No newline at end of file diff --git a/js/app/ui/module/connection_info.js b/js/app/ui/module/connection_info.js index b9e4a6a7..c6c9d324 100644 --- a/js/app/ui/module/connection_info.js +++ b/js/app/ui/module/connection_info.js @@ -30,7 +30,6 @@ define([ connectionInfoPanelClass: 'pf-connection-info-panel', // class for connection info panels connectionInfoPanelId: 'pf-connection-info-panel-', // id prefix for connection info panels - dynamicAreaClass: 'pf-dynamic-area', // class for "dynamic" areas controlAreaClass: 'pf-module-control-area', // class for "control" areas // info table @@ -110,7 +109,7 @@ define([ */ let getInfoPanelControl = (mapId) => { let connectionElement = getConnectionElement(mapId, 0).append($('
', { - class: [config.dynamicAreaClass, config.controlAreaClass].join(' '), + class: [Util.config.dynamicAreaClass, config.controlAreaClass].join(' '), html: ' add connection  ctrl + click' })); @@ -128,7 +127,7 @@ define([ let scopeLabel = MapUtil.getScopeInfoForConnection(connectionData.scope, 'label'); let element = $('
', { - class: [config.dynamicAreaClass, config.controlAreaClass].join(' ') + class: [Util.config.dynamicAreaClass, config.controlAreaClass].join(' ') }).append( $('', { class: ['table', 'table-condensed', 'pf-table-fixed', config.moduleTableClass].join(' ') diff --git a/js/app/ui/module/system_killboard.js b/js/app/ui/module/system_killboard.js index eb568d7f..3a0d220e 100644 --- a/js/app/ui/module/system_killboard.js +++ b/js/app/ui/module/system_killboard.js @@ -32,7 +32,6 @@ define([ systemKillboardListImgCorp: 'pf-system-killboard-img-corp', // class for all corp logos labelRecentKillsClass: 'pf-system-killboard-label-recent', // class for "recent kills" label - dynamicAreaClass: 'pf-dynamic-area', // class for "dynamic" areas controlAreaClass: 'pf-module-control-area', // class for "control" areas minCountKills: 5, @@ -292,7 +291,7 @@ define([ */ let getControlElement = () => { let controlElement = $('
', { - class: [config.dynamicAreaClass, config.controlAreaClass, config.moduleHeadlineIconClass].join(' '), + class: [Util.config.dynamicAreaClass, config.controlAreaClass, config.moduleHeadlineIconClass].join(' '), html: '  load more' }); return controlElement; diff --git a/js/app/util.js b/js/app/util.js index 4df9a415..5d2623eb 100644 --- a/js/app/util.js +++ b/js/app/util.js @@ -65,7 +65,8 @@ define([ mapClass: 'pf-map' , // class for all maps // util - userStatusClass: 'pf-user-status', // class for player status + userStatusClass: 'pf-user-status', // class for player status + dynamicAreaClass: 'pf-dynamic-area', // class for "dynamic" areas // select2 select2Class: 'pf-select2', // class for all "Select2"
', { - class: ['table', 'table-condensed'].join(' ') + class: 'compact stripe order-column row-border' }); let tbody = $(''); @@ -51,8 +50,7 @@ define([ let systemEffectName = MapUtil.getEffectInfoForSystem(effectName, 'name'); let systemEffectClass = MapUtil.getEffectInfoForSystem(effectName, 'class'); - $.each( effectData, function(areaId, areaData ){ - + for(let [areaId, areaData] of Object.entries(effectData)){ let systemType = 'C' + areaId; let securityClass = Util.getSecurityClassForSystem( systemType ); @@ -61,20 +59,20 @@ define([ thead.append( rows[0] ); rows[0].append( - $('') ); tbody.append(rows[i + 1]); @@ -87,21 +85,60 @@ define([ rows[i + 1].append( $('
').html('  ' + systemEffectName).prepend( + $('').html('  ' + systemEffectName).prepend( $('', { - class: ['fas', 'fa-square', 'fa-fw', systemEffectClass].join(' ') + class: ['fas', 'fa-square', systemEffectClass].join(' ') }) ) ); } - rows[0].append( $('', { + rows[0].append( $('', { class: ['text-right', 'col-xs-1', securityClass].join(' ') }).text( systemType )); - $.each( areaData, function(i, data ){ - + for(let [i, data] of Object.entries(areaData)){ + i = parseInt(i); if(areaId === '1'){ rows.push( $('
', { class: 'text-right' }).text( data.value )); - }); + } + } + let colElement = $('
', { + class: ['col-md-6'].join(' ') + }).append( + $('
', { + class: [Util.config.dynamicAreaClass].join(' ') + }).append( + table.append(thead).append(tbody) + ) + ); - }); + rowElement.append(colElement); - dialogWrapperElement.append(table.append(thead).append(tbody)); + // add clearfix after even col count + if(colCount % 2 === 0){ + rowElement.append( + $('
', { + class: ['clearfix', 'visible-md', 'visible-lg'].join(' ') + }) + ); + } - cache.systemEffectDialog = dialogWrapperElement; + cache.systemEffectDialog = rowElement; + } + + let effectsDialog = bootbox.dialog({ + className: config.systemEffectDialogClass, + title: 'System effect information', + message: cache.systemEffectDialog, + size: 'large', + show: false }); - } - bootbox.dialog({ - title: 'System effect information', - message: cache.systemEffectDialog + effectsDialog.on('show.bs.modal', function(e){ + $(this).find('table').DataTable({ + pageLength: -1, + paging: false, + lengthChange: false, + ordering: false, + searching: false, + info: false, + columnDefs: [], + data: null // use DOM data overwrites [] default -> data.loader.js + }); + }); + + effectsDialog.on('hide.bs.modal', function(e){ + // destroy logTable + $(this).find('table').DataTable().destroy(true); + }); + + effectsDialog.modal('show'); }); - }; }); \ No newline at end of file diff --git a/public/js/v1.4.3/app/ui/module/connection_info.js b/public/js/v1.4.3/app/ui/module/connection_info.js index b9e4a6a7..c6c9d324 100644 --- a/public/js/v1.4.3/app/ui/module/connection_info.js +++ b/public/js/v1.4.3/app/ui/module/connection_info.js @@ -30,7 +30,6 @@ define([ connectionInfoPanelClass: 'pf-connection-info-panel', // class for connection info panels connectionInfoPanelId: 'pf-connection-info-panel-', // id prefix for connection info panels - dynamicAreaClass: 'pf-dynamic-area', // class for "dynamic" areas controlAreaClass: 'pf-module-control-area', // class for "control" areas // info table @@ -110,7 +109,7 @@ define([ */ let getInfoPanelControl = (mapId) => { let connectionElement = getConnectionElement(mapId, 0).append($('
', { - class: [config.dynamicAreaClass, config.controlAreaClass].join(' '), + class: [Util.config.dynamicAreaClass, config.controlAreaClass].join(' '), html: ' add connection  ctrl + click' })); @@ -128,7 +127,7 @@ define([ let scopeLabel = MapUtil.getScopeInfoForConnection(connectionData.scope, 'label'); let element = $('
', { - class: [config.dynamicAreaClass, config.controlAreaClass].join(' ') + class: [Util.config.dynamicAreaClass, config.controlAreaClass].join(' ') }).append( $('', { class: ['table', 'table-condensed', 'pf-table-fixed', config.moduleTableClass].join(' ') diff --git a/public/js/v1.4.3/app/ui/module/system_killboard.js b/public/js/v1.4.3/app/ui/module/system_killboard.js index eb568d7f..3a0d220e 100644 --- a/public/js/v1.4.3/app/ui/module/system_killboard.js +++ b/public/js/v1.4.3/app/ui/module/system_killboard.js @@ -32,7 +32,6 @@ define([ systemKillboardListImgCorp: 'pf-system-killboard-img-corp', // class for all corp logos labelRecentKillsClass: 'pf-system-killboard-label-recent', // class for "recent kills" label - dynamicAreaClass: 'pf-dynamic-area', // class for "dynamic" areas controlAreaClass: 'pf-module-control-area', // class for "control" areas minCountKills: 5, @@ -292,7 +291,7 @@ define([ */ let getControlElement = () => { let controlElement = $('
', { - class: [config.dynamicAreaClass, config.controlAreaClass, config.moduleHeadlineIconClass].join(' '), + class: [Util.config.dynamicAreaClass, config.controlAreaClass, config.moduleHeadlineIconClass].join(' '), html: '  load more' }); return controlElement; diff --git a/public/js/v1.4.3/app/util.js b/public/js/v1.4.3/app/util.js index 4df9a415..5d2623eb 100644 --- a/public/js/v1.4.3/app/util.js +++ b/public/js/v1.4.3/app/util.js @@ -65,7 +65,8 @@ define([ mapClass: 'pf-map' , // class for all maps // util - userStatusClass: 'pf-user-status', // class for player status + userStatusClass: 'pf-user-status', // class for player status + dynamicAreaClass: 'pf-dynamic-area', // class for "dynamic" areas // select2 select2Class: 'pf-select2', // class for all "Select2"