Merge pull request #17291 from edx/mobile-learner-analytics-modal

Make Learner Analytics Test Modal Mobile Responsive
This commit is contained in:
Jae Bradley
2018-01-23 16:48:30 -05:00
committed by GitHub
2 changed files with 27 additions and 9 deletions

View File

@@ -21,9 +21,9 @@ export class UpsellExperimentModal extends React.Component {
<div className="my-stats-introduction">My Stats introduces new personalized views that help you track your progress towards completing your course!</div>
<div className="my-stats-slide-header">With My Stats you will see your:</div>
<ul className="upsell-modal-checkmark-group">
<li className="upsell-modal-checkmark">Course Activity Streak (log in every week to keep your streak alive)</li>
<li className="upsell-modal-checkmark">Grade Progress (see how you're tracking towards a passing grade)</li>
<li className="upsell-modal-checkmark">Discussion Forum Engagements (top learners use the forums - how do you measure up?)</li>
<li><span className="fa fa-check upsell-modal-checkmark" aria-hidden="true" />Course Activity Streak (log in every week to keep your streak alive)</li>
<li><span className="fa fa-check upsell-modal-checkmark" aria-hidden="true" />Grade Progress (see how you're tracking towards a passing grade)</li>
<li><span className="fa fa-check upsell-modal-checkmark" aria-hidden="true" />Discussion Forum Engagements (top learners use the forums - how do you measure up?)</li>
</ul>
</div>),
(<div>

View File

@@ -408,8 +408,12 @@
width: 33%;
display: block;
li {
margin: 0;
}
li > button::before {
font-size: 15px;
font-size: 32px;
}
}
@@ -426,17 +430,25 @@
.upsell-certificate {
height: 43px;
position: absolute;
left: 40%;
margin-top: 29px;
margin: 0;
bottom: -58px;
left: 220px;
}
.upsell-modal-checkmark-group {
list-style: none;
margin-left: 0;
padding-left: 30px;
margin-bottom: 15px;
li {
margin-bottom: 15px;
}
}
.upsell-modal-checkmark::before {
content: '✔️\00a0\00a0\00a0\00a0';
.upsell-modal-checkmark {
left: 10px;
position: absolute;
color: black;
}
.js-carousel-nav {
@@ -474,4 +486,10 @@
.my-stats-slide-header {
padding-bottom: 10px;
}
@media only screen and (max-width: 600px){
.slick-slide.carousel-item {
min-width: 0;
}
}
}