Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

renames some scss files for better orginization, sets fixed widths on main containers to avoid akward scaling issues untill media queries can be added for more responsive scaling

Browse Source
This commit is contained in:
Galen Frechette
2012-07-16 22:23:43 -04:00
parent 600aff59a6
commit 767469381b
23 changed files with 178 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
lms/static/images/courses/history.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 178 KiB

After

Width:  |  Height:  |  Size: 114 KiB

2
lms/static/sass/_about_pages.scss
View File

@@ -1,5 +1,5 @@
.container.about {
padding: 20px 0 120px;
padding: 20px 10px 120px;
> nav {
margin-bottom: 80px;

3
lms/static/sass/_course_about.scss
View File

@@ -24,8 +24,9 @@
@include clearfix;
margin: 0 auto;
max-width: 1200px;
padding: 0px 10px;
position: relative;
width: flex-grid(12);
width: grid-width(12);
z-index: 2;

51
lms/static/sass/_dashboard.scss
View File

@@ -48,42 +48,43 @@
padding-bottom: 10px;
&:hover {
.icon {
.title .icon {
opacity: 1;
}
}
p {
span.title {
color: $lighter-base-font-color;
float: left;
font-family: $sans-serif;
span {
font-weight: 700;
margin-left: 12px;
.icon {
background-size: cover;
float: left;
height: 19px;
margin: 2px 8px 0 0;
opacity: 0.6;
@include transition(all, 0.15s, linear);
width: 19px;
&.email-icon {
@include background-image(url('/static/images/portal-icons/email-icon.png'));
}
&.location-icon {
@include background-image(url('/static/images/portal-icons/home-icon.png'));
}
&.language-icon {
@include background-image(url('/static/images/portal-icons/language-icon.png'));
}
}
}
.icon {
background-size: cover;
float: left;
height: 19px;
margin: 2px 8px 0 0;
opacity: 0.6;
@include transition(all, 0.15s, linear);
width: 19px;
&.email-icon {
@include background-image(url('/static/images/portal-icons/email-icon.png'));
}
&.location-icon {
@include background-image(url('/static/images/portal-icons/home-icon.png'));
}
&.language-icon {
@include background-image(url('/static/images/portal-icons/language-icon.png'));
}
span.data {
color: $lighter-base-font-color;
font-weight: 700;
margin-left: 12px;
}
}
}

15
lms/static/sass/_home.scss
View File

@@ -17,6 +17,7 @@
@extend .animation-home-header-pop-up;
max-width: 1200px;
margin: 0 auto;
padding: 0 10px;
position: relative;
text-align: center;
@@ -32,7 +33,7 @@
border: 1px solid rgb(100,100,100);
@include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
@include inline-block;
padding: 30px 50px 30px;
padding: 20px 30px 30px;
position: relative;
text-align: center;
z-index: 1;
@@ -40,22 +41,10 @@
.title {
@include inline-block;
//margin-right: 50px;
//padding-right: 50px;
position: relative;
text-align: left;
vertical-align: middle;
&::before {
@extend .faded-vertical-divider;
//content: "";
display: block;
height: 170px;
position: absolute;
right: 0px;
top: -20px;
}
&::after {
@extend .faded-vertical-divider-light;
content: "";

145
lms/static/sass/application.css
View File

@@ -468,8 +468,8 @@ a:link, a:visited {
.container {
zoom: 1;
margin: 0 auto 0;
max-width: 1200px;
width: 100%; }
padding: 0px 10px;
width: 1180px; }
.container:before, .container:after {
content: "";
display: table; }
@@ -489,7 +489,7 @@ a:link, a:visited {
clear: both; }
.static-container .inner-wrapper {
margin: 0 auto 0;
width: 82.915%; }
width: 83.051%; }
.static-container ol, .static-container ul {
list-style: disc; }
.static-container ol li, .static-container ul li {
@@ -532,7 +532,7 @@ a:link, a:visited {
height: 1px;
width: 100%; }
.faded-vertical-divider, .vertical-divider, footer nav .top ol li::after, footer nav .top .primary a.logo::after, header.global h1.logo::before, .home > header .title::before, .home .university-partners .partners li.partner::before, .find-courses header.search .inner-wrapper.main-search .logo::after, .find-courses header.search .inner-wrapper.university-search .logo::after, .university-profile header.search .inner-wrapper.main-search .logo::after, .university-profile header.search .inner-wrapper.university-search .logo::after {
.faded-vertical-divider, .vertical-divider, footer nav .top ol li::after, footer nav .top .primary a.logo::after, header.global h1.logo::before, .home .university-partners .partners li.partner::before, .find-courses header.search .inner-wrapper.main-search .logo::after, .find-courses header.search .inner-wrapper.university-search .logo::after, .university-profile header.search .inner-wrapper.main-search .logo::after, .university-profile header.search .inner-wrapper.university-search .logo::after {
background-image: -webkit-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -moz-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
background-image: -ms-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
@@ -1501,13 +1501,10 @@ footer {
max-width: 100%;
position: absolute; }
footer nav {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-width: 1200px;
margin: 0 auto;
padding: 30px 10px 0;
width: 100%; }
width: 1180px; }
footer nav .top {
border-bottom: 1px solid #c8c8c8;
zoom: 1;
@@ -1716,14 +1713,11 @@ header.global {
z-index: 10; }
header.global nav {
zoom: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 40px;
margin: 0 auto;
max-width: 1200px;
padding-top: 14px;
width: 100%; }
padding: 14px 10px 0px;
width: 1180px; }
header.global nav:before, header.global nav:after {
content: "";
display: table; }
@@ -1922,9 +1916,9 @@ header.global {
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.3);
border: 1px solid #646464;
display: none;
padding: 5px 10px;
@@ -2012,7 +2006,7 @@ header.global {
.highlighted-courses .courses, .find-courses .courses {
zoom: 1;
padding: 40px 15px 15px; }
padding: 40px 0px 15px; }
.highlighted-courses .courses:before, .highlighted-courses .courses:after, .find-courses .courses:before, .find-courses .courses:after {
content: "";
display: table; }
@@ -2425,7 +2419,7 @@ header.global {
left: 50%;
padding: 8px;
position: absolute;
width: 485px;
width: 480px;
z-index: 12; }
.modal.video-modal {
left: 50%;
@@ -2708,6 +2702,7 @@ header.global {
.home > header .outer-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 10px;
position: relative;
text-align: center; }
.home > header .outer-wrapper:hover .main-cta {
@@ -2727,7 +2722,7 @@ header.global {
zoom: 1;
*display: inline;
*vertical-align: auto;
padding: 30px 50px 30px;
padding: 20px 30px 30px;
position: relative;
text-align: center;
z-index: 1; }
@@ -2742,12 +2737,6 @@ header.global {
position: relative;
text-align: left;
vertical-align: middle; }
.home > header .title::before {
display: block;
height: 170px;
position: absolute;
right: 0px;
top: -20px; }
.home > header .title::after {
content: "";
display: block;
@@ -3615,60 +3604,61 @@ header.global {
display: table; }
.dashboard .profile-sidebar header.profile .user-info > ul li:after {
clear: both; }
.dashboard .profile-sidebar header.profile .user-info > ul li:hover .icon {
.dashboard .profile-sidebar header.profile .user-info > ul li:hover .title .icon {
opacity: 1; }
.dashboard .profile-sidebar header.profile .user-info > ul li p {
.dashboard .profile-sidebar header.profile .user-info > ul li span.title {
color: #a0a0a0;
float: left;
font-family: "Open Sans", Verdana, Geneva, sans-serif; }
.dashboard .profile-sidebar header.profile .user-info > ul li p span {
font-weight: 700;
margin-left: 12px; }
.dashboard .profile-sidebar header.profile .user-info > ul li .icon {
background-size: cover;
float: left;
height: 19px;
margin: 2px 8px 0 0;
opacity: 0.6;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 19px; }
.dashboard .profile-sidebar header.profile .user-info > ul li .icon.email-icon {
background-image: url("/static/images/portal-icons/email-icon.png");
background-image: url("/static/images/portal-icons/email-icon.png");
background-image: url("/static/images/portal-icons/email-icon.png");
background-image: url("/static/images/portal-icons/email-icon.png");
background-image: url("/static/images/portal-icons/email-icon.png"); }
.dashboard .profile-sidebar header.profile .user-info > ul li .icon.location-icon {
background-image: url("/static/images/portal-icons/home-icon.png");
background-image: url("/static/images/portal-icons/home-icon.png");
background-image: url("/static/images/portal-icons/home-icon.png");
background-image: url("/static/images/portal-icons/home-icon.png");
background-image: url("/static/images/portal-icons/home-icon.png"); }
.dashboard .profile-sidebar header.profile .user-info > ul li .icon.language-icon {
background-image: url("/static/images/portal-icons/language-icon.png");
background-image: url("/static/images/portal-icons/language-icon.png");
background-image: url("/static/images/portal-icons/language-icon.png");
background-image: url("/static/images/portal-icons/language-icon.png");
background-image: url("/static/images/portal-icons/language-icon.png"); }
.dashboard .profile-sidebar header.profile .user-info > ul li span.title .icon {
background-size: cover;
float: left;
height: 19px;
margin: 2px 8px 0 0;
opacity: 0.6;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
width: 19px; }
.dashboard .profile-sidebar header.profile .user-info > ul li span.title .icon.email-icon {
background-image: url("/static/images/portal-icons/email-icon.png");
background-image: url("/static/images/portal-icons/email-icon.png");
background-image: url("/static/images/portal-icons/email-icon.png");
background-image: url("/static/images/portal-icons/email-icon.png");
background-image: url("/static/images/portal-icons/email-icon.png"); }
.dashboard .profile-sidebar header.profile .user-info > ul li span.title .icon.location-icon {
background-image: url("/static/images/portal-icons/home-icon.png");
background-image: url("/static/images/portal-icons/home-icon.png");
background-image: url("/static/images/portal-icons/home-icon.png");
background-image: url("/static/images/portal-icons/home-icon.png");
background-image: url("/static/images/portal-icons/home-icon.png"); }
.dashboard .profile-sidebar header.profile .user-info > ul li span.title .icon.language-icon {
background-image: url("/static/images/portal-icons/language-icon.png");
background-image: url("/static/images/portal-icons/language-icon.png");
background-image: url("/static/images/portal-icons/language-icon.png");
background-image: url("/static/images/portal-icons/language-icon.png");
background-image: url("/static/images/portal-icons/language-icon.png"); }
.dashboard .profile-sidebar header.profile .user-info > ul li span.data {
color: #a0a0a0;
font-weight: 700;
margin-left: 12px; }
.dashboard .my-courses {
float: left;
margin: 0px;
@@ -4303,8 +4293,9 @@ nav.course-material {
zoom: 1;
margin: 0 auto;
max-width: 1200px;
padding: 0px 10px;
position: relative;
width: 100%;
width: 1180px;
z-index: 2; }
.course-info header.course-profile .intro-inner-wrapper:before, .course-info header.course-profile .intro-inner-wrapper:after {
content: "";
@@ -4881,7 +4872,7 @@ nav.course-material {
margin-bottom: 15px; }
.container.about {
padding: 20px 0 120px; }
padding: 20px 10px 120px; }
.container.about > nav {
margin-bottom: 80px;
text-align: center;

34
lms/static/sass/application.scss
View File

@@ -1,22 +1,28 @@
@import 'bourbon/bourbon';
@import 'base_styles/reset';
@import 'base_styles/font_face';
@import 'base_styles/base';
@import 'base_styles/base_mixins';
@import 'base_styles/base_extends';
@import 'base_styles/base_animations';
@import 'base/reset';
@import 'base/font_face';
@import 'base/variables';
@import 'base/base';
@import 'base/mixins';
@import 'base/extends';
@import 'base/animations';
// Courseware styles
@import 'sass_old/base/variables';
@import 'sass_old/base/extends';
@import 'sass_old/base/functions';
@import 'shared_styles/shared_forms';
@import 'shared_styles/shared_footer';
@import 'shared_styles/shared_header';
@import 'shared_styles/course_object';
@import 'shared_styles/shared_course_filter';
@import 'shared_styles/shared_modal';
@import 'shared_styles/activation_messages';
// Multicourse styles
@import 'shared/forms';
@import 'shared/footer';
@import 'shared/header';
@import 'shared/course_object';
@import 'shared/course_filter';
@import 'shared/modal';
@import 'shared/activation_messages';
@import 'home';
@import 'dashboard';
@@ -27,6 +33,8 @@
@import 'about_pages';
@import 'press_release';
// Courseware styles
@import 'sass_old/courseware/courseware';
@import 'sass_old/courseware/sequence-nav';
@import 'sass_old/courseware/sidebar';

0
lms/static/sass/base_styles/_base_animations.scss → lms/static/sass/base/_animations.scss
View File

22
lms/static/sass/base_styles/_base.scss → lms/static/sass/base/_base.scss
View File

@@ -1,21 +1,3 @@
$gw-column: 60px;
$gw-gutter: 25px;
$fg-column: $gw-column;
$fg-gutter: $gw-gutter;
$fg-max-columns: 12;
$sans-serif: 'Open Sans', $verdana;
$serif: $georgia;
$base-font-color: rgb(60,60,60);
$lighter-base-font-color: rgb(160,160,160);
$blue: rgb(29,157,217);
$pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221);
$error-red: rgb(253, 87, 87);
html, body {
background: rgb(250,250,250);
font-family: $sans-serif;
@@ -100,8 +82,8 @@ a:link, a:visited {
.container {
@include clearfix;
margin: 0 auto 0;
max-width: 1200px;
width: flex-grid(12);
padding: 0px 10px;
width: grid-width(12);
}
.static-container {

1
lms/static/sass/base_styles/_base_extends.scss → lms/static/sass/base/_extends.scss
View File

@@ -77,6 +77,7 @@
border: none;
}
//Styles for Error messages
.error-message-colors {
background: $error-red;
border: 1px solid rgb(202, 17, 17);

0
lms/static/sass/base_styles/_font_face.scss → lms/static/sass/base/_font_face.scss
View File

0
lms/static/sass/base_styles/_base_mixins.scss → lms/static/sass/base/_mixins.scss
View File

0
lms/static/sass/base_styles/_reset.scss → lms/static/sass/base/_reset.scss
View File

18
lms/static/sass/base/_variables.scss Normal file
View File

@@ -0,0 +1,18 @@
$gw-column: 80px;
$gw-gutter: 20px;
$fg-column: $gw-column;
$fg-gutter: $gw-gutter;
$fg-max-columns: 12;
$sans-serif: 'Open Sans', $verdana;
$serif: $georgia;
$base-font-color: rgb(60,60,60);
$lighter-base-font-color: rgb(160,160,160);
$blue: rgb(29,157,217);
$pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221);
$error-red: rgb(253, 87, 87);

0
lms/static/sass/shared_styles/_activation_messages.scss → lms/static/sass/shared/_activation_messages.scss
View File

0
lms/static/sass/shared_styles/_shared_course_filter.scss → lms/static/sass/shared/_course_filter.scss
View File

2
lms/static/sass/shared_styles/_course_object.scss → lms/static/sass/shared/_course_object.scss
View File

@@ -1,7 +1,7 @@
.highlighted-courses, .find-courses {
.courses {
@include clearfix;
padding: 40px 15px 15px;
padding: 40px 0px 15px;
.course {
background: rgb(250,250,250);

3
lms/static/sass/shared_styles/_shared_footer.scss → lms/static/sass/shared/_footer.scss
View File

@@ -12,11 +12,10 @@ footer {
}
nav {
@include box-sizing(border-box);
max-width: 1200px;
margin: 0 auto;
padding: 30px 10px 0;
width: flex-grid(12);
width: grid-width(12);
.top {
border-bottom: 1px solid rgb(200,200,200);

0
lms/static/sass/shared_styles/_shared_forms.scss → lms/static/sass/shared/_forms.scss
View File

7
lms/static/sass/shared_styles/_shared_header.scss → lms/static/sass/shared/_header.scss
View File

@@ -9,12 +9,11 @@ header.global {
nav {
@include clearfix;
@include box-sizing(border-box);
height: 40px;
margin: 0 auto;
max-width: 1200px;
padding-top: 14px;
width: flex-grid(12);
padding: 14px 10px 0px;
width: grid-width(12);
}
h1.logo {
@@ -187,7 +186,7 @@ header.global {
ul.dropdown-menu {
background: rgb(252,252,252);
@include border-radius(4px);
@include box-shadow(0 2px 10px 0 rgba(0,0,0, 0.4));
@include box-shadow(0 2px 24px 0 rgba(0,0,0, 0.3));
border: 1px solid rgb(100,100,100);
display: none;
padding: 5px 10px;

2
lms/static/sass/shared_styles/_shared_modal.scss → lms/static/sass/shared/_modal.scss
View File

@@ -20,7 +20,7 @@
left: 50%;
padding: 8px;
position: absolute;
width: grid-width(6);
width: grid-width(5);
z-index: 12;
&.video-modal {

28
lms/templates/course.html
View File

@@ -31,3 +31,31 @@
<p class="university">${course.get_about_section('university')}</p>
</div>
</article>
<article id="${course.id}"class="course">
<div class="inner-wrapper">
<header class="course-preview">
<a href="${reverse('about_course', args=[course.id])}">
<hgroup>
<h2>${course.get_about_section('title')}</h2>
</hgroup>
<div class="info-link">&#x2794;</div>
</a>
</header>
<section class="info">
<div class="cover-image">
<img src="${static.url('images/courses/history.png')}">
</div>
<div class="desc">
<p>An advanced introduction to analog circuits. An advanced introduction to analog circuits.</p>
</div>
<div class="bottom">
<a href="#" class="university">${course.get_about_section('university')}</a>
<span class="start-date">7/23/12</span>
</div>
</section>
</div>
<div class="meta-info">
<p class="university">${course.get_about_section('university')}</p>
</div>
</article>

6
lms/templates/dashboard.html
View File

@@ -11,13 +11,13 @@
<section class="user-info">
<ul>
<li>
<div class="icon email-icon"></div><p>Email<span>${ user.email }</span></p>
<span class="title"><div class="icon email-icon"></div>Email</span><span class="data">${ user.email }</span>
</li>
<li>
<div class="icon location-icon"></div><p>Location<span>${ user.profile.location }</span></p>
<span class="title"><div class="icon location-icon"></div>Location</span><span class="data">${ user.profile.location }</span>
</li>
<li>
<div class="icon language-icon"></div><p>Language<span>${ user.profile.language }</span></p>
<span class="title"><div class="icon language-icon"></div>Language</span><span class="data">${ user.profile.language }</span>
</li>
</ul>
</section>