completed html and css for universities page

blah

diff --git a/public/assets/css/screen.css b/public/assets/css/screen.css
index 2a82b4431499dad47fb4e2bbfd66c1ededc7a279..0d088f44dd4e0209e16ddbff3267f48d91930cc9 100755 (executable)
--- a/public/assets/css/screen.css
+++ b/public/assets/css/screen.css
@@ -37,6 +37,7 @@ Please have a look around, I hope you enjoy your stay.
 
 ---------------------------------------------------------------- */
 .wrapper {
+  position: relative;
   width: 880px;
   margin: 0 auto; }
 
@@ -68,7 +69,7 @@ Please have a look around, I hope you enjoy your stay.
   margin-left: 1.705%;
   margin-right: 1.705%; }
 
-.grid-5, #nav-main {
+.grid-5, #g-nav-main {
   float: left;
   width: 59.091%;
   padding: 0;
@@ -89,36 +90,29 @@ Please have a look around, I hope you enjoy your stay.
   margin-left: 1.705%;
   margin-right: 1.705%; }
 
-.grid-8, #nav-user, .subheader, #g-footer, #intro-schools {
+.grid-8, #g-nav-user, #g-masthead-hr, .breadcrumb, .subheader, .main-content, #g-footer, #intro-schools {
   float: left;
   width: 96.591%;
   padding: 0;
   margin-left: 1.705%;
   margin-right: 1.705%; }
 
-.futura, .futura-oblique, .futura-light, .subheader h2, .futura-bold, .link-bar a, h1, h2, h3, h4, h5, h6, p, #g-masthead {
+.futura, .futura-oblique, .breadcrumb .location, #schools .number_of_courses, #schools .number_of_notes, .futura-light, h1, .subheader h2, .futura-light-oblique, .futura-bold, .link-bar a, body, p, #g-masthead, #pg_home h1 {
   font-family: "futura-pt", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   font-weight: 500;
   -webkit-font-smoothing: antialiased; }
 
-.futura-oblique {
+.futura-oblique, .breadcrumb .location, #schools .number_of_courses, #schools .number_of_notes {
   font-style: italic; }
 
-.futura-light, .subheader h2 {
+.futura-light, h1, .subheader h2 {
   font-weight: 300; }
 
-.futura-bold, .link-bar a {
-  font-weight: 700; }
-
-.minion, .minion-italic {
-  font-family: "minion-pro", "Georgia", serif;
-  font-weight: 400;
-  -webkit-font-smoothing: antialiased; }
-
-.minion-italic {
-  font-style: italic; }
+.futura-light-oblique {
+  font-style: italic;
+  font-weight: 300; }
 
-.minion-bold {
+.futura-bold, .link-bar a {
   font-weight: 700; }
 
 body {
@@ -136,7 +130,7 @@ body {
   font-size: 0.75em;
   line-height: 1em; }
 
-.small, #nav-user, #intro-schools li, .link-bar a {
+.small, #g-nav-user, #intro-schools li, .link-bar a {
   /* 14px / 18px */
   font-size: 0.875em;
   line-height: 1.286em; }
@@ -147,12 +141,12 @@ body {
   line-height: 1.5em;
   /* 24 */ }
 
-.big, p, #nav-main a {
+.big, p, #g-nav-main a, .breadcrumb {
   /* 18px / 24px */
   font-size: 1.125em;
   line-height: 1.333em; }
 
-.large, h3, h4 {
+.large, h3, #schools .school_name {
   /* 26 / 36px */
   font-size: 1.625em;
   line-height: 1.385em; }
@@ -172,7 +166,7 @@ body {
   font-size: 3.75em;
   line-height: 1.2em; }
 
-.tight-line-height, #nav-user ul, .subheader h1, .subheader h3 {
+.tight-line-height, #g-nav-user ul, .subheader h1, .subheader h3 {
   line-height: 1em; }
 
 /* 0.`General
@@ -184,7 +178,14 @@ h1, h2, h3, h4, h5, h6 {
   margin-bottom: 0.375em; }
 
 a {
+  -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: #e8a200; }
+  a:hover {
+    color: #e8a200; }
 
 p {
   margin: 0;
@@ -315,67 +316,96 @@ body {
 #g-logo a {
   display: block; }
 
-#nav-user {
+#g-nav-user {
   padding: 0.375em 0.75em 0.75em;
   text-align: right; }
-  #nav-user li {
+  #g-nav-user li {
     display: inline; }
-    #nav-user li.first, #nav-user li.first a {
+    #g-nav-user li.first, #g-nav-user li.first a {
       border: 0; }
-  #nav-user a {
+  #g-nav-user a {
     padding: 0 0.75em;
     color: #ffcd58; }
 
-#nav-main ul {
+#g-nav-main ul {
   float: right;
   padding: 0.375em 0; }
-#nav-main li {
+#g-nav-main li {
   display: inline-block;
   *display: inline;
   *zoom: 1;
   vertical-align: middle; }
-#nav-main a {
+#g-nav-main a {
   position: relative;
   display: block;
   padding: 0.375em 0;
   margin-left: 1.5em;
   color: #fff; }
-  #nav-main a:hover {
+  #g-nav-main a:hover {
     color: #ffcd58; }
-  #nav-main a .icon {
+  #g-nav-main a .icon {
     position: absolute;
     left: 0; }
-#nav-main #school_link {
+#g-nav-main #school_link {
   padding-left: 2.1em; }
-  #nav-main #school_link .icon {
+  #g-nav-main #school_link .icon {
     top: 50%;
     margin-top: -10px; }
-#nav-main #blog_link {
+#g-nav-main #blog_link {
   padding-left: 1.95em; }
-  #nav-main #blog_link .icon {
+  #g-nav-main #blog_link .icon {
     top: 50%;
     margin-top: -9px; }
-#nav-main #archive_link {
+#g-nav-main #archive_link {
   padding-left: 1.8em; }
 
+#g-masthead-hr {
+  position: absolute;
+  margin-top: 0;
+  margin-bottom: 0;
+  top: 100%;
+  height: 3px;
+  border: 0;
+  background-color: #ffcd58; }
+
 /* b.`content
+
 -------------------------- */
 #g-page {
-  border-top: 1px solid #333;
   background-color: #fff;
   margin-bottom: 3em; }
 
 .page {
+  display: none;
   margin-bottom: 1.5em;
-  border-top: 3px solid #ffcd58;
+  margin-top: 3px;
   color: #333; }
 
+.breadcrumb {
+  border-bottom: 1px solid #f5f5f5;
+  background-color: #fafafa; }
+  .breadcrumb a {
+    display: block;
+    float: left;
+    padding: 0.375em; }
+    .breadcrumb a:hover .action {
+      color: #e8a200; }
+    .breadcrumb a:hover .location {
+      color: #666; }
+    .breadcrumb a span {
+      -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; }
+  .breadcrumb .action {
+    color: #666; }
+  .breadcrumb .location {
+    color: #bbb; }
+
 .subheader {
-  padding: 3em 0;
-  text-align: center; }
+  padding: 3em 0; }
   .subheader h1, .subheader h3 {
-    display: inline;
-    padding: 0.15em;
     margin: 0; }
   .subheader h1 {
     color: #333; }
@@ -432,7 +462,7 @@ body {
 
 /* 7.`Extensible Classes
 ---------------------------------------------- */
-.group:after, .wrapper:after, #nav-main:after, .page:after, .schools ul:after {
+.group:after, .wrapper:after, #g-nav-main:after, .page:after, .breadcrumb:after, #schools li:after, .schools ul:after {
   content: ".";
   display: block;
   height: 0;
@@ -485,28 +515,28 @@ body {
 
 /* A2.`Sprites
 ---------------------------------------------- */
-.paperclip, #nav-main #school_link .icon, .paperclip-active, #nav-main #school_link:hover .icon {
+.paperclip, #g-nav-main #school_link .icon, .paperclip-active, #g-nav-main #school_link:hover .icon {
   background-position: 0 0;
   width: 22px;
   height: 20px; }
 
-.paperclip-active, #nav-main #school_link:hover .icon {
+.paperclip-active, #g-nav-main #school_link:hover .icon {
   background-position: -24px 0; }
 
-.align-lines, #nav-main #blog_link .icon {
+.align-lines, #g-nav-main #blog_link .icon {
   background-position: 0 -25px;
   width: 24px;
   height: 17px; }
 
-.align-lines-active, #nav-main #blog_link:hover .icon {
+.align-lines-active, #g-nav-main #blog_link:hover .icon {
   background-position: -27px -25px; }
 
-.book, #nav-main #archive_link .icon, .book-active, #nav-main #archive_link:hover .icon {
+.book, #g-nav-main #archive_link .icon, .book-active, #g-nav-main #archive_link:hover .icon {
   background-position: 0 -46px;
   width: 19px;
   height: 26px; }
 
-.book-active, #nav-main #archive_link:hover .icon {
+.book-active, #g-nav-main #archive_link:hover .icon {
   background-position: -24px -46px; }
 
 .logo-brown {
@@ -586,18 +616,15 @@ body {
 [Table of contents]
 
  0.Home
- 1.Layout
+ 1.Schools
+ 2.School
 
 ----------------------------------------------------------------*/
-.page {
-  display: none;
-  -webkit-transition: all 0.25s ease-in-out;
-  -moz-transition: all 0.25s ease-in-out;
-  -o-transition: all 0.25s ease-in-out;
-  -ms-transition: all 0.25s ease-in-out;
-  transition: all 0.25s ease-in-out; }
-
-.section-home {
+/* 0.`Home
+---------------------------------------------- */
+#pg_home .subheader {
+  text-align: center; }
+#pg_home .section-home {
   margin-bottom: 1.5em; }
 
 #intro-schools li {
@@ -617,6 +644,35 @@ body {
     height: 2px;
     background-color: #999; }
 
+/* 1.`Schools
+---------------------------------------------- */
+#schools a {
+  display: block;
+  float: left;
+  clear: both;
+  padding: 0.375em; }
+  #schools a:hover .school_name {
+    color: #e8a200; }
+  #schools a:hover .number_of_courses, #schools a:hover .number_of_notes {
+    color: #444; }
+  #schools a span {
+    -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; }
+#schools .icon-pair, #schools .text-pair {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+  vertical-align: middle; }
+#schools .icon-pair {
+  margin-right: 0.75em; }
+#schools .school_name {
+  color: #555; }
+#schools .number_of_courses, #schools .number_of_notes {
+  color: #999; }
+
 .link-bar {
   margin-left: -0.375em; }
   .link-bar li {

diff --git a/public/assets/css/scss/partials/_grid.scss b/public/assets/css/scss/partials/_grid.scss
index f6bf1591999ca5f901fadcaf41702eccf245fc60..c2c5f8f8ec334b628a430ef938841a7e1309b166 100755 (executable)
--- a/public/assets/css/scss/partials/_grid.scss
+++ b/public/assets/css/scss/partials/_grid.scss
@@ -9,10 +9,10 @@ $percent-margin: $margin / $layout-margin-width;
 
 // Grid Container
 .wrapper {
-  width: $layout-margin-width + px;
-  margin: 0 auto;
-
-  @extend .group;
+    position: relative;
+    width: $layout-margin-width + px;
+    margin: 0 auto;
+    @extend .group;
 }
 
 // Grid Columns

diff --git a/public/assets/css/scss/partials/_pages.scss b/public/assets/css/scss/partials/_pages.scss
index 2dbd30bf53eccee1eea5f568228fdd75b30af661..94f4b2807a1e953ee938a715c95a5462676b9095 100644 (file)
--- a/public/assets/css/scss/partials/_pages.scss
+++ b/public/assets/css/scss/partials/_pages.scss
@@ -3,17 +3,28 @@
 [Table of contents]
 
  0.Home
- 1.Layout
+ 1.Schools
+ 2.School
 
 ----------------------------------------------------------------*/
 
-.page {
-    display: none;
-    @include transition( all );
-}
 
-.section-home {
-    margin-bottom: $base;
+/* 0.`Home
+---------------------------------------------- */
+
+#pg_home {
+
+    .subheader {
+        text-align: center;
+    }
+
+    h1 {
+        @extend .futura;
+    }
+
+    .section-home {
+        margin-bottom: $base;
+    }
 }
 
 #intro-video {
@@ -48,3 +59,55 @@
         }
     }
 }
