made add a course form a sidebar, played with subheader styling, removed profile...

diff --git a/public/assets/css/screen.css b/public/assets/css/screen.css
index 07819b950ca8f1f09f604526ce9703b155552696..1378222a159a124dca61090d8bc2bdf347502092 100755 (executable)
--- a/public/assets/css/screen.css
+++ b/public/assets/css/screen.css
@@ -50,7 +50,7 @@ Please have a look around, I hope you enjoy your stay.
   margin-left: 1.705%;
   margin-right: 1.705%; }
 
-.grid-2, #pg_courses .sidebar {
+.grid-2 {
   float: left;
   width: 21.591%;
   padding: 0;
@@ -71,14 +71,14 @@ Please have a look around, I hope you enjoy your stay.
   margin-left: 1.705%;
   margin-right: 1.705%; }
 
-.grid-5, #g-nav-main, #pg_lectures .main-content {
+.grid-5, #g-nav-main, #pg_courses .main-content, #pg_lectures .main-content {
   float: left;
   width: 59.091%;
   padding: 0;
   margin-left: 1.705%;
   margin-right: 1.705%; }
 
-.grid-6, #pg_courses .main-content {
+.grid-6 {
   float: left;
   width: 71.591%;
   padding: 0;
@@ -209,10 +209,11 @@ img {
   max-width: 100%; }
 
 button {
-  padding: 0.375em;
+  padding: 0.375em 0.75em;
   border: 0;
   background: none;
-  background-color: #e8a200;
+  background-color: #333;
+  border: 1px solid #000;
   color: #fff; }
 
 ::-moz-selection {
@@ -406,11 +407,19 @@ body {
   .breadcrumb a {
     display: block;
     float: left;
-    padding: 0.375em; }
-    .breadcrumb a:hover .action {
+    padding: 0.375em;
+    opacity: 0.7;
+    -webkit-transition: opacity 0.25s ease-in-out;
+    -moz-transition: opacity 0.25s ease-in-out;
+    -o-transition: opacity 0.25s ease-in-out;
+    -ms-transition: opacity 0.25s ease-in-out;
+    transition: opacity 0.25s ease-in-out; }
+    .breadcrumb a .action {
       color: #e8a200; }
-    .breadcrumb a:hover .location {
+    .breadcrumb a .location {
       color: #666; }
+    .breadcrumb a:hover {
+      opacity: 1; }
     .breadcrumb a span {
       -webkit-transition: color 0.25s ease-in-out;
       -moz-transition: color 0.25s ease-in-out;
@@ -423,7 +432,11 @@ body {
     color: #bbb; }
 
 .subheader {
-  padding: 1.5em 0 2.25em; }
+  padding: 1.5em 0 2.25em;
+  margin-bottom: 1.5em;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #f8f8f8;
+  background-color: #fcfcfc; }
   .subheader h1, .subheader h3 {
     margin: 0; }
   .subheader h1 {
@@ -484,11 +497,14 @@ body {
 input.text {
   padding: 0.375em;
   background-color: #e5e5e5;
-  border: 1px solid transparent; }
+  border: 1px solid #ccc; }
   input.text:focus {
     border: 1px solid #aaa;
     outline: 0; }
 
+form .row {
+  margin-bottom: 0.75em; }
+
 /* 3.`Extensible Classes
 ---------------------------------------------- */
 .group:after, .wrapper:after, #g-nav-main:after, .page:after, .breadcrumb:after, #schools li:after, .schools ul:after {
@@ -728,12 +744,7 @@ input.text {
     display: block;
     margin-bottom: 0.375em;
     text-transform: capitalize;
-    color: #000;
-    -webkit-transition: color 0.25s ease-in-out;
-    -moz-transition: color 0.25s ease-in-out;
-    -o-transition: color 0.25s ease-in-out;
-    -ms-transition: color 0.25s ease-in-out;
-    transition: color 0.25s ease-in-out; }
+    color: #000; }
     #pg_courses .course .course-name:hover {
       color: #e8a200; }
   #pg_courses .course .course-description {
@@ -757,11 +768,22 @@ input.text {
 /* 4.`Course
 ---------------------------------------------- */
 #pg_lectures .lecture {
-  padding-bottom: 0.75em;
-  margin-bottom: 1em;
+  padding-bottom: 1.5em;
+  margin-bottom: 0.75em;
   background-image: url("../img/dotted-x.png");
   background-position: bottom;
   background-repeat: repeat-x; }
+#pg_lectures .lecture-name {
+  display: block;
+  margin-bottom: 0.375em;
+  color: #000;
+  -webkit-transition: color 0.25s ease-in-out;
+  -moz-transition: color 0.25s ease-in-out;
+  -o-transition: color 0.25s ease-in-out;
+  -ms-transition: color 0.25s ease-in-out;
+  transition: color 0.25s ease-in-out; }
+  #pg_lectures .lecture-name:hover {
+    color: #e8a200; }
 
 .link-bar {
   margin-left: -0.375em; }

diff --git a/public/assets/css/scss/partials/_pages.scss b/public/assets/css/scss/partials/_pages.scss
index 71ebcb6d2c98e31e5a195b1cb7de480d0aeb25c3..8f68a75cb40a0dee89afe4ab2c756d0b0d6dab27 100644 (file)
--- a/public/assets/css/scss/partials/_pages.scss
+++ b/public/assets/css/scss/partials/_pages.scss
@@ -86,6 +86,7 @@
         clear: both;
         padding: $base/4;
 
+
         &:hover {
 
             .school_name {
@@ -127,13 +128,9 @@
 #pg_courses {
 
     .main-content {
-        @extend .grid-6;
+        @extend .grid-5;
     }
 
-               .sidebar {
-                       @extend .grid-2;
-               }
-
     .course {
         position: relative;
         margin-bottom: $base/2;
@@ -144,7 +141,6 @@
             @extend .plump;
             text-transform: capitalize;
             color: #000;
-            @include transition( color );
 
             &:hover {
                 color: $mustard;
@@ -193,12 +189,20 @@
        }
 
        .lecture {
-               padding-bottom: $base/2;
-               margin-bottom: $base/1.5;
+               padding-bottom: $base;
+               margin-bottom: $base/2;
                @include dotted-x( bottom );
        }
 
        .lecture-name {
+               display: block;
+               margin-bottom: $base/4;
                @extend .big;
+               color: #000;
+               @include transition( color );
+
+               &:hover {
+                       color: $mustard;
+               }
        }
 }

diff --git a/public/assets/css/scss/screen.scss b/public/assets/css/scss/screen.scss
index 9f1ac72c777c0612fbfe7d610d6227ff96373ad2..442fe8940d4a913dc931493dc972bac4461495e1 100755 (executable)
--- a/public/assets/css/scss/screen.scss
+++ b/public/assets/css/scss/screen.scss
@@ -96,11 +96,13 @@ img {
 }
 
 button {
-       padding: $base/4;
+       padding: $base/4 $base/2;
        border: 0;
        background: none;
-       background-color: $mustard;
+       background-color: #333;
+       border: 1px solid #000;
        color: #fff;
+       // color: #fff;
 }
 
 ::-moz-selection { background: #44a1dd; color: #fff; text-shadow: none; }
@@ -290,16 +292,19 @@ body {
         display: block;
         float: left;
         padding: $base/4;
+                               opacity: 0.7;
+                               @include transition( opacity );
 
-        &:hover {
+                               .action {
+                                       color: $mustard;
+                               }
 
-            .action {
-                color: $mustard;
-            }
+                               .location {
+                                       color: #666;
+                               }
 
-            .location {
-                color: #666;
-            }
+        &:hover {
+                                       opacity: 1;
         }
 
         span {
@@ -320,6 +325,10 @@ body {
 .subheader {
     @extend .grid-8;
     padding: $base 0 $base*1.5;
+               margin-bottom: $base;
+               border-top: 1px solid #fff;
+               border-bottom: 1px solid #f8f8f8;
+               background-color: #fcfcfc;
 
     h1, h3 {
         margin: 0;
@@ -416,7 +425,7 @@ body {
 input.text {
        padding: $base/4;
        background-color: #e5e5e5;
-       border: 1px solid transparent;
+       border: 1px solid #ccc;
 
        &:focus {
                border: 1px solid #aaa;
@@ -430,6 +439,13 @@ input.text {
        }
 }
 
+form {
+
+       .row {
+               margin-bottom: $base/2;
+       }
+}
+
 
 /* 3.`Extensible Classes
 ---------------------------------------------- */

diff --git a/public/index.html b/public/index.html
index cc1bb4b8b9f8f5bed4822c6ebbe895da7492180d..1c83553bd2b95ecd16dbacbf44a7f4f2be0f81d8 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -69,11 +69,6 @@
                         <li><a href="/schools" id=school_link><span class="icon" alt="paperclip"></span>Courses</a></li>
                         <li><a href="http://blog.finalsclub.org" id="blog_link"><span class="icon" alt="align-lines"></span>Blog</a></li>
                         <li><a href="/archive" id=archive_link class="nav"><span class="icon" alt="book"></span>Library</a></li>
-                        <!--
-                        <li><a href="/press" id=press_link class="nav"><em class="icon"></em>Press</a></li>
-                        -->
-                        <li><a href="/profile" id=profile_link class="nav"><em class="icon"></em>Profile</a></li>
-                        <!-- li><a href="#" class="donate"><em class="icon"></em><em class="lc yellow">Donate</em></a></li -->
                     </ul>
                 </nav>
                 <hr id="g-masthead-hr" />
@@ -284,38 +279,36 @@
                                                                                        <h4>Instructor: <span class="futura light"> __name__ <a href="mailto:__email__" class="instructor_email">__email__</span></h4>
                                                                                </div>
                                                                        </header>
-                                                               <div class="main-content">
-                                                                       <div class="lectures">
-                                                                               <div class="proto lecture" id=PROTO_lecture>
-                                                                                       <div class=lecture-name>
-                                                                                               <a href="/lecture/___id__">__name__</a><br>
-                                                                                               Created: __date__<br>
+                                                                       <div class="main-content">
+                                                                               <div class="lectures">
+                                                                                       <div class="proto lecture" id=PROTO_lecture>
+                                                                                               <a href="/lecture/___id__" class="lecture-name">__name__</a>
+                                                                                               <div class="lecture-created-at">Created: __date__</div>
                                                                                        </div>
                                                                                </div>
                                                                        </div>
-                                                               </div>
-                                                               <div class="sidebar">
-                                                                       <span class="sub_menu" style="display:none;">
-                                                                               <a href="" id="new_lecture">New Lecture</a>
-                                                                       </span>
-                                                                       <form method="POST" id="form_lecture" style="display:none;">
-                                                                               <h4>Create New Lecture</h4>
-                                                                               <p>Use this form to create a new lecture. After creating the lecture, you can then create a notes-taking session within it.</p>
-                                                                               <div class="row">
-                                                                                       <div class="label">Lecture Name</div>
-                                                                                       <div class="field">
-                                                                                               <input type="text" class="text" name="name">
+                                                                       <div class="sidebar">
+                                                                               <span class="sub_menu" style="display:none;">
+                                                                                       <a href="" id="new_lecture">New Lecture</a>
+                                                                               </span>
+                                                                               <form method="POST" id="form_lecture" style="display:none;">
+                                                                                       <h4>Create New Lecture</h4>
+                                                                                       <p>Use this form to create a new lecture. After creating the lecture, you can then create a notes-taking session within it.</p>
+                                                                                       <div class="row">
+                                                                                               <div class="label">Lecture Name</div>
+                                                                                               <div class="field">
+                                                                                                       <input type="text" class="text" name="name">
+                                                                                               </div>
                                                                                        </div>
-                                                                               </div>
-                                                                               <div class="row">
-                                                                                       <div class="label">&nbsp;</div>
-                                                                                       <div class="field">
-                                                                                               <button>Create Lecture</button>
+                                                                                       <div class="row">
+                                                                                               <div class="label">&nbsp;</div>
+                                                                                               <div class="field">
+                                                                                                       <button>Create Lecture</button>
+                                                                                               </div>
                                                                                        </div>
-                                                                               </div>
-                                                                       </form>
+                                                                               </form>
+                                                                       </div>
                                                                </div>
-                                                       </div>
           <!--================================================================= -->
                 <div class=page id=pg_notes>
                                                                        <header class="subheader">
@@ -401,78 +394,82 @@
                 </div>
           <!--================================================================= -->
                 <div class=page id=pg_register>
-                    <h1>Create an Account</h1>
-                    <form id="form_register" action="/register" method="POST">
-                        <div class="zarea">
-                            <div class="row">
-                                <div class="label">
-                                    <label for="email">School email*</label>
-                                </div>
-                                <div class="field">
-                                    <input type="text" class="text" name="email">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">
-                                    <label for="password">Password*</label>
-                                </div>
-                                <div class="field">
-                                    <input type="password" name="password">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">
-                                    <label for="school">School*</label>
-                                </div>
-                                <div class="field">
-                                    <select name="school">
-                                        <option value="Harvard">Harvard</option>
-                                        <option value="Berkeley">Berkeley</option>
-                                        <option value="Brown">Brown</option>
-                                        <option value="Columbia">Columbia</option>
-                                        <!--
-                                        <option value="Cornell">Cornell</option>
-                                        <option value="Dartmouth">Dartmouth</option>
-                                        <option value="MIT">MIT</option>
-                                        <option value="Princeton">Princeton</option>
-                                        <option value="Stanford">Stanford</option>
-                                        <option value="UPenn">UPenn</option>
-                                        <option value="University of Texas">University of Texas</option>
-                                        <option value="Yale">Yale</option>
-                                        <option value="Other">Other</option>
-                                        -->
-                                    </select>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">
-                                    <label for="name">Site Handle</label>
-                                </div>
-                                <div class="field">
-                                    <input type="text" class="text" name="name">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">
-                                    <label for="affil">Affiliation</label>
-                                </div>
-                                <div class="field">
-                                    <select name="affil">
-                                        <option value="Student">Student</option>
-                                        <option value="Teachers Assistant">Teachers Assistant</option>
-                                    </select>
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">
-                                    &nbsp;
-                                </div>
-                                <div class="field">
-                                    <button>Register</button>
-                                </div>
-                            </div>
-                        </div>
-                    </form>
+                                                                       <header class="subheader">
+                                                                               <h2>Create an Account</h2>
+                                                                       </header>
+                                                                       <div class="main-content">
+                                                                                       <form id="form_register" action="/register" method="POST">
+                                                                                                       <div class="zarea">
+                                                                                                                       <div class="row">
+                                                                                                                                       <div class="label">
+                                                                                                                                                       <label for="email">School email*</label>
+                                                                                                                                       </div>
+                                                                                                                                       <div class="field">
+                                                                                                                                                       <input type="text" class="text" name="email">
+                                                                                                                                       </div>
+                                                                                                                       </div>
+                                                                                                                       <div class="row">
+                                                                                                                                       <div class="label">
+                                                                                                                                                       <label for="password">Password*</label>
+                                                                                                                                       </div>
+                                                                                                                                       <div class="field">
+                                                                                                                                                       <input type="password" class="text" name="password">
+                                                                                                                                       </div>
+                                                                                                                       </div>
+                                                                                                                       <div class="row">
+                                                                                                                                       <div class="label">
+                                                                                                                                                       <label for="name">Site Handle</label>
+                                                                                                                                       </div>
+                                                                                                                                       <div class="field">
+                                                                                                                                                       <input type="text" class="text" name="name">
+                                                                                                                                       </div>
+                                                                                                                       </div>
+                                                                                                                       <div class="row">
+                                                                                                                                       <div class="label">
+                                                                                                                                                       <label for="school">School*</label>
+                                                                                                                                       </div>
+                                                                                                                                       <div class="field">
+                                                                                                                                                       <select name="school">
+                                                                                                                                                                       <option value="Harvard">Harvard</option>
+                                                                                                                                                                       <option value="Berkeley">Berkeley</option>
+                                                                                                                                                                       <option value="Brown">Brown</option>
+                                                                                                                                                                       <option value="Columbia">Columbia</option>
+                                                                                                                                                                       <!--
+                                                                                                                                                                       <option value="Cornell">Cornell</option>
+                                                                                                                                                                       <option value="Dartmouth">Dartmouth</option>
+                                                                                                                                                                       <option value="MIT">MIT</option>
+                                                                                                                                                                       <option value="Princeton">Princeton</option>
+                                                                                                                                                                       <option value="Stanford">Stanford</option>
+                                                                                                                                                                       <option value="UPenn">UPenn</option>
+                                                                                                                                                                       <option value="University of Texas">University of Texas</option>
+                                                                                                                                                                       <option value="Yale">Yale</option>
+                                                                                                                                                                       <option value="Other">Other</option>
+                                                                                                                                                                       -->
+                                                                                                                                                       </select>
+                                                                                                                                       </div>
+                                                                                                                       </div>
+                                                                                                                       <div class="row">
+                                                                                                                                       <div class="label">
+                                                                                                                                                       <label for="affil">Affiliation</label>
+                                                                                                                                       </div>
+                                                                                                                                       <div class="field">
+                                                                                                                                                       <select name="affil">
+                                                                                                                                                                       <option value="Student">Student</option>
+                                                                                                                                                                       <option value="Teachers Assistant">Teachers Assistant</option>
+                                                                                                                                                       </select>
+                                                                                                                                       </div>
+                                                                                                                       </div>
+                                                                                                                       <div class="row">
+                                                                                                                                       <div class="label">
+                                                                                                                                                       &nbsp;
+                                                                                                                                       </div>
+                                                                                                                                       <div class="field">
+                                                                                                                                                       <button>Register</button>
+                                                                                                                                       </div>
+                                                                                                                       </div>
+                                                                                                       </div>
+                                                                                       </form>
+                                                                               </div>
                 </div>
           <!--================================================================= -->
           <div class="page" id="pg_profile">
@@ -576,7 +573,7 @@
           <!--================================================================= -->
                 <div class=page id=pg_login>
                                                                        <header class="subheader">
-                                                                               <h1>Login</h1>
+                                                                               <h2>Login</h2>
                                                                        </header>
                                                                        <div class="main-content">
                     <form id="form_login" action="/login" method="POST">
@@ -594,7 +591,7 @@
                                     <label for="password">Password</label>
                                 </div>
                                 <div class="field">
-                                    <input type="password" name="password" size="15">
+                                    <input type="password" class="text" name="password" size="15">
                                 </div>
                             </div>
                             <div class="row">

diff --git a/public/javascripts/main.js b/public/javascripts/main.js
index 64aa16e08b1a51b9ee76b7f6b27bba6beeaa3d48..336ce8bdc1df6b16bced2fdffd220bc95db12808 100644 (file)
--- a/public/javascripts/main.js
+++ b/public/javascripts/main.js
@@ -61,18 +61,16 @@ router = {
 
 function render(pageId, response) {
   if (user.name) {
-    $('.username').text("Hi, "+user.name+"!");
+    $('.username').text(user.name).attr('href', '/profile');
     $("#login_status").show();
     $('#login_link').text('Logout').attr('href', '/logout');
     $('#register_link').hide();
-    $('#profile_link').show();
                $('#sign_up-link').hide();
   } else {
     $('.username').text('Guest');
     $("#login_status").hide();
     $('#login_link').text('Login').attr('href', '/login');
     $('#register_link').show();
-    $('#profile_link').hide();
                $('#sign_up-link').show();
   }