AA-58: Add date-summary-container html back in

This commit is contained in:
Dillon Dumesnil
2020-03-09 16:01:08 -04:00
parent 9dadc07453
commit 9586a2e3e8
2 changed files with 66 additions and 60 deletions

View File

@@ -421,58 +421,62 @@
}
// date summary
.date-summary {
@include clearfix;
.date-summary-container {
.date-summary {
@include clearfix;
display: flex;
justify-content: space-between;
padding: 12px 0;
&:last-of-type {
padding-bottom: 0;
}
display: flex;
justify-content: space-between;
padding: 12px 0;
.right-column {
flex: auto;
padding-left: 4px;
.localized-datetime {
font-weight: $font-weight-bold;
margin-bottom: 8px;
&:last-of-type {
padding-bottom: 0;
}
.heading {
font: -apple-system-body;
line-height: 1.5;
font-weight: $font-bold;
color: theme-color("dark");
.right-column {
flex: auto;
padding-left: 4px;
a {
font-weight: $font-semibold;
.localized-datetime {
font-weight: $font-weight-bold;
margin-bottom: 8px;
}
}
.description {
margin-bottom: 0;
display: inline-block;
}
.heading {
font: -apple-system-body;
line-height: 1.5;
font-weight: $font-bold;
color: theme-color("dark");
.heading, .description {
font-size: 0.9rem;
}
a {
font-weight: $font-semibold;
}
}
.date-summary-link {
font-weight: $font-semibold;
.description {
margin-bottom: 0;
display: inline-block;
}
a {
color: $link-color;
.heading,
.description {
font-size: 0.9rem;
}
}
}
.date {
color: theme-color("dark");
font: -apple-system-body;
.date-summary-link {
font-weight: $font-semibold;
a {
color: $link-color;
font-size: 0.9rem;
}
}
}
.date {
color: theme-color("dark");
font: -apple-system-body;
}
}
}

View File

@@ -2,26 +2,28 @@
from django.utils.translation import ugettext as _
%>
<%page args="course_date" expression_filter="h"/>
<div class="date-summary date-summary-${course_date.css_class}">
<div class="left-column">
<span class="icon fa fa-calendar" aria-hidden="true"></span>
</div>
<div class="right-column">
% if course_date.date:
<p class="hd hd-6 date localized-datetime" data-format="shortDate" data-datetime="${course_date.date}" data-timezone="${user_timezone}" data-language="${user_language}"></p>
% endif
% if course_date.title_html:
<div class="hd hd-6 heading">${course_date.title_html}</div>
% elif course_date.title:
<div class="hd hd-6 heading">${course_date.title}</div>
% endif
% if course_date.description:
<p class="description">${course_date.description}</p>
% endif
% if course_date.link and course_date.link_text:
<div class="date-summary-link">
<a href="${course_date.link}">${course_date.link_text}</a>
</div>
% endif
<div class="date-summary-container">
<div class="date-summary date-summary-${course_date.css_class}">
<div class="left-column">
<span class="icon fa fa-calendar" aria-hidden="true"></span>
</div>
<div class="right-column">
% if course_date.date:
<p class="hd hd-6 date localized-datetime" data-format="shortDate" data-datetime="${course_date.date}" data-timezone="${user_timezone}" data-language="${user_language}"></p>
% endif
% if course_date.title_html:
<div class="hd hd-6 heading">${course_date.title_html}</div>
% elif course_date.title:
<div class="hd hd-6 heading">${course_date.title}</div>
% endif
% if course_date.description:
<p class="description">${course_date.description}</p>
% endif
% if course_date.link and course_date.link_text:
<div class="date-summary-link">
<a href="${course_date.link}">${course_date.link_text}</a>
</div>
% endif
</div>
</div>
</div>