Permalink
Browse files

Getting there. Added Key Stroke Navigation and more Responsive CSS.

  • Loading branch information...
1 parent 1d9a4d0 commit a81ff62b1ba7ddc211008b2f738d0d9ea8924d8e @robertmilner committed Mar 24, 2012
Showing with 521 additions and 193 deletions.
  1. +1 −0 app/assets/javascripts/application.js
  2. +33 −1 app/assets/javascripts/global.js
  3. +47 −0 app/assets/stylesheets/alert.css.scss
  4. +3 −1 app/assets/stylesheets/application.css.scss
  5. +0 −4 app/assets/stylesheets/global/_mixins.scss
  6. +0 −1 app/assets/stylesheets/global/footer.css.scss
  7. +10 −6 app/assets/stylesheets/global/forms.css.scss
  8. +20 −0 app/assets/stylesheets/global/global.css.scss
  9. +23 −0 app/assets/stylesheets/global/notice.css.scss
  10. +17 −5 app/assets/stylesheets/global/section.css.scss
  11. +53 −0 app/assets/stylesheets/responsive.css.scss
  12. +28 −8 app/controllers/pages_controller.rb
  13. +0 −2 app/helpers/excuses_helper.rb
  14. +0 −2 app/helpers/favorites_helper.rb
  15. +0 −2 app/helpers/locations_helper.rb
  16. +1 −1 app/helpers/pages_helper.rb
  17. +0 −2 app/helpers/searches_helper.rb
  18. +0 −2 app/helpers/sessions_helper.rb
  19. +0 −2 app/helpers/users_helper.rb
  20. +58 −50 app/models/excuse.rb
  21. +19 −8 app/models/location.rb
  22. +23 −0 app/models/tag.rb
  23. +5 −2 app/views/layouts/_notice.html.haml
  24. +55 −43 app/views/pages/_carousel.html.haml
  25. +0 −1 app/views/pages/_header.html.haml
  26. +2 −2 app/views/pages/_search_box.html.haml
  27. +2 −8 app/views/pages/excuse.html.haml
  28. +1 −0 app/views/pages/favorite.js.erb
  29. +2 −11 app/views/pages/location.html.haml
  30. +10 −0 app/views/pages/robert.html.haml
  31. +2 −9 app/views/pages/search.html.haml
  32. +2 −11 app/views/pages/tag.html.haml
  33. +10 −9 config/routes.rb
  34. +94 −0 vendor/assets/javascripts/bootstrap-alert.js
