weather-icons-rails 0.0.3.3 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a7f6a5a035eb46b3ae68cfd809a9f168f8b899dd
-  data.tar.gz: 449189c67dbed4f6bb3e8c30e222532b27b362a7
+  metadata.gz: 2c44e47fd965f279dea4903072cc084c512feacf
+  data.tar.gz: b98d7b2c1fca4ab3b6861728905c1968162fcf6e
 SHA512:
-  metadata.gz: dd2df7968faed17ce62b55b2b4e94a8efbca07a5d4780a869523e05182b3e2111f5c61d2b1caa1a12be09f67795a36372645e5084a655a51e7e69ab3986e5407
-  data.tar.gz: 634a1f3a54ab45f5cb98acf6dd6e23da61b0cb9f72743724276dd27ba19db0321c6dbf2f28b48d2ce82bfb25c38ef15a2ce61ff9b5f7b5b0de9c87cafe0a3d16
+  metadata.gz: 588bf13624280532c7460069e6f9c8ae455d0a833b88d171031d1477c2b5305ac2f4252ba1e15d552eb69b97c54e4d0a5623b649822efa38d92cda4f834e7278
+  data.tar.gz: 2f5d9d3e90fc320658eaa2d5cb4c5594b3693c5c7b69e3a3b9661c8f4fb3e7568fe939645baea40b713a06c98d8fcf92a677ce6070ab256654f106efe021202b

data/README.md

@@ -36,7 +36,8 @@ To add icons anywhere in your html just add one of these tags with your symbole
 ```
 ## If that wasn't easy enough, Helpers make it even easier!
 
-In your view just add these to your HAML or ERB:
+######In your view just add these to your HAML or ERB:
+
 ```ruby
 wi_icon('day-lightning')
 # => <i class="wi wi-day-lightning"></i>
@@ -59,6 +60,9 @@ wi_icon('day-lightning', 'Weather Icons', id: 'lightning', class: 'strong')
 content_tag(:li, wi_icon("day-lightning li", text: "Bulleted list item"))
 # => <li><i class="wi wi-day-lightning wi-li"></i> Bulleted list item</li>
 ```
+
+I cant really think of a use for this, but I'm sure someone can. Works better with empty box icon in font awesome.
+
 ```ruby
 wi_stacked_icon "day-lightning", base: "day-cloudy-gusts"
 # => <span class="fa-stack">
@@ -73,6 +77,38 @@ wi_stacked_icon "day-lightning inverse", base: 'day-cloudy-gusts', class: "pull-
 # => </span> Hi!
 ```
 
+#### Weathered Lists:
+
+###### 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
+
+```ruby
+wi_list_item('wi-day-hail', 'Bad Weather Today')
+# => <li><i class="wi wi-day-hail wi-li"></i> Bad Weather Today</li>
+
+wi_list_item('wi-day-hail md', 'Bad Weather Today', icon_options: {class: 'inverse'}, class: 'something' )
+# => <li class="something"><i class="wi wi-day-hail wi-md wi-li inverse"></i> Bad Weather Today</li>
+```
+```ruby
+wi_list('wi-day-hail', ['Bad Weather', 'Good Weather'])
+# => <ul class: 'wi-ul'>
+# =>   <li>
+# =>     <i class="wi wi-day-hail wi-li"></i> Bad Weather
+# =>   </li>
+# =>   <li>
+# =>     <i class="wi wi-day-hail wi-li"></i> Good Weather
+# =>   </li>
+# => </ul>
+
+wi_list('wi-day-hail lg', ['Bad Weather', 'Good Weather'], icon_options: {class: 'pull-right'}, class: 'something' )
+# => <ul class: 'wi-ul'>
+# =>   <li class="something">
+# =>     <i class="wi wi-day-hail wi-lg wi-li pull-right"></i> Bad Weather
+# =>   </li>
+# =>   <li class="something">
+# =>     <i class="wi wi-day-hail wi-lg wi-li pull-right"></i> Good Weather
+# =>   </li>
+# => </ul>
+```
 ##Fancy css classes for fancy people.
 
 Supported classes:
@@ -87,9 +123,10 @@ Supported classes:
   .wi-flip-horizontal
   .wi-flip-vertical  
 
-  .wi-ul
-  .wi-li
+  .wi-ul  # Use this to create a nicely formated vertical list of icons
+  .wi-li  # Assigne to icon for bullet points
 
+  .wi-xs
   .wi-md
   .wi-lg
   .wi-xl
@@ -103,7 +140,7 @@ Supported classes:
   .wi-border
 ```
 
