[Traffic Register] View PDF Buttons CSS Styling & JQuery Functionality #187
Conversation
ChrispinP
added
enhancement
ChrispinP
requested review from
chiaberry,
dianamartin,
susannegov,
mddilley,
ChristinaTremel and
KaroEngstrom
ChrispinP
changed the title
There was a problem hiding this comment.
The border-color:#dd4d4d; min-width: 190px !important; max-width: 27% !important; declarations for the div.kn-detail:hover is redundant unless the declarations between the div.kn-detail and the div.kn-detail:hover has changed. I tested this in my sandbox with the declarations removed from hover to confirm.
- line 461
- line 467
- line 473
- line 479
I would remove the 3 declarations from the hover css to make it easier to maintain.
|
Also the official name is "Power BI" (with space) not "PowerBI" (no space). |
Also added space for Power BI so its pretty
Target the specific field div instead of the view to apply stylings and make the entire button clickable without underline
JQuery to add css class to link, wrap the div, and add click event making the entire button clickable. Done for both Power BI link field and SharePoint link field.
ChrispinP
changed the title
| /* #kn-scene_773 #view_1705 div.kn-detail { padding: 1px 2px; border-style: solid; border-width: 1px; border-color: #163f6e; border-radius: 8px; | ||
| box-shadow: 0px 0px 0px 0px gray; font-size: 1.25em; background-color: #ebebeb; color: #163f6e; text-align: left; min-width: 190px !important; max-width: 27% !important; } | ||
| #kn-scene_773 #view_1705 div.kn-detail:hover { opacity: 0.9; cursor: pointer; border-color: #163f6e; border-width: 2px; } | ||
| #kn-scene_773 #view_1705 .kn-detail-label { background-color: transparent; min-width: 0% !important; } */ | ||
|
|
There was a problem hiding this comment.
Previous 4 code blocks above have been commented out with the 2 new code blocks under the 'Style PDF Link Fields as Buttons' section
|
4th Commit now include the JS file for the JQuery updates. Please re-review, thanks 🙏 |
For #20611
Using the same styling as the View PDF buttons for generated PDF's stored in PowerBI, we create View PDF buttons for historical PDF's stored in SharePoint. We use a blue outline for these historical buttons to create distinction.
New with JQuery:
