From ee2e3781e55e3524fe8ae5123a06e9fdaf63c71f Mon Sep 17 00:00:00 2001
From: Teddy Wing
Date: Fri, 23 Jan 2015 23:02:44 -0500
Subject: application.js: Include Angular.js globally

---
 app/assets/javascripts/application.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'app')

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 4a2ae1d..9e42736 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -13,4 +13,5 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
+//= require angular/angular
 //= require_tree .
-- 
cgit v1.2.3


From f708e80dfb4440c4a2e5b26fdfe1179b0408ae17 Mon Sep 17 00:00:00 2001
From: Teddy Wing
Date: Fri, 23 Jan 2015 23:04:04 -0500
Subject: Create HomeController

---
 app/assets/javascripts/home.coffee | 3 +++
 app/assets/stylesheets/home.scss   | 3 +++
 app/controllers/home_controller.rb | 2 ++
 app/helpers/home_helper.rb         | 2 ++
 4 files changed, 10 insertions(+)
 create mode 100644 app/assets/javascripts/home.coffee
 create mode 100644 app/assets/stylesheets/home.scss
 create mode 100644 app/controllers/home_controller.rb
 create mode 100644 app/helpers/home_helper.rb

(limited to 'app')

diff --git a/app/assets/javascripts/home.coffee b/app/assets/javascripts/home.coffee
new file mode 100644
index 0000000..24f83d1
--- /dev/null
+++ b/app/assets/javascripts/home.coffee
@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/
diff --git a/app/assets/stylesheets/home.scss b/app/assets/stylesheets/home.scss
new file mode 100644
index 0000000..f0ddc68
--- /dev/null
+++ b/app/assets/stylesheets/home.scss
@@ -0,0 +1,3 @@
+// Place all the styles related to the home controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
new file mode 100644
index 0000000..fc0b474
--- /dev/null
+++ b/app/controllers/home_controller.rb
@@ -0,0 +1,2 @@
+class HomeController < ApplicationController
+end
diff --git a/app/helpers/home_helper.rb b/app/helpers/home_helper.rb
new file mode 100644
index 0000000..23de56a
--- /dev/null
+++ b/app/helpers/home_helper.rb
@@ -0,0 +1,2 @@
+module HomeHelper
+end
-- 
cgit v1.2.3


From c372914af04268126d1e4a11af1c8d9baa014167 Mon Sep 17 00:00:00 2001
From: Teddy Wing
Date: Fri, 23 Jan 2015 23:21:18 -0500
Subject: Create an index page

* Add `main` action to HomeController
* Set `main` as our root route
* Create a view for `main` with dummy text
---
 app/controllers/home_controller.rb | 2 ++
 app/views/home/main.html.erb       | 1 +
 2 files changed, 3 insertions(+)
 create mode 100644 app/views/home/main.html.erb

(limited to 'app')

diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb
index fc0b474..82601c1 100644
--- a/app/controllers/home_controller.rb
+++ b/app/controllers/home_controller.rb
@@ -1,2 +1,4 @@
 class HomeController < ApplicationController
+  def main
+  end
 end
diff --git a/app/views/home/main.html.erb b/app/views/home/main.html.erb
new file mode 100644
index 0000000..b2ebb94
--- /dev/null
+++ b/app/views/home/main.html.erb
@@ -0,0 +1 @@
+hello from home
-- 
cgit v1.2.3


From 2289566e8eec89f14d18d0c8480f0c1ba446ea95 Mon Sep 17 00:00:00 2001
From: Teddy Wing
Date: Sat, 24 Jan 2015 03:26:08 -0500
Subject: Add markup & styles for main page

Style to have a header, fixed sidebar with links to notes, and lorem
ipsum as a main section.
---
 app/assets/stylesheets/app.scss             |  5 ++
 app/assets/stylesheets/application.css      |  3 +-
 app/assets/stylesheets/application.scss     |  5 ++
 app/assets/stylesheets/components/type.scss |  8 +++
 app/assets/stylesheets/layouts/_global.scss | 81 +++++++++++++++++++++++++++++
 app/assets/stylesheets/layouts/reset.scss   |  1 +
 app/views/home/main.html.erb                | 46 +++++++++++++++-
 app/views/layouts/application.html.erb      |  2 +-
 8 files changed, 148 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/stylesheets/app.scss
 create mode 100644 app/assets/stylesheets/application.scss
 create mode 100644 app/assets/stylesheets/components/type.scss
 create mode 100644 app/assets/stylesheets/layouts/_global.scss
 create mode 100644 app/assets/stylesheets/layouts/reset.scss