-## Version 0.0.3.3 (BETA?)
+## Version 0.1.0
 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!
 
 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).

data/app/assets/stylesheets/weather-icons/_core.css.scss

@@ -1,7 +1,7 @@
 // Base Class Definition
 // -------------------------
 
-[class^="#{$wi-css-prefix}-"] {
+.wi {
   display: inline-block;
   font-family: weather;
   font-style: normal;

data/app/assets/stylesheets/weather-icons/_larger.css.scss

@@ -2,6 +2,12 @@
 // -------------------------
 
 /* makes the font 33% larger relative to the icon container */
+.#{$wi-css-prefix}-xs {
+  font-size: (2em /3);
+  line-height: (3em / 2);
+  vertical-align: 15%;
+}
+
 .#{$wi-css-prefix}-md {
   font-size: (4em / 3);
   line-height: (3em / 4);
@@ -15,7 +21,7 @@
 .#{$wi-css-prefix}-xl {
   font-size: (6em / 3);
   line-height: (5em / 6);
-  vertical-align: -25%;
+  vertical-align: -30%;
 }
 .#{$wi-css-prefix}-2x {
   font-size: 2em;

data/lib/weather-icons/rails/rails/helpers.rb

@@ -7,29 +7,29 @@ module WeatherIcons
         #
         # Examples
         #
-        #   wi_icon "camera-retro"
-        #   # => <i class="wi wi-camera-retro"></i>
+        #   wi_icon "day-hail"
+        #   # => <i class="wi wi-day-hail"></i>
         #
-        #   wi_icon "camera-retro", text: "Take a photo"
-        #   # => <i class="wi wi-camera-retro"></i> Take a photo
+        #   wi_icon "day-hail", text: "Hailing Outside!"
+        #   # => <i class="wi wi-day-hail"></i> Hailing Outside
         #
-        #   wi_icon "camera-retro 2x"
-        #   # => <i class="wi wi-camera-retro wi-2x"></i>
-        #   wi_icon ["camera-retro", "4x"]
-        #   # => <i class="wi wi-camera-retro wi-4x"></i>
-        #   wi_icon "spinner spin lg"
-        #   # => <i class="wi wi-spinner wi-spin wi-lg">
+        #   wi_icon "day-hail 2x"
+        #   # => <i class="wi wi-day-hail wi-2x"></i>
+        #   wi_icon ["day-hail", "4x"]
+        #   # => <i class="wi wi-day-hail wi-4x"></i>
+        #   wi_icon "wi-day-hail spin lg"
+        #   # => <i class="wi wi-day-hail wi-spin wi-lg">
         #
-        #   wi_icon "quote-left 4x", class: "pull-left"
-        #   # => <i class="wi wi-quote-left wi-4x pull-left"></i>
+        #   wi_icon "day-hail 4x", class: "pull-left"
+        #   # => <i class="wi wi-day-hail wi-4x pull-left"></i>
         #
-        #   wi_icon "user", data: { id: 123 }
-        #   # => <i class="wi wi-user" data-id="123"></i>
+        #   wi_icon "day-hail", data: { id: 123 }
+        #   # => <i class="wi wi-day-hail" data-id="123"></i>
         #
-        #   content_tag(:li, wi_icon("check li", text: "Bulleted list item"))
-        #   # => <li><i class="wi wi-check wi-li"></i> Bulleted list item</li>
+        #   content_tag(:li, wi_icon("day-hail li", text: "Bulleted list item"))
+        #   # => <li><i class="wi wi-day-hail wi-li"></i> Bulleted list item</li>
         def wi_icon(names = "flag", options = {})
-          classes = ['wi ']
+          classes = ['wi']
           classes.concat Private.icon_names(names)
           classes.concat Array(options.delete(:class))
           text = options.delete(:text)
@@ -42,26 +42,26 @@ module WeatherIcons
         #
         # Examples
         #
-        #   wi_stacked_icon "twitter", base: "square-o"
+        #   wi_stacked_icon "day-hail", base: "day-cloudy-gusts"
         #   # => <span class="wi-stack">
-        #   # =>   <i class="wi wi-square-o wi-stack-2x"></i>
-        #   # =>   <i class="wi wi-twitter wi-stack-1x"></i>
+        #   # =>   <i class="wi wi-day-cloudy-gusts wi-stack-2x"></i>
+        #   # =>   <i class="wi wi-day-hail wi-stack-1x"></i>
         #   # => </span>
         #
