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

cleaned up variables styling to sync up closer to studio, incorporated fontawesome icons into discusison home with basic positioning

Browse Source
This commit is contained in:
marco
2013-06-05 15:17:19 -04:00
parent f213113361
commit 786d8a9d7c
3 changed files with 181 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
lms/static/sass/_discussion.scss
View File

@@ -1363,26 +1363,57 @@ body.discussion {
.row-title {
padding: $baseline;
display: inline-block;
width: 20%;
width: 15%;
background-color: $light-gray;
font-size: 12px;
}
.row-item {
.row-item-full, .row-item {
display: inline-block;
font-size: 12px;
width: 20%;
width: 25%;
vertical-align: middle;
i.icon {
.icon {
padding: 0 $baseline/2;
font-size: 24px;
display: inline-block;
vertical-align: middle;
}
.row-description {
display: inline-block;
width: 70%;
vertical-align: middle;
}
}
.row-item-full {
width: 70%;
.row-description {
width: 90%;
}
}
}
}
.helpgrid-row-navigation {
.icon-sort-down {color: $light-gray;}
.icon-search {color: $light-gray;}
.icon-sort {color: $light-gray;}
}
.helpgrid-row-participation {
.icon-plus {color: $green-u2;}
.icon-flag {color: $red-u2;}
.icon-star {color: $blue;}
}
.helpgrid-row-notification {
.icon-sign-blank {color: $green;}
}
.discussion-article {
position: relative;
padding: 40px;

118
lms/static/sass/base/_variables.scss
View File

@@ -1,5 +1,9 @@
// lms - utilities - variables
// ====================
$baseline: 20px;
// grid
$gw-column: 80px;
$gw-gutter: 20px;
@@ -9,6 +13,9 @@ $fg-max-columns: 12;
$fg-max-width: 1400px;
$fg-min-width: 810px;
// ====================
// fonts
$sans-serif: 'Open Sans', $verdana;
$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$body-font-family: $sans-serif;
@@ -22,12 +29,115 @@ $base-font-color: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100);
$very-light-text: #fff;
$white: rgb(255,255,255);
// ====================
// colors - new reorganized colors
$black: rgb(0,0,0);
$blue: rgb(29,157,217);
$pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221);
$black-t0: rgba(0,0,0,0.125);
$black-t1: rgba(0,0,0,0.25);
$black-t2: rgba(0,0,0,0.50);
$black-t3: rgba(0,0,0,0.75);
$white: rgb(255,255,255);
$white-t0: rgba(255,255,255,0.125);
$white-t1: rgba(255,255,255,0.25);
$white-t2: rgba(255,255,255,0.50);
$white-t3: rgba(255,255,255,0.75);
$gray: rgb(127,127,127);
$gray-l1: tint($gray,20%);
$gray-l2: tint($gray,40%);
$gray-l3: tint($gray,60%);
$gray-l4: tint($gray,80%);
$gray-l5: tint($gray,90%);
$gray-l6: tint($gray,95%);
$gray-d1: shade($gray,20%);
$gray-d2: shade($gray,40%);
$gray-d3: shade($gray,60%);
$gray-d4: shade($gray,80%);
//new blue
$pink: rgb(183,37,103);
$pink-l1: tint($pink,20%);
$pink-l2: tint($pink,40%);
$pink-l3: tint($pink,60%);
$pink-l4: tint($pink,80%);
$pink-l5: tint($pink,90%);
$pink-d1: shade($pink,20%);
$pink-d2: shade($pink,40%);
$pink-d3: shade($pink,60%);
$pink-d4: shade($pink,80%);
$pink-s1: saturate($pink,15%);
$pink-s2: saturate($pink,30%);
$pink-s3: saturate($pink,45%);
$pink-u1: desaturate($pink,15%);
$pink-u2: desaturate($pink,30%);
$pink-u3: desaturate($pink,45%);
$red: rgb(178, 6, 16);
$red-l1: tint($red,20%);
$red-l2: tint($red,40%);
$red-l3: tint($red,60%);
$red-l4: tint($red,80%);
$red-l5: tint($red,90%);
$red-d1: shade($red,20%);
$red-d2: shade($red,40%);
$red-d3: shade($red,60%);
$red-d4: shade($red,80%);
$red-s1: saturate($red,15%);
$red-s2: saturate($red,30%);
$red-s3: saturate($red,45%);
$red-u1: desaturate($red,15%);
$red-u2: desaturate($red,30%);
$red-u3: desaturate($red,45%);
$green: rgb(37, 184, 90);
$green-l1: tint($green,20%);
$green-l2: tint($green,40%);
$green-l3: tint($green,60%);
$green-l4: tint($green,80%);
$green-l5: tint($green,90%);
$green-d1: shade($green,20%);
$green-d2: shade($green,40%);
$green-d3: shade($green,60%);
$green-d4: shade($green,80%);
$green-s1: saturate($green,15%);
$green-s2: saturate($green,30%);
$green-s3: saturate($green,45%);
$green-u1: desaturate($green,15%);
$green-u2: desaturate($green,30%);
$green-u3: desaturate($green,45%);
//new yellow
$orange: rgb(237, 189, 60);
$orange-l1: tint($orange,20%);
$orange-l2: tint($orange,40%);
$orange-l3: tint($orange,60%);
$orange-l4: tint($orange,80%);
$orange-l5: tint($orange,90%);
$orange-d1: shade($orange,20%);
$orange-d2: shade($orange,40%);
$orange-d3: shade($orange,60%);
$orange-d4: shade($orange,80%);
$orange-s1: saturate($orange,15%);
$orange-s2: saturate($orange,30%);
$orange-s3: saturate($orange,45%);
$orange-u1: desaturate($orange,15%);
$orange-u2: desaturate($orange,30%);
$orange-u3: desaturate($orange,45%);
$shadow: rgba(0,0,0,0.2);
$shadow-l1: rgba(0,0,0,0.1);
$shadow-l2: rgba(0,0,0,0.05);
$shadow-d1: rgba(0,0,0,0.4);
// ====================
// colors - old variables
$blue: rgb(29,157,217); //old blue
$yellow: rgb(255, 252, 221); //old yellow
$error-red: rgb(253, 87, 87);
$light-gray: rgb(221, 221, 221);
$dark-gray: rgb(51, 51, 51);

