From a8f057f51f9be839f06f0179b31ce0690a034b03 Mon Sep 17 00:00:00 2001
From: jordan <jordancooperman@gmail.com>
Date: Sat, 21 Jan 2012 19:28:27 -0500
Subject: [PATCH] added simple default styling to buttons, moved 'create a new
 course' form to the sidebar of course pages

---
 public/assets/css/screen.css                |  47 ++++++---
 public/assets/css/scss/partials/_pages.scss |   4 +
 public/assets/css/scss/screen.scss          |  55 +++++++---
 public/index.html                           | 111 +++++++++++---------
 4 files changed, 137 insertions(+), 80 deletions(-)

diff --git a/public/assets/css/screen.css b/public/assets/css/screen.css
index cad05e3..07819b9 100755
--- a/public/assets/css/screen.css
+++ b/public/assets/css/screen.css
@@ -14,26 +14,26 @@ Please have a look around, I hope you enjoy your stay.
 
 [Table of contents] - a map of our grounds.
 
-    0.General
-        a.elements
-        b.classes
+	0.General
+		a.elements
+		b.classes
 
-    1.Layout
-        a.header
-        b.content
-        c.footer
+	1.Layout
+		a.header
+		b.content
+		c.footer
 
-    2.Extensible Classes
+	2.Forms
+	3.Extensible Classes
 
-
-    *.Pages, modules, sprites and media queries imported at end
+	*.Pages, modules, sprites and media queries imported at end
 
 ----------------------------------------------------------------
 
 [Prefixes] - some patterns that you may observe.
 
-    g: global
-    s: state
+	g: global
+	s: state
 
 ---------------------------------------------------------------- */
 /* 0.`General
@@ -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 {
+.grid-2, #pg_courses .sidebar {
   float: left;
   width: 21.591%;
   padding: 0;
@@ -132,7 +132,7 @@ body {
   font-size: 0.75em;
   line-height: 1em; }
 
-.small, #g-nav-user, #intro-schools li, .link-bar a {
+.small, #g-nav-user, .form-header p, #intro-schools li, .link-bar a {
   /* 14px / 18px */
   font-size: 0.875em;
   line-height: 1.286em; }
@@ -208,6 +208,13 @@ p {
 img {
   max-width: 100%; }
 
+button {
+  padding: 0.375em;
+  border: 0;
+  background: none;
+  background-color: #e8a200;
+  color: #fff; }
+
 ::-moz-selection {
   background: #44a1dd;
   color: #fff;
@@ -472,7 +479,17 @@ body {
     .footer .creative_commons a {
       color: #777; }
 
-/* 7.`Extensible Classes
+/* 2.`Forms
+---------------------------------------------- */
+input.text {
+  padding: 0.375em;
+  background-color: #e5e5e5;
+  border: 1px solid transparent; }
+  input.text:focus {
+    border: 1px solid #aaa;
+    outline: 0; }
+
+/* 3.`Extensible Classes
 ---------------------------------------------- */
 .group:after, .wrapper:after, #g-nav-main:after, .page:after, .breadcrumb:after, #schools li:after, .schools ul:after {
   content: ".";
diff --git a/public/assets/css/scss/partials/_pages.scss b/public/assets/css/scss/partials/_pages.scss
index 1d05d36..71ebcb6 100644
--- a/public/assets/css/scss/partials/_pages.scss
+++ b/public/assets/css/scss/partials/_pages.scss
@@ -130,6 +130,10 @@
         @extend .grid-6;
     }
 
+		.sidebar {
+			@extend .grid-2;
+		}
+
     .course {
         position: relative;
         margin-bottom: $base/2;
diff --git a/public/assets/css/scss/screen.scss b/public/assets/css/scss/screen.scss
index 3cd1d5b..9f1ac72 100755
--- a/public/assets/css/scss/screen.scss
+++ b/public/assets/css/scss/screen.scss
@@ -14,26 +14,26 @@ Please have a look around, I hope you enjoy your stay.
 
 [Table of contents] - a map of our grounds.
 
-    0.General
-        a.elements
-        b.classes
+	0.General
+		a.elements
+		b.classes
 
-    1.Layout
-        a.header
-        b.content
-        c.footer
+	1.Layout
+		a.header
+		b.content
+		c.footer
 
-    2.Extensible Classes
+	2.Forms
+	3.Extensible Classes
 
-
-    *.Pages, modules, sprites and media queries imported at end
+	*.Pages, modules, sprites and media queries imported at end
 
 ----------------------------------------------------------------
 
 [Prefixes] - some patterns that you may observe.
 
-    g: global
-    s: state
+	g: global
+	s: state
 
 ---------------------------------------------------------------- */
 
@@ -95,6 +95,14 @@ img {
     max-width: 100%;
 }
 
+button {
+	padding: $base/4;
+	border: 0;
+	background: none;
+	background-color: $mustard;
+	color: #fff;
+}
+
 ::-moz-selection { background: #44a1dd; color: #fff; text-shadow: none; }
 ::selection { background: #44a1dd; color: #fff; text-shadow: none; }
 
@@ -402,7 +410,28 @@ body {
   }
 }
 
-/* 7.`Extensible Classes
+/* 2.`Forms
+---------------------------------------------- */
+
+input.text {
+	padding: $base/4;
+	background-color: #e5e5e5;
+	border: 1px solid transparent;
+
+	&:focus {
+		border: 1px solid #aaa;
+		outline: 0;
+	}
+}
+
+.form-header {
+	p {
+		@extend .small;
+	}
+}
+
+
+/* 3.`Extensible Classes
 ---------------------------------------------- */
 
 .group {
diff --git a/public/index.html b/public/index.html
index 60b7cab..698aa5b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -216,57 +216,64 @@
                             </aside>
                         </div>
 
-                        <form method="POST" id="form_course" style="display:none;">
-                            <h1>Create New Course</h1>
-                            <p>Use this form to create a new course. After creating the course, you can create a lecture within it.</p>
-                            <div class="row">
-                                <div class="label">Course number</div>
-                                <div class="field">
-                                    <input type="text" name="number">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">Course name</div>
-                                <div class="field">
-                                    <input type="text" name="name">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">Course subject</div>
-                                <div class="field">
-                                    <input type="text" name="subject">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">Course department</div>
-                                <div class="field">
-                                    <input type="text" name="department">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">Instructor's Name</div>
-                                <div class="field">
-                                    <input type="text" name="instructorName">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">Instructor's Email</div>
-                                <div class="field">
-                                    <input type="text" name="email">
-                                </div>
-                            </div>
-                            <div class="row">
-                                <div class="label">&nbsp;</div>
-                                <div class="field">
-                                    <button>Create Course</button>
-                                </div>
-                            </div>
-                        </form>
                     </div>
+										<div class="sidebar">
+											<form method="POST" id="form_course" style="display:none;">
+												<header class="form-header">
+													<h4>Create New Course</h4>
+													<p>Use this form to create a new course. After creating the course, you can create a lecture within it.</p>
+												</header>
+												<div class="row">
+													<div class="label">Course number</div>
+													<div class="field">
+														<input type="text" class="text" name="number">
+													</div>
+												</div>
+												<div class="row">
+													<div class="label">Course name</div>
+													<div class="field">
+														<input type="text" class="text" name="name">
+													</div>
+												</div>
+												<div class="row">
+													<div class="label">Course subject</div>
+													<div class="field">
+														<input type="text" class="text" name="subject">
+													</div>
+												</div>
+												<div class="row">
+													<div class="label">Course department</div>
+													<div class="field">
+														<input type="text" class="text" name="department">
+													</div>
+												</div>
+												<div class="row">
+													<div class="label">Instructor's Name</div>
+													<div class="field">
+														<input type="text" class="text" name="instructorName">
+													</div>
+												</div>
+												<div class="row">
+													<div class="label">Instructor's Email</div>
+													<div class="field">
+														<input type="text" class="text" name="email">
+													</div>
+												</div>
+												<div class="row">
+													<div class="label">&nbsp;</div>
+													<div class="field">
+															<button>Create Course</button>
+													</div>
+												</div>
+											</form>
+										</div>
                 </div>
 
                 <!--================================================================= -->
                 <div class=page id=pg_lectures>
+                    <header class="breadcrumb">
+                        <a href="#"><span class="action">&#139; Back</span><span class="location">&nbsp;to to Lectures</span></a>
+                    </header>
 									<header class="subheader">
 										<div class="proto lectures_head" id=PROTO_lectures_head>
 											<h2>Lectures for Course __number__ : __name__</h2>
@@ -297,7 +304,7 @@
 										<div class="row">
 											<div class="label">Lecture Name</div>
 											<div class="field">
-												<input type="text" name="name">
+												<input type="text" class="text" name="name">
 											</div>
 										</div>
 										<div class="row">
@@ -335,7 +342,7 @@
                 <div class="row">
                   <div class="label">Note Pad Name</div>
                   <div class="field">
-                    <input type="text" name="name">
+                    <input type="text" class="text" name="name">
                   </div>
                 </div>
                 <div class="row">
@@ -402,7 +409,7 @@
                                     <label for="email">School email*</label>
                                 </div>
                                 <div class="field">
-                                    <input type="text" name="email">
+                                    <input type="text" class="text" name="email">
                                 </div>
                             </div>
                             <div class="row">
@@ -442,7 +449,7 @@
                                     <label for="name">Site Handle</label>
                                 </div>
                                 <div class="field">
-                                    <input type="text" name="name">
+                                    <input type="text" class="text" name="name">
                                 </div>
                             </div>
                             <div class="row">
@@ -579,7 +586,7 @@
                                     <label for="email">School email</label>
                                 </div>
                                 <div class="field">
-                                    <input type="text" name="email" size="15" value="joe@sleepless.com">
+                                    <input type="text" class="text" name="email" size="15" value="joe@sleepless.com">
                                 </div>
                             </div>
                             <div class="row">
@@ -624,7 +631,7 @@
                     <label for="email">School email</label>
                   </div>
                   <div class="field">
-                    <input type="text" name="email" size="15" value="">
+                    <input type="text" class="text" name="email" size="15" value="">
                   </div>
                 </div>
                 <div class="row">
-- 
2.25.1