I believe I have the rest of the content properly styled. I am not 10…

…0% sure I like how everything has been constructed; but, it seems to work ok for now.
bennadel · Jul 22, 2012 · 61f0792 · 61f0792
1 parent c028157
commit 61f0792
Show file tree

Hide file tree

Showing 20 changed files with 584 additions and 154 deletions.
diff --git a/wwwroot/controllers/security/forgotPassword.cfm b/wwwroot/controllers/security/forgotPassword.cfm
@@ -9,7 +9,7 @@
 
 		// The user will be sent a "password reset" email with a link
 		// to a page that will collection a new password.
-		location( url="./index.cfm?event=security.passwordResetSent", addToken="false" );
+		location( url="./index.cfm?event=security.login", addToken="false" );
 
 	}
 

diff --git a/wwwroot/css/layouts/master.css b/wwwroot/css/layouts/master.css
@@ -1,10 +1,28 @@
 
+/* Base styles for this layout. */
+
 body {
 	background-color: #F0F0F0 ;
 	margin: 0px 0px 100px 0px ;
 	padding: 0px 0px 0px 0px ;
 	}
 
+h1 {
+	border-bottom: 1px solid #CCCCCC ;
+	font-size: 22px ;
+	font-weight: 400 ;
+	line-height: 27px ;
+	margin: 10px 0px 30px 0px ;
+	}
+
+input {
+	border: 1px solid #999999 ;
+	}
+
+
+
+/* Layout definition. */
+
 div.l-siteWrapper {
 	margin: 0px auto 0px auto ;
 	width: 500px ;

diff --git a/wwwroot/css/modules/form.css b/wwwroot/css/modules/form.css
@@ -0,0 +1,95 @@
+
+form.m-form {
+	margin-bottom: 30px ;
+	}
+
+form.m-form input {
+	font-size: 18px ;
+	padding: 7px 0px 7px 0px ;
+	text-indent: 8px ;
+	vertical-align: middle ;
+	}
+
+form.m-form select {
+	font-size: 20px ;
+	vertical-align: middle ;
+	}
+
+form.m-form div.entries {}
+
+form.m-form div.entry {
+	margin-bottom: 20px ;
+	}
+
+form.m-form div.stackedEntry {}
+
+form.m-form div.stackedEntry label {
+	display: block ;
+	font-size: 18px ;
+	font-weight: bold ;
+	line-height: 23px ;
+	margin: 0px 0px 3px 0px ;
+	}
+
+form.m-form div.stackedEntry label span.explanation {
+	font-weight: 400 ;
+	}
+
+form.m-form div.stackedEntry input.block {
+	display: block ;
+	}
+
+form.m-form div.stackedEntry input.fullWidth {
+	width: 95% ;
+	}
+
+form.m-form div.stackedEntry div.note {
+	font-size: 13px ;
+	line-height: 16px ;
+	margin-top: 7px ;
+	}
+
+form.m-form div.lazyEntry {
+	display: none ;
+	}
+
+form.m-form div.lazyLoader {
+	margin: 0px 0px 20px 0px ;
+	}
+
+form.m-form div.lazyLoader a {
+	color: #999999 ;
+	}
+
+form.m-form div.relatedFields {}
+
+form.m-form div.relatedFields span.midText {
+	display: inline-block ;
+	padding-left: 5px ;
+	padding-right: 5px ;
+	}
+
+form.m-form div.relatedFields span.endText {
+	display: inline-block ;
+	padding-left: 5px ;
+	}
+
+form.m-form div.buttons {
+	margin-top: 30px ;
+	}
+
+form.m-form div.buttons button {
+	background-color: #666666 ;
+	border: none ;
+	color: #FFFFFF ;
+	cursor: pointer ;
+	display: inline-block ;
+	font-size: 20px ;
+	font-weight: 100 ;
+	margin-right: 15px ;
+	padding: 10px 20px 10px 20px ;
+	}
+
+form.m-form div.buttons button.primary {
+	background-color: #333333 ;
+	}
diff --git a/wwwroot/css/modules/siteAlert.css b/wwwroot/css/modules/siteAlert.css
@@ -0,0 +1,9 @@
+
+div.m-siteAlert {
+	background-color: #F0F0F0 ;
+	font-size: 13px ;
+	line-height: 18px ;
+	margin-bottom: 30px ;
+	padding: 12px 10px 12px 10px ;
+	text-align: center ;
+	}
diff --git a/wwwroot/css/modules/siteExplanation.css b/wwwroot/css/modules/siteExplanation.css
@@ -1,18 +1,18 @@
 
-div.siteExplanation {
+div.m-siteExplanation {
 	color: #999999 ;
 	font-size: 12px ;
 	line-height: 17px ;
 	}
 
-div.siteExplanation h4 {
+div.m-siteExplanation h4 {
 	margin: 0px 0px 2px 0px ;
 	}
 
-div.siteExplanation p {
+div.m-siteExplanation p {
 	margin: 0px 0px 0px 0px ;
 	}
 
-div.siteExplanation a {
+div.m-siteExplanation a {
 	color: #999999 ;
 	}
diff --git a/wwwroot/css/modules/siteNavigation.css b/wwwroot/css/modules/siteNavigation.css
@@ -1,5 +1,5 @@
 
-ul.siteNavigation {
+ul.m-siteNavigation {
 	background-color: #CCCCCC ;
 	font-size: 16px ;
 	height: 35px ;
@@ -10,21 +10,21 @@ ul.siteNavigation {
 	padding: 0px 0px 0px 0px ;
 	}
 
-ul.siteNavigation li.navItem {
+ul.m-siteNavigation li.navItem {
 	float: left ;
 	}
 
-ul.siteNavigation li.rightNavItem {
+ul.m-siteNavigation li.rightNavItem {
 	float: right ;
 	}
 
-ul.siteNavigation a {
+ul.m-siteNavigation a {
 	display: block ;
 	padding: 0px 20px 0px 20px ;
 	text-decoration: none ;
 	}
 
-ul.siteNavigation li.activeNavItem a {
+ul.m-siteNavigation li.activeNavItem a {
 	background-color: #333333 ;
 	color: #FFFFFF ;
 	}
diff --git a/wwwroot/css/modules/siteTitle.css b/wwwroot/css/modules/siteTitle.css
@@ -1,20 +1,21 @@
 
-a.siteTitle {
+a.m-siteTitle {
 	color: #333333 ;
 	display: block ;
 	font-family: "Yanone Kaffeesatz" ;
 	font-size: 34px ;
+	height: 39px ;
 	line-height: 39px ;
 	text-decoration: none ;
 	}
 
-a.siteTitle span.primary {
+a.m-siteTitle span.primary {
 	display: inline-block ;
 	font-weight: 700 ;
 	text-transform: uppercase ;
 	}
 
-a.siteTitle span.secondary {
+a.m-siteTitle span.secondary {
 	color: #CCCCCC ;
 	display: inline-block ;
 	font-weight: 200 ;

diff --git a/wwwroot/css/modules/taskList.css b/wwwroot/css/modules/taskList.css
@@ -0,0 +1,57 @@
+
+form.m-taskList {
+	font-size: 16px ;
+	margin-bottom: 30px ;
+	}
+
+form.m-taskList ol.tasks {
+	list-style-type: none ;
+	margin: 0px 0px 0px 0px ;
+	padding: 0px 0px 0px 0px ;
+	}
+
+form.m-taskList li.task {
+	background-color: #F0F0F0 ;
+	border: 1px solid #CCCCCC ;
+	margin: 0px 0px 10px 0px ;
+	position: relative ;
+	}
+
+form.m-taskList li.task input.isComplete {
+	position: absolute ;
+	left: 6px ;
+	top: 13px ;
+	}
+
+form.m-taskList li.task a.view {
+	display: block ;
+	height: 47px ;
+	line-height: 47px ;
+	margin-left: 35px ;
+	overflow: hidden ;
+	padding-right: 45px ;
+	position: relative ;
+	text-decoration: none ;
+	}
+
+form.m-taskList li.task span.description {
+	display: block ;
+	overflow: hidden ;
+	text-overflow: ellipsis ;
+	white-space: nowrap ;
+	}
+
+form.m-taskList li.task span.arrow {
+	background-color: #FFFFFF ;
+	border-radius: 12.5px 12.5px 12.5px 12.5px ;
+	font-size: 18px ;
+	font-weight: bold ;
+	height: 25px ;
+	line-height: 25px ;
+	position: absolute ;
+	right: 11px ;
+	text-align: center ;
+	text-indent: 3px ;
+	top: 11px ;
+	width: 25px ;
+	}
diff --git a/wwwroot/css/security.css b/wwwroot/css/security.css
@@ -1,6 +1,8 @@
 
 @import url( "./reset.css" );
 @import url( "./layouts/master.css" );
+@import url( "./modules/siteAlert.css" );
 @import url( "./modules/siteTitle.css" );
 @import url( "./modules/siteNavigation.css" );
+@import url( "./modules/form.css" );
 @import url( "./modules/siteExplanation.css" );
diff --git a/wwwroot/css/standard.css b/wwwroot/css/standard.css
@@ -0,0 +1,9 @@
+
+@import url( "./reset.css" );
+@import url( "./layouts/master.css" );
+@import url( "./modules/siteAlert.css" );
+@import url( "./modules/siteTitle.css" );
+@import url( "./modules/siteNavigation.css" );
+@import url( "./modules/taskList.css" );
+@import url( "./modules/form.css" );
+@import url( "./modules/siteExplanation.css" );
diff --git a/wwwroot/layouts/master.cfm b/wwwroot/layouts/master.cfm
@@ -3,6 +3,7 @@
 <cfparam name="request.viewData.title" type="string" default="" />
 <cfparam name="request.viewData.cssFile" type="string" default="" />
 <cfparam name="request.viewData.navigationBody" type="string" default="" />
+<cfparam name="request.viewData.alertBody" type="string" default="" />
 <cfparam name="request.viewData.body" type="string" default="" />
 
 
@@ -40,7 +41,7 @@
 				<div class="l-siteHeader">
 
 
-					<a href="./index.cfm" class="siteTitle">
+					<a href="./index.cfm" class="m-siteTitle">
 						<span class="primary">My Tasks</span>
 						<span class="secondary">An MVC Learning Project</span>
 					</a>
@@ -64,6 +65,17 @@
 				<div class="l-siteBody">
 
 
+					<!-- BEGIN: Site Alert. -->
+					<cfif len( request.viewData.alertBody )>
+
+						<div class="m-siteAlert">
+							#request.viewData.alertBody#
+						</div>
+
+					</cfif>
+					<!-- END: Site Alert. -->
+
+
 					<!--- Include the primary body content. --->
 					#request.viewData.body#
 
@@ -79,7 +91,7 @@
 
 
 				<!-- BEGIN: Site Explanation. -->
-				<div class="siteExplanation">
+				<div class="m-siteExplanation">
 
 					<h4>
 						Really &mdash; Another Task App?

diff --git a/wwwroot/layouts/security.cfm b/wwwroot/layouts/security.cfm
@@ -11,7 +11,7 @@
 	<cfoutput>
 
 
-		<ul class="siteNavigation">
+		<ul class="m-siteNavigation">
 			<li class="navItem <cfif (request.viewData.activeNavItem eq "signIn")>activeNavItem</cfif>">
 				<a href="./index.cfm?event=security.login">Sign In</a>
 			</li>

diff --git a/wwwroot/layouts/standard.cfm b/wwwroot/layouts/standard.cfm
@@ -1,7 +1,7 @@
 
 <!--- Param the view data for the layout rendering. --->
 <cfparam name="request.viewData.title" type="string" default="" />
-<cfparam name="request.viewData.cssFile" type="string" default="security.css" />
+<cfparam name="request.viewData.cssFile" type="string" default="standard.css" />
 <cfparam name="request.viewData.activeNavItem" type="string" default="" />
 <cfparam name="request.viewData.body" type="string" default="" />
 
@@ -11,7 +11,7 @@
 	<cfoutput>
 
 
-		<ul class="siteNavigation">
+		<ul class="m-siteNavigation">
 			<li class="navItem <cfif (request.viewData.activeNavItem eq "tasks")>activeNavItem</cfif>">
 				<a href="./index.cfm?event=tasks">Tasks</a>
 			</li>