added notifications

Author: hihayk

public/stylesheets/app.css

@@ -1,7 +1,7 @@
 html{
 	height: 100%;
 	-webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+	-moz-osx-font-smoothing: grayscale;
 }
 body {
 	margin: 0;
@@ -23,7 +23,7 @@ a:hover{
 	border-bottom: 1px solid #3fa9f5;
 }
 .wrapper{
-	height: 100%;
+	max-height: 100%;
 	overflow: hidden;
 }
 .top-section{
@@ -62,7 +62,6 @@ h1 span{
 	float: left;
 	width: 100%;
 	height: 100%;
-	overflow: hidden;
 }
 .tabs-section{
 	background-color: #e6e6e6;
@@ -104,9 +103,10 @@ h1 span{
 	float: left;
 	width: 100%;
 	max-height: 100%;
+	min-height: 100%;
 }
 .notifications{
-	display: none; /* TODO find a place*/
+	
 }
 .code-container.left:after{
 	content: "";
@@ -122,6 +122,7 @@ h1 span{
 	float: left;
 	position: relative;
 	max-height: 100%;
+	height: 100%;
 	overflow: hidden;
 }
 .code-container label{
@@ -136,17 +137,15 @@ h1 span{
 }
 .code-container textarea{
 	width: 100%;
-	height: 80%;
-	overflow: hidden;
+	height: 100%;
 	padding: 60px 30px 20px 30px;
 	font-family: inherit;
 	font-size: 14px;
 	color: #eee;
 	background: none;
 	border: 0;
-	max-height: 100%;
 	-webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+	-moz-osx-font-smoothing: grayscale;
 }
 .code-actions{
 	width: 50px;
@@ -164,7 +163,6 @@ h1 span{
 	margin: auto;
 	border-radius: 50%;
 	text-align: center;
-	overflow: hidden;
 	-webkit-transition: all 0.3s ease;
 	-moz-transition: all 0.3s ease;
 	transition: all 0.3s ease;
@@ -226,6 +224,30 @@ h1 span{
 .code-actions .type.scss:after{
 
 }
+.notifications{
+	position: absolute;
+	background-color: #333;
+	top: 20px;
+	left: 0;
+	width: 99%;
+	margin: auto;
+	z-index: 2;
+	padding: 0;
+	height: auto;
+	font-size: 14px;
+}
+.notifications span{
+	padding: 0 10px;
+}
+.notice{
+	color: orange;
+}
+.error{
+	color: red;
+}      
+.success{
+	color: green;
+}
 
 /*
 h6 { float:right; }

views/index.haml

@@ -5,21 +5,17 @@
     .tab.sass
       %h2 sass / scss
   .code-section
-    .notifications
-      - if flash[:notice]
-        %p.notice
-          = flash[:notice]
-      - if flash[:error]
-        %p.error
-          = flash[:error]
-      - if flash[:success]
-        %p.success
-          = flash[:success]
-
     %form{:method => "POST", :action => "/", :id => "page"}
       .code-container.left
         %label{:for => "page_css"}
           CSS (paste your CSS code and convert!)
+        .notifications
+          - if flash[:notice]
+            %span.notice= flash[:notice]
+          - if flash[:error]
+            %span.error= flash[:error]
+          - if flash[:success]
+            %span.success= flash[:success]
         %textarea{:id => "page_css", :name => "page[css]"}=h @css || ""
       .code-container.right
         %label{:for => "page_sass"}

views/layout.haml

@@ -28,6 +28,9 @@
             = Sass.version[:string]
           .author-info
             %p 
-              %span Created by Jose Pablo Barrantes @
-              %a{ :href => "http://jpablobr.com"} http://jpablobr.com
+              %span Idea & code:
+              %a{ :href => "http://jpablobr.com"} Jose Pablo Barrantes
+              %span / 
+              %span Design & frontend:
+              %a{ :href => "http://hihayk.com"} Hayk
       = yield