List view for Channel Widget

  • 29 July 2021
  • 4 replies
  • 303 views

Userlevel 7
Badge +4

We are looking to use channels to present learning plans in segments to users on custom pages. However, we really wanted to use the list view which is not available on course/LP widget or channel widget, just the catalogs widget, which would not work for this. Decided to do some CSS styling to try to imitate, and go a few steps further to allow users to clearly know where they are at with each course and when complete, let it be not as important and take up significant less space. Heres a quick before/after of what we went for:

 

Obviously this was quite a bit of CSS, but feedback has been positive. Note, we tend to cap all the widgets, we find it makes the page cleaner and easier to understand. See the css below:


/* Add border to wrap list */
#doc-page-61 .channels-content-wrapper { border: 1px solid #0078c2;
}

/* This controls the size and positioning of the image in the header */
#doc-page-61 .channels-content-wrapper .dcb-ui-card-header, #doc-page-61 .channels-content-wrapper .ui-card-header { width: 20%; padding: var(--ui-spacing-xs); float: left;
}

/* Hides the language block, if you want it back remove this, but will need to be configured */
#doc-page-61 .channels-content-wrapper .ui-card-content-colophon { display:none;
}

/* Sets each item to be full width, correct width and removes space inbetween each */
#doc-page-61 .channels-content-wrapper .ui-cards-grid-slot { width: 100%; padding-left: var(--ui-spacing-xs); padding-right: var(--ui-spacing-xs); padding-top: 0; padding-bottom: 0;
}

/* sets the width and height of the main content, mostly the course title */
#doc-page-61 .channels-content-wrapper .ui-card-content { height: var(--ui-spacing-xl); width: 60%;
}

/* Removes the dividing line and sets space between the footer block and the main content */
#doc-page-61 .channels-content-wrapper .ui-card-footer { border-top: none; padding-top: var(--ui-spacing-lg);
}

/* Resets standard size and location for the status tag */
#doc-page-61 .channels-content-wrapper .ui-badge-status-wrapper {     height: var(--ui-spacing-xl);     width: var(--ui-spacing-huge);     font-size: 1em;     padding: var(--ui-spacing-xxs);     text-align: center;
}

/* Sets specifics for Completed status tag which is almost never shown */
#doc-page-61 .channels-content-wrapper .ui-card-status-done .ui-badge-status-wrapper {     font-size: 0.85em;     padding-bottom: var(--ui-spacing-xxs);     padding-top: var(--ui-spacing-md);     padding-right: var(--ui-spacing-xs);     padding-left: var(--ui-spacing-xxs);     text-align: center;     height: var(--ui-spacing-lg);
}

/* Sets style of the In Progress status tag */
#doc-page-61 .channels-content-wrapper .ui-card-status-in_progress .ui-badge-status-wrapper { background-color: #e67e22; text-transform: capitalize;
}

/* Sets style of the Not Started status tag */
#doc-page-61 .channels-content-wrapper .ui-card-status-subscribed .ui-badge-status-wrapper { background-color: #e74c3c;
}

/* Positions the status tag */
#doc-page-61 .channels-content-wrapper .ui-card-header-badge-primary { right: var(--ui-spacing-sm);
}

/* Bolds course title */
#doc-page-61 .channels-content-wrapper .ui-typography-heading-5 { font-weight: bold;
}

/* Sets the light gray background on hover over an item */
#doc-page-61 .channels-content-wrapper .ui-card-wrapper:hover { background-color: #f5f5f5 !important; }

/* ---These setup the resizing of completed courses--- */

/* hide the header completely, removes the image and the status tag */
#doc-page-61 .channels-content-wrapper .ui-card-status-done .ui-card-header { display: none;
}

/* Hides the footer completely, removes course type and menu button */
#doc-page-61 .channels-content-wrapper .ui-card-status-done .ui-card-footer { display: none;
}

/* Adjusts the background color of these items */
#doc-page-61 .channels-content-wrapper .ui-card-status-done { background-color: #e4e6e5
}

/* Adjusts the font color and weight */
#doc-page-61 .channels-content-wrapper .ui-card-status-done .ui-typography-heading-5 { font-weight: normal; color: #999999
}

/* Adds a before element to hold the checkmark and  Complete text in faded green */
#doc-page-61 .channels-content-wrapper .ui-card-status-done .ui-card-title:before { content: " Complete"; float: left; margin-right: var(--ui-spacing-md); color: #5ebe5eb0; font-family: "Open Sans", sans-serif;
}

 

 


4 replies

Userlevel 3
Badge

Thank you for sharing this effort!!!

 

I noticed these were courses rather than learning plans.  I assume you’re using course structures for paths of learning?

Userlevel 7
Badge +4

Yeah, so we started this for a bit of a complex setup. We assign a larger learning plan, but then have courses within those learning plans in different channels. This lets us put multiple channel widgets on a custom page as “sections” of the learning plan. It also allows editorial content/reminders/etc. to be placed next to each section, so the user can go through pieces of the learning plans, and we can still use the master learning plan for reporting/notifications. Here’s a grab of the top of this page, which gives you an idea of being able to jump down the page to the different sections, all these sections together make up the larger learning plan:

 

Userlevel 7
Badge +7

Its beautiful. Well done.

Love the hacks as well too.

Userlevel 7
Badge +4

Its beautiful. Well done.

Love the hacks as well too.

Thanks! Wish it would transfer to the mobile app, but we have very low usage of that since the web browser works so well on mobile.

Reply