Skip to content

E
edx-platform
Commit 697ec340 by Brian Jacobel
Options

Migrate Discussions, Certificates and Programs to susy-less grids

parent a68b3749
Showing with 118 additions and 109 deletions
cms/static/sass/elements-v2/_header.scss
......@@ -11,7 +11,7 @@
header.primary {
@include clearfix();
@include span(12);
@include grid-container();
@include float(none);
box-sizing: border-box;
max-width: $fg-max-width;
......@@ -31,7 +31,7 @@
}
.wrapper-r {
@include span(4 last);
@include span(4, before);
@include text-align(right);
}
......
cms/static/sass/programs/_views.scss
......@@ -28,8 +28,13 @@
.app-header {
@include clearfix();
@include grid-row;
border-bottom: 1px solid palette(grayscale, base);
margin-bottom: 20px;
form {
@include span(12);
}
}
.course-container {
......
cms/templates/js/programs/program_details.underscore
<header class="app-header">
<form>
<form class="layout layout-1q3q">
<div class="layout-col layout-col-b">
<div class="js-inline-edit field">
<span class="js-model-value copy copy-large emphasized"><%- name %></span>
......
cms/templates/program_authoring.html
......@@ -17,5 +17,5 @@
</%block>
<%block name="content">
<div class="js-program-admin program-app layout-1q3q layout-reversed" data-home-url="${studio_home_url}" data-lms-base-url="${lms_base_url}" data-programs-api-url="${programs_api_url}" data-auth-url="${programs_token_url}" data-username="${request.user.username}"></div>
<div class="js-program-admin program-app layout-1q3q layout" data-home-url="${studio_home_url}" data-lms-base-url="${lms_base_url}" data-programs-api-url="${programs_api_url}" data-auth-url="${programs_token_url}" data-username="${request.user.username}"></div>
</%block>
lms/static/certificates/sass/_components.scss
......@@ -228,7 +228,7 @@
}
.accomplishment-type-label {
width: span(10);
@include span(10);
margin: 0 auto;
font-weight: font-weight(semi-bold);
}
......
lms/static/certificates/sass/_layouts.scss
......@@ -11,15 +11,15 @@
// ------------------------------
%layout-wrapper {
margin-bottom: spacing-vertical(base);
padding: 0 (gutter()*2);
padding: 0 5%;
@include susy-breakpoint($bp-screen-md, $susy) {
padding: 0 gutter();
@media(min-width: $bp-screen-md) {
padding: 0 2.5%;
}
}
%layout {
@include container();
@include grid-container();
}
// app header
......@@ -45,8 +45,9 @@
}
.header-app-title {
margin: 0;
@include text-align(center);
@include span(12);
margin: 0;
}
// banner
......@@ -68,12 +69,12 @@
.banner-user {
@include text-align(center);
@include susy-breakpoint($bp-screen-lg, $susy) {
@media(min-width: $bp-screen-lg) {
@include text-align(left);
}
.wrapper-copy-and-actions {
@include container();
@include grid-container();
.message-copy {
margin-bottom: spacing-vertical(small);
......@@ -91,7 +92,7 @@
// CASE: icon display only
&.icon-only {
@include susy-breakpoint($bp-screen-md, $susy) {
@media(min-width: $bp-screen-md) {
padding: spacing-vertical(x-small) spacing-horizontal(base);
.icon {
......@@ -100,7 +101,7 @@
}
}
@include susy-breakpoint($bp-screen-md, $susy) {
@media(min-width: $bp-screen-md) {
display: inline-block;
vertical-align: middle;
width: auto;
......@@ -126,16 +127,16 @@
.footer-app-copyright {
@include susy-breakpoint($bp-screen-md, $susy) {
@include span(6 first);
@media(min-width: $bp-screen-md) {
@include span(6, after);
margin-bottom: 0;
}
}
.footer-app-nav {
@include susy-breakpoint($bp-screen-md, $susy) {
@include span(6 last);
@media(min-width: $bp-screen-md) {
@include span(6, before);
}
.list {
......@@ -144,7 +145,7 @@
display: block;
margin-bottom: spacing-vertical(x-small);
@include susy-breakpoint($bp-screen-md, $susy) {
@media(min-width: $bp-screen-md) {
display: inline-block;
vertical-align: middle;
@include margin-right(spacing-horizontal(base));
......@@ -155,7 +156,7 @@
.list-legal {
@include susy-breakpoint($bp-screen-md, $susy) {
@media(min-width: $bp-screen-md) {
@include text-align(right);
}
}
......@@ -186,52 +187,46 @@
top: -(spacing-vertical(base));
.accomplishment-course,
.accomplishment-recipient {
width: span(12);
@include susy-breakpoint($bp-screen-lg, $susy) {
width: span(10);
}
.accomplishment-recipient,
.accomplishment-type {
@include span(12);
}
.accomplishment-summary,
.accomplishment-statement-detail {
width: span(12);
@include susy-breakpoint($bp-screen-lg, $susy) {
width: span(8);
}
@include span(12);
}
}
.accomplishment-orgs {
@include grid-row;
.wrapper-orgs {
@include text-align(center);
}
.wrapper-organization {
@include span(6);
@include margin-right(spacing-horizontal(base));
display: inline-block;
vertical-align: middle;
width: span(6);
height: rem(100);
@include margin-right(spacing-horizontal(base));
margin-bottom: spacing-vertical(small);
&:last-child {
@include margin-right(0);
}
@include susy-breakpoint($bp-screen-md, $susy) {
width: span(3);
@media(min-width: $bp-screen-md) {
@include span(3);
}
@include susy-breakpoint($bp-screen-lg, $susy) {
width: span(2);
@media(min-width: $bp-screen-lg) {
@include span(2);
}
@include susy-breakpoint($bp-screen-xl, $susy) {
width: span(2);
@media(min-width: $bp-screen-xl) {
@include span(2);
}
}
......@@ -259,18 +254,18 @@
.signatory {
display: inline-block;
vertical-align: middle;
width: span(12);
@include span(12);
@include susy-breakpoint($bp-screen-md, $susy) {
width: span(4);
@media(min-width: $bp-screen-md) {
@include span(4);
}
@include susy-breakpoint($bp-screen-lg, $susy) {
width: span(3);
@media(min-width: $bp-screen-lg) {
@include span(3);
}
@include susy-breakpoint($bp-screen-xl, $susy) {
width: span(3);
@media(min-width: $bp-screen-xl) {
@include span(3);
}
.signatory-signature {
......@@ -286,24 +281,32 @@
@extend %layout-wrapper;
.accomplishment-metadata {
@extend %layout;
@extend %layout;
.accomplishment-metadata-title {
@include span(12);
}
}
.wrapper-metadata .metadata {
@extend %divider-2;
margin-bottom: spacing-vertical(small);
border-bottom-color: palette(grayscale, x-back);
padding-bottom: spacing-vertical(small);
.wrapper-metadata {
@extend %layout;
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
.metadata {
@extend %divider-2;
margin-bottom: spacing-vertical(small);
border-bottom-color: palette(grayscale, x-back);
padding-bottom: spacing-vertical(small);
@include susy-breakpoint($bp-screen-md, $susy) {
@include gallery(4);
border-bottom: none;
padding-bottom: 0;
&:last-child {
border-bottom: none;
padding-bottom: 0;
}
@media(min-width: $bp-screen-md) {
@include span(4);
border-bottom: none;
padding-bottom: 0;
}
}
}
}
......@@ -318,8 +321,8 @@
.accomplishment-brief {
margin-bottom: spacing-vertical(small);
@include susy-breakpoint($bp-screen-md, $susy) {
@include gallery(6);
@media(min-width: $bp-screen-md) {
@include span(6);
}
.accomplishment-type-symbol {
......@@ -343,8 +346,8 @@
margin-bottom: 0;
}
@include susy-breakpoint($bp-screen-md, $susy) {
@include gallery(6);
@media(min-width: $bp-screen-md) {
@include span(6);
margin-bottom: 0;
}
}
......
lms/static/certificates/sass/_print.scss
......@@ -212,7 +212,7 @@
.accomplishment-statement {
@extend %print-rendering-section;
width: span(8);
@include span(8);
margin: 0 auto;
}
......@@ -244,7 +244,7 @@
.accomplishment-signatories {
@extend %print-rendering-section;
@include span(12 last);
@include span(12, before);
.signatory-credentials {
font-size: 8pt;
......@@ -271,7 +271,7 @@
&.has-many {
.signatory {
@include gallery(2);
@include span(2);
}
}
}
......
lms/static/certificates/sass/_views.scss
......@@ -26,15 +26,15 @@
.content-main {
margin-bottom: spacing-vertical(base);
@include susy-breakpoint($bp-screen-md, $susy) {
@include span(9 of 12 first);
@media(min-width: $bp-screen-md) {
@include span(9, after);
}
}
.content-secondary {
@include susy-breakpoint($bp-screen-md, $susy) {
@include span(3 of 12 last);
@media(min-width: $bp-screen-md) {
@include span(3, before);
}
}
}
lms/static/sass/discussion/_discussion.scss
......@@ -177,7 +177,6 @@ body.discussion {
.container .discussion-body {
@include clearfix();
display: block;
border: none;
background: transparent;
box-shadow: none;
......@@ -295,7 +294,7 @@ body.discussion {
// inline discussion module
.discussion-module {
@extend .discussion-body;
display: block;
position: relative;
margin: $baseline 0;
padding: $baseline;
......
lms/static/sass/elements/_banners.scss
......@@ -22,7 +22,7 @@ $full-width-banner-margin: 20px;
background: $black;
opacity: 0.65;
@include susy-media($bp-screen-md) {
@media(min-width: $bp-screen-md) {
opacity: 0.4;
}
}
......@@ -31,7 +31,7 @@ $full-width-banner-margin: 20px;
.banner-background-image {
height: $full-width-banner-img-height;
@include susy-media($full-width-banner-img-width) {
@media(min-width: $full-width-banner-img-width) {
height: auto;
width: 100%;
}
......
lms/static/sass/elements/_course-card.scss
.course-card {
width: 85%;
@include span(10);
@include pre(1);
@include post(1);
margin: {
left: auto;
right: auto;
......@@ -8,9 +10,7 @@
padding: $baseline/2 0;
.section {
@extend .grid-container;
@extend .grid-manual;
padding: $baseline/2 $baseline;
}
......@@ -19,7 +19,7 @@
.header-img {
max-width: 100%;
@include susy-media($bp-screen-sm) {
@media(min-width: $bp-screen-sm) {
max-width: 191px;
}
}
......@@ -28,7 +28,7 @@
.course-details {
@include float(right);
width: 100%;
@include susy-media($bp-screen-sm) { width: calc(100% - 191px); }
@media(min-width: $bp-screen-sm) { width: calc(100% - 191px); }
padding-left: $baseline*1.5;
.course-title {
......@@ -131,17 +131,17 @@
.message {
margin-bottom: $baseline;
@include susy-media($bp-screen-md) {
@media(min-width: $bp-screen-md) {
margin-bottom: 0;
}
}
.upgrade-message,
.certificate-status {
border-top: 1px solid palette(grayscale, back);
padding-top: $baseline;
@include susy-media($bp-screen-md) {
@media(min-width: $bp-screen-md) {
display: flex;
align-items: center;
}
......
lms/static/sass/elements/_program-card.scss
......@@ -7,17 +7,20 @@
}
.program-card {
@include span(12);
@include span(12);
border: 1px solid $border-color-l3;
border-bottom: none;
margin-bottom: $baseline;
position: relative;
@include susy-media($bp-screen-md) {
@media(min-width: $bp-screen-md) {
@include span(6);
&:nth-child(2n) {
@include margin-right(0);
@include span(6, before);
}
&:nth-child(2n+1) {
@include span(6, after);
}
}
......@@ -30,7 +33,7 @@
border: 0;
z-index: 1;
opacity: 0.8;
&:active,
&:hover,
&:focus {
......@@ -42,9 +45,9 @@
overflow: hidden;
height: 166px;
@include susy-media($bp-screen-sm) { height: 242px; }
@include susy-media($bp-screen-md) { height: 116px; }
@include susy-media($bp-screen-lg) { height: 145px; }
@media(min-width: $bp-screen-sm) { height: 242px; }
@media(min-width: $bp-screen-md) { height: 116px; }
@media(min-width: $bp-screen-lg) { height: 145px; }
.banner-image {
@include left(50%);
......@@ -62,9 +65,9 @@
position: relative;
margin-top: 156px;
@include susy-media($bp-screen-sm) { margin-top: 232px; }
@include susy-media($bp-screen-md) { margin-top: 106px; }
@include susy-media($bp-screen-lg) { margin-top: 135px; }
@media(min-width: $bp-screen-sm) { margin-top: 232px; }
@media(min-width: $bp-screen-md) { margin-top: 106px; }
@media(min-width: $bp-screen-lg) { margin-top: 135px; }
}
.meta-info {
......@@ -76,13 +79,13 @@
}
.organization {
@include span(6);
@include span(6, none);
white-space: nowrap;
overflow: hidden;
}
.category {
@include span(6);
@include span(6, none);
@include text-align(right);
.category-text {
......@@ -113,7 +116,7 @@
color: palette(grayscale, dark);
line-height: 1;
}
.secondary {
@extend %hide-until-focus;
}
......
lms/static/sass/shared-v2/_base.scss
......@@ -10,7 +10,7 @@
}
.content-wrapper {
width: span(12);
@include span(12, none);
margin: 0 auto;
@media print {
......
lms/static/sass/shared-v2/_footer.scss
......@@ -38,7 +38,7 @@
.colophon {
@include span(12);
@include susy-media($bp-screen-sm) {
@media(min-width: $bp-screen-sm) {
@include span(8);
}
......@@ -168,7 +168,7 @@
@include text-align(right);
vertical-align: bottom;
@include susy-media($bp-screen-sm) {
@media(min-width: $bp-screen-sm) {
@include span(4);
@include margin-right(0);
}
......
lms/static/sass/shared-v2/_header.scss
......@@ -12,7 +12,6 @@
.wrapper-header {
@include clearfix();
box-sizing: border-box;
height: 74px;
margin: 0 auto;
padding: 10px 10px 0;
width: 100%;
......
lms/static/sass/shared/_header.scss
......@@ -16,7 +16,6 @@
margin: 0 auto;
padding: 18px ($baseline/2) 0;
max-width: grid-width(12);
width: 100%;
}
h1.logo {
......@@ -324,7 +323,6 @@
.nav-courseware {
@include float(right);
margin-top: ($baseline/4);
list-style: none;
li, div {
......
lms/static/sass/views/_program-details.scss
......@@ -36,7 +36,7 @@
.breadcrumb-wrapper {
padding: $full-width-banner-margin;
@include susy-media(1200px) {
@media(min-width: $bp-screen-xl) {
padding-left: 0;
}
}
......
lms/static/sass/views/_program-list.scss
......@@ -3,9 +3,10 @@
}
.program-cards-container {
@include grid-container();
@include span(12);
@include susy-media($bp-screen-md) {
@media(min-width: $bp-screen-md) {
@include span(9);
}
}
......@@ -15,7 +16,7 @@
@include float(right);
margin-bottom: $baseline;
@include susy-media($bp-screen-md) {
@media(min-width: $bp-screen-md) {
@include span(3);
}
......@@ -66,6 +67,7 @@
}
.empty-programs-message {
@include span(12);
border: 3px solid $gray-l4;
background: $gray-l6;
padding: ($baseline*2) 0;
......
lms/templates/learner_dashboard/program_details_view.underscore
<header class="js-program-header program-header full-width-banner"></header>
<div class="program-details-content grid-container">
<div class="js-program-progress-view"></div>
<div class="js-course-list"></div>
<div class="js-course-list row"></div>
<aside class="js-course-sidebar"></aside>
</div>
lms/templates/learner_dashboard/program_header_view.underscore
......@@ -4,10 +4,10 @@
<source srcset="<%- programData.banner_image_urls.w726h242 %>" media="(min-width: <%- breakpoints.min.medium %>)">
<img class="banner-background-image" srcset="<%- programData.banner_image_urls.w348h116 %>" alt="">
</picture>
<div class="banner-content grid-container">
<h2 class="hd-1 title"><%- programData.name %></h2>
<p class="hd-4 subtitle"><%- programData.subtitle %></p>
<h2 class="hd-1 title row"><%- programData.name %></h2>
<p class="hd-4 subtitle row"><%- programData.subtitle %></p>
<% if (programData.organizations.length) { %>
<div class="org-wrapper">
<% _.each(programData.organizations, function(org) { %>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment