standardized format of creating new object

diff --git a/public/assets/css/screen.css b/public/assets/css/screen.css
index 1378222a159a124dca61090d8bc2bdf347502092..c17725fbc7bcfae55dff97ee7e6789a0e6f3dd22 100755 (executable)
--- a/public/assets/css/screen.css
+++ b/public/assets/css/screen.css
@@ -71,7 +71,7 @@ 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_courses .main-content, #pg_lectures .main-content {
+.grid-5, #g-nav-main, #pg_courses .main-content, #pg_lectures .main-content, #pg_notes .main-content {
   float: left;
   width: 59.091%;
   padding: 0;
@@ -326,6 +326,9 @@ body {
 body {
   background-position: 20% 0; }
 
+.sidebar form {
+  margin-left: 1.5em; }
+
 /* a.`header
 -------------------------- */
 #g-masthead {
@@ -402,7 +405,8 @@ body {
   color: #333; }
 
 .breadcrumb {
-  border-bottom: 1px solid #f5f5f5;
+  position: relative;
+  border-bottom: 1px solid #f7f7f7;
   background-color: #fafafa; }
   .breadcrumb a {
     display: block;
@@ -435,8 +439,8 @@ body {
   padding: 1.5em 0 2.25em;
   margin-bottom: 1.5em;
   border-top: 1px solid #fff;
-  border-bottom: 1px solid #f8f8f8;
-  background-color: #fcfcfc; }
+  border-bottom: 1px solid #f7f7f7;
+  background-color: #fbfbfb; }
   .subheader h1, .subheader h3 {
     margin: 0; }
   .subheader h1 {
@@ -504,6 +508,8 @@ input.text {
 
 form .row {
   margin-bottom: 0.75em; }
+  form .row button {
+    margin-top: 0.75em; }
 
 /* 3.`Extensible Classes
 ---------------------------------------------- */
@@ -674,6 +680,7 @@ form .row {
  2.Schools
  3.Courses
  4.Course
+ 5.Notes
 
 ----------------------------------------------------------------*/
 /* 0.`General
@@ -685,7 +692,9 @@ form .row {
 ---------------------------------------------- */
 #pg_home .subheader {
   text-align: center;
-  padding: 3em 0; }
+  padding: 3em 0;
+  border: 0;
+  background: none; }
 #pg_home .section-home {
   margin-bottom: 1.5em; }
 
@@ -785,6 +794,8 @@ form .row {
   #pg_lectures .lecture-name:hover {
     color: #e8a200; }
 
+/* 5.`Notes
+---------------------------------------------- */
 .link-bar {
   margin-left: -0.375em; }
   .link-bar li {

diff --git a/public/assets/css/scss/partials/_pages.scss b/public/assets/css/scss/partials/_pages.scss
index 8f68a75cb40a0dee89afe4ab2c756d0b0d6dab27..e218dbd182cc79ebcf16504f4a8ca6f41065426d 100644 (file)
--- a/public/assets/css/scss/partials/_pages.scss
+++ b/public/assets/css/scss/partials/_pages.scss
@@ -7,6 +7,7 @@
  2.Schools
  3.Courses
  4.Course
+ 5.Notes
 
 ----------------------------------------------------------------*/
 
@@ -26,6 +27,8 @@
     .subheader {
         text-align: center;
         padding: $base*2 0;
+                               border: 0;
+                               background: none;
     }
 
     h1 {
@@ -184,7 +187,7 @@
 
 #pg_lectures {
 
-       .main-content {
+               .main-content {
                @extend .grid-5;
        }
 
@@ -206,3 +209,13 @@
                }
        }
 }
+
+/* 5.`Notes
+---------------------------------------------- */
+
+#pg_notes {
+
+       .main-content {
+               @extend .grid-5;
+       }
+}

diff --git a/public/assets/css/scss/screen.scss b/public/assets/css/scss/screen.scss
index 442fe8940d4a913dc931493dc972bac4461495e1..5f8c16886e19ca0e758b08009001fafa84c4b684 100755 (executable)
--- a/public/assets/css/scss/screen.scss
+++ b/public/assets/css/scss/screen.scss
@@ -140,6 +140,10 @@ body {
 
 .sidebar {
        @extend .grid-3;
+
+       form {
+               margin-left: $base;
+       }
 }
 
 
@@ -274,52 +278,53 @@ body {
 }
 
 .page {
-    display: none;
-    @extend .group;
-    margin-bottom: $base;
-    margin-top: 3px;
-    color: #333;
+       display: none;
+       @extend .group;
+       margin-bottom: $base;
+       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;
-                               opacity: 0.7;
-                               @include transition( opacity );
-
-                               .action {
-                                       color: $mustard;
-                               }
-
-                               .location {
-                                       color: #666;
-                               }
-
-        &:hover {
-                                       opacity: 1;
-        }
-
-        span {
-            @include transition( color );
-        }
-    }
+       position: relative;
+       @extend .grid-8;
+       @extend .big;
+       @extend .group;
+       border-bottom: 1px solid #f7f7f7;
+       background-color: #fafafa;
+
+       a {
+               display: block;
+               float: left;
+               padding: $base/4;
+               opacity: 0.7;
+               @include transition( opacity );
+
+               .action {
+                       color: $mustard;
+               }
+
+               .location {
+                       color: #666;
+               }
+
+               &:hover {
+                       opacity: 1;
+               }
+
+               span {
+                               @include transition( color );
+               }
+       }
 
-    .action {
-        color: #666;
-    }
+       .action {
+               color: #666;
+       }
 
-    .location {
-        @extend .futura-oblique;
-        color: #bbb;
-    }
+       .location {
+               @extend .futura-oblique;
+               color: #bbb;
+       }
 }
 
 .subheader {
@@ -327,8 +332,8 @@ body {
     padding: $base 0 $base*1.5;
                margin-bottom: $base;
                border-top: 1px solid #fff;
-               border-bottom: 1px solid #f8f8f8;
-               background-color: #fcfcfc;
+               border-bottom: 1px solid #f7f7f7;
+               background-color: #fbfbfb;
 
     h1, h3 {
         margin: 0;
@@ -434,6 +439,7 @@ input.text {
 }
 
 .form-header {
+
        p {
                @extend .small;
        }
@@ -443,6 +449,10 @@ form {
 
        .row {
                margin-bottom: $base/2;
+
+               button {
+                       margin-top: $base/2;
+               }
        }
 }
 

diff --git a/public/index.html b/public/index.html
index 1c83553bd2b95ecd16dbacbf44a7f4f2be0f81d8..05178d415796f0a9c45e6856040e8cc8fadeccd7 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -255,7 +255,6 @@
                                                                                                        </div>
                                                                                                </div>
                                                                                                <div class="row">
-                                                                                                       <div class="label">&nbsp;</div>
                                                                                                        <div class="field">
                                                                                                                        <button>Create Course</button>
                                                                                                        </div>
@@ -288,12 +287,11 @@
                                                                                </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>
+                                                                               <form method="POST" id="form_lecture">
+                                                                                       <header class="form-header">
+                                                                                               <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>
+                                                                                       </header>
                                                                                        <div class="row">
                                                                                                <div class="label">Lecture Name</div>
                                                                                                <div class="field">
@@ -301,7 +299,6 @@
                                                                                                </div>
                                                                                        </div>
                                                                                        <div class="row">
-                                                                                               <div class="label">&nbsp;</div>
                                                                                                <div class="field">
                                                                                                        <button>Create Lecture</button>
                                                                                                </div>
@@ -320,38 +317,42 @@
                     <div class="proto notes_instructor" id=PROTO_notes_instructor>
                                                                                        <h4> Instructor: <span class="italic futura"> __name__ <a href="mailto:__email__" class="instructor_email">(__email__)</a></span></h4>
                     </div>
+                                                                       </header>
+                                                                       <div class="main-content">
                     <div class="proto note" id=PROTO_note>
                         <div class=name>
                             <a href="/note/___id__">__name__</a> Visits: __visits__
                         </div>
                     </div>
-            <div>
-              <span class="sub_menu" style="display:none;">
-                <a href="" id="new_note">New Note Pad</a>
-              </span>
-              <form method="POST" id="form_note" style="display:none;">
-                <h1>Create New Note Pad</h1>
-                <p>Use this form to create a new note pad. You can then use this as a notes-taking session.</p>
-                <div class="row">
-                  <div class="label">Note Pad Name</div>
-                  <div class="field">
-                    <input type="text" class="text" name="name">
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="label">Private</div>
-                  <div class="field">
-                    <input type="checkbox" name="private" value="true">
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="label">&nbsp;</div>
-                  <div class="field">
-                    <button>Create Note Pad</button>
-                  </div>
-                </div>
-              </form>
-            </div>
+                                                                       </div>
+                                                                       <div class="sidebar">
+                                                                               <span class="sub_menu" style="display:none;">
+                                                                                       <a href="" id="new_note">New Note Pad</a>
+                                                                               </span>
+                                                                               <form method="POST" id="form_note" style="display:none;">
+                                                                                       <header class="form-header">
+                                                                                               <h4>Create Note Pad</h4>
+                                                                                               <p>Use this form to create a new note pad. You can then use this as a notes-taking session.</p>
+                                                                                       </header>
+                                                                                       <div class="row">
+                                                                                               <div class="label">Note Pad Name</div>
+                                                                                               <div class="field">
+                                                                                                       <input type="text" class="text" name="name">
+                                                                                               </div>
+                                                                                       </div>
+                                                                                       <div class="row">
+                                                                                               <div class="label">Private</div>
+                                                                                               <div class="field">
+                                                                                                       <input type="checkbox" name="private" value="true">
+                                                                                               </div>
+                                                                                       </div>
+                                                                                       <div class="row">
+                                                                                               <div class="field">
+                                                                                                       <button>Create Note Pad</button>
+                                                                                               </div>
+                                                                                       </div>
+                                                                               </form>
+                                                                       </div>
                 </div>
           <!--================================================================= -->
                 <div class=page id=pg_archive_subjects>

diff --git a/public/javascripts/main.js b/public/javascripts/main.js
index 336ce8bdc1df6b16bced2fdffd220bc95db12808..f87ba4e5918e722f822297f03cfaf1938f842e16 100644 (file)
--- a/public/javascripts/main.js
+++ b/public/javascripts/main.js
@@ -191,7 +191,6 @@ router.add('course', function(data, cb) {
   $('#school_link').addClass('active');
   $('.sub_menu').hide();
   $('#new_lecture').unbind();
-  $('#form_lecture').hide().unbind();;
 
   var response = [];
 
@@ -229,27 +228,23 @@ router.add('course', function(data, cb) {
 
   if (data.course.authorized) {
     $('.sub_menu').show();
-    $('#new_lecture').click(function(e) {
-      e.preventDefault();
-
-      var form = $('#form_lecture');
-
-      form.toggle();
-
-      form.submit(function(e) {
-        e.preventDefault();
-
-        $.post(window.location.pathname, form.serialize(), function(data) {
-          if (data.status === 'error') {
-            message('error', data.message);
-          } else if (data.status === 'ok') {
-            form.hide();
-            goPage(window.location.pathname);
-            message('info', data.message);
-          }
-        });
-      })
-    });
+               var form = $('#form_lecture');
+
+               form.show();
+
+               form.submit(function(e) {
+                       e.preventDefault();
+
+                       $.post(window.location.pathname, form.serialize(), function(data) {
+                               if (data.status === 'error') {
+                                       message('error', data.message);
+                               } else if (data.status === 'ok') {
+                                       form.hide();
+                                       goPage(window.location.pathname);
+                                       message('info', data.message);
+                               }
+                       });
+               })
   }
 });
 
@@ -294,28 +289,22 @@ router.add('lecture', function(data, cb) {
   }
   
   if (data.lecture.authorized) {
-    $('.sub_menu').show();
-    $('#new_note').click(function(e) {
-      e.preventDefault();
-
-      var form = $('#form_note');
-
-      form.toggle();
 
-      form.submit(function(e) {
-        e.preventDefault();
-
-        $.post(window.location.pathname, form.serialize(), function(data) {
-          if (data.status === 'error') {
-            message('error', data.message);
-          } else if (data.status === 'ok') {
-            form.hide();
-            goPage(window.location.pathname);
-            message('info', data.message);
-          }
-        });
-      })
-    });
+               var form = $('#form_note').show();
+
+               form.submit(function(e) {
+                       e.preventDefault();
+
+                       $.post(window.location.pathname, form.serialize(), function(data) {
+                               if (data.status === 'error') {
+                                       message('error', data.message);
+                               } else if (data.status === 'ok') {
+                                       form.hide();
+                                       goPage(window.location.pathname);
+                                       message('info', data.message);
+                               }
+                       });
+               })
   }
 });