+
+
+/* 1.`Schools
+---------------------------------------------- */
+
+#schools {
+
+    li {
+        @extend .group;
+    }
+
+    a {
+        display: block;
+        float: left;
+        clear: both;
+        padding: $base/4;
+
+        &:hover {
+
+            .school_name {
+                color: $mustard;
+            }
+
+            .number_of_courses, .number_of_notes {
+                color: #444;
+            }
+        }
+
+        span {
+            @include transition( color );
+        }
+    }
+
+    .icon-pair, .text-pair {
+        @include inline-block;
+    }
+
+    .icon-pair {
+        margin-right: $base/2;
+    }
+
+    .school_name {
+        @extend .large;
+        color: #555;
+    }
+
+    .number_of_courses, .number_of_notes {
+        @extend .futura-oblique;
+        color: #999;
+    }
+}
+

diff --git a/public/assets/css/scss/partials/_type.scss b/public/assets/css/scss/partials/_type.scss
index 4d252aee7ce5adfa741dc780761ded287de380df..65d3c27a77f1fde1a956db6626f913797e4648c4 100755 (executable)
--- a/public/assets/css/scss/partials/_type.scss
+++ b/public/assets/css/scss/partials/_type.scss
@@ -14,23 +14,14 @@
     font-weight: 300;
 }
 
