Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: [AA-1079] space separators for related programs (#29350)

Browse Source 
fix css for spacing between related programs in course descriptions.
This commit is contained in:
Chris Deery
2021-11-23 13:30:17 -05:00
committed by GitHub
parent 0cdaa91762
commit bea16dad81
2 changed files with 24 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
lms/static/sass/multicourse/_dashboard.scss
View File

@@ -1173,38 +1173,43 @@
padding: $baseline/2; padding: $baseline/2;
margin-bottom: 0; margin-bottom: 0;
.related-programs-preface { .related-programs-preface {
@include float(left); @include float(left);
margin: 0 $baseline/2; margin: 0 $baseline/2;
font-weight: bold; font-weight: bold;
} }
ul { .related-program-container {
display: inline; display: inline;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
li { .related-program-element {
@include float(left); &.important-element {
display: inline;
padding: 0 0.5em;
border-right: 1px solid;
.category-icon {
@include float(left); @include float(left);
@include margin-right($baseline/4);
margin-top: ($baseline/10); display: inline;
background-color: transparent; padding: 0 0.5em !important;
background-size: 100%;
width: ($baseline*0.7); .category-icon {
height: ($baseline*0.7); @include float(left);
@include margin-right($baseline/4);
margin-top: ($baseline/10);
background-color: transparent;
background-size: 100%;
width: ($baseline*0.7);
height: ($baseline*0.7);
}
} }
} }
li {
border-right: 1px solid;
}
// Remove separator from last list item. // Remove separator from last list item.
li:last-child { li:last-child {
border: 0; border: 0;

5
lms/templates/dashboard/_dashboard_course_listing.html
View File

@@ -345,9 +345,10 @@ from lms.djangoapps.experiments.utils import UPSELL_TRACKING_FLAG
% if related_programs: % if related_programs:
<div class="message message-related-programs is-shown"> <div class="message message-related-programs is-shown">
<span class="related-programs-preface" tabindex="0">${_('Related Programs')}:</span> <span class="related-programs-preface" tabindex="0">${_('Related Programs')}:</span>
<ul> <ul class="related-program-container" >
% for program in related_programs: % for program in related_programs:
<li> ## intentionally using multiple classnames here to bump up specificity
<li class="related-program-element important-element">
<span class="category-icon ${program['type'].lower()}-icon" aria-hidden="true"></span> <span class="category-icon ${program['type'].lower()}-icon" aria-hidden="true"></span>
<span><a href="${program['detail_url']}">${u'{title} {type}'.format(title=program['title'], type=program['type'])}</a></span> <span><a href="${program['detail_url']}">${u'{title} {type}'.format(title=program['title'], type=program['type'])}</a></span>
</li> </li>