@@ -1,5 +1,6 @@
//= require jquery
//= require jquery_ujs
+//= require bootstrap-alert
//= require bootstrap-transition
//= require bootstrap-tooltip
//= require bootstrap-carousel
@@ -20,7 +20,7 @@ $(document).ready(function($) {
// Pages - Carousel Partial
$('.carousel').carousel({
- interval: 10000
+ interval: 100000
});
$('.carousel-previous-button').click(function() {
$('.carousel').carousel('prev');
@@ -30,5 +30,37 @@ $(document).ready(function($) {
});
// end
+ // Pages - Carousel Keyboard Navigation
+ // Left and Right Keys on keyup() maybe switch to keypress() or keydown()
+ $(document.documentElement).keyup(function (event) {
+ if (event.keyCode == 37) {
+ $('.carousel').carousel('prev');
+ } else if (event.keyCode == 39) {
+ $('.carousel').carousel('next');
+ }
+ });
+
+
+ $(document.documentElement).keydown(function (event) {
+ if (event.keyCode == 32) {
+ $('.carousel').carousel('next');
+ event.preventDefault();
+ }
+ });
+
+ // Pages - Favorite Buttom
+ $('.btn-favorite').click(function(e) {
+ $('.favorite form').submit();
+ e.preventDefault();
+ });
+ // end
+
+ // This is a cool height fix but fixed positioning with top side and bottom = 0 works better.
+ // // Pages - Carousel Buttons
+ // $(window).resize(function() {
+ // var pageheight = $(window).height();
+ // $('.carousel-previous-button, .carousel-forward-button').height(pageheight);
+ // });
+ // // end
});
@@ -0,0 +1,47 @@
+.alert {
+ padding: 8px 35px 8px 14px;
+ margin-bottom: 18px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+ background-color: #fcf8e3;
+ border: 1px solid #fbeed5;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ color: #c09853;
+}
+.alert-heading {
+ color: inherit;
+}
+.alert .close {
+ position: relative;
+ top: -2px;
+ right: -21px;
+ line-height: 18px;
+}
+.alert-success {
+ background-color: #dff0d8;
+ border-color: #d6e9c6;
+ color: #468847;
+}
+.alert-danger,
+.alert-error {
+ background-color: #f2dede;
+ border-color: #eed3d7;
+ color: #b94a48;
+}
+.alert-info {
+ background-color: #d9edf7;
+ border-color: #bce8f1;
+ color: #3a87ad;
+}
+.alert-block {
+ padding-top: 14px;
+ padding-bottom: 14px;
+}
+.alert-block > p,
+.alert-block > ul {
+ margin-bottom: 0;
+}
+.alert-block p + p {
+ margin-top: 5px;
+}
@@ -9,13 +9,15 @@
* compiled file, but it's generally better to create a new file per style scope.
*
*= require global/reset
- *= require global/fontface
*= require global/global
+ *= require alert
+ *= require global/notice
*= require global/forms
*= require global/header
*= require carousel
*= require account
*= require global/section
*= require global/nav
*= require global/footer
+ *= require responsive
*/
@@ -1,9 +1,5 @@
/* mixins */
-@mixin font_face {
- font-family: "IcoMoonRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
@mixin text_shadow($hor, $vert, $blur, $color) {
-moz-text-shadow: $hor $vert $blur $color;
-webkit-text-shadow: $hor $vert $blur $color;
@@ -27,7 +27,6 @@ footer {
color: #fff;
display: block;
text-align: center;
- @include font_face;
@include text_shadow(0, 3px, 0, $black);
img {
width: 40%;
@@ -23,16 +23,17 @@ input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
-.search {
+.space, .search {
+ min-width: 300px;
max-width: 620px;
- width: 100%;
+ width: 80%;
margin-left: auto;
margin-right: auto;
- padding: 3px 0;
-
+ padding-top: 86px;
+ padding-bottom: 40px;
.form-search {
- padding-left: 14px;
- padding-right: 14px;
+ padding-left: 5%;
+ padding-right: 5%;
.search-query {
width: 100%;
@@ -44,6 +45,9 @@ input[type="submit"] {
}
}
}
+.space {
+ padding-bottom: 0;
+}
/*button,
input,
@@ -25,4 +25,24 @@ body {
a {
color: $black;
text-decoration: none;
+}
+.close {
+ float: right;
+ font-size: 20px;
+ font-weight: bold;
+ line-height: 18px;
+ color: #000000;
+ text-shadow: 0 1px 0 #ffffff;
+ opacity: 0.2;
+ filter: alpha(opacity=20);
+ &:hover {
+ color: #000000;
+ text-decoration: none;
+ opacity: 0.4;
+ filter: alpha(opacity=40);
+ cursor: pointer;
+ }
+}
+.clearfix {
+ clear: both;
}
@@ -0,0 +1,23 @@
+#notice {
+ position: fixed;
+ left: 0;
+ top: 0;
+ right: 0;
+ padding-top: 60px;
+ div {
+ min-width: 320px;
+ max-width: 620px;
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .info {
+
+ }
+ .success {
+
+ }
+ .warning {
+
+ }
+}
@@ -27,27 +27,35 @@ section {
}
}
.carousel-previous-button {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
background-image: url('/assets/arrow_left_black.png');
background-image: none, url('/assets/arrow_left_black.svg'), url('/assets/arrow_left_black.png');
background-size: 60% auto;
background-repeat: no-repeat;
background-position: center center;
}
.carousel-forward-button {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
background-image: url('/assets/arrow_right_black.png');
background-image: none, url('/assets/arrow_right_black.svg'), url('/assets/arrow_right_black.png');
background-size: 60% auto;
background-repeat: no-repeat;
background-position: center center;
}
.carousel-inner {
- float: left;
- margin-top: 90px;
- margin-bottom: 5%;
+ margin-left: auto;
+ margin-right: auto;
width: 80%;
.item {
- padding: 5%;
- min-height: 200px;
+ padding: 0 5%;
+ width: 90%;
+ min-height: 300px;
h2 {
font-size: 42px;
line-height: 56px;
@@ -79,6 +87,9 @@ section {
padding-right: 20px;
float: left;
padding: 5px 20px;
+ &:first-child {
+ border-left: 0;
+ }
}
.favorite {
border-left: 0;
@@ -90,6 +101,7 @@ section {
height: auto;
margin-top: -4px;
opacity: 0.2;
+ cursor: pointer;
}
.btn-favorite.true {
opacity: 0.8;
@@ -0,0 +1,53 @@
+@media screen and (max-width: 640px) {
+
+
+ section {
+ #carousel-excuses {
+ .carousel-inner {
+ .item {
+ h2 {
+ font-size: 24px;
+ line-height: 32px;
+ }
+ }
+ }
+ }
+ }
+ .details {
+ div {
+ border-left: 1px solid #ccc;
+ border-right: 1px solid #fff;
+ float: left;
+ &:first-child {
+ border-left: 0;
+ padding-left: 0;
+ }
+ &:last-child {
+ border-right: 0;
+ }
+ }
+ .favorite {
+ border-left: 0;
+ padding-left: 0;
+ form {
+ text-align: left;
+ margin-left: 10px;
+ }
+ }
+ .location {
+ border-right: 0;
+ padding-right: 0;
+ ul {
+ margin-left: 10px;
+ }
+ }
+ .tags {
+ border: 0;
+ padding-left: 0;
+ ul {
+ margin-left: 10px;
+ }
+ }
+ }
+
+}
@@ -7,25 +7,40 @@ class PagesController < ApplicationController
def excuse
@user = @current_user
# arguments [0] = total number of results
- @excuses = Excuse.random(5)
+ @excuses = Excuse.find_excuses_by_random(5)
end
def search
@user = @current_user
- # arguments [0] = params[:search], [1] = total number of results
- @excuses = Excuse.search(params[:search], 5)
+ if params[:name]
+ @excuses = Excuse.find_excuses_by_named_text(params[:name], 5)
+ elsif params[:search]
+ @excuses = Excuse.search_excuses(params[:search], 5)
+ else
+ @excuses = Excuse.find_excuses_by_random(5)
+ end
end
def location
@user = @current_user
- # arguments [0] = params[:search], [1] = total number of results
- @excuses = Excuse.search_location(params[:search], 5)
+ if params[:name]
+ @excuses = Location.find_excuses_by_named_location(params[:name], 5)
+ elsif params[:search]
+ @excuses = Location.find_excuses_by_searched_locations(params[:search], 5)
+ else
+ @excuses = Excuse.find_excuses_by_random(5)
+ end
end
def tag
@user = @current_user
- # @excuses = Excuse.search_tag(params[:search], 5)
- @excuses = Excuse.limit(5)
+ if params[:name]
+ @excuses = Tag.find_excuses_by_named_tag(params[:name], 5)
+ elsif params[:search]
+ @excuses = Tag.find_excuses_by_searched_tags(params[:search], 5)
+ else
+ @excuses = Excuse.find_excuses_by_random(5)
+ end
end
def favorite
@@ -40,7 +55,12 @@ def favorite
def user
@user = @current_user
- @excuses = @user.excuses
+ @excuses = @user.excuses.limit(5)
@favorites = @user.favorable(:type => :excuse, :delve => :true)
end
+
+ def robert
+ @user = User.find_by_name('Robert Milner')
+ @excuses = @user.excuses.all
+ end
end
Oops, something went wrong.

0 comments on commit a81ff62

Please sign in to comment.