-.futura-bold {
+.futura-light-oblique {
     @extend .futura;
-    font-weight: 700;
-}
-
-.minion {
-    font-family: "minion-pro", "Georgia", serif;
-    font-weight: 400;
-    -webkit-font-smoothing: antialiased;
-}
-
-.minion-italic {
-    @extend .minion;
     font-style: italic;
+    font-weight: 300;
 }
 
-.minion-bold {
+.futura-bold {
+    @extend .futura;
     font-weight: 700;
 }
 
@@ -44,6 +35,7 @@ body {
     /* 16px / 24px */
     font-size: $font-size / 16 * 1em;
     line-height: #{$line / $em}em;
+    @extend .futura;
 }
 
 .tiny {

diff --git a/public/assets/css/scss/screen.scss b/public/assets/css/scss/screen.scss
index ae1a08f83a4ab8282bb959a1f8ccd527e6a9272b..747fab0fba1e73a14ec94d10d9c26b04601eb0db 100755 (executable)
--- a/public/assets/css/scss/screen.scss
+++ b/public/assets/css/scss/screen.scss
@@ -54,10 +54,11 @@ $mustard: #e8a200;
 /* a.`elements
 -------------------------- */
 
-h1, h2, h3, h4, h5, h6 { margin: 0; margin-bottom: $base/4; @extend .futura; }
+h1, h2, h3, h4, h5, h6 { margin: 0; margin-bottom: $base/4; }
 
 h1 {
     @extend .gigantic;
+    @extend .futura-light;
 }
 
 h2 {
@@ -68,12 +69,13 @@ h3 {
     @extend .large;
 }
 
-h4 {
-    @extend .large;
-}
-
 a {
+    @include transition( color );
     color: $mustard;
+
+    &:hover {
+        color: $mustard;
+    }
 }
 
 p {
@@ -145,7 +147,7 @@ body {
     }
 }
 
-#nav-user {
+#g-nav-user {
     @extend .grid-8;
     padding: $base/4 $base/2 $base/2;
     text-align: right;
@@ -169,7 +171,7 @@ body {
     }
 }
 
-#nav-main {
+#g-nav-main {
     @extend .grid-5;
     @extend .group;
 
@@ -234,31 +236,78 @@ body {
     }
 }
 
+#g-masthead-hr {
+    position: absolute;
+    margin-top: 0;
+    margin-bottom: 0;
+    @extend .grid-8;
+    top: 100%;
+    height: 3px;
+    border: 0;
+    background-color: $gold;
+}
+
 
 /* b.`content
+
 -------------------------- */
 
 #g-page {
-    border-top: 1px solid #333;
     background-color: #fff;
     margin-bottom: $base*2;
 }
 
 .page {
+    display: none;
     @extend .group;
     margin-bottom: $base;
-    border-top: 3px solid $gold;
+    margin-top: 3px;
     color: #333;
 }
 
+.breadcrumb {
+    @extend .grid-8;
+    @extend .big;
+    @extend .group;
+    border-bottom: 1px solid #f5f5f5;
+    background-color: #fafafa;
+
+    a {
+        display: block;
+        float: left;
+        padding: $base/4;
+
+        &:hover {
+
+            .action {
+                color: $mustard;
+            }
+
+            .location {
+                color: #666;
+            }
+        }
+
+        span {
+            @include transition( color );
+        }
+    }
+
+    .action {
+        color: #666;
+    }
+
+    .location {
+        @extend .futura-oblique;
+        color: #bbb;
+    }
+}
+
 .subheader {
     @extend .grid-8;
     padding: $base*2 0;
-    text-align: center;
 
     h1, h3 {
-        display: inline;
-        padding: $base/10;
         margin: 0;
         @extend .tight-line-height;
     }
@@ -272,6 +321,9 @@ body {
     }
 }
 
+.main-content {
+    @extend .grid-8;
+}
 
 /* c.`footer
 -------------------------- */

diff --git a/public/assets/img/avatar-univerisity-generic.gif b/public/assets/img/avatar-univerisity-generic.gif
new file mode 100644 (file)
index 0000000..9fa39f9
Binary files /dev/null and b/public/assets/img/avatar-univerisity-generic.gif differ

