From 697ec3402db8e7660d0b3bc533c02ac18b66b8bb Mon Sep 17 00:00:00 2001 From: Brian Jacobel Date: Thu, 3 Nov 2016 17:10:56 -0400 Subject: [PATCH] Migrate Discussions, Certificates and Programs to susy-less grids --- cms/static/sass/elements-v2/_header.scss | 4 +- cms/static/sass/programs/_views.scss | 5 + .../js/programs/program_details.underscore | 2 +- cms/templates/program_authoring.html | 2 +- lms/static/certificates/sass/_components.scss | 2 +- lms/static/certificates/sass/_layouts.scss | 121 +++++++++--------- lms/static/certificates/sass/_print.scss | 6 +- lms/static/certificates/sass/_views.scss | 8 +- lms/static/sass/discussion/_discussion.scss | 3 +- lms/static/sass/elements/_banners.scss | 4 +- lms/static/sass/elements/_course-card.scss | 16 +-- lms/static/sass/elements/_program-card.scss | 29 +++-- lms/static/sass/shared-v2/_base.scss | 2 +- lms/static/sass/shared-v2/_footer.scss | 4 +- lms/static/sass/shared-v2/_header.scss | 1 - lms/static/sass/shared/_header.scss | 2 - lms/static/sass/views/_program-details.scss | 2 +- lms/static/sass/views/_program-list.scss | 6 +- .../program_details_view.underscore | 2 +- .../program_header_view.underscore | 6 +- 20 files changed, 118 insertions(+), 109 deletions(-) diff --git a/cms/static/sass/elements-v2/_header.scss b/cms/static/sass/elements-v2/_header.scss index f04a3d93c9..648995ca68 100644 --- a/cms/static/sass/elements-v2/_header.scss +++ b/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); } diff --git a/cms/static/sass/programs/_views.scss b/cms/static/sass/programs/_views.scss index a4b9f282fe..741d19346a 100644 --- a/cms/static/sass/programs/_views.scss +++ b/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 { diff --git a/cms/templates/js/programs/program_details.underscore b/cms/templates/js/programs/program_details.underscore index bb606fb03b..cb6207cabd 100644 --- a/cms/templates/js/programs/program_details.underscore +++ b/cms/templates/js/programs/program_details.underscore @@ -1,5 +1,5 @@
-
+
<%- name %> diff --git a/cms/templates/program_authoring.html b/cms/templates/program_authoring.html index 0f15d94220..781b8809cd 100644 --- a/cms/templates/program_authoring.html +++ b/cms/templates/program_authoring.html @@ -17,5 +17,5 @@ <%block name="content"> -
+
diff --git a/lms/static/certificates/sass/_components.scss b/lms/static/certificates/sass/_components.scss index 6e32ca7cd7..3c3eeca7fa 100644 --- a/lms/static/certificates/sass/_components.scss +++ b/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); } diff --git a/lms/static/certificates/sass/_layouts.scss b/lms/static/certificates/sass/_layouts.scss index 087458230e..5ca564b477 100644 --- a/lms/static/certificates/sass/_layouts.scss +++ b/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; } } diff --git a/lms/static/certificates/sass/_print.scss b/lms/static/certificates/sass/_print.scss index 851cec3d38..56e1f5d0c2 100644 --- a/lms/static/certificates/sass/_print.scss +++ b/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); } } } diff --git a/lms/static/certificates/sass/_views.scss b/lms/static/certificates/sass/_views.scss index b8fa91dabd..410d6dc37f 100644 --- a/lms/static/certificates/sass/_views.scss +++ b/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); } } } diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index 8201afaebf..a9b7486131 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/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; diff --git a/lms/static/sass/elements/_banners.scss b/lms/static/sass/elements/_banners.scss index 949a908e48..27d76fd8e9 100644 --- a/lms/static/sass/elements/_banners.scss +++ b/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%; } diff --git a/lms/static/sass/elements/_course-card.scss b/lms/static/sass/elements/_course-card.scss index 4e4f2ea9a1..a8acd37167 100644 --- a/lms/static/sass/elements/_course-card.scss +++ b/lms/static/sass/elements/_course-card.scss @@ -1,5 +1,7 @@ .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; } diff --git a/lms/static/sass/elements/_program-card.scss b/lms/static/sass/elements/_program-card.scss index 366bb471fb..37b551075c 100644 --- a/lms/static/sass/elements/_program-card.scss +++ b/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; } diff --git a/lms/static/sass/shared-v2/_base.scss b/lms/static/sass/shared-v2/_base.scss index e96a278064..e3354f11bf 100644 --- a/lms/static/sass/shared-v2/_base.scss +++ b/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 { diff --git a/lms/static/sass/shared-v2/_footer.scss b/lms/static/sass/shared-v2/_footer.scss index d4d54c8a9f..dd66047bad 100644 --- a/lms/static/sass/shared-v2/_footer.scss +++ b/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); } diff --git a/lms/static/sass/shared-v2/_header.scss b/lms/static/sass/shared-v2/_header.scss index affbbe7199..5dcfcb9192 100644 --- a/lms/static/sass/shared-v2/_header.scss +++ b/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%; diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 8e816f6c5d..1379b44179 100644 --- a/lms/static/sass/shared/_header.scss +++ b/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 { diff --git a/lms/static/sass/views/_program-details.scss b/lms/static/sass/views/_program-details.scss index 49dad91347..f7d5608cec 100644 --- a/lms/static/sass/views/_program-details.scss +++ b/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; } } diff --git a/lms/static/sass/views/_program-list.scss b/lms/static/sass/views/_program-list.scss index 8e33f88911..1f552a98b4 100644 --- a/lms/static/sass/views/_program-list.scss +++ b/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; diff --git a/lms/templates/learner_dashboard/program_details_view.underscore b/lms/templates/learner_dashboard/program_details_view.underscore index b38a3fea75..b180cb1331 100644 --- a/lms/templates/learner_dashboard/program_details_view.underscore +++ b/lms/templates/learner_dashboard/program_details_view.underscore @@ -1,6 +1,6 @@
-
+
diff --git a/lms/templates/learner_dashboard/program_header_view.underscore b/lms/templates/learner_dashboard/program_header_view.underscore index e4664d2545..7fe8c90703 100644 --- a/lms/templates/learner_dashboard/program_header_view.underscore +++ b/lms/templates/learner_dashboard/program_header_view.underscore @@ -4,10 +4,10 @@ - +