Browse column responsive card display
Posted: Thu Feb 17, 2022 2:59 am
Code: Select all
[attachment=0]CPT2202171345-500x428.gif[/attachment]Below are the codes which can be further improved or modified to individual preference. for view on the mobiles, the number of row displays can be reduced to 3-4 to avoid long scrolling.
Modified nuBrowseTable() function which can be placed in the header or directly modified in nuForm.js.
Code: Select all
function nuBrowseTable() {
var bc = window.nuFORM.getCurrent();
var col = bc.browse_columns;
var row = bc.browse_rows;
var rows = bc.rows;
var h = bc.row_height;
var t = parseInt($('#nuBrowseTitle0').css('height'))- h - 2;
var l = 7;
for (r = 0; r < rows; r++) {
l = 7;
t = t + h + 7;
for (c = 0; c < col.length; c++) {
var w = Number(col[c].width);
var a = nuAlign(col[c].align);
var f = col[c].format;
var rw = r;
var column = c;
var id = 'nucell_' + rw + '_' + c;
var div = document.createElement('div');
var z = col[c].title;
div.setAttribute('id', id);
$('#nuRECORD').append(div);
$('#' + id)
.attr('data-nu-row', rw)
.attr('data-nu-column', column)
.attr('data-title', z+':'+' ')
// .attr('data-title2', tts)
.addClass('nuCell' + ((r/2) == parseInt(r/2) ? 'Even': 'Odd'))
.addClass(w == 0 ? '': 'nuBrowseTable')
.css({
'text-align': a,
'overflow': 'hidden',
'width': w,
'top': t,
'left': l,
'height': h,
'position': 'absolute'
});
if (w == 0) {
$('#' + id).hide();
}
if (w < 0) {
$('#' + id)
.css('padding', 0)
.css('border-width', 0);
}
if (r < row.length) {
$('#' + id)
.html(nuFORM.addFormatting(row[r][c+1], col[c].format))
.attr('data-nu-primary-key', row[r][0])
.attr('onclick', 'nuSelectBrowse(event, this)')
.hover(
function() {
if (window.nuBROWSERESIZE.moving_element == '') {
if (this.offsetWidth < this.scrollWidth && ! $(this).is('[title]')) {
$(this).attr('title', $(this).html().replace(/(<([^>]+)>)/ig, '')); // Remove HTML tags
}
$("[data-nu-row]").addClass('nuBrowseTable').removeClass('nuSelectBrowse');
var rw = $(this).attr('data-nu-row');
window.nuBROWSEROW = -1;
$("[data-nu-row='" + rw + "']").not('.nuCellColored').addClass('nuSelectBrowse').removeClass('nuBrowseTable');
}
},
function() {
if (window.nuBROWSERESIZE.moving_element == '') {
$("[data-nu-row]").addClass('nuBrowseTable').removeClass('nuSelectBrowse');
var rw = $(this).attr('data-nu-row');
window.nuBROWSEROW = -1;
$("[data-nu-row='" + rw + "']").addClass('nuBrowseTable').removeClass('nuSelectBrowse');
}
}
);
}
l = l + (w == 0 ? 0: nuTotalWidth(id));
}
}
var la = '<span id="nuLast" onclick="nuGetPage(' + (bc.page_number) + ')" class="nuBrowsePage">◄</span>';
var ne = '<span id="nuNext" onclick="nuGetPage(' + (bc.page_number + 2) + ')" class="nuBrowsePage">►</span>';
// var ne = '<span style="font-size: 30px;" id="nuNext" onclick="nuGetPage(' + (bc.page_number + 2) + ')" class="nuBrowsePage"><i class="fa fa-caret-right " aria-hidden="true"></i></span>';
var pg = ' Page ';
var cu = '<input id="browsePage" style="text-align:center;margin:3px 0px 0px 0px;width:40px" onchange="nuGetPage(this.value)" value="' + (bc.page_number + 1) + '" class="browsePage"/>';
var of = ' / ' + (bc.pages == 0?1: bc.pages) + ' ';
var id = 'nuBrowseFooter';
var footerTop = t + h + 10;
var div = document.createElement('div');
div.setAttribute('id',
id);
$('#nuRECORD').append(div);
$('#' + id)
.addClass('nuBrowseFooter')
.html(la+pg+cu+of+ne)
.css({
'text-align': 'center',
'width': l - 7,
'top': footerTop,
'left': 7,
'height': 25,
'position': 'absolute',
'padding': '5px 0px',
});
nuHighlightSearch();
nuBrowseBorders();
var h = nuTotalHeight('nuBrowseTitle0') + nuTotalHeight('nuBrowseFooter') + parseInt($('#nuWindow', window.parent.document).css('height'))-99;
var rows = $("[data-nu-column|='0']").length;
var rheight = nuTotalHeight('nucell_0_0');
h = footerTop + 130;
$('#nuDragDialog',
window.parent.document).css({
'height': h + 30,
'visibility': 'visible',
'overflow': 'hidden'
});
$('#nuWindow',
window.parent.document).css({
'height': h -14
});
$('body').css('height',
h-30);
$('#nuRECORD').css('height',
0).css('width',
0);
}Below CSS to be placed in the style tab under setup
Code: Select all
@media screen and (max-width: 700px) {
div[data-title]:before {
content: attr(data-title);
float: left;
text-transform: uppercase;
font-weight: bold;
display: block;
}
div[data-nu-row] {
display: block;
position:sticky;
/*transition: 0.30s;*/
width:600px;
float:left;
}
div[data-nu-column] {
text-align: right;
color: blue;
}
.nuBrowseTitle, .nuBrowseFooter {
display: none;
}
div[data-nu-column='0'] {
margin-top: 20px;
box-shadow: 0 4px 20px rgba(5,57,94,05);
}
}
finally, the JS code to be placed on the forms JS which you need to make responsive.
Code: Select all
$(document).ready(function() {
$(window).resize(function() {
if (window.matchMedia("(max-width: 700px)").matches) {
nuResizeBrowseColumns(false);
$("[data-nu-row]").css({
'display': 'block', 'position': 'sticky', 'width': '90vw', 'text-align': 'right','float': 'left','font-size':'150px','transition': '0.30s'
});
$('.nuBrowseTitle').css({
'display': 'none'
});
$('#nuBrowseFooter').css({
'position': 'sticky',
'display':'inline',
'bottom': '0',
'width': '90vw',
'height': '60px',
'font-size':'20px',
'float': 'left',
'transition': '0.30s'
});
$('#nubody').css({
'height': '90vh'
});
} else {
if (!nuIsIframe()) nuResizeBrowseColumns(true);
$("[data-nu-row]").css({
'display': 'inline', 'position': 'absolute', 'text-align': 'left'
});
$('.nuBrowseTitle').css({
'display': 'inline', 'position': 'absolute'
});
$('#nuBrowseFooter').css({
'display': 'inline', 'position': 'absolute','font-size':'14px'
});
}
}).resize();
});