fuji 0.0.4 → 0.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. data/CONTRIBUTING.md +17 -1
  2. data/Gemfile.lock +4 -4
  3. data/README.md +20 -14
  4. data/lib/fuji.rb +25 -25
  5. data/lib/fuji/version.rb +1 -1
  6. data/stylesheets/_fuji.sass +40 -23
  7. metadata +2 -2
data/CONTRIBUTING.md CHANGED
@@ -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
+ ```
data/Gemfile.lock CHANGED
@@ -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)
data/lib/fuji.rb CHANGED
@@ -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)
data/lib/fuji/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Fuji
2
- VERSION = "0.0.4"
2
+ VERSION = "0.1.1"
3
3
  end
data/stylesheets/_fuji.sass CHANGED
@@ -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