fuji 0.0.4 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,4 +4,20 @@ We love pull requests! Here's a quick guide:
4
4
  1. Run the tests: `bundle && rake`
5
5
  1. Hack and test.
6
6
  1. Push to your fork and submit a pull request.
7
- 1. Profit.
7
+ 1. Profit.
8
+
9
+ To make life easier during development, symlink the `_fuji.sass` partial
10
+ so you don't have to repackage the gem, bundle, and restart your server every
11
+ time you make a change.
12
+
13
+ ```sh
14
+ cd my-fuji-using-app
15
+ cd app/assets/stylesheets
16
+ ln -s ~/path/to/fuji/gem/stylesheets/_fuji.sass _tmpfuji.sass
17
+ ```
18
+
19
+ In your fuji-using app's stylesheet:
20
+
21
+ ```sass
22
+ @import "tmpfuji"
23
+ ```
@@ -1,20 +1,20 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- fuji (0.0.3)
4
+ fuji (0.1.0)
5
5
  compass
6
6
  sass
7
7
 
8
8
  GEM
9
9
  remote: https://rubygems.org/
10
10
  specs:
11
- chunky_png (1.2.6)
11
+ chunky_png (1.2.7)
12
12
  compass (0.12.2)
13
13
  chunky_png (~> 1.2)
14
14
  fssm (>= 0.2.7)
15
15
  sass (~> 3.1)
16
16
  diff-lcs (1.1.3)
17
- fssm (0.2.9)
17
+ fssm (0.2.10)
18
18
  rake (10.0.2)
19
19
  rspec (2.11.0)
20
20
  rspec-core (~> 2.11.0)
@@ -24,7 +24,7 @@ GEM
24
24
  rspec-expectations (2.11.3)
25
25
  diff-lcs (~> 1.1.3)
26
26
  rspec-mocks (2.11.2)
27
- sass (3.2.3)
27
+ sass (3.2.7)
28
28
 
29
29
  PLATFORMS
30
30
  ruby
data/README.md CHANGED
@@ -14,23 +14,24 @@ Add fuji to your application's Gemfile:
14
14
  gem 'fuji'
15
15
  ```
16
16
 
17
- Render the header in your application layout:
17
+ $fuji-heading-font-size: 24px
18
+ $fuji-nav-font-size: inherit
18
19
 
19
20
  ```haml
20
21
  = Fuji::Header.render
21
22
  ```
22
23
 
23
- The render method accepts the following options:
24
+ The render method accepts a hash of options with the following defaults:
24
25
 
25
26
  ```ruby
26
27
  {
27
- user: nil,
28
+ user: nil, # if present, show gravatar
28
29
  logo_text: "heroku",
29
- logo_subtext: nil
30
+ logo_subtext: nil, # e.g 'dashboard' or 'add-ons'
30
31
  logo_url: "https://www.heroku.com",
31
- login_path: nil,
32
+ login_path: nil, # if present, display login/logout links
32
33
  logout_path: nil,
33
- gravatar_fallback_url: "http://assets.heroku.com.s3.amazonaws.com/addons.heroku.com/gravatar_default.png",
34
+ gravatar_fallback_url: "http://assets.heroku.com.s3.amazonaws.com/addons.heroku.com/gravatar_default.png"
34
35
  }
35
36
  ```
36
37
 
@@ -43,21 +44,26 @@ Here's how it's done in addons:
43
44
  Style it up by importing the fuji partial into your sass/scss stylesheet:
44
45
 
45
46
  ```sass
46
- // Override the defaults if you wish:
47
+ // Override the defaults as desired:
47
48
  $fuji-foreground-color: #FFF
