weather-icons-rails 0.0.3.3 → 0.1.0
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.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2c44e47fd965f279dea4903072cc084c512feacf
|
|
4
|
+
data.tar.gz: b98d7b2c1fca4ab3b6861728905c1968162fcf6e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 588bf13624280532c7460069e6f9c8ae455d0a833b88d171031d1477c2b5305ac2f4252ba1e15d552eb69b97c54e4d0a5623b649822efa38d92cda4f834e7278
|
|
7
|
+
data.tar.gz: 2f5d9d3e90fc320658eaa2d5cb4c5594b3693c5c7b69e3a3b9661c8f4fb3e7568fe939645baea40b713a06c98d8fcf92a677ce6070ab256654f106efe021202b
|
data/README.md
CHANGED
|
@@ -36,7 +36,8 @@ To add icons anywhere in your html just add one of these tags with your symbole
|
|
|
36
36
|
```
|
|
37
37
|
## If that wasn't easy enough, Helpers make it even easier!
|
|
38
38
|
|
|
39
|
-
In your view just add these to your HAML or ERB:
|
|
39
|
+
######In your view just add these to your HAML or ERB:
|
|
40
|
+
|
|
40
41
|
```ruby
|
|
41
42
|
wi_icon('day-lightning')
|
|
42
43
|
# => <i class="wi wi-day-lightning"></i>
|
|
@@ -59,6 +60,9 @@ wi_icon('day-lightning', 'Weather Icons', id: 'lightning', class: 'strong')
|
|
|
59
60
|
content_tag(:li, wi_icon("day-lightning li", text: "Bulleted list item"))
|
|
60
61
|
# => <li><i class="wi wi-day-lightning wi-li"></i> Bulleted list item</li>
|
|
61
62
|
```
|
|
63
|
+
|
|
64
|
+
I cant really think of a use for this, but I'm sure someone can. Works better with empty box icon in font awesome.
|
|
65
|
+
|
|
62
66
|
```ruby
|
|
63
67
|
wi_stacked_icon "day-lightning", base: "day-cloudy-gusts"
|
|
64
68
|
# => <span class="fa-stack">
|
|
@@ -73,6 +77,38 @@ wi_stacked_icon "day-lightning inverse", base: 'day-cloudy-gusts', class: "pull-
|
|
|
73
77
|
# => </span> Hi!
|
|
74
78
|
```
|
|
75
79
|
|
|
80
|
+
#### Weathered Lists:
|
|
81
|
+
|
|
82
|
+
###### Use wi-li tag with an icon nested inside a ul.wi-ul > li list to have it used as the bullet point. Must have text or element after it to work
|
|
83
|
+
|
|
84
|
+
```ruby
|
|
85
|
+
wi_list_item('wi-day-hail', 'Bad Weather Today')
|
|
86
|
+
# => <li><i class="wi wi-day-hail wi-li"></i> Bad Weather Today</li>
|
|
87
|
+
|
|
88
|
+
wi_list_item('wi-day-hail md', 'Bad Weather Today', icon_options: {class: 'inverse'}, class: 'something' )
|
|
89
|
+
# => <li class="something"><i class="wi wi-day-hail wi-md wi-li inverse"></i> Bad Weather Today</li>
|
|
90
|
+
```
|
|
91
|
+
```ruby
|
|
92
|
+
wi_list('wi-day-hail', ['Bad Weather', 'Good Weather'])
|
|
93
|
+
# => <ul class: 'wi-ul'>
|
|
94
|
+
# => <li>
|
|
95
|
+
# => <i class="wi wi-day-hail wi-li"></i> Bad Weather
|
|
96
|
+
# => </li>
|
|
97
|
+
# => <li>
|
|
98
|
+
# => <i class="wi wi-day-hail wi-li"></i> Good Weather
|
|
99
|
+
# => </li>
|
|
100
|
+
# => </ul>
|
|
101
|
+
|
|
102
|
+
wi_list('wi-day-hail lg', ['Bad Weather', 'Good Weather'], icon_options: {class: 'pull-right'}, class: 'something' )
|
|
103
|
+
# => <ul class: 'wi-ul'>
|
|
104
|
+
# => <li class="something">
|
|
105
|
+
# => <i class="wi wi-day-hail wi-lg wi-li pull-right"></i> Bad Weather
|
|
106
|
+
# => </li>
|
|
107
|
+
# => <li class="something">
|
|
108
|
+
# => <i class="wi wi-day-hail wi-lg wi-li pull-right"></i> Good Weather
|
|
109
|
+
# => </li>
|
|
110
|
+
# => </ul>
|
|
111
|
+
```
|
|
76
112
|
##Fancy css classes for fancy people.
|
|
77
113
|
|
|
78
114
|
Supported classes:
|
|
@@ -87,9 +123,10 @@ Supported classes:
|
|
|
87
123
|
.wi-flip-horizontal
|
|
88
124
|
.wi-flip-vertical
|
|
89
125
|
|
|
90
|
-
.wi-ul
|
|
91
|
-
.wi-li
|
|
126
|
+
.wi-ul # Use this to create a nicely formated vertical list of icons
|
|
127
|
+
.wi-li # Assigne to icon for bullet points
|
|
92
128
|
|
|
129
|
+
.wi-xs
|
|
93
130
|
.wi-md
|
|
94
131
|
.wi-lg
|
|
95
132
|
.wi-xl
|
|
@@ -103,7 +140,7 @@ Supported classes:
|
|
|
103
140
|
.wi-border
|
|
104
141
|
```
|
|
105
142
|
|
|
106
|
-
## Version 0.0
|
|
143
|
+
## Version 0.1.0
|
|
107
144
|
This is my first attempt at making a gem, please feel free to send me any pull requests or questions. I'm happy to help and or learn. Thanks!
|
|
108
145
|
|
|
109
146
|
The icon designs are originally by [Lukas Bischoff](http://www.twitter.com/artill). The font has been modified slightly for icon-font usage, which was then turned into a HTML/CSS/LESS addon by [Erik Flowers](http://www.helloerik.com). My gem was originally based off of the hard work over at [Font Awesome Rails](https://github.com/bokmann/font-awesome-rails) and then updated to closely mirror the Sass based version at [Font Awesome Sass](https://github.com/FortAwesome/font-awesome-sass).
|
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
// -------------------------
|
|
3
3
|
|
|
4
4
|
/* makes the font 33% larger relative to the icon container */
|
|
5
|
+
.#{$wi-css-prefix}-xs {
|
|
6
|
+
font-size: (2em /3);
|
|
7
|
+
line-height: (3em / 2);
|
|
8
|
+
vertical-align: 15%;
|
|
9
|
+
}
|
|
10
|
+
|
|
5
11
|
.#{$wi-css-prefix}-md {
|
|
6
12
|
font-size: (4em / 3);
|
|
7
13
|
line-height: (3em / 4);
|
|
@@ -15,7 +21,7 @@
|
|
|
15
21
|
.#{$wi-css-prefix}-xl {
|
|
16
22
|
font-size: (6em / 3);
|
|
17
23
|
line-height: (5em / 6);
|
|
18
|
-
vertical-align: -
|
|
24
|
+
vertical-align: -30%;
|
|
19
25
|
}
|
|
20
26
|
.#{$wi-css-prefix}-2x {
|
|
21
27
|
font-size: 2em;
|
|
@@ -7,29 +7,29 @@ module WeatherIcons
|
|
|
7
7
|
#
|
|
8
8
|
# Examples
|
|
9
9
|
#
|
|
10
|
-
# wi_icon "
|
|
11
|
-
# # => <i class="wi wi-
|
|
10
|
+
# wi_icon "day-hail"
|
|
11
|
+
# # => <i class="wi wi-day-hail"></i>
|
|
12
12
|
#
|
|
13
|
-
# wi_icon "
|
|
14
|
-
# # => <i class="wi wi-
|
|
13
|
+
# wi_icon "day-hail", text: "Hailing Outside!"
|
|
14
|
+
# # => <i class="wi wi-day-hail"></i> Hailing Outside
|
|
15
15
|
#
|
|
16
|
-
# wi_icon "
|
|
17
|
-
# # => <i class="wi wi-
|
|
18
|
-
# wi_icon ["
|
|
19
|
-
# # => <i class="wi wi-
|
|
20
|
-
# wi_icon "
|
|
21
|
-
# # => <i class="wi wi-
|
|
16
|
+
# wi_icon "day-hail 2x"
|
|
17
|
+
# # => <i class="wi wi-day-hail wi-2x"></i>
|
|
18
|
+
# wi_icon ["day-hail", "4x"]
|
|
19
|
+
# # => <i class="wi wi-day-hail wi-4x"></i>
|
|
20
|
+
# wi_icon "wi-day-hail spin lg"
|
|
21
|
+
# # => <i class="wi wi-day-hail wi-spin wi-lg">
|
|
22
22
|
#
|
|
23
|
-
# wi_icon "
|
|
24
|
-
# # => <i class="wi wi-
|
|
23
|
+
# wi_icon "day-hail 4x", class: "pull-left"
|
|
24
|
+
# # => <i class="wi wi-day-hail wi-4x pull-left"></i>
|
|
25
25
|
#
|
|
26
|
-
# wi_icon "
|
|
27
|
-
# # => <i class="wi wi-
|
|
26
|
+
# wi_icon "day-hail", data: { id: 123 }
|
|
27
|
+
# # => <i class="wi wi-day-hail" data-id="123"></i>
|
|
28
28
|
#
|
|
29
|
-
# content_tag(:li, wi_icon("
|
|
30
|
-
# # => <li><i class="wi wi-
|
|
29
|
+
# content_tag(:li, wi_icon("day-hail li", text: "Bulleted list item"))
|
|
30
|
+
# # => <li><i class="wi wi-day-hail wi-li"></i> Bulleted list item</li>
|
|
31
31
|
def wi_icon(names = "flag", options = {})
|
|
32
|
-
classes = ['wi
|
|
32
|
+
classes = ['wi']
|
|
33
33
|
classes.concat Private.icon_names(names)
|
|
34
34
|
classes.concat Array(options.delete(:class))
|
|
35
35
|
text = options.delete(:text)
|
|
@@ -42,26 +42,26 @@ module WeatherIcons
|
|
|
42
42
|
#
|
|
43
43
|
# Examples
|
|
44
44
|
#
|
|
45
|
-
# wi_stacked_icon "
|
|
45
|
+
# wi_stacked_icon "day-hail", base: "day-cloudy-gusts"
|
|
46
46
|
# # => <span class="wi-stack">
|
|
47
|
-
# # => <i class="wi wi-
|
|
48
|
-
# # => <i class="wi wi-
|
|
47
|
+
# # => <i class="wi wi-day-cloudy-gusts wi-stack-2x"></i>
|
|
48
|
+
# # => <i class="wi wi-day-hail wi-stack-1x"></i>
|
|
49
49
|
# # => </span>
|
|
50
50
|
#
|
|
51
|
-
# wi_stacked_icon "
|
|
51
|
+
# wi_stacked_icon "day-hail inverse", base: "lightning", class: "pull-right", text: "Hi!"
|
|
52
52
|
# # => <span class="wi-stack pull-right">
|
|
53
|
-
# # => <i class="wi wi-
|
|
54
|
-
# # => <i class="wi wi-
|
|
53
|
+
# # => <i class="wi wi-lightning wi-stack-2x"></i>
|
|
54
|
+
# # => <i class="wi wi-day-hail wi-inverse wi-stack-1x"></i>
|
|
55
55
|
# # => </span> Hi!
|
|
56
56
|
#
|
|
57
|
-
# wi_stacked_icon "
|
|
57
|
+
# wi_stacked_icon "lightning", base: "day-cloudy-gusts", reverse: true
|
|
58
58
|
# # => <span class="wi-stack">
|
|
59
|
-
# # => <i class="wi wi-
|
|
60
|
-
# # => <i class="wi wi-
|
|
59
|
+
# # => <i class="wi wi-lightning wi-stack-1x"></i>
|
|
60
|
+
# # => <i class="wi wi-day-cloudt-gusts wi-stack-2x"></i>
|
|
61
61
|
# # => </span>
|
|
62
62
|
def wi_stacked_icon(names = "flag", options = {})
|
|
63
63
|
classes = Private.icon_names("stack").concat(Array(options.delete(:class)))
|
|
64
|
-
base_names = Private.array_value(options.delete(:base) || "
|
|
64
|
+
base_names = Private.array_value(options.delete(:base) || "wi-lightning").push("stack-2x")
|
|
65
65
|
names = Private.array_value(names).push("stack-1x")
|
|
66
66
|
base = wi_icon(base_names, options.delete(:base_options) || {})
|
|
67
67
|
icon = wi_icon(names, options.delete(:icon_options) || {})
|
|
@@ -72,6 +72,49 @@ module WeatherIcons
|
|
|
72
72
|
Private.icon_join(stacked_icon, text)
|
|
73
73
|
end
|
|
74
74
|
|
|
75
|
+
# Creates a list item with the specified icon as the marker.
|
|
76
|
+
# To be used with an ul tag having a class of wi-ul
|
|
77
|
+
#
|
|
78
|
+
# Examples
|
|
79
|
+
#
|
|
80
|
+
# wi_list_item('day-hail', 'Bad Weather Today')
|
|
81
|
+
# # => <li><i class="wi wi-day-hail wi-li"></i> Bad Weather Today</li>
|
|
82
|
+
#
|
|
83
|
+
# wi_list_item('day-hail md', 'Bad Weather Today', icon_options: {class: 'inverse'}, class: 'something' )
|
|
84
|
+
# # => <li class="something"><i class="wi wi-day-hail wi-md wi-li inverse"></i> Bad Weather Today</li>
|
|
85
|
+
def wi_list_item(icon_name, string, options={})
|
|
86
|
+
icons_options = {text: string}.merge(Hash(options[:icon_options]))
|
|
87
|
+
content_tag(:li, wi_icon("#{icon_name} li", icons_options), options.reject{|key,value| key == :icon_options})
|
|
88
|
+
end
|
|
89
|
+
|
|
90
|
+
# Creates an unordered list with the specified icon as the markers.
|
|
91
|
+
#
|
|
92
|
+
# Examples
|
|
93
|
+
#
|
|
94
|
+
# wi_list('day-hail', ['Bad Weather', 'Good Weather'])
|
|
95
|
+
# # => <ul class: 'wi-ul'>
|
|
96
|
+
# # => <li>
|
|
97
|
+
# # => <i class="wi wi-day-hail wi-li"></i> Bad Weather
|
|
98
|
+
# # => </li>
|
|
99
|
+
# # => <li>
|
|
100
|
+
# # => <i class="wi wi-day-hail wi-li"></i> Good Weather
|
|
101
|
+
# # => </li>
|
|
102
|
+
# # => </ul>
|
|
103
|
+
#
|
|
104
|
+
# wi_list('day-hail lg', ['Bad Weather', 'Good Weather'], icon_options: {class: 'pull-right'}, class: 'something' )
|
|
105
|
+
# # => <ul class: 'wi-ul'>
|
|
106
|
+
# # => <li class="something">
|
|
107
|
+
# # => <i class="wi wi-day-hail wi-lg wi-li pull-right"></i> Bad Weather
|
|
108
|
+
# # => </li>
|
|
109
|
+
# # => <li class="something">
|
|
110
|
+
# # => <i class="wi wi-day-hail wi-lg wi-li pull-right"></i> Good Weather
|
|
111
|
+
# # => </li>
|
|
112
|
+
# # => </ul>
|
|
113
|
+
def wi_list(icon_name, strings, options={})
|
|
114
|
+
list_items = strings.map { |str| wi_list_item(icon_name, str, options) }
|
|
115
|
+
content_tag(:ul, safe_join(list_items), class: Private.icon_names('ul'))
|
|
116
|
+
end
|
|
117
|
+
|
|
75
118
|
module Private
|
|
76
119
|
extend ActionView::Helpers::OutputSafetyHelper
|
|
77
120
|
|