dakboard / Cloud-Platform

Feature requests, enhancements and anything you'd like to see in DAKboard!
https://dakboard.com
168 stars 39 forks source link

Nutrislice bulleted list #1895

Closed cocarrig closed 1 year ago

cocarrig commented 1 year ago

Description: To provide different options of view in nutrislice, providing the option to display bulleted or comma separated is desired. Please determine if the data can be parsed accordingly, then provide the option toggle for one or the other in the settings tab of the block (if comma separated is still desired):

Comma Separated image for example:

image
Dan-Peck commented 1 year ago

For those that wish to retain the current format of the Nutrislice menu items after this feature update is released, they may use the following Custom CSS:

/* Remove List Styling */
UL.nutrislice-menu-items > LI {
    list-style: none;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Collapse the items back into lines */
UL.nutrislice-menu-items > LI.item-food,
UL.nutrislice-menu-items > LI.item-extra-text
 {
    display: inline-block;
}

/* Add commas after each item */
UL.nutrislice-menu-items > LI.item-food:after {
    content: ', ';
}

/* Suppress the comma from the item just prior to a Section Title */
UL.nutrislice-menu-items > LI.item-food:has(+ LI.section-title):after
{
   display:none;
}

/* Suppress the comma from the very last item */
UL.nutrislice-menu-items > LI.item-food:last-child:after
{
   display:none;
}
Dan-Peck commented 1 year ago

Otherwise, the expected new format will look something like the following: image

Dan-Peck commented 1 year ago

Merged in @24c00cb and added to the queue for upcoming release to the live site.

sharkeywolf commented 10 months ago

Is there a way to just see the main meal choice? I used the custom css listed above and it still takes up way too much space as all the meals for each day are listed

Dan-Peck commented 10 months ago

Is there a way to just see the main meal choice? I used the custom css listed above and it still takes up way too much space as all the meals for each day are listed

Hello, @sharkeywolf - We can adjust the Custom CSS to do this, with the assumption that the first item in each listing is the main menu item. Please note that this may not be the case for every menu, depending on their specific configuration and use of the service. However, you may replace the above Custom CSS with the following definitions instead, and give it a try to see if it works for you:

/* Remove List Styling */
UL.nutrislice-menu-items > LI {
    list-style: none;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* HIDE All the menu items by default */
UL.nutrislice-menu-items > LI.item-food,
UL.nutrislice-menu-items > LI.item-extra-text
 {
    display: none;
}

/* Override the hide to show the first item of each list */
UL.nutrislice-menu-items > .item-food:first-child {
    display: inline-block;
}
sharkeywolf commented 10 months ago

using the Custom CSS above, it ends up showing only the list section headers, no actual menu food items. see attached picture with black background.

Screen Shot 2024-01-08 at 2 44 29 PM

what i am hoping to accomplish is that all is shown is the first food item from the main entree section for every day of the week. in the second attached image, it would just show "Macaroni and Cheese"

Screen Shot 2024-01-08 at 2 41 21 PM
Dan-Peck commented 10 months ago

what i am hoping to accomplish is that all is shown is the first food item from the main entree section for every day of the week. in the second attached image, it would just show "Macaroni and Cheese"

Hello, @sharkeywolf -- Sorry to hear that did not work for you. I have re-reviewed the CSS, and tested from a different school similar to what yours appears to be, and have another potential solution to use for your case.

If you replace the last CSS definition so that it reads like this, you may have better luck:

/* Override the hide to show the first food item after each section-title */
UL.nutrislice-menu-items > LI.section-title + LI.item-food {
    display: inline-block;
}

If that still does not work, please use our support system to provide us with your DAKboard Username, and the name of the Screen in your account that is experiencing the issue, along with this Issue Number (#1895) and we can look into your specific case to determine how best to configure your Custom CSS. Here is the link to open a new ticket:

https://dakboard.freshdesk.com/support/tickets/new