-        #   wi_stacked_icon "terminal inverse", base: "square", class: "pull-right", text: "Hi!"
+        #   wi_stacked_icon "day-hail inverse", base: "lightning", class: "pull-right", text: "Hi!"
         #   # => <span class="wi-stack pull-right">
-        #   # =>   <i class="wi wi-square wi-stack-2x"></i>
-        #   # =>   <i class="wi wi-terminal wi-inverse wi-stack-1x"></i>
+        #   # =>   <i class="wi wi-lightning wi-stack-2x"></i>
+        #   # =>   <i class="wi wi-day-hail wi-inverse wi-stack-1x"></i>
         #   # => </span> Hi!
         #
-        #   wi_stacked_icon "camera", base: "ban-circle", reverse: true
+        #   wi_stacked_icon "lightning", base: "day-cloudy-gusts", reverse: true
         #   # => <span class="wi-stack">
-        #   # =>   <i class="wi wi-camera wi-stack-1x"></i>
-        #   # =>   <i class="wi wi-ban-circle wi-stack-2x"></i>
+        #   # =>   <i class="wi wi-lightning wi-stack-1x"></i>
+        #   # =>   <i class="wi wi-day-cloudt-gusts wi-stack-2x"></i>
         #   # => </span>
         def wi_stacked_icon(names = "flag", options = {})
           classes = Private.icon_names("stack").concat(Array(options.delete(:class)))
-          base_names = Private.array_value(options.delete(:base) || "square-o").push("stack-2x")
+          base_names = Private.array_value(options.delete(:base) || "wi-lightning").push("stack-2x")
           names = Private.array_value(names).push("stack-1x")
           base = wi_icon(base_names, options.delete(:base_options) || {})
           icon = wi_icon(names, options.delete(:icon_options) || {})
@@ -72,6 +72,49 @@ module WeatherIcons
           Private.icon_join(stacked_icon, text)
         end
 
+        # Creates a list item with the specified icon as the marker.
+        # To be used with an ul tag having a class of wi-ul
+        #
+        # Examples
+        #
+        #   wi_list_item('day-hail', 'Bad Weather Today')
+        #   # => <li><i class="wi wi-day-hail wi-li"></i> Bad Weather Today</li>
+        #
+        #   wi_list_item('day-hail md', 'Bad Weather Today', icon_options: {class: 'inverse'}, class: 'something' )
+        #   # => <li class="something"><i class="wi wi-day-hail wi-md wi-li inverse"></i> Bad Weather Today</li>
+        def wi_list_item(icon_name, string, options={})
+          icons_options = {text: string}.merge(Hash(options[:icon_options]))
+          content_tag(:li, wi_icon("#{icon_name} li", icons_options), options.reject{|key,value| key == :icon_options})
+        end
+
+        # Creates an unordered list with the specified icon as the markers.
+        #
+        # Examples
+        #
+        #   wi_list('day-hail', ['Bad Weather', 'Good Weather'])
+        #   # => <ul class: 'wi-ul'>
+        #   # =>   <li>
+        #   # =>     <i class="wi wi-day-hail wi-li"></i> Bad Weather
+        #   # =>   </li>
+        #   # =>   <li>
+        #   # =>     <i class="wi wi-day-hail wi-li"></i> Good Weather
+        #   # =>   </li>
+        #   # => </ul>
+        #
+        #   wi_list('day-hail lg', ['Bad Weather', 'Good Weather'], icon_options: {class: 'pull-right'}, class: 'something' )
+        #   # => <ul class: 'wi-ul'>
+        #   # =>   <li class="something">
+        #   # =>     <i class="wi wi-day-hail wi-lg wi-li pull-right"></i> Bad Weather
+        #   # =>   </li>
+        #   # =>   <li class="something">
+        #   # =>     <i class="wi wi-day-hail wi-lg wi-li pull-right"></i> Good Weather
+        #   # =>   </li>
+        #   # => </ul>
+        def wi_list(icon_name, strings, options={})
+          list_items = strings.map { |str| wi_list_item(icon_name, str, options) }
+          content_tag(:ul, safe_join(list_items), class: Private.icon_names('ul'))
+        end
+
         module Private
           extend ActionView::Helpers::OutputSafetyHelper
 

data/lib/weather-icons/rails/version.rb

@@ -1,5 +1,5 @@
 module WeatherIcons
   module Rails
-    VERSION = "0.0.3.3"
+    VERSION = "0.1.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: weather-icons-rails
 version: !ruby/object:Gem::Version
-  version: 0.0.3.3
+  version: 0.1.0
 platform: ruby
 authors:
 - Cody Schaaf