SVG images! Carousel working with sidebar buttons.

app/assets/javascripts/application.js

@@ -12,6 +12,7 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require bootstrap-transition
 //= require bootstrap-carousel
 //= require_tree .
 
@@ -20,12 +21,13 @@
 // favorite_btn
 $(document).ready(function($) {
 
-
-
-
-
-
-
+	$('.carousel').carousel()
+	$('.previous-button').click(function() {
+		$('.carousel').carousel('prev');
+	});
+	$('.forward-button').click(function() {
+		$('.carousel').carousel('next');
+	});
 
 //     // $("#disableBtn").click(function() {
 //     //     $("#clearBtn").attr("disabled", "disabled");
@@ -46,5 +48,4 @@ $(document).ready(function($) {
 // 	
 // 	// $('.label').vertAlign();
 
-}); // ready()
-
+}); // ready()

app/assets/stylesheets/application.css

@@ -12,6 +12,7 @@
  *= require global/fontface
  *= require global/global
  *= require global/header
+ *= require carousel
  *= require global/section
  *= require global/nav
  *= require global/footer

app/assets/stylesheets/carousel.css.scss

@@ -0,0 +1,96 @@
+.carousel {
+  position: relative;
+  margin-bottom: 18px;
+  line-height: 1;
+}
+.carousel-inner {
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+}
+.carousel .item {
+  display: none;
+  position: relative;
+  -webkit-transition: 0.6s ease-in-out left;
+  -moz-transition: 0.6s ease-in-out left;
+  -ms-transition: 0.6s ease-in-out left;
+  -o-transition: 0.6s ease-in-out left;
+  transition: 0.6s ease-in-out left;
+}
+.carousel .item > img {
+  display: block;
+  line-height: 1;
+}
+.carousel .active,
+.carousel .next,
+.carousel .prev {
+  display: block;
+}
+.carousel .active {
+  left: 0;
+}
+.carousel .next,
+.carousel .prev {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.carousel .next {
+  left: 100%;
+}
+.carousel .prev {
+  left: -100%;
+}
+.carousel .next.left,
+.carousel .prev.right {
+  left: 0;
+}
+.carousel .active.left {
+  left: -100%;
+}
+.carousel .active.right {
+  left: 100%;
+}
+.carousel-control {
+  position: absolute;
+  top: 40%;
+  left: 15px;
+  width: 40px;
+  height: 40px;
+  margin-top: -20px;
+  font-size: 60px;
+  font-weight: 100;
+  line-height: 30px;
+  color: #ffffff;
+  text-align: center;
+  background: #222222;
+  border: 3px solid #ffffff;
+  -webkit-border-radius: 23px;
+  -moz-border-radius: 23px;
+  border-radius: 23px;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+.carousel-control.right {
+  left: auto;
+  right: 15px;
+}
+.carousel-control:hover {
+  color: #ffffff;
+  text-decoration: none;
+  opacity: 0.9;
+  filter: alpha(opacity=90);
+}
+.carousel-caption {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 10px 15px 5px;
+  background: #333333;
+  background: rgba(0, 0, 0, 0.75);
+}
+.carousel-caption h4,
+.carousel-caption p {
+  color: #ffffff;
+}

app/assets/stylesheets/global/footer.css.scss

@@ -5,6 +5,9 @@
 
 
 footer {
+
+	display: none;
+
 	position: fixed;
 	right: 0;
 	bottom: 0;

app/assets/stylesheets/global/header.css.scss

@@ -21,6 +21,7 @@ header {
 	right: 0;
 	left: 0;
 	border-bottom: 2px solid $red_shade;
+	z-index: 1000;
 
 	@include box_shadow_inset(0px, 0px, 0px, 0px, rgba(0, 0, 0, 0.1));
 	background-color: $red;

app/assets/stylesheets/global/section.css.scss

@@ -1,36 +1,120 @@
+/* imports */
+@import 'variables';
+@import 'mixins';
+
 section {
 	height: 100%;
-	.slider {
+	#carousel-excuses {
 		height: 100%;
-		.prev, .next {
+		.previous-button, .forward-button {
 			background-color: rgba(0, 0, 0, 0.05);
 			float: left;
 			height: 100%;
 			width: 10%;
+			z-index: 2;
+
+		}
+		.previous-button {
+			background-image: url('/assets/upload.svg');
+			background-image: none, url('/assets/upload.svg'), url('/assets/upload.svg');
+			background-size: 60% auto;
+			background-repeat: no-repeat;
+			background-position: center center;
+			opacity: 0.4;
+			transition: opacity 200ms;
+			-moz-transition: opacity 200ms;
+			-webkit-transition: opacity 200ms;
+			-o-transition: opacity 200ms;
 			&:hover {
-				background-color: rgba(0, 0, 0, 0.15);
-			}
-			.label {
-				position: absolute;
-				top: 45%;
-				span {
-					display: block;
-					text-align: center;
-				}
+				opacity: 0.6;
+				transition: opacity 200ms;
+				-moz-transition: opacity 200ms;
+				-webkit-transition: opacity 200ms;
+				-o-transition: opacity 200ms;
 			}
 		}
-		.prev {
+		.forward-button {
+			background-image: url('/assets/upload.svg');
+			background-image: none, url('/assets/upload.svg'), url('/assets/upload.svg');
+			background-size: 60% auto;
+			background-repeat: no-repeat;
+			background-position: center center;
+			opacity: 0.4;
+			transition: opacity 200ms;
+			-moz-transition: opacity 200ms;
+			-webkit-transition: opacity 200ms;
+			-o-transition: opacity 200ms;
+			&:hover {
+				opacity: 0.6;
+				transition: opacity 200ms;
+				-moz-transition: opacity 200ms;
+				-webkit-transition: opacity 200ms;
+				-o-transition: opacity 200ms;
+			}
 		}
-		.content {
-			padding-top: 90px;
-			padding-bottom: 90px;
+		.carousel-inner {
 			float: left;
+			margin-top: 90px;
+			margin-bottom: 5%;
 			width: 80%;
-			ul {
-				margin: 40px;
+			.item {
+				padding: 5%;
+				min-height: 200px;
 			}
 		}
-		.next {
+	}
+}
+
+.details {
+	margin: 20px 0;	
+	h3 {
+		float: left;
+		font-size: 12px;
+		letter-spacing: 2px;
+		line-height: 32px;
+		margin-right: 10px;
+		text-transform: uppercase;
+	}
+	ul {
+		float: left;
+		li {
+			background-color: $blue;
+			color: #fff;
+			float: left;
+			font-size: 12px;
+			letter-spacing: 1px;
+			line-height: 18px;
+			margin: 2px 5px;
+			padding: 5px 10px;
+			text-transform: uppercase;
+			a {
+				color: #fff;
+			}
+		}
+	}
+}
+
+.favorites {
+
+}
+.tags {
+	li.tag {
+		background-color: $blue;
+		color: #fff;
+		float: left;
+		font-size: 12px;
+		letter-spacing: 1px;
+		line-height: 18px;
+		margin: 2px 5px;
+		padding: 5px 10px;
+		text-transform: uppercase;
+		@include border_radius(25px);
+		@include box_shadow_inset(0, 0, 2px, 2px, rgba(0, 0, 0, 0.03));
+		a {
+			color: #fff;
+		}
+		&:hover {
+			background-color: $blue_shade;
 		}
 	}
 }

app/views/pages/excuse.html.haml

@@ -4,24 +4,49 @@
 	= render 'layouts/notice', :notice => notice, :type => "info"
 
 %section
-	.slider
-		.prev
-			.label
-				%span prev
-		.content
+	#carousel-excuses.carousel.slide
+
+		.previous-button
+			.previous-icon
+
+		.carousel-inner
 			- if @excuses.count > 0
-				%ul
-					- @excuses.each do |excuse|
-						%li
-							= excuse.text
+				- @excuses.each_with_index do |excuse, index|
+					- if index == 0
+						.item.active
+							.text
+								%h2
+									= excuse.text
+							- if @current_user.present?
+								.details.favorites
+									%h3 Favorites
+									= form_tag favorites_path do
+										= hidden_field_tag :excuse, excuse.id
+										= submit_tag "Favorite", :name => nil
+							.details.tags
+								%h3 Tags
+								%ul
+									- excuse.tags.each do |tag|
+										%li.tag{ :class => "tag-blue" }= link_to tag.name, "tag/#{tag.name}", :rel => "tag"
+
+					- else
+						.item
+							.text
+								%h2
+									= excuse.text
 							- if @current_user.present?
-								%span
+								.details.favorites
+									%h3 Favorites
 									= form_tag favorites_path do
 										= hidden_field_tag :excuse, excuse.id
 										= submit_tag "Favorite", :name => nil
+							.details.tags
+								%h3 Tags
+								%ul
+									- excuse.tags.each do |tag|
+										%li.tag{ :class => "tag-blue" }= link_to tag.name, "tag/#{tag.name}", :rel => "tag"
 			- else
-				%ul
-					%li There's no excuse for no excuses! There's only an excuse for Oh, Excuses... Why don't you create one?
-		.next
-			.label
-				%span next
+				.item.active There's no excuse for no excuses! There's only an excuse for Oh, Excuses... Why don't you create one?
+
+		.forward-button
+			.forward-icon