Skip to content

E
edx-platform
Commit d39f7197 by Brian Jacobel Committed by GitHub
Options

Revert "Update to UXPL 0.17 (grids compilation performance work)"

parent b4c61e87
Showing with 94 additions and 103 deletions
cms/static/sass/elements-v2/_header.scss
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
header.primary { header.primary {
@include clearfix(); @include clearfix();
@include grid-container(); @include span(12);
@include float(none); @include float(none);
box-sizing: border-box; box-sizing: border-box;
max-width: $fg-max-width; max-width: $fg-max-width;
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
} }
.wrapper-r { .wrapper-r {
@include span(4, before); @include span(4 last);
@include text-align(right); @include text-align(right);
} }
......
cms/static/sass/programs/_views.scss
...@@ -28,13 +28,8 @@ ...@@ -28,13 +28,8 @@
.app-header { .app-header {
@include clearfix(); @include clearfix();
@include grid-row;
border-bottom: 1px solid palette(grayscale, base); border-bottom: 1px solid palette(grayscale, base);
margin-bottom: 20px; margin-bottom: 20px;
form {
@include span(12);
}
} }
.course-container { .course-container {
......
cms/templates/js/programs/program_details.underscore
<header class="app-header"> <header class="app-header">
<form class="layout layout-1q3q"> <form>
<div class="layout-col layout-col-b"> <div class="layout-col layout-col-b">
<div class="js-inline-edit field"> <div class="js-inline-edit field">
<span class="js-model-value copy copy-large emphasized"><%- name %></span> <span class="js-model-value copy copy-large emphasized"><%- name %></span>
......
cms/templates/program_authoring.html
...@@ -17,5 +17,5 @@ ...@@ -17,5 +17,5 @@
</%block> </%block>
<%block name="content"> <%block name="content">
<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> <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>
</%block> </%block>
lms/static/certificates/sass/_components.scss
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
} }
.accomplishment-type-label { .accomplishment-type-label {
@include span(10); width: span(10);
margin: 0 auto; margin: 0 auto;
font-weight: font-weight(semi-bold); font-weight: font-weight(semi-bold);
} }
......
lms/static/certificates/sass/_layouts.scss
...@@ -11,15 +11,15 @@ ...@@ -11,15 +11,15 @@
// ------------------------------ // ------------------------------
%layout-wrapper { %layout-wrapper {
margin-bottom: spacing-vertical(base); margin-bottom: spacing-vertical(base);
padding: 0 5%; padding: 0 (gutter()*2);
@media(min-width: $bp-screen-md) { @include susy-breakpoint($bp-screen-md, $susy) {
padding: 0 2.5%; padding: 0 gutter();
} }
} }
%layout { %layout {
@include grid-container(); @include container();
} }
// app header // app header
...@@ -45,9 +45,8 @@ ...@@ -45,9 +45,8 @@
} }
.header-app-title { .header-app-title {
@include text-align(center);
@include span(12);
margin: 0; margin: 0;
@include text-align(center);
} }
// banner // banner
...@@ -69,12 +68,12 @@ ...@@ -69,12 +68,12 @@
.banner-user { .banner-user {
@include text-align(center); @include text-align(center);
@media(min-width: $bp-screen-lg) { @include susy-breakpoint($bp-screen-lg, $susy) {
@include text-align(left); @include text-align(left);
} }
.wrapper-copy-and-actions { .wrapper-copy-and-actions {
@include grid-container(); @include container();
.message-copy { .message-copy {
margin-bottom: spacing-vertical(small); margin-bottom: spacing-vertical(small);
...@@ -92,7 +91,7 @@ ...@@ -92,7 +91,7 @@
// CASE: icon display only // CASE: icon display only
&.icon-only { &.icon-only {
@media(min-width: $bp-screen-md) { @include susy-breakpoint($bp-screen-md, $susy) {
padding: spacing-vertical(x-small) spacing-horizontal(base); padding: spacing-vertical(x-small) spacing-horizontal(base);
.icon { .icon {
...@@ -101,7 +100,7 @@ ...@@ -101,7 +100,7 @@
} }
} }
@media(min-width: $bp-screen-md) { @include susy-breakpoint($bp-screen-md, $susy) {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: auto; width: auto;
...@@ -127,16 +126,16 @@ ...@@ -127,16 +126,16 @@
.footer-app-copyright { .footer-app-copyright {
@media(min-width: $bp-screen-md) { @include susy-breakpoint($bp-screen-md, $susy) {
@include span(6, after); @include span(6 first);
margin-bottom: 0; margin-bottom: 0;
} }
} }
.footer-app-nav { .footer-app-nav {
@media(min-width: $bp-screen-md) { @include susy-breakpoint($bp-screen-md, $susy) {
@include span(6, before); @include span(6 last);
} }
.list { .list {
...@@ -145,7 +144,7 @@ ...@@ -145,7 +144,7 @@
display: block; display: block;
margin-bottom: spacing-vertical(x-small); margin-bottom: spacing-vertical(x-small);
@media(min-width: $bp-screen-md) { @include susy-breakpoint($bp-screen-md, $susy) {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@include margin-right(spacing-horizontal(base)); @include margin-right(spacing-horizontal(base));
...@@ -156,7 +155,7 @@ ...@@ -156,7 +155,7 @@
.list-legal { .list-legal {
@media(min-width: $bp-screen-md) { @include susy-breakpoint($bp-screen-md, $susy) {
@include text-align(right); @include text-align(right);
} }
} }
...@@ -187,46 +186,52 @@ ...@@ -187,46 +186,52 @@
top: -(spacing-vertical(base)); top: -(spacing-vertical(base));
.accomplishment-course, .accomplishment-course,
.accomplishment-recipient, .accomplishment-recipient {
.accomplishment-type { width: span(12);
@include span(12);
@include susy-breakpoint($bp-screen-lg, $susy) {
width: span(10);
}
} }
.accomplishment-summary, .accomplishment-summary,
.accomplishment-statement-detail { .accomplishment-statement-detail {
@include span(12); width: span(12);
@include susy-breakpoint($bp-screen-lg, $susy) {
width: span(8);
}
} }
} }
.accomplishment-orgs { .accomplishment-orgs {
@include grid-row;
.wrapper-orgs { .wrapper-orgs {
@include text-align(center); @include text-align(center);
} }
.wrapper-organization { .wrapper-organization {
@include span(6);
@include margin-right(spacing-horizontal(base));
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
width: span(6);
height: rem(100); height: rem(100);
@include margin-right(spacing-horizontal(base));
margin-bottom: spacing-vertical(small); margin-bottom: spacing-vertical(small);
&:last-child { &:last-child {
@include margin-right(0); @include margin-right(0);
} }
@media(min-width: $bp-screen-md) { @include susy-breakpoint($bp-screen-md, $susy) {
@include span(3); width: span(3);
} }
@media(min-width: $bp-screen-lg) { @include susy-breakpoint($bp-screen-lg, $susy) {
@include span(2); width: span(2);
} }
@media(min-width: $bp-screen-xl) { @include susy-breakpoint($bp-screen-xl, $susy) {
@include span(2); width: span(2);
} }
} }
...@@ -254,18 +259,18 @@ ...@@ -254,18 +259,18 @@
.signatory { .signatory {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@include span(12); width: span(12);
@media(min-width: $bp-screen-md) { @include susy-breakpoint($bp-screen-md, $susy) {
@include span(4); width: span(4);
} }
@media(min-width: $bp-screen-lg) { @include susy-breakpoint($bp-screen-lg, $susy) {
@include span(3); width: span(3);
} }
@media(min-width: $bp-screen-xl) { @include susy-breakpoint($bp-screen-xl, $susy) {
@include span(3); width: span(3);
} }
.signatory-signature { .signatory-signature {
...@@ -282,16 +287,9 @@ ...@@ -282,16 +287,9 @@
.accomplishment-metadata { .accomplishment-metadata {
@extend %layout; @extend %layout;
.accomplishment-metadata-title {
@include span(12);
}
} }
.wrapper-metadata { .wrapper-metadata .metadata {
@extend %layout;
.metadata {
@extend %divider-2; @extend %divider-2;
margin-bottom: spacing-vertical(small); margin-bottom: spacing-vertical(small);
border-bottom-color: palette(grayscale, x-back); border-bottom-color: palette(grayscale, x-back);
...@@ -302,14 +300,13 @@ ...@@ -302,14 +300,13 @@
padding-bottom: 0; padding-bottom: 0;
} }
@media(min-width: $bp-screen-md) { @include susy-breakpoint($bp-screen-md, $susy) {
@include span(4); @include gallery(4);
border-bottom: none; border-bottom: none;
padding-bottom: 0; padding-bottom: 0;
} }
} }
} }
}
.wrapper-accomplishment-related { .wrapper-accomplishment-related {
@extend %layout-wrapper; @extend %layout-wrapper;
...@@ -321,8 +318,8 @@ ...@@ -321,8 +318,8 @@
.accomplishment-brief { .accomplishment-brief {
margin-bottom: spacing-vertical(small); margin-bottom: spacing-vertical(small);
@media(min-width: $bp-screen-md) { @include susy-breakpoint($bp-screen-md, $susy) {
@include span(6); @include gallery(6);
} }
.accomplishment-type-symbol { .accomplishment-type-symbol {
...@@ -346,8 +343,8 @@ ...@@ -346,8 +343,8 @@
margin-bottom: 0; margin-bottom: 0;
} }
@media(min-width: $bp-screen-md) { @include susy-breakpoint($bp-screen-md, $susy) {
@include span(6); @include gallery(6);
margin-bottom: 0; margin-bottom: 0;
} }
} }
......
lms/static/certificates/sass/_print.scss
...@@ -212,7 +212,7 @@ ...@@ -212,7 +212,7 @@
.accomplishment-statement { .accomplishment-statement {
@extend %print-rendering-section; @extend %print-rendering-section;
@include span(8); width: span(8);
margin: 0 auto; margin: 0 auto;
} }
...@@ -244,7 +244,7 @@ ...@@ -244,7 +244,7 @@
.accomplishment-signatories { .accomplishment-signatories {
@extend %print-rendering-section; @extend %print-rendering-section;
@include span(12, before); @include span(12 last);
.signatory-credentials { .signatory-credentials {
font-size: 8pt; font-size: 8pt;
...@@ -271,7 +271,7 @@ ...@@ -271,7 +271,7 @@
&.has-many { &.has-many {
.signatory { .signatory {
@include span(2); @include gallery(2);
} }
} }
} }
......
lms/static/certificates/sass/_views.scss
...@@ -26,15 +26,15 @@ ...@@ -26,15 +26,15 @@
.content-main { .content-main {
margin-bottom: spacing-vertical(base); margin-bottom: spacing-vertical(base);
@media(min-width: $bp-screen-md) { @include susy-breakpoint($bp-screen-md, $susy) {
@include span(9, after); @include span(9 of 12 first);
} }
} }
.content-secondary { .content-secondary {
@media(min-width: $bp-screen-md) { @include susy-breakpoint($bp-screen-md, $susy) {
@include span(3, before); @include span(3 of 12 last);
} }
} }
} }
lms/static/sass/discussion/_discussion.scss
...@@ -177,6 +177,7 @@ body.discussion { ...@@ -177,6 +177,7 @@ body.discussion {
.container .discussion-body { .container .discussion-body {
@include clearfix(); @include clearfix();
display: block;
border: none; border: none;
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
...@@ -294,7 +295,7 @@ body.discussion { ...@@ -294,7 +295,7 @@ body.discussion {
// inline discussion module // inline discussion module
.discussion-module { .discussion-module {
@extend .discussion-body; @extend .discussion-body;
display: block;
position: relative; position: relative;
margin: $baseline 0; margin: $baseline 0;
padding: $baseline; padding: $baseline;
......
lms/static/sass/elements/_banners.scss
...@@ -22,7 +22,7 @@ $full-width-banner-margin: 20px; ...@@ -22,7 +22,7 @@ $full-width-banner-margin: 20px;
background: $black; background: $black;
opacity: 0.65; opacity: 0.65;
@media(min-width: $bp-screen-md) { @include susy-media($bp-screen-md) {
opacity: 0.4; opacity: 0.4;
} }
} }
...@@ -31,7 +31,7 @@ $full-width-banner-margin: 20px; ...@@ -31,7 +31,7 @@ $full-width-banner-margin: 20px;
.banner-background-image { .banner-background-image {
height: $full-width-banner-img-height; height: $full-width-banner-img-height;
@media(min-width: $full-width-banner-img-width) { @include susy-media($full-width-banner-img-width) {
height: auto; height: auto;
width: 100%; width: 100%;
} }
......
lms/static/sass/elements/_course-card.scss
.course-card { .course-card {
@include span(10); width: 85%;
@include pre(1);
@include post(1);
margin: { margin: {
left: auto; left: auto;
right: auto; right: auto;
...@@ -10,7 +8,9 @@ ...@@ -10,7 +8,9 @@
padding: $baseline/2 0; padding: $baseline/2 0;
.section { .section {
@extend .grid-container;
@extend .grid-manual; @extend .grid-manual;
padding: $baseline/2 $baseline; padding: $baseline/2 $baseline;
} }
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.header-img { .header-img {
max-width: 100%; max-width: 100%;
@media(min-width: $bp-screen-sm) { @include susy-media($bp-screen-sm) {
max-width: 191px; max-width: 191px;
} }
} }
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
.course-details { .course-details {
@include float(right); @include float(right);
width: 100%; width: 100%;
@media(min-width: $bp-screen-sm) { width: calc(100% - 191px); } @include susy-media($bp-screen-sm) { width: calc(100% - 191px); }
padding-left: $baseline*1.5; padding-left: $baseline*1.5;
.course-title { .course-title {
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
.message { .message {
margin-bottom: $baseline; margin-bottom: $baseline;
@media(min-width: $bp-screen-md) { @include susy-media($bp-screen-md) {
margin-bottom: 0; margin-bottom: 0;
} }
} }
...@@ -141,7 +141,7 @@ ...@@ -141,7 +141,7 @@
border-top: 1px solid palette(grayscale, back); border-top: 1px solid palette(grayscale, back);
padding-top: $baseline; padding-top: $baseline;
@media(min-width: $bp-screen-md) { @include susy-media($bp-screen-md) {
display: flex; display: flex;
align-items: center; align-items: center;
} }
......
lms/static/sass/elements/_program-card.scss
...@@ -13,14 +13,11 @@ ...@@ -13,14 +13,11 @@
margin-bottom: $baseline; margin-bottom: $baseline;
position: relative; position: relative;
@media(min-width: $bp-screen-md) { @include susy-media($bp-screen-md) {
@include span(6); @include span(6);
&:nth-child(2n) { &:nth-child(2n) {
@include span(6, before); @include margin-right(0);
}
&:nth-child(2n+1) {
@include span(6, after);
} }
} }
...@@ -45,9 +42,9 @@ ...@@ -45,9 +42,9 @@
overflow: hidden; overflow: hidden;
height: 166px; height: 166px;
@media(min-width: $bp-screen-sm) { height: 242px; } @include susy-media($bp-screen-sm) { height: 242px; }
@media(min-width: $bp-screen-md) { height: 116px; } @include susy-media($bp-screen-md) { height: 116px; }
@media(min-width: $bp-screen-lg) { height: 145px; } @include susy-media($bp-screen-lg) { height: 145px; }
.banner-image { .banner-image {
@include left(50%); @include left(50%);
...@@ -65,9 +62,9 @@ ...@@ -65,9 +62,9 @@
position: relative; position: relative;
margin-top: 156px; margin-top: 156px;
@media(min-width: $bp-screen-sm) { margin-top: 232px; } @include susy-media($bp-screen-sm) { margin-top: 232px; }
@media(min-width: $bp-screen-md) { margin-top: 106px; } @include susy-media($bp-screen-md) { margin-top: 106px; }
@media(min-width: $bp-screen-lg) { margin-top: 135px; } @include susy-media($bp-screen-lg) { margin-top: 135px; }
} }
.meta-info { .meta-info {
...@@ -79,13 +76,13 @@ ...@@ -79,13 +76,13 @@
} }
.organization { .organization {
@include span(6, none); @include span(6);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
.category { .category {
@include span(6, none); @include span(6);
@include text-align(right); @include text-align(right);
.category-text { .category-text {
......
lms/static/sass/shared-v2/_base.scss
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
} }
.content-wrapper { .content-wrapper {
@include span(12, none); width: span(12);
margin: 0 auto; margin: 0 auto;
@media print { @media print {
......
lms/static/sass/shared-v2/_footer.scss
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
.colophon { .colophon {
@include span(12); @include span(12);
@media(min-width: $bp-screen-sm) { @include susy-media($bp-screen-sm) {
@include span(8); @include span(8);
} }
...@@ -168,7 +168,7 @@ ...@@ -168,7 +168,7 @@
@include text-align(right); @include text-align(right);
vertical-align: bottom; vertical-align: bottom;
@media(min-width: $bp-screen-sm) { @include susy-media($bp-screen-sm) {
@include span(4); @include span(4);
@include margin-right(0); @include margin-right(0);
} }
......
lms/static/sass/shared-v2/_header.scss
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
.wrapper-header { .wrapper-header {
@include clearfix(); @include clearfix();
box-sizing: border-box; box-sizing: border-box;
height: 74px;
margin: 0 auto; margin: 0 auto;
padding: 10px 10px 0; padding: 10px 10px 0;
width: 100%; width: 100%;
......
lms/static/sass/shared/_header.scss
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
margin: 0 auto; margin: 0 auto;
padding: 18px ($baseline/2) 0; padding: 18px ($baseline/2) 0;
max-width: grid-width(12); max-width: grid-width(12);
width: 100%;
} }
h1.logo { h1.logo {
...@@ -323,6 +324,7 @@ ...@@ -323,6 +324,7 @@
.nav-courseware { .nav-courseware {
@include float(right); @include float(right);
margin-top: ($baseline/4);
list-style: none; list-style: none;
li, div { li, div {
......
lms/static/sass/views/_program-details.scss
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
.breadcrumb-wrapper { .breadcrumb-wrapper {
padding: $full-width-banner-margin; padding: $full-width-banner-margin;
@media(min-width: $bp-screen-xl) { @include susy-media(1200px) {
padding-left: 0; padding-left: 0;
} }
} }
......
lms/static/sass/views/_program-list.scss
...@@ -3,10 +3,9 @@ ...@@ -3,10 +3,9 @@
} }
.program-cards-container { .program-cards-container {
@include grid-container();
@include span(12); @include span(12);
@media(min-width: $bp-screen-md) { @include susy-media($bp-screen-md) {
@include span(9); @include span(9);
} }
} }
...@@ -16,7 +15,7 @@ ...@@ -16,7 +15,7 @@
@include float(right); @include float(right);
margin-bottom: $baseline; margin-bottom: $baseline;
@media(min-width: $bp-screen-md) { @include susy-media($bp-screen-md) {
@include span(3); @include span(3);
} }
...@@ -67,7 +66,6 @@ ...@@ -67,7 +66,6 @@
} }
.empty-programs-message { .empty-programs-message {
@include span(12);
border: 3px solid $gray-l4; border: 3px solid $gray-l4;
background: $gray-l6; background: $gray-l6;
padding: ($baseline*2) 0; padding: ($baseline*2) 0;
......
lms/templates/learner_dashboard/program_details_view.underscore
<header class="js-program-header program-header full-width-banner"></header> <header class="js-program-header program-header full-width-banner"></header>
<div class="program-details-content grid-container"> <div class="program-details-content grid-container">
<div class="js-program-progress-view"></div> <div class="js-program-progress-view"></div>
<div class="js-course-list row"></div> <div class="js-course-list"></div>
<aside class="js-course-sidebar"></aside> <aside class="js-course-sidebar"></aside>
</div> </div>
lms/templates/learner_dashboard/program_header_view.underscore
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
</picture> </picture>
<div class="banner-content grid-container"> <div class="banner-content grid-container">
<h2 class="hd-1 title row"><%- programData.name %></h2> <h2 class="hd-1 title"><%- programData.name %></h2>
<p class="hd-4 subtitle row"><%- programData.subtitle %></p> <p class="hd-4 subtitle"><%- programData.subtitle %></p>
<% if (programData.organizations.length) { %> <% if (programData.organizations.length) { %>
<div class="org-wrapper"> <div class="org-wrapper">
<% _.each(programData.organizations, function(org) { %> <% _.each(programData.organizations, function(org) { %>
......
package.json
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
"backbone": "~1.3.2", "backbone": "~1.3.2",
"backbone-validation": "~0.11.5", "backbone-validation": "~0.11.5",
"coffee-script": "1.6.1", "coffee-script": "1.6.1",
"edx-pattern-library": "~0.17.0", "edx-pattern-library": "0.16.6",
"edx-ui-toolkit": "1.5.0", "edx-ui-toolkit": "1.5.0",
"jquery": "~2.2.0", "jquery": "~2.2.0",
"jquery-migrate": "^1.4.1", "jquery-migrate": "^1.4.1",
......
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