41
lms/templates/discussion/index.html
View File

@@ -45,21 +45,44 @@
<section class="home-helpgrid">
<ul class="helpgrid-list">
<li class="helpgrid-row helpgrid-row-navigation">
<span class="row-title">Navigation</span>
<span class="row-title">Find discussions</span>
<div class="row-item">
<i class="icon icon-sort-down"></i>Focus in on specific topics
<i class="icon icon-sort-down"></i>
<span class="row-description">Focus in on specific topics</span>
</div>
<div class="row-item"><i class="icon icon-search"></i>Search for specific posts</div>
<div class="row-item"><i class="icon icon-sort"></i>Sort by date, vote, or comments</div>
<div class="row-item">
<i class="icon icon-search"></i>
<span class="row-description">Search for specific posts </span>
</div>
<div class="row-item">
<i class="icon icon-sort"></i>
<span class="row-description">Sort by date, vote, or comments </span>
</div>
</li>
<li class="helpgrid-row helpgrid-row-participation">
<span class="row-title">Participation</span>
<div class="row-item"><i class="icon icon-plus"></i>Upvote posts and good responses</div>
<div class="row-item"><i class="icon icon-flag"></i>Report Forum Misuse</div>
<div class="row-item"><i class="icon icon-star"></i>Follow posts for updates</div>
<span class="row-title">Engage with posts</span>
<div class="row-item">
<i class="icon icon-plus"></i>
<span class="row-description">Upvote posts and good responses</span>
</div>
<div class="row-item">
<i class="icon icon-flag"></i>
<span class="row-description">Report Forum Misuse</span>
</div>
<div class="row-item">
<i class="icon icon-star"></i>
<span class="row-description">Follow posts for updates</span>
</div>
</li>
<li class="helpgrid-row helpgrid-row-notification">
<span class="row-title">Notification</span>
<span class="row-title">Reconnect through email</span>
<div class="row-item-full">
<span class="icon-stack">
<i class="icon-sign-blank icon-stack-base"></i>
<i class="icon-envelope icon-light"></i>
</span>
<span class="row-description">If enabled, you will receive an email digest of all the posts you are following which have new content you haven&#39;t seen or already been emailed about. </span>
</div>
</li>
</ul>
</section>