Permalink
Browse files

Initial markup and styling of main page.

  • Loading branch information...
1 parent 333333b commit f1fdb7362fbca1af0d5a80590d748234d2973ab8 @adarowski committed Mar 24, 2012
View
53 app/assets/stylesheets/_mixins.css.sass
@@ -0,0 +1,53 @@
+// mixins
+
+=border_radius($radius)
+ -moz-border-radius: $radius
+ -webkit-border-radius: $radius
+ border-radius: $radius
+
+=box_shadow($color, $values)
+ -webkit-box-shadow: $color $values
+ -moz-box-shadow: $color $values
+ box-shadow: $color $values
+
+=transition($property, $speed)
+ -webkit-transition: $property $speed
+ -moz-transition: $property $speed
+ transition: $property $speed
+
+$player_width: 200px
+$photo_height: 135px
+$photo_width: 90px
+
+$red_sox_blue: #0E2B55
+$red_sox_red: #BD3039
+
+=reset
+ margin: 0
+ padding: 0
+
+=toggle_button
+ +border_radius(10px)
+ padding: 2px 12px
+ background-color: #EEE
+ border: 1px solid #DDD
+ margin: 0 0 4px
+ white-space: nowrap
+ cursor: pointer
+ &:hover
+ border-color: #CCC
+ &.yah
+ background-color: #FF9
+ span
+ font-size: 11px
+ color: #666
+
+=popup
+ +box_shadow(#AAA, 0px 0px 10px)
+ +border_radius(10px)
+ display: block
+ width: auto
+ border: 2px solid #ccc
+ background-color: fade_out(white, 0.05)
+ z-index: 1
+ padding: 10px
View
87 app/assets/stylesheets/players.css.sass
@@ -1,2 +1,87 @@
+@import mixins
+
body
- background: red
+ font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, sans-serif
+ background: #fff
+ font-size: 14px
+ margin: 0
+
+header, footer, nav, section, small
+ display: block
+
+a
+ text-decoration: none
+ &:link, &:visited
+ color: $red_sox_blue
+ &:hover, &:active
+ color: $red_sox_red
+ &:active
+ text-decoration: underline
+
+h1
+ font-family: 'Lora', serif
+ font-size: 48px
+
+ol
+ list-style: none
+ +reset
+ li
+ +reset
+ display: inline-block
+ text-align: center
+ width: $player_width
+ margin-bottom: 40px
+ a
+ color: #000
+ display: block
+ text-decoration: none
+ &:hover
+ background-color: #eee
+ dl
+ +reset
+ position: relative
+ padding: 20px 0
+ dt
+ +reset
+ padding-top: $photo_height + 20px
+ .first-name
+ display: block
+ color: #666
+ .last-name
+ display: block
+ font-weight: bold
+ font-size: 18px
+ text-transform: uppercase
+ margin: 4px 0 8px
+ dd
+ +reset
+ font-size: 13px
+ color: #666
+ &.photo
+ width: $player_width
+ position: absolute
+ top: 20px
+ left: 0
+ text-align: center
+ img
+ border: 4px solid #CCC
+ padding: 1px
+ &.position
+ margin-bottom: 2px
+
+#toggles
+ width: 1120px
+ margin: 20px 0
+ dl
+ margin: 0
+ dt
+ font-weight: bold
+ margin: 10px 0 5px
+ display: inline-block
+ dd
+ display: inline-block
+ margin: 0
+ padding: 0
+ a
+ color: #333
+ +toggle_button
View
5 app/helpers/players_helper.rb
@@ -1,2 +1,7 @@
module PlayersHelper
+
+ def player_class player
+ [player.pos, player.hof_status || 'no_hof'].join(' ')
+ end
+
end
View
13 app/views/layouts/application.html.erb
@@ -1,13 +1,22 @@
-<!DOCTYPE html>
+<!DOCTYPE HTML>
<html>
<head>
- <title>BaseballHackDayPre</title>
+ <meta charset="UTF-8">
+ <title>Red Sox Hall of wWAR</title>
+ <link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
+ <!--[if lt IE 9]>
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
</head>
<body>
+<header>
+ <h1>Red Sox Hall of wWAR</h1>
+</header>
+
<%= yield %>
</body>
View
83 app/views/players/index.html.haml
@@ -1,3 +1,80 @@
-%h1 Players#index
-%p Find me in app/views/players/index.html.haml
-%p @players is #{@players.inspect}
+%section#toggles
+ %dl
+ %dt Filter:
+ %dd
+ %a#show-all{:href => "#show-all"}
+ Pitchers and Position Players
+ %span (208)
+ %dd
+ %a#show-pos{:href => "#show-pos"}
+ Position Players Only
+ %span (144)
+ %dd
+ %a#show-p{:href => "#show-p"}
+ Pitchers Only
+ %span (64)
+ %dl
+ %dt Positions:
+ %dd
+ %a#show-c{:href => "#show-c"}
+ C
+ %span (15)
+ %dd
+ %a#show-1b{:href => "#show-1b"}
+ 1B
+ %span (23)
+ %dd
+ %a#show-2b{:href => "#show-2b"}
+ 2B
+ %span (17)
+ %dd
+ %a#show-3b{:href => "#show-3b"}
+ 3B
+ %span (17)
+ %dd
+ %a#show-ss{:href => "#show-ss"}
+ SS
+ %span (17)
+ %dd
+ %a#show-lf{:href => "#show-lf"}
+ LF
+ %span (21)
+ %dd
+ %a#show-cf{:href => "#show-cf"}
+ CF
+ %span (12)
+ %dd
+ %a#show-rf{:href => "#show-rf"}
+ RF
+ %span (20)
+ %dd
+ %a#show-dh{:href => "#show-dh"}
+ DH
+ %span (2)
+ %dl
+ %dt Adjustments:
+ %dd
+ %a#whos-in{:href => "#whos-in"}
+ Who's In?
+ %span (63)
+ %dd
+ %a#whos-out{:href => "#whos-out"}
+ Who's Out?
+ %span (63)
+ %dd
+ %a#whos-next{:href => "#whos-next"}
+ Who's Next?
+ %span (38)
+
+%ol
+ - @players.each do |player|
+ %li{:class => player_class(player)}
+ = link_to(player_path(player)) do
+ %dl
+ %dt
+ %span.first-name= player.first_name
+ %span.last-name= player.last_name
+ %dd.position= player.pos
+ %dd.value #{player.wwar_norm} wWAR
+ %dd.photo
+ %img{:src => "images/default.jpg"}/
View
BIN public/images/default.jpg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit f1fdb73

Please sign in to comment.