Skip to content
Snippets Groups Projects
Commit ba557aef authored by Kyle Fiedler's avatar Kyle Fiedler
Browse files

Added layout for courseware, textbooks and profile 

--HG--
branch : kf-refactor
parent 2ffe64dc
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 206 additions and 96 deletions
.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-extends.scssc
+ 0
− 0
View file @ ba557aef
No preview for this file type
.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-variables.scssc
+ 0
− 0
View file @ ba557aef
No preview for this file type
.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_courseware.scssc 0 → 100644
+ 0
− 0
View file @ ba557aef
File added
.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_layout.scssc
+ 0
− 0
View file @ ba557aef
No preview for this file type
.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_profile.scssc 0 → 100644
+ 0
− 0
View file @ ba557aef
File added
.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_textbook.scssc 0 → 100644
+ 0
− 0
View file @ ba557aef
File added
.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/application.scssc
+ 0
− 0
View file @ ba557aef
No preview for this file type
courseware.html
+ 5
− 5
View file @ ba557aef
......@@ -24,12 +24,12 @@ $('#hide_acc').click(function() {
<%include file="navigation.html" />
<div>
<div id="accordion" style="position:relative; top:-6px; ">
<section>
<div id="accordion">
${accordion}
</div>
<div>
<section class="main-content">
${content}
</div>
</div>
</section>
</section>
main.html
+ 6
− 1
View file @ ba557aef
......@@ -32,8 +32,13 @@
<footer>
<p> Copyright (c). 2011. MIT. <a href=http://creativecommons.org/licenses/by-sa/3.0/>Some rights reserved.</a>
<!-- Template based on a design from http://www.dotemplate.com/ -- Donated $10 (pmitros) so we don't need to include credit. -->
<!-- Template based on a design from http://www.dotemplate.com/ - Donated $10 (pmitros) so we don't need to include credit. -->
</p>
<ul>
<li><a href="/s/help.html">Help</a></li>
<li><a href="/logout">Log out</a></li>
</ul>
</footer>
</body>
</html>
navigation.html
+ 1
− 3
View file @ ba557aef
......@@ -3,13 +3,11 @@
<nav>
<ul class="coursenav">
<li><a href="/book">Textbook</a></li>
<li><a href="/courseware">Courseware</a></li>
<li><a href="/book">Textbook</a></li>
<li><a href="/discussion">Discussion</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/profile">Profile</a></li>
<li><a href="/s/help.html">Help</a></li>
<li><a href="/logout">Log out</a></li>
</ul>
</nav>
</header>
profile.html
+ 38
− 31
View file @ ba557aef
......@@ -67,45 +67,52 @@ $(function() {
<%include file="navigation.html" />
<section>
<section class="profile-content">
<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="description"></div>
<div id="change_password_pop">
<h2>Password reset</h2>
<section>
<h1>Course Progress</h1>
<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>
% for hw in homeworks:
<li>
<p>${ hw['chapter'] }</p>
<p>${ hw['section'] }</p>
<ul>
% for score in hw['scores']:
<li>${ score[0] }/${ score[1] }</li>
% endfor
</ul>
</li>
% endfor
</section>
<div id="change_password_pop">
<h1>Password reset</h1>
<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}" />
<section class="course-info">
<h1>Course Progress</h1>
<input type="button" id="pwd_reset_button" value="E-mail me" />
</div>
<!-- <div id="description"></div> -->
<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>
</section>
sass/_base-extends.scss
+ 10
− 0
View file @ ba557aef
......@@ -6,3 +6,13 @@
visibility: hidden;
}
.sidebar {
width: grid-width(4);
float: left;
margin-right: $gw-gutter;
}
.content {
width: grid-width(8);
float: left;
}
sass/_base-variables.scss
+ 8
− 2
View file @ ba557aef
......@@ -22,11 +22,17 @@ $body-font-size: 14px;
// grid
$columns: 12;
$column-width: golden-ratio($body-font-size, 3);
$column-width: golden-ratio($body-font-size, 4);
$gutter-width: golden-ratio($body-font-size, 1);
$max-width: ($columns * $column-width) + (($columns - 1) * $gutter-width);
$gw-column: perc($column-width);
$gw-gutter: perc($gutter-width);
$base-line-height: golden-ratio($body-font-size, 1);
$body-line-height: golden-ratio($body-font-size, 1);
// color
$light-gray: #f3f3f3;
$dark-gray: #333;
$text-color: $dark-gray;
$border-color: $light-gray;
sass/_courseware.scss 0 → 100644
+ 7
− 0
View file @ ba557aef
div#accordion {
@extend .sidebar;
}
section.main-content {
@extend .content;
}
sass/_layout.scss
+ 36
− 7
View file @ ba557aef
......@@ -3,32 +3,61 @@ html {
margin: 0 $gw-gutter;
body {
text-align: left;
width: grid-width(12);
margin: 0 auto;
color: $dark-gray;
font: $body-font-size $body-font-family;
margin: $body-line-height auto;
max-width: $max-width;
text-align: left;
width: grid-width(12);
header {
@extend .clearfix;
border-bottom: 1px solid $border-color;
margin-bottom: $body-line-height;
h1 {
float: left;
border-right: 1px solid $border-color;
font-size: $body-font-size;
font-weight: bold;
margin: 0 $gw-gutter 0 0;
padding: $body-line-height $gw-gutter $body-line-height 0;
display: block;
float: left;
}
nav {
float: right;
float: left;
display: block;
margin: 0;
ul {
@extend .clearfix;
display: inline-block;
padding: $body-line-height 0;
margin: 0;
li {
float: left;
margin-right: $gw-gutter;
margin-right: $body-line-height;
display: inline-block;
margin-bottom: 0;
}
}
}
}
section {
@extend .clearfix;
}
img {
max-width: 100%;
height: auto;
}
footer {
padding: $body-line-height 0;
border-top: 1px solid $border-color;
margin-top: $body-line-height;
}
}
}
sass/_profile.scss 0 → 100644
+ 20
− 0
View file @ ba557aef
section.profile-content {
section.user-info {
width: grid-width(6);
float: left;
margin-right: $gw-gutter;
}
section.course-info {
width: grid-width(6);
float: left;
ul {
li {
display: inline-block;
padding-right: 1em;
}
}
}
}
sass/_textbook.scss 0 → 100644
+ 11
− 0
View file @ ba557aef
ul#booknav {
@extend .sidebar;
}
section.book {
@extend .content;
img {
border: 1px solid $border-color;
}
}
sass/application.scss
+ 8
− 3
View file @ ba557aef
@import "bourbon/bourbon";
@import "reset";
// Base layout
@import "base-variables", "base-extends";
@import "layout";
// pages
@import "courseware";
@import "textbook";
@import "profile";
// left over
@import "theme";
@import "local";
@import "layout";
staticbook.html
+ 22
− 12
View file @ ba557aef
......@@ -36,15 +36,25 @@ function next_page() {
<%include file="navigation.html" />
<ul id="booknav" class="treeview-booknav">
<%include file="book_toc.html" />
</ul>
<table>
<tr>
<td><a href="javascript:prev_page()"><span class="ui-icon ui-icon-circle-triangle-w">&nbsp;</span></a></td>
<td> <img id="bookpage" src="/static/book/p${ "%03i"%(page) }.jpg"> </td>
<td><a href="javascript:next_page()"><span class="ui-icon ui-icon-circle-triangle-e">&nbsp;</span></a></td>
</tr>
</table>
<section class="book-container">
<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="page">
<img id="bookpage" src="/static/book/p${ "%03i"%(page) }.jpg">
</section>
</section>
</section>
video.html
+ 34
− 32
View file @ ba557aef
<table>
<tr><td rowspan=1 colspan=4>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
</td>
<td>
<table>
<tr><td id=stt_n5 align=center><div id=std_n7 onclick="title_seek(-7);">&nbsp;</div></td></tr>
<tr><td id=stt_n4 align=center><div id=std_n6 onclick="title_seek(-6);">&nbsp;</div></td></tr>
<tr><td id=stt_n4 align=center><div id=std_n5 onclick="title_seek(-5);">&nbsp;</div></td></tr>
<tr><td id=stt_n4 align=center><div id=std_n4 onclick="title_seek(-4);">&nbsp;</div></td></tr>
<tr><td id=stt_n3 align=center><div id=std_n3 onclick="title_seek(-3);">&nbsp;</div></td></tr>
<tr><td id=stt_n2 align=center><div id=std_n2 onclick="title_seek(-2);">&nbsp;</div></td></tr>
<tr><td id=stt_n1 align=center><div id=std_n1 onclick="title_seek(-1);">&nbsp;</div></td></tr>
<tr><td id=stt_0 align=center bgcolor=#aed0ea><div id=std_0 onclick="title_seek(0);">&nbsp;</div></td></tr>
<tr><td id=stt_p1 align=center><div id=std_p1 onclick="title_seek( 1);">&nbsp;</div></td></tr>
<tr><td id=stt_p2 align=center><div id=std_p2 onclick="title_seek( 2);">&nbsp;</div></td></tr>
<tr><td id=stt_p3 align=center><div id=std_p3 onclick="title_seek( 3);">&nbsp;</div></td></tr>
<tr><td id=stt_p4 align=center><div id=std_p4 onclick="title_seek( 4);">&nbsp;</div></td></tr>
<tr><td id=stt_p5 align=center><div id=std_p5 onclick="title_seek( 5);">&nbsp;</div></td></tr>
<tr><td id=stt_p6 align=center><div id=std_p7 onclick="title_seek( 6);">&nbsp;</div></td></tr>
<tr><td id=stt_p6 align=center><div id=std_p7 onclick="title_seek( 7);">&nbsp;</div></td></tr>
<tr><td id=stt_p6 align=center><div id=std_p7 onclick="title_seek( 8);">&nbsp;</div></td></tr>
<tr><td><img src="/static/pixel.jpg" width=400 height=0></td></tr>
</table>
</td>
<tr><td width=15><span class="ui-icon ui-icon-play" onclick="play();"></span></td>
<td width=15><span class="ui-icon ui-icon-pause" onclick="pause();"></span></td>
<td colspan=4><div id=slider></div></td></tr>
<tr><td colspan=4><div id="vidtime">0:00/0:00</div></td><td><div align=right id="video_speeds"> </div></td></tr>
</table>
<div id="ytapiplayer">
<p>You need Flash player 8+ and JavaScript enabled to view this video.</p>
</div>
<ol>
<li id=stt_n5><div id=std_n7 onclick="title_seek(-7);">&nbsp;</div></li>
<li id=stt_n4><div id=std_n6 onclick="title_seek(-6);">&nbsp;</div></li>
<li id=stt_n4><div id=std_n5 onclick="title_seek(-5);">&nbsp;</div></li>
<li id=stt_n4><div id=std_n4 onclick="title_seek(-4);">&nbsp;</div></li>
<li id=stt_n3><div id=std_n3 onclick="title_seek(-3);">&nbsp;</div></li>
<li id=stt_n2><div id=std_n2 onclick="title_seek(-2);">&nbsp;</div></li>
<li id=stt_n1><div id=std_n1 onclick="title_seek(-1);">&nbsp;</div></li>
<li id=stt_0 class="current"><div id=std_0 onclick="title_seek(0);">&nbsp;</div></li>
<li id=stt_p1><div id=std_p1 onclick="title_seek( 1);">&nbsp;</div></li>
<li id=stt_p2><div id=std_p2 onclick="title_seek( 2);">&nbsp;</div></li>
<li id=stt_p3><div id=std_p3 onclick="title_seek( 3);">&nbsp;</div></li>
<li id=stt_p4><div id=std_p4 onclick="title_seek( 4);">&nbsp;</div></li>
<li id=stt_p5><div id=std_p5 onclick="title_seek( 5);">&nbsp;</div></li>
<li id=stt_p6><div id=std_p7 onclick="title_seek( 6);">&nbsp;</div></li>
<li id=stt_p6><div id=std_p7 onclick="title_seek( 7);">&nbsp;</div></li>
<li id=stt_p6><div id=std_p7 onclick="title_seek( 8);">&nbsp;</div></li>
</ol>
<section class="video-controls">
<ul>
<li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
<li><span class="ui-icon ui-icon-pause" onclick="pause();"></span></li>
</ul>
<div id=slider></div>
<div id="vidtime">0:00/0:00</div>
<div id="video_speeds"></div>
</section>
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