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

More style for the textbook page and various style fixes

Browse Source 
--HG--
branch : kf-refactor
This commit is contained in:
Kyle Fiedler
2012-01-06 13:19:57 -05:00
parent b98d833762
commit 170f81a487
16 changed files with 273 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-extends.scssc
View File

Binary file not shown.

BIN
.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-variables.scssc
View File

Binary file not shown.

BIN
.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base.scssc
View File

Binary file not shown.

BIN
.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_courseware.scssc
View File

Binary file not shown.

BIN
.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_profile.scssc
View File

Binary file not shown.

BIN
.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_textbook.scssc
View File

Binary file not shown.

14
courseware.html
View File

@@ -25,11 +25,13 @@ $('#hide_acc').click(function() {
<%include file="navigation.html" />
<section class="main-content">
<div id="accordion">
${accordion}
</div>
<div class="course-wrapper">
<div id="accordion">
${accordion}
</div>
<section class="course-content">
${content}
</section>
<section class="course-content">
${content}
</section>
</div>
</section>

2
help.html
View File

@@ -2,7 +2,7 @@
<%include file="navigation.html" />
<section>
<section class="main-content">
<h1>Help</h1>
<p> If you need help, first try <a href="discussion/questions/">asking a question in the forums</a> and in the IRC channel (irc.mitx.org, channel #6002). As the semester starts, we will add a Frequently Asked Questions section.</p>

73
profile.html
View File

@@ -68,51 +68,52 @@ $(function() {
<%include file="navigation.html" />
<section class="main-content">
<section class="user-info">
<div class="profile-wrapper">
<section class="user-info">
<h1>${name}</h1>
<h1>${name}</h1>
<ul>
<li>Forum name: ${username}</li>
<li>E-mail: ${email}</li>
<li>Location: ${location}</li>
<li>Language: ${language}</li>
<li>Password: ********</li>
</ul>
<ul>
<li>Forum name: ${username}</li>
<li>E-mail: ${email}</li>
<li>Location: ${location}</li>
<li>Language: ${language}</li>
<li>Password: ********</li>
</ul>
<!-- <div><a href="#change_password_pop">Reset password</a></div> -->
<!-- hidden trigger for password -->
<!-- <div><a href="#change_password_pop">Reset password</a></div> -->
<!-- hidden trigger for password -->
<div id="change_password_pop">
<h2>Password reset</h2>
<div id="change_password_pop">
<h2>Password reset</h2>
<p>We'll e-mail you a password reset link at ${email}.</p>
<input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
<p>We'll e-mail you a password reset link at ${email}.</p>
<input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
<input type="button" id="pwd_reset_button" value="Reset Password" />
</div>
<input type="button" id="pwd_reset_button" value="Reset Password" />
</div>
</section>
</section>
<section class="course-info">
<h1>Course Progress</h1>
<section class="course-info">
<h1>Course Progress</h1>
<!-- <div id="description"></div> -->
<!-- <div id="description"></div> -->
<ol>
% for hw in homeworks:
<li>
<h2>${ hw['chapter'] }</h2>
<h3>${ hw['section'] }</h3>
<ol>
% for hw in homeworks:
<li>
<h2>${ hw['chapter'] }</h2>
<h3>${ hw['section'] }</h3>
<ul>
% for score in hw['scores']:
<li>${ score[0] }/${ score[1] }</li>
% endfor
</ul>
</li>
% endfor
</ol>
</section>
<ul>
% for score in hw['scores']:
<li>${ score[0] }/${ score[1] }</li>
% endfor
</ul>
</li>
% endfor
</ol>
</section>
</div>
</section>

37
sass/_base-extends.scss
View File

@@ -6,20 +6,27 @@
visibility: hidden;
}
.sidebar {
width: grid-width(4);
float: left;
margin-right: $gw-gutter;
}
.content {
width: grid-width(8);
float: left;
}
.wrapper {
margin: 0 auto;
max-width: $max-width;
width: grid-width(12);
text-align: left;
margin: 0 auto;
max-width: $max-width;
width: grid-width(12);
text-align: left;
}
.button {
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%), 0 0 3px #ccc);
@include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
@include border-radius(3px);
border: 1px solid darken($mit-red, 10%);
padding: 10px 15px;
color: #fff;
font: bold $body-font-size $body-font-family;
text-shadow: 0 1px 0 darken($mit-red, 10%);
cursor: pointer;
&:hover, &:focus {
@include box-shadow(inset 0 1px 0 lighten($mit-red, 20%), 0 0 3px #ccc);
@include linear-gradient(lighten($mit-red, 10%), darken($mit-red, 5%));
border: 1px solid darken($mit-red, 20%);
}
}

11
sass/_base-variables.scss
View File

@@ -8,11 +8,6 @@
@return $base-line-height * $amount;
}
@mixin border-box {
@include box-sizing(border-box);
}
// Variables
// ---------------------------------------- //
@@ -22,8 +17,8 @@ $body-font-size: 14px;
// grid
$columns: 12;
$column-width: golden-ratio($body-font-size, 4);
$gutter-width: golden-ratio($body-font-size, 1);
$column-width: 80px;
$gutter-width: 25px;
$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width);
$gw-column: perc($column-width);
@@ -31,7 +26,7 @@ $gw-gutter: perc($gutter-width);
$body-line-height: golden-ratio($body-font-size, 1);
// color
$light-gray: #f3f3f3;
$light-gray: #ddd;
$dark-gray: #333;
$mit-red: #993333;

30
sass/_base.scss
View File

@@ -1,3 +1,33 @@
h1 {
}
h2 {
}
h3 {
}
p {
margin-bottom: $body-line-height;
}
#{$all-text-inputs}, textarea {
@include border-radius(3px);
@include box-shadow(0 -1px 0 #fff);
@include linear-gradient(#eee, #fff);
border: 1px solid #bbb;
font: $body-font-size $body-font-family;
padding: 8px;
&:focus {
border-color: $mit-red;
}
}
input[type="submit"], input[type="button"], button {
// @extend .button;
}

116
sass/_courseware.scss
View File

@@ -1,65 +1,77 @@
div#accordion {
@include box-shadow( inset -1px 0 0 #f6f6f6);
background: #e3e3e3;
border-right: 1px solid #d3d3d3;
display: table-cell;
font-family: $body-font-family;
text-shadow: 0 1px 0 #f6f6f6;
vertical-align: top;
width: 280px;
div.course-wrapper {
display: table;
width: 100%;
h3 {
&.ui-accordion-header {
color: #000;
div#accordion {
@include box-shadow( inset -1px 0 0 #f6f6f6);
background: #e3e3e3;
border-right: 1px solid #d3d3d3;
display: table-cell;
font-family: $body-font-family;
text-shadow: 0 1px 0 #f6f6f6;
vertical-align: top;
width: grid-width(3);
a {
font-size: $body-font-size;
color: lighten($text-color, 10%);
}
&.ui-state-default {
background: none;
font-weight: normal;
border: none;
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
}
&.ui-state-hover {
border: none;
border-bottom: 1px solid #d3d3d3;
}
&.ui-state-active {
background: none;
border-bottom: 1px solid #aaa;
border: 0;
h3 {
&.ui-accordion-header {
color: #000;
font-weight: bold;
@include box-shadow(none);
a {
font-size: $body-font-size;
color: lighten($text-color, 10%);
}
&.ui-state-default {
background: none;
font-weight: normal;
border: none;
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
}
&.ui-state-hover {
border: none;
border-bottom: 1px solid #d3d3d3;
}
&.ui-state-active {
background: none;
border-bottom: 1px solid #aaa;
border: 0;
color: #000;
font-weight: bold;
@include box-shadow(none);
a {
color: #000;
}
}
}
}
ul.ui-accordion-content {
@include border-radius(0);
@include box-shadow( inset -1px 0 0 #e6e6e6);
background: #d6d6d6;
border: none;
border-top: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
font-size: 12px;
margin: 0;
li {
&.active {
font-weight: bold;
}
}
}
}
ul.ui-accordion-content {
@include border-radius(0);
@include box-shadow( inset -1px 0 0 #e6e6e6);
background: #d6d6d6;
border: none;
border-top: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
font-size: 12px;
margin: 0;
section.course-content {
@include box-sizing(border-box);
display: table-cell;
padding: $gw-gutter;
vertical-align: top;
width: grid-width(9);
}
}
section.course-content {
@include box-sizing(border-box);
display: table-cell;
padding: $gw-gutter;
vertical-align: top;
}

35
sass/_profile.scss
View File

@@ -1,17 +1,28 @@
section.user-info {
width: grid-width(6);
float: left;
margin-right: $gw-gutter;
}
div.profile-wrapper {
display: table;
section.course-info {
width: grid-width(6);
float: left;
section.user-info {
@include box-sizing(border-box);
margin-right: $gw-gutter;
padding: $body-line-height;
width: grid-width(6);
background: #e3e3e3;
border-right: 1px solid #d3d3d3;
text-shadow: 0 1px 0 #f6f6f6;
display: table-cell;
}
ul {
li {
display: inline-block;
padding-right: 1em;
section.course-info {
@include box-sizing(border-box);
padding: $body-line-height;
width: grid-width(6);
display: table-cell;
ul {
li {
display: inline-block;
padding-right: 1em;
}
}
}
}

72
sass/_textbook.scss
View File

@@ -1,11 +1,69 @@
ul#booknav {
@extend .sidebar;
}
div.book-wrapper {
display: table;
section.book {
@extend .content;
ul#booknav {
@include box-shadow( inset -1px 0 0 #f6f6f6);
@include box-sizing(border-box);
background: #e3e3e3;
border-right: 1px solid #d3d3d3;
font-family: $body-font-family;
padding: $body-line-height;
text-shadow: 0 1px 0 #f6f6f6;
vertical-align: top;
width: grid-width(3);
min-width: 240px;
display: table-cell;
img {
border: 1px solid $border-color;
li {
ul {
background: none;
}
}
}
section.book {
@include box-sizing(border-box);
padding: $body-line-height;
vertical-align: top;
width: grid-width(9) + $gw-gutter;
display: table-cell;
nav {
background: #F6EFD4;
border-bottom: 1px solid darken(#F6EFD4, 10%);
margin: (-$body-line-height) (-$body-line-height) $body-line-height;
ul {
@extend .clearfix;
li {
padding: 15px;
&.last {
float: left;
}
&.next {
float: right;
}
a {
font-size: 12px;
text-transform: uppercase;
color: darken(#F6EFD4, 80%);
text-shadow: 0 1px 0 #fff;
&:hover {
color: darken(#F6EFD4, 60%);
}
}
}
}
}
section.page {
img {
border: 1px solid $border-color;
}
}
}
}

37
staticbook.html
View File

@@ -37,24 +37,27 @@ function next_page() {
<%include file="navigation.html" />
<section class="main-content">
<ul id="booknav" class="treeview-booknav">
<%include file="book_toc.html" />
</ul>
<div class="book-wrapper">
<ul id="booknav" class="treeview-booknav">
<%include file="book_toc.html" />
</ul>
<section class="book">
<nav>
<ol>
<li>
<a href="javascript:prev_page()">Last page</a>
</li>
<li>
<a href="javascript:next_page()">Next page</a>
</li>
</ol>
</nav>
<section class="book">
<section class="page">
<img id="bookpage" src="/static/book/p${ "%03i"%(page) }.jpg">
<section class="page">
<nav>
<ul>
<li class="last">
<a href="javascript:prev_page()">Last page</a>
</li>
<li class="next">
<a href="javascript:next_page()">Next page</a>
</li>
</ul>
</nav>
<img id="bookpage" src="/static/book/p${ "%03i"%(page) }.jpg">
</section>
</section>
</section>
</div>
</section>