(limited to 'app')

diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
new file mode 100644
index 0000000..47695ad
--- /dev/null
+++ b/app/assets/stylesheets/app.scss
@@ -0,0 +1,5 @@
+@import "layouts/reset";
+
+@import "components/type";
+
+@import "layouts/global";
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index f9cd5b3..b1bc0e8 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -10,6 +10,7 @@
  * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
  * file per style scope.
  *
- *= require_tree .
+ *= require app
  *= require_self
+ *
  */
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
new file mode 100644
index 0000000..47695ad
--- /dev/null
+++ b/app/assets/stylesheets/application.scss
@@ -0,0 +1,5 @@
+@import "layouts/reset";
+
+@import "components/type";
+
+@import "layouts/global";
diff --git a/app/assets/stylesheets/components/type.scss b/app/assets/stylesheets/components/type.scss
new file mode 100644
index 0000000..7e8fc05
--- /dev/null
+++ b/app/assets/stylesheets/components/type.scss
@@ -0,0 +1,8 @@
+.font-weight-semibold {
+	font-weight: 600;
+}
+
+
+.font-size-28 {
+	font-size: 28px;
+}
diff --git a/app/assets/stylesheets/layouts/_global.scss b/app/assets/stylesheets/layouts/_global.scss
new file mode 100644
index 0000000..e952fb2
--- /dev/null
+++ b/app/assets/stylesheets/layouts/_global.scss
@@ -0,0 +1,81 @@
+body {
+	font-family: Avenir, Verdana, Helvetica, sans-serif;
+	color: #170e0b;
+}
+
+
+.display-block {
+	display: block;
+}
+
+
+.margin-top-70 {
+	margin-top: 70px;
+}
+
+
+.padding-13 {
+	padding: 13px;
+}
+
+
+.position-fixed {
+	position: fixed;
+}
+
+
+.top-0 {
+	top: 0;
+}
+
+
+.min-height-100\% {
+	min-height: 100%;
+}
+
+
+.header {
+	background-color: rgb(229, 226, 216);
+	width: 100%;
+	height: 30px;
+	padding: 20px;
+}
+
+
+$sidebar-width: 250px;
+
+.sidebar {
+	background-color: rgb(242, 239, 239);
+	width: $sidebar-width;
+	height: 100%;
+	border-right: 2px solid rgb(234, 224, 224);
+	overflow: auto;
+
+	a {
+		border-bottom: 1px solid rgb(213, 202, 202);
+		color: rgb(18, 113, 18);
+		text-decoration: none;
+	}
+	
+	a:hover,
+	.active {
+		background: #249124; /* Old browsers */
+		background: -moz-linear-gradient(top, #249124 0%, #127112 100%); /* FF3.6+ */
+		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#249124), color-stop(100%,#127112)); /* Chrome,Safari4+ */
+		background: -webkit-linear-gradient(top, #249124 0%,#127112 100%); /* Chrome10+,Safari5.1+ */
+		background: -o-linear-gradient(top, #249124 0%,#127112 100%); /* Opera 11.10+ */
+		background: -ms-linear-gradient(top, #249124 0%,#127112 100%); /* IE10+ */
+		background: linear-gradient(to bottom, #249124 0%,#127112 100%); /* W3C */
+		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#249124', endColorstr='#127112',GradientType=0 ); /* IE6-9 */
+		
+		color: #ddd;
+	}
+}
+
+
+.note-editor {
+	margin-left: $sidebar-width;
+	padding: 12px 15px;
+	font: 18px/1.7 Georgia, Times, serif;
+	outline: none;
+}
diff --git a/app/assets/stylesheets/layouts/reset.scss b/app/assets/stylesheets/layouts/reset.scss
new file mode 100644
index 0000000..685c00a
--- /dev/null
+++ b/app/assets/stylesheets/layouts/reset.scss
@@ -0,0 +1 @@
+html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
diff --git a/app/views/home/main.html.erb b/app/views/home/main.html.erb
index b2ebb94..c3bbcd5 100644
--- a/app/views/home/main.html.erb
+++ b/app/views/home/main.html.erb
@@ -1 +1,45 @@
-hello from home
+<div class="header position-fixed top-0">
+	<h1 class="font-size-28 font-weight-semibold">Notes</h1>
+</div>
+
+<div class="margin-top-70">
+	<div class="sidebar position-fixed min-height-100%">
+		<a href="#" class="display-block padding-13">A Note</a>
+		<a href="#" class="display-block padding-13">A Note</a>
+		<a href="#" class="display-block padding-13">A Note</a>
+	</div>
+
+	<div class="note-editor" contenteditable>
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in eleifend tellus, sed porta sapien. Nullam eget sodales neque. Proin non ornare libero, et condimentum risus. Suspendisse felis orci, rhoncus vitae mauris et, finibus sagittis felis. Aliquam egestas orci eu viverra varius. Suspendisse sollicitudin maximus purus, non egestas tellus lacinia et. Duis hendrerit arcu eu molestie dignissim. Curabitur pharetra erat vitae nibh posuere malesuada. Suspendisse tempus, massa eget elementum ultrices, nunc velit euismod justo, vitae interdum ipsum justo in lectus.
+		
+		Cras vel faucibus sapien, in laoreet ligula. Donec magna libero, vulputate nec fringilla id, dictum quis urna. Aenean non vehicula metus. Integer nec libero consequat justo elementum scelerisque. Morbi elementum elit quis diam feugiat, sed sagittis eros placerat. Vivamus pretium porta eros, sed accumsan urna venenatis et. Donec egestas tortor id iaculis placerat. Ut sit amet sollicitudin mauris. Quisque pharetra nunc felis, quis vulputate lacus mollis vel. Pellentesque accumsan efficitur congue. Sed sed est risus. In eu elementum nibh. Aliquam pretium ex felis, vitae cursus lorem sagittis eu. Vestibulum at turpis non odio consequat dignissim.
+		
+		Proin lobortis nec sem non aliquam. Curabitur pulvinar turpis sit amet felis ullamcorper blandit. In feugiat sem enim, id egestas tellus faucibus eget. Etiam neque neque, porta vitae est vel, vehicula condimentum urna. Nunc dignissim nunc at nisl facilisis porta. Nulla auctor, elit sed imperdiet tincidunt, tellus mauris consectetur massa, at luctus ligula est vitae lacus. Cras a ultricies elit, id porta turpis. Morbi id metus et justo scelerisque auctor ac id nunc. Proin mauris arcu, sodales in vestibulum eu, semper non sem. Donec pellentesque laoreet tellus eget dignissim. Sed est justo, bibendum ac nulla eget, aliquet ullamcorper odio.
+		
+		In iaculis interdum velit vel faucibus. In commodo tellus massa, sit amet mattis libero faucibus a. Curabitur a nunc id tellus condimentum venenatis. Pellentesque sem nisl, imperdiet eu est et, accumsan ornare nulla. Duis eget velit tempus, porttitor ligula et, tincidunt dolor. Pellentesque orci lorem, pulvinar quis posuere sed, cursus semper mauris. Suspendisse potenti. Integer scelerisque, neque ut cursus mollis, urna ipsum sagittis ante, eu placerat est enim mollis neque. Aliquam sit amet lectus sit amet justo placerat semper at et quam. Quisque in congue arcu. Curabitur condimentum, metus ut vehicula pharetra, sapien lectus porta arcu, vel posuere nulla ligula vel lacus.
+		
+		Mauris non mi eget sem aliquam volutpat. Sed orci nisi, facilisis ac sem nec, faucibus vestibulum metus. Mauris augue turpis, lobortis finibus vulputate at, efficitur id ipsum. Sed et bibendum eros. Proin tempor quam at elit euismod cursus. Cras ac ipsum eget leo condimentum bibendum at eget urna. Sed non felis sit amet leo molestie commodo sed in mauris. Nulla faucibus porttitor felis, eget fermentum est commodo non. Nulla facilisi. Ut nulla arcu, tincidunt auctor sapien eu, condimentum facilisis risus. Cras malesuada quis risus vitae fermentum.
+		
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in eleifend tellus, sed porta sapien. Nullam eget sodales neque. Proin non ornare libero, et condimentum risus. Suspendisse felis orci, rhoncus vitae mauris et, finibus sagittis felis. Aliquam egestas orci eu viverra varius. Suspendisse sollicitudin maximus purus, non egestas tellus lacinia et. Duis hendrerit arcu eu molestie dignissim. Curabitur pharetra erat vitae nibh posuere malesuada. Suspendisse tempus, massa eget elementum ultrices, nunc velit euismod justo, vitae interdum ipsum justo in lectus.
+		
+		Cras vel faucibus sapien, in laoreet ligula. Donec magna libero, vulputate nec fringilla id, dictum quis urna. Aenean non vehicula metus. Integer nec libero consequat justo elementum scelerisque. Morbi elementum elit quis diam feugiat, sed sagittis eros placerat. Vivamus pretium porta eros, sed accumsan urna venenatis et. Donec egestas tortor id iaculis placerat. Ut sit amet sollicitudin mauris. Quisque pharetra nunc felis, quis vulputate lacus mollis vel. Pellentesque accumsan efficitur congue. Sed sed est risus. In eu elementum nibh. Aliquam pretium ex felis, vitae cursus lorem sagittis eu. Vestibulum at turpis non odio consequat dignissim.
+		
+		Proin lobortis nec sem non aliquam. Curabitur pulvinar turpis sit amet felis ullamcorper blandit. In feugiat sem enim, id egestas tellus faucibus eget. Etiam neque neque, porta vitae est vel, vehicula condimentum urna. Nunc dignissim nunc at nisl facilisis porta. Nulla auctor, elit sed imperdiet tincidunt, tellus mauris consectetur massa, at luctus ligula est vitae lacus. Cras a ultricies elit, id porta turpis. Morbi id metus et justo scelerisque auctor ac id nunc. Proin mauris arcu, sodales in vestibulum eu, semper non sem. Donec pellentesque laoreet tellus eget dignissim. Sed est justo, bibendum ac nulla eget, aliquet ullamcorper odio.
+		
+		In iaculis interdum velit vel faucibus. In commodo tellus massa, sit amet mattis libero faucibus a. Curabitur a nunc id tellus condimentum venenatis. Pellentesque sem nisl, imperdiet eu est et, accumsan ornare nulla. Duis eget velit tempus, porttitor ligula et, tincidunt dolor. Pellentesque orci lorem, pulvinar quis posuere sed, cursus semper mauris. Suspendisse potenti. Integer scelerisque, neque ut cursus mollis, urna ipsum sagittis ante, eu placerat est enim mollis neque. Aliquam sit amet lectus sit amet justo placerat semper at et quam. Quisque in congue arcu. Curabitur condimentum, metus ut vehicula pharetra, sapien lectus porta arcu, vel posuere nulla ligula vel lacus.
+		
+		Mauris non mi eget sem aliquam volutpat. Sed orci nisi, facilisis ac sem nec, faucibus vestibulum metus. Mauris augue turpis, lobortis finibus vulputate at, efficitur id ipsum. Sed et bibendum eros. Proin tempor quam at elit euismod cursus. Cras ac ipsum eget leo condimentum bibendum at eget urna. Sed non felis sit amet leo molestie commodo sed in mauris. Nulla faucibus porttitor felis, eget fermentum est commodo non. Nulla facilisi. Ut nulla arcu, tincidunt auctor sapien eu, condimentum facilisis risus. Cras malesuada quis risus vitae fermentum.
+		
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in eleifend tellus, sed porta sapien. Nullam eget sodales neque. Proin non ornare libero, et condimentum risus. Suspendisse felis orci, rhoncus vitae mauris et, finibus sagittis felis. Aliquam egestas orci eu viverra varius. Suspendisse sollicitudin maximus purus, non egestas tellus lacinia et. Duis hendrerit arcu eu molestie dignissim. Curabitur pharetra erat vitae nibh posuere malesuada. Suspendisse tempus, massa eget elementum ultrices, nunc velit euismod justo, vitae interdum ipsum justo in lectus.
+		
+		Cras vel faucibus sapien, in laoreet ligula. Donec magna libero, vulputate nec fringilla id, dictum quis urna. Aenean non vehicula metus. Integer nec libero consequat justo elementum scelerisque. Morbi elementum elit quis diam feugiat, sed sagittis eros placerat. Vivamus pretium porta eros, sed accumsan urna venenatis et. Donec egestas tortor id iaculis placerat. Ut sit amet sollicitudin mauris. Quisque pharetra nunc felis, quis vulputate lacus mollis vel. Pellentesque accumsan efficitur congue. Sed sed est risus. In eu elementum nibh. Aliquam pretium ex felis, vitae cursus lorem sagittis eu. Vestibulum at turpis non odio consequat dignissim.
+		
+		Proin lobortis nec sem non aliquam. Curabitur pulvinar turpis sit amet felis ullamcorper blandit. In feugiat sem enim, id egestas tellus faucibus eget. Etiam neque neque, porta vitae est vel, vehicula condimentum urna. Nunc dignissim nunc at nisl facilisis porta. Nulla auctor, elit sed imperdiet tincidunt, tellus mauris consectetur massa, at luctus ligula est vitae lacus. Cras a ultricies elit, id porta turpis. Morbi id metus et justo scelerisque auctor ac id nunc. Proin mauris arcu, sodales in vestibulum eu, semper non sem. Donec pellentesque laoreet tellus eget dignissim. Sed est justo, bibendum ac nulla eget, aliquet ullamcorper odio.
+		
+		In iaculis interdum velit vel faucibus. In commodo tellus massa, sit amet mattis libero faucibus a. Curabitur a nunc id tellus condimentum venenatis. Pellentesque sem nisl, imperdiet eu est et, accumsan ornare nulla. Duis eget velit tempus, porttitor ligula et, tincidunt dolor. Pellentesque orci lorem, pulvinar quis posuere sed, cursus semper mauris. Suspendisse potenti. Integer scelerisque, neque ut cursus mollis, urna ipsum sagittis ante, eu placerat est enim mollis neque. Aliquam sit amet lectus sit amet justo placerat semper at et quam. Quisque in congue arcu. Curabitur condimentum, metus ut vehicula pharetra, sapien lectus porta arcu, vel posuere nulla ligula vel lacus.
+		
+		Mauris non mi eget sem aliquam volutpat. Sed orci nisi, facilisis ac sem nec, faucibus vestibulum metus. Mauris augue turpis, lobortis finibus vulputate at, efficitur id ipsum. Sed et bibendum eros. Proin tempor quam at elit euismod cursus. Cras ac ipsum eget leo condimentum bibendum at eget urna. Sed non felis sit amet leo molestie commodo sed in mauris. Nulla faucibus porttitor felis, eget fermentum est commodo non. Nulla facilisi. Ut nulla arcu, tincidunt auctor sapien eu, condimentum facilisis risus. Cras malesuada quis risus vitae fermentum.
+		
+		
+	</div>
+</div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index e859a3e..2b9affc 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>AngularDemo</title>
+  <title>Notes</title>
   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   <%= csrf_meta_tags %>
-- 
cgit v1.2.3


From 350792d5fe14e570b3d489148aabcab7cdea4572 Mon Sep 17 00:00:00 2001
From: Teddy Wing
Date: Sat, 24 Jan 2015 03:48:54 -0500
Subject: main view: Add "Save" button

Create & style a save button to save your current note.
---
 app/assets/stylesheets/layouts/_global.scss | 30 +++++++++++++++++++++++++++++
 app/views/home/main.html.erb                |  4 ++++
 2 files changed, 34 insertions(+)

(limited to 'app')

diff --git a/app/assets/stylesheets/layouts/_global.scss b/app/assets/stylesheets/layouts/_global.scss
index e952fb2..621df8d 100644
--- a/app/assets/stylesheets/layouts/_global.scss
+++ b/app/assets/stylesheets/layouts/_global.scss
@@ -19,6 +19,10 @@ body {
 }
 
 
+.position-relative {
+	position: relative;
+}
+
 .position-fixed {
 	position: fixed;
 }
@@ -39,6 +43,12 @@ body {
 	width: 100%;
 	height: 30px;
 	padding: 20px;
+
+	.right-button {
+		position: absolute;
+		right: 40px;
+		top: -33px;
+	}
 }
 
 
@@ -79,3 +89,23 @@ $sidebar-width: 250px;
 	font: 18px/1.7 Georgia, Times, serif;
 	outline: none;
 }
+
+
+.button {
+	padding: 12px 15px;
+	background-color: rgb(18, 113, 18);
+	color: #ddd;
+	text-decoration: none;
+	border-radius: 6px;
+}
+
+.button:hover {
+	background-color: #178E17;
+	color: #eee;
+}
+
+.button:active {
+	color: #ddd;
+	-webkit-box-shadow:inset 0 2px 4px 0 #0D4F0D;
+	box-shadow:inset 0 2px 4px 0 #0D4F0D;
+}
diff --git a/app/views/home/main.html.erb b/app/views/home/main.html.erb
index c3bbcd5..73ee2b6 100644
--- a/app/views/home/main.html.erb
+++ b/app/views/home/main.html.erb
@@ -1,5 +1,9 @@
 <div class="header position-fixed top-0">
 	<h1 class="font-size-28 font-weight-semibold">Notes</h1>
+	
+	<div class="position-relative">
+		<a href="#" class="button right-button">Save</a>
+	</div>
 </div>
 
 <div class="margin-top-70">
-- 
cgit v1.2.3


From d5f62176d49800037adb82bac1e50b28952e4911 Mon Sep 17 00:00:00 2001
From: Teddy Wing
Date: Sat, 24 Jan 2015 04:14:06 -0500
Subject: main view: Create & style delete link

Made as an "x" button to the right of the note load/edit link.
---
 app/assets/stylesheets/layouts/_global.scss | 35 +++++++++++++++++++++++++++--
 app/views/home/main.html.erb                |  9 +++++---
 2 files changed, 39 insertions(+), 5 deletions(-)

(limited to 'app')

diff --git a/app/assets/stylesheets/layouts/_global.scss b/app/assets/stylesheets/layouts/_global.scss
index 621df8d..5113083 100644
--- a/app/assets/stylesheets/layouts/_global.scss
+++ b/app/assets/stylesheets/layouts/_global.scss
@@ -8,6 +8,10 @@ body {
 	display: block;
 }
 
+.display-none {
+	display: none !important;
+}
+
 
 .margin-top-70 {
 	margin-top: 70px;
@@ -61,13 +65,13 @@ $sidebar-width: 250px;
 	border-right: 2px solid rgb(234, 224, 224);
 	overflow: auto;
 
-	a {
+	.sidebar-link {
 		border-bottom: 1px solid rgb(213, 202, 202);
 		color: rgb(18, 113, 18);
 		text-decoration: none;
 	}
 	
-	a:hover,
+	.sidebar-link:hover,
 	.active {
 		background: #249124; /* Old browsers */
 		background: -moz-linear-gradient(top, #249124 0%, #127112 100%); /* FF3.6+ */
@@ -80,6 +84,33 @@ $sidebar-width: 250px;
 		
 		color: #ddd;
 	}
+	
+	.delete-link {
+		position: absolute;
+		display: block;
+		margin-left: 220px;
+		margin-top: -34px;
+		height: 24px;
+		width: 24px;
+		background-color: #E75F5F;
+		border-radius: 50%;
+		color: #FFFCFC;
+		font-size: 25px;
+		text-decoration: none;
+		
+		span {
+			position: relative;
+			left: 3px;
+		}
+		
+		&:hover {
+			background-color: #E54343;
+		}
+		
+		&:active {
+			background-color: #D22121;
+		}
+	}
 }
 
 
diff --git a/app/views/home/main.html.erb b/app/views/home/main.html.erb
index 73ee2b6..84244f6 100644
--- a/app/views/home/main.html.erb
+++ b/app/views/home/main.html.erb
@@ -8,9 +8,12 @@
 
 <div class="margin-top-70">
 	<div class="sidebar position-fixed min-height-100%">
-		<a href="#" class="display-block padding-13">A Note</a>
-		<a href="#" class="display-block padding-13">A Note</a>
-		<a href="#" class="display-block padding-13">A Note</a>
+		<a href="#" class="sidebar-link display-block padding-13">A Note</a>
+		<a href="#" class="delete-link display-none"><span>×</span></a>
+		<a href="#" class="sidebar-link display-block padding-13">A Note</a>
+		<a href="#" class="delete-link display-none"><span>×</span></a>
+		<a href="#" class="sidebar-link display-block padding-13">A Note</a>
+		<a href="#" class="delete-link display-none"><span>×</span></a>
 	</div>
 
 	<div class="note-editor" contenteditable>
-- 
cgit v1.2.3