Card View Customization

July 22, 2019 14:26

Before:

After:

Dashboard script for creating card view:

dashboard.on('widgetready',function(d) {
   $('.dashboard-layout-column').css('background-color', '#f0f0f0');
   $('.dashboard-layout').css('background-color', '#f0f0f0');
   $('.dashboard-layout-cell-horizontal-divider').remove();
   
   //For Edit Mode
   //$('.ui-resizable-handle.ui-resizable-e').css('width','0.5px'); //to make the vertical dividers invisible but still accessible - same row between widgets
   //$('.ui-resizable-handle.ui-resizable-s').css('height','0.5px'); //to make the vertical dividers invisible but still accessible- between rows    

   $('.dashboard-layout-subcell-vertical').css('background-color', 'white').css('box-shadow', '4px 5px 12px #00000078')

   $('.dashboard-layout-subcell-host').css('padding', '10');
   $('.dashboard-layout').css('padding-right', '20px');
   $('.dashboard-layout').css('padding-left', '20px');
});

Widget script for rounding corners:

widget.on('ready', ()=> {
   $(element).parent().css('border-radius', '20px');
   $(element).parent().parent().css('border-radius', '20px');
})

Comments

14 comments

Ido Darnell July 22, 2019 14:51

VERY COOL! Thanks!

0

Comment actions Permalink
Ramon Lopez July 22, 2019 15:45

2

Comment actions Permalink
Nathan Giusti July 22, 2019 20:13

Super slick

0

Comment actions Permalink
Tripti Jaiswal July 23, 2019 10:26

Nice,will be very usefull.Thanks

0

Comment actions Permalink
Michael Becker July 25, 2019 13:49

Hi Artem,

great stuff but it unfortunately seems to brake e-mail reports. Would you have a chance to see if that can be somehow mitigated as this is great modification? Thanks!

Regards,

Michał

0

Comment actions Permalink
Artem Yevtushenko July 26, 2019 03:22

Hey Michael,

That is certainly a current limitation because this is a post-render CSS script, and these are not currently captured by the PDF export manager. Once the updated version of the PDF export manager is released, I will explore this functionality.

Cheers,

Artem

0

Comment actions Permalink
Toby De Lorenzo October 10, 2019 22:16 (Edited October 10, 2019 22:17)

Hey Artem,

Is it possible to ignore certain widgets i.e a header that I want to stay full width?

Thanks,

Toby

0

Comment actions Permalink
Artem Yevtushenko October 11, 2019 20:32

Hi Toby,

If you'd like to ignore certain widgets you can use the following syntax:

This is the original method to create the card effect.

$('.dashboard-layout-subcell-host').css('padding', '10');

Instead, you can use the following script where the widget ids defined are not modified.

$('widget').not('[widgetid="5da0983d1d3cb956980f33fa"]').not('[widgetid="5da0983b1d3cb956980f33f8"]').parent().parent().css('padding', '10');

1

Comment actions Permalink
Toby De Lorenzo October 18, 2019 05:25

Thanks so much Artem.

0

Comment actions Permalink
Elvin Alvarillo February 18, 2020 14:00

This is amazing!

0

Comment actions Permalink
Marc Saunders April 17, 2020 12:44

this is a great plugin that makes pages look so much better, but can you enable it for the dashboard or whole site instead for each widget?

0

Comment actions Permalink
Benjamin Nissim June 17, 2020 12:09 (Edited June 18, 2020 09:27)

Artem Yevtushenko Is there any possibility to remove 'box-shadow' to a specific widget and by that you will get the illusion of two widgets combined into one. (or even remove it from one side only)

1

Comment actions Permalink
Toby De Lorenzo June 18, 2020 01:54

Hey Benjamin Nissim,

We got around it by using the .not() method in the dashboard script

$('widget').not('[widgetid="WidgetID"]').css('box-shadow', 'rgba(58, 67, 86, 0.1) 0px 1px 3px 1px');

Hope that works for you,

t

0

Comment actions Permalink
Benjamin Nissim June 23, 2020 08:10

Toby De Lorenzo Thank u, it helps!

0

Comment actions Permalink

Please sign in to leave a comment.

Comments

Didn't find what you were looking for?