48
- $fuji-text-color: rgba(#FFF, 1)
49
- $fuji-highlight-color: #aed582
50
- $fuji-max-width: 960px
51
- $fuji-logo-text-color: rgba($fuji-highlight_color, 0.4)
52
- $fuji-logo-subtext-color: rgba($fuji-highlight_color, 0.7)
49
+ $fuji-background-color: transparent
50
+ $fuji-column-max-width: 960px
51
+ $fuji-logo-text-color: rgba(#aed582, 0.4)
52
+ $fuji-logo-subtext-color: rgba(#aed582, 0.7)
53
+ $fuji-link-color-inactive: rgba($fuji-foreground-color, 0.5)
54
+ $fuji-link-color-active: rgba(#aed582, 1)
55
+ $fuji-link-background-color-inactive: transparent
56
+ $fuji-link-background-color-active: transparent
57
+ $fuji-heading-font-size: 24px
58
+ $fuji-nav-font-size: inherit
53
59
 
54
60
  @import "fuji"
55
61
  ```
56
62
 
57
63
  ## Contributing
58
64
 
59
- See CONTRIBUTING.md
65
+ See [CONTRIBUTING.md](CONTRIBUTING.md)
60
66
 
61
67
  ## License
62
68
 
63
- MIT. Go nuts.
69
+ MIT. Go nuts. See [LICENSE](LICENSE)
@@ -4,14 +4,14 @@ require 'uri'
4
4
  require "compass"
5
5
 
6
6
  # module Foo
7
- #
7
+ #
8
8
  # module Header
9
9
  # def render
10
10
  # puts "rendered!"
11
11
  # end
12
12
  # end
13
13
  # extend Header
14
- #
14
+ #
15
15
  # end
16
16
 
17
17
  module Fuji
@@ -28,7 +28,7 @@ module Fuji
28
28
 
29
29
  class Header
30
30
  def self.render(options={})
31
-
31
+
32
32
  # Options
33
33
  options[:gravatar_fallback_url] ||= "https://s3.amazonaws.com/assets.heroku.com/addons.heroku.com/gravatar_default.png"
34
34
  options[:logo_text] ||= "heroku"
@@ -38,23 +38,23 @@ module Fuji
38
38
  options[:login_path] ||= nil
39
39
  options[:logout_path] ||= nil
40
40
  options[:links] ||= nil
41
-
41
+
42
42
  links = []
43
-
44
- unless options[:user]
45
- links << {id: :how, name: 'How it Works', url: 'https://heroku.com/how'}
46
- links << {id: :pricing, name: 'Pricing', url: 'https://www.heroku.com/pricing'}
47
- end
48
-
43
+
44
+ # unless options[:user]
45
+ # links << {id: :how, name: 'How it Works', url: 'https://heroku.com/how'}
46
+ # links << {id: :pricing, name: 'Pricing', url: 'https://www.heroku.com/pricing'}
47
+ # end
48
+
49
49
  links << {id: :apps, name: 'Apps', url: 'https://dashboard.heroku.com'}
50
50
  links << {id: :addons, name: 'Add-ons', url: 'https://addons.heroku.com'}
51
51
  links << {id: :documentation, name: 'Documentation', url: 'https://devcenter.heroku.com'}
52
52
  links << {id: :support, name: 'Support', url: 'https://help.heroku.com'}
53
-
53
+
54
54
  if options[:user] && options[:logout_path]
55
55
  links << {id: :logout, name: 'Log out', url: options[:logout_path]}
56
56
  end
57
-
57
+
58
58
  # Gravatar
59
59
  if options[:user] && options[:user].email
60
60
  gravatar_url = [
@@ -64,12 +64,12 @@ module Fuji
64
64
  URI.escape(options[:gravatar_fallback_url])
65
65
  ].join("")
66
66
  links << {
67
- id: :gravatar,
68
- name: Fuji::Helper.image_tag(gravatar_url),
67
+ id: :gravatar,
68
+ name: Fuji::Helper.image_tag(gravatar_url),
69
69
  url: 'https://dashboard.heroku.com/account'
70
70
  }
71
71
  end
72
-
72
+
73
73
  if options[:login_path] && options[:user].nil?
74
74
  links << {id: :login, name: 'Log in', url: options[:login_path]}
75
75
  end
@@ -78,7 +78,7 @@ module Fuji
78
78
  links = links.map do |link|
79
79
  Fuji::Helper.link_to(link[:name], link[:url], link[:id])
80
80
  end.join("\n")
81
-
81
+
82
82
  # Prepare the HTML output
83
83
  out = "
84
84
  <div id='fuji' class='fuji'>
@@ -92,26 +92,26 @@ module Fuji
92
92
  </div>
93
93
  </div>
94
94
  "
95
-
95
+
96
96
  # If we're in Rails, make it HTML safe
97
97
  out.respond_to?(:html_safe) ? out.html_safe : out
98
98
  end
99
-
99
+
100
100
  # def self.default_links(options={})
101
101
  # end
102
102
 
103
103
  end
104
-
104
+
105
105
  class Helper
106
106
 
107
107
  def self.current_site_matches?(search_string_or_url, request_object=nil)
108
108
  # Allow request object to be mocked, for testing purposes
109
109
  request ||= request_object
110
110
  return false unless request
111
-
111
+
112
112
  # Clean the string up
113
113
  q = extract_domain(search_string_or_url).to_s
114
-
114
+
115
115
  return true if request.url && request.url.include?(q)
116
116
  return true if request.host_with_port && request.host_with_port.include?(q)
117
117
  false
@@ -120,18 +120,18 @@ module Fuji
120
120
  def self.extract_domain(string)
121
121
  string =~ (/^(?:\w+:\/\/)?([^\/?]+)(?:\/|\?|$)/) ? $1 : string
122
122
  end
123
-
123
+
124
124
  def self.link_to(name, url, css="")
125
125
  css << " active" if Fuji::Helper.current_site_matches?(url)
126
126
  "<li><a href='#{url}' class='#{css}'>#{name}</a></li>"
127
127
  end
128
-
128
+
129
129
  def self.image_tag(url)
130
130
  "<img src='#{url}'>"
131
131
  end
132
-
132
+
133
133
  end
134
-
134
+
135
135
  end
136
136
 
137
137
  # ActionView::Base.send :include, Fuji::ViewHelpers if defined?(ActionView)
@@ -1,3 +1,3 @@
1
1
  module Fuji
2
- VERSION = "0.0.4"
2
+ VERSION = "0.1.1"
3
3
  end
@@ -1,10 +1,15 @@
1
1
  // Configurable Config
2
2
  $fuji-foreground-color: #FFF !default
3
- $fuji-text-color: rgba(#FFF, 1) !default
4
- $fuji-highlight-color: #aed582 !default
5
- $fuji-max-width: 960px !default
6
- $fuji-logo-text-color: rgba($fuji-highlight_color, 0.4) !default
7
- $fuji-logo-subtext-color: rgba($fuji-highlight_color, 0.7) !default
3
+ $fuji-background-color: transparent !default
4
+ $fuji-column-max-width: 960px !default
5
+ $fuji-logo-text-color: rgba(#aed582, 0.4) !default
6
+ $fuji-logo-subtext-color: rgba(#aed582, 0.7) !default
7
+ $fuji-link-color-inactive: rgba($fuji-foreground-color, 0.5) !default
8
+ $fuji-link-color-active: rgba(#aed582, 1) !default
9
+ $fuji-link-background-color-inactive: transparent !default
10
+ $fuji-link-background-color-active: transparent !default
11
+ $fuji-heading-font-size: 24px !default
12
+ $fuji-nav-font-size: inherit !default
8
13
 
9
14
  // Immutable Config
10
15
  $fuji-line-edge-color: rgba($fuji-foreground-color, 0)
@@ -12,7 +17,8 @@ $fuji-line-middle-color: rgba($fuji-foreground-color, 0.1)
12
17
  $fuji-line-size: 40%
13
18
 
14
19
  #fuji
15
- +transition(all 0.5s false 0s)
20
+ +transition(all 0.2s false 0s)
21
+ background-color: $fuji-background-color
16
22
  float: none
17
23
  overflow: hidden
18
24
  margin-bottom: 20px
@@ -23,53 +29,64 @@ $fuji-line-size: 40%
23
29
  margin-right: auto
24
30
  position: relative
25
31
  min-width: 320px
26
- max-width: $fuji-max-width
27
-
32
+ max-width: $fuji-column-max-width
33
+ overflow: hidden
34
+
28
35
  h1
29
36
  float: left
30
37
  margin: 0
31
38
  padding: 0
39
+ @media (max-width: $fuji-column-max-width)
40
+ margin-left: 15px
32
41
  a
33
42
  +transition(all 0.3s false 0s)
34
43
  max-width: 300px
35
44
  overflow: hidden
36
45
  font:
37
46
  family: hybrea, corbel, 'helvetica neue', helvetica, arial
38
- size: 20px
47
+ size: $fuji-heading-font-size
39
48
  weight: normal
40
49
  color: $fuji-logo-text-color
41
50
  line-height: 36px
51
+ text-decoration: none
42
52
  span
43
53
  display: inline-block
44
54
  color: $fuji-logo-subtext-color
45
55
  padding-left: 4px
46
56
 
47
-
48
57
  ul
49
58
  list-style: none
50
- margin: 4px 0 0 0
59
+ margin: 0
51
60
  padding: 0
52
61
  float: right
53
- max-width: 600px
62
+ max-width: 700px
63
+ @media (max-width: $fuji-column-max-width)
64
+ // margin-right: 15px
65
+ display: none
54
66
  > li
55
67
  float: left
56
68
  +background-image(linear-gradient(top, $fuji-line-edge-color, $fuji-line-middle-color $fuji-line-size, $fuji-line-middle-color (100% - $fuji-line-size), $fuji-line-edge-color))
57
69
  background-position: left center
58
70
  background-repeat: no-repeat
59
- background-size: 1px 100%
60
- font-size: 13px
71
+ background-size: 1px 100%
72
+ font-size: $fuji-nav-font-size
73
+ margin: 0
74
+ padding: 0 8px
61
75
  a
62
- +transition(all 0.3s false 0s)
63
- color: rgba($fuji-text-color, 0.5)
76
+ +transition(all 0.3s)
77
+ color: $fuji-link-color-inactive
78
+ background-color: $fuji-link-background-color-inactive
79
+ -webkit-border-radius: 3px
80
+ -moz-border-radius: 3px
81
+ border-radius: 3px
64
82
  display: block
65
- padding: 7px 15px
83
+ padding: 3px 8px
66
84
  text-decoration: none
67
- &:hover, &.active
68
- text-decoration: underline
69
- color: $fuji-highlight-color
70
- &.em
71
- color: rgba($fuji-text-color, 1)
72
-
85
+ &:hover, &.active, &.login
86
+ +transition(all 0)
87
+ color: $fuji-link-color-active
88
+ background-color: $fuji-link-background-color-active
89
+
73
90
  &.gravatar
74
91
  padding: 0 0 0 15px
75
92
  img
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: fuji
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.4
4
+ version: 0.1.1
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2013-03-27 00:00:00.000000000 Z
12
+ date: 2013-03-29 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: rspec