diff --git a/public/index.html b/public/index.html
index 446edf86f364d2f4db1f9f3e73357debe05f52a0..cd69ffdf942d7090ad03f8c8409758ba007bd9dd 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -50,16 +50,13 @@
         <header id="g-masthead">
             <div class="wrapper">
 
-                <nav id="nav-user">
+                <nav id="g-nav-user">
                     <ul>
                         <li class="first"><a href="#" class="username"></a></li>
                         <li><a href="/register">Register</a></li>
                         <li class="last"><a href="/login">Login</a></li>
                     </ul>
                 </nav>
-            </div>
-
-            <div class="wrapper">
 
                 <div id="g-logo">
                     <a href="/">
@@ -67,8 +64,7 @@
                     </a>
                 </div>
 
-
-                <nav id="nav-main">
+                <nav id="g-nav-main">
                     <ul>
                         <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>
@@ -80,6 +76,7 @@
                         <!-- li><a href="#" class="donate"><em class="icon"></em><em class="lc yellow">Donate</em></a></li -->
                     </ul>
                 </nav>
+                <hr id="g-masthead-hr" />
             </div>
         </header>
         <div id="topofcontent"></div>
@@ -150,27 +147,49 @@
                         </section>
                     </div>
                 </div>
-          <!--================================================================= -->
+
+          <!--=================================================================-->
 
                 <div class="page" id="pg_schools">
-                    <h1>Universities</h1>
+
+                    <header class="breadcrumb">
+                        <a href="#"><span class="action">&#139; Back</span><span class="location">&nbsp;to Home</span></a>
+                    </header>
+
+                    <header class="subheader">
+                        <h1>Universities</h1>
+                    </header>
+
+                    <div class="main-content">
+                        <ul id="schools">
+                        </ul>
+                    </div>
                 </div>
+
                 <script id="schoolTmpl" type="text/x-jquery-tmpl">
-                    <a href="school/${_id}" class="school">
-                        <div class="name">${name}</div>
-                        <div class="desc">${description}</div>
-                        <ul class="courses">
-                            {{tmpl(courses) "#course"}}
-                        </ul>
-                    </a> <!-- .school -->
+                    <li>
+                        <a href="school/${_id}" class="school">
+                            <img class="icon-pair" src="/assets/img/avatar-univerisity-generic.gif" alt="" />
+                            <div class="text-pair">
+                                <span class="school_name">${name}</span>
+                                <!-- <h4>${description}</h4>-->
+                                <span class="number_of_courses">12 Courses, </span>
+                                <span class="number_of_notes">27 Notes</span>
+                            </div>
+                        </a>
+                    </li>
                 </script>
+
                 <script id="course" type="text/x-jquery-tmpl">
                     <li>${dept}: ${name} (${number})</li>
                 </script>
 
-          <!--================================================================= -->
+          <!--=================================================================-->
+
                 <div class=page id=pg_courses>
-                    <h1>Courses for <span id=school_name></span></h1>
+                    <div class="subheader">
+                        <h1>Courses for <span id=school_name></span></h1>
+                    </div>
                 <div>
               <span class="sub_menu" style="display:none;">
               </span>

diff --git a/public/javascripts/main.js b/public/javascripts/main.js
index 000c933b6c94df38dec185ff5ce76222293f2b56..d5859e67cc22bf77ff056b05ada91ae4c23d2897 100644 (file)
--- a/public/javascripts/main.js
+++ b/public/javascripts/main.js
@@ -132,7 +132,6 @@ router.add('home', false, function(cb) {
   }
 });
 
-
 // go to the page that lists the schools
 router.add('schools', function(data, cb) {
 
@@ -142,13 +141,11 @@ router.add('schools', function(data, cb) {
     id: 'school',
     data: data.schools
   }
-  console.log(response.data);
 
-  $('#pg_schools').css('display', 'block');
-  $('#schoolTmpl').tmpl( data.schools ).appendTo("#pg_schools");
+  $('#pg_schools').fadeIn();
+  $('#schoolTmpl').tmpl( data.schools ).appendTo("#pg_schools #schools");
 });
 
-
 // go to the page that lists the courses for a specific school
 router.add('school', function(data, cb) {
   $('#school_link').addClass('active');
@@ -185,9 +182,6 @@ router.add('school', function(data, cb) {
   cb("courses", response)
 });
 
-
-
-
 // go to the page that lists the lectures for a specific course
 router.add('course', function(data, cb) {
   $('#school_link').addClass('active');
@@ -253,7 +247,6 @@ router.add('course', function(data, cb) {
       })
     });
   }
-
 });