Jump to content

Making Gallery Reports look more appealing


Recommended Posts

Hi everyone,

So i've been playing around with how can i make gallery reports look more appealing especially when the bulk edit/delete options are enabled because i find it a bit clunky and dated:

image.thumb.png.a0e2ff8d4eaf16d8dbdcf4df5abf7370.png

 

And I have come up with some code (a combination of CSS and JavaScript) that can make it look more sleek (in my opinion) so that it'll look like this:

image.thumb.png.df75d8ed6c6dc135ed26b5ebef7a0bb0.png

 

 

For the CSS (to be placed in the header):

<style>

form[action*='[@cbAppKey]'] .cbResultSetListViewDataLabel{
display: none !important;
}


form[action*='[@cbAppKey]'] [class*='cbReportBlock']{
border-radius: 20px !important;
padding: 10px !important;
}

form[action*='[@cbAppKey]'] [class*='cbReportBlock']:hover{
background: #f5f5f5;
cursor: pointer;
}

form[action*='[@cbAppKey]'] [class*='cbReportBlock'] [class*='selectedturn']:hover{
background: red !important;
cursor: pointer;
}


.cbActionPanel ul{
    align-items: normal !important;
}


.cbActionPanel li:nth-child(1){
     align-items: baseline !important;
    display: flex !important;
margin-top: -2px;
}

 .cbResultSetListGallerySelectAllActionLink{
margin-left: 5px;
}

#actioncontainer{
padding-top: 10px;
visibility: hidden;
}

#actioncontainer * {
    font-size: 15px !important;
}


.selectedturn{
background: #D9D9D9 !important;
}

.cbResultSetListViewHeaderCheckBoxCell{
display: none !important;
}


form[action*='[@cbAppKey]'] [class*='cbBulkFormLabel']{
display: flex !important;
align-items: center !important;
}


.cbActionPanel label, 
.cbActionPanel a{
color: black  !important;
text-decoration: none !important;
}

[action*='[@cbAppKey]'] [id*='PageActionsCtnr'] {
visibility: hidden;
justify-content: flex-end;
}

[class*="cbResultSetActionsContainer"]{

position: sticky;
top: -10px;
z-index: 1000;

}

</style>

 

 

For the script (to be placed in the footer):


<script>
var cards = document.querySelectorAll("form[action*='[@cbAppKey]'] [class*='cbReportBlock']");

cards.forEach(function(card, i){

card.addEventListener('click', function() {

card.querySelector("input[type='checkbox']").click();
    if(card.classList.contains("selectedturn")){
card.classList.remove("selectedturn")
if(document.querySelectorAll("form[action*='[@cbAppKey]'] [class*='cbReportBlock'] input[type='checkbox']:checked").length == 0){
document.querySelector("[action*='[@cbAppKey]'] [id*='PageActionsCtnr'] ").style.visibility = "hidden"
}
}else{
card.classList.add("selectedturn")

document.querySelector("[action*='[@cbAppKey]'] [id*='PageActionsCtnr'] ").style.visibility= "visible"
}
}, false);
})


var selectallcheckbox = document.querySelector("[action*='[@cbAppKey]']  [title='Select All']");

selectallcheckbox.addEventListener('change', function() {
var alloptions = document.querySelectorAll("form[action*='[@cbAppKey]'] [class*='cbReportBlock']");


  if (this.checked) {
alloptions.forEach(function(option){
option.classList.add("selectedturn")
})
  } else {
alloptions.forEach(function(option){
option.classList.remove("selectedturn")
})
  }
});


</script>

 

 

Using these code, instead of having checkboxes on each of the record "card" as i'd like to call it, the entire card becomes the checkbox which I think makes it more user-friendly and interactive and modern. The bulk options also appear only when there's a record chosen, but if there werent any chosen, it is hidden, which lessens the visual clutter of the datapage.

 

Link to comment
Share on other sites

@futurist,

Hey this is great--thanks for posting it. I'm looking forward to seeing where I can implement this as it does look a lot more modern. That's one thing about Caspio's datapages, they look REALLY dated now. I wish they'd update the Styles so us users don't have to spend so much time modifying just to make an app look current. 

Link to comment
Share on other sites

  • 4 months later...
  • 1 month later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...