Add inline_svg gem and icons

Add icons for location, calendar and website

Gemfile

@@ -22,6 +22,7 @@ gem 'rolify',                          '~> 5.2'
 gem 'sucker_punch',                    '~> 2.0', '>= 2.0.4'
 gem 'figaro',                          '~> 1.1', '>= 1.1.1'
 gem 'gravatar_image_tag',              '~> 1.2'
+gem 'inline_svg',                      '~> 1.3', '>= 1.3.1'
 
 # Add type-casting and other features on top of ActiveRecord::Store.store_accessor
 gem 'storext',                         '~> 2.2', '>= 2.2.2'

Gemfile.lock

@@ -291,6 +291,9 @@ GEM
     i18n_data (0.8.0)
     ice_nine (0.11.2)
     inflecto (0.0.2)
+    inline_svg (1.3.1)
+      activesupport (>= 3.0)
+      nokogiri (>= 1.6)
     ipaddress (0.8.3)
     jbuilder (2.7.0)
       activesupport (>= 4.2.0)
@@ -514,6 +517,7 @@ DEPENDENCIES
   guard (= 2.14.0)
   guard-livereload (~> 2.5, >= 2.5.2)
   guard-minitest (= 2.4.6)
+  inline_svg (~> 1.3, >= 1.3.1)
   jbuilder (~> 2.5)
   jquery-rails (= 4.3.1)
   listen (>= 3.0.5, < 3.2)

app/assets/stylesheets/custom.scss

@@ -54,6 +54,22 @@ body {
   border-bottom: 3px solid $indigo;
 }
 
+.icon {
+  width: 20px;
+  height: 20px;
+  vertical-align: sub;
+}
+
+.icon-location,
+.icon-calendar {
+  margin-right: .1rem;
+}
+
+.icon-link {
+  margin-right: .13rem;
+}
+
+
 // Event Map
 
 

app/helpers/icons_helper.rb

@@ -0,0 +1,27 @@
+module IconsHelper
+  def location_icon
+    inline_svg location_icon_file, class: "icon icon-location"
+  end
+
+  def calendar_icon
+    inline_svg calendar_icon_file, class: "icon icon-calendar"
+  end
+
+  def link_icon
+    inline_svg link_icon_file, class: "icon icon-link"
+  end
+
+  private
+
+    def location_icon_file
+      "icons/if_icon-ios7-location-outline_211766"
+    end
+
+    def calendar_icon_file
+      "icons/if_icon-calendar_211633"
+    end
+
+    def link_icon_file
+      "icons/if_icon-link_211853"
+    end
+end

app/views/events/_event.html.erb

@@ -15,6 +15,7 @@
 
   <div class="event-box-text">
     <p class="mb-0 event-box__date">
+      <%= calendar_icon %>
       <%= event.start_date_prettyfied %>
     </p>
   </div>

app/views/events/show.html.erb

@@ -5,26 +5,37 @@
 
     <div class="row">
       <div class="col-md-12 mt-2">
-        <div class="row mb-2rem">
 
+        <div class="row mb-2rem">
           <div class="col-md-8">
+
             <div class="box">
               <div class="event-box-big-image">
                 <%= image_tag(@event.image_url, class: "img-fluid") %>
               </div>
               <div class="event-box-big-text">
                 <h2 class="mb-3 font-italic"><%= @event.title %></h2>
                 <p>
+                  <%= calendar_icon %>
                   <%= @event.start_date_prettyfied %>
                   <% unless same_time?(@event) %>
                     - <%= @event.end_date_prettyfied %>
                   <% end %>
                 </p>
-                <p><%= @event.full_address %></p>
-                <% if @event.website %>
-                  <p><%= link_to @event.website, @event.website %></p>
+                <p>
+                  <%= location_icon %>
+                  <%= @event.full_address %>
+                </p>
+                <% if !@event.website.empty? %>
+                  <p>
+                    <%= link_icon %>
+                    <%= link_to @event.website, @event.website %>
+                  </p>
                 <% end %>
-                <p><%= sanitize @event.description %></p>
+                <p>
+                  <%= sanitize @event.description %>
+                </p>
+
                 <% if author?(@event) %>
                   <p>
                     <%= link_to "Edit event",
@@ -34,8 +45,9 @@
                       method: :delete, data: { confirm: "Are you sure?"} %>
                   </p>
                 <% end %>
-               </div>
-             </div>
+              </div>
+            </div><!-- /.box -->
+
           </div>
 
           <div class="col-md-4">

app/views/groups/_group.html.erb

@@ -16,7 +16,10 @@
     </div>
 
     <div class="group-box-text">
-      <p class="mb-0"><%= group.location %></p>
+      <p class="mb-0">
+        <%= location_icon %>
+        <%= group.location %>
+      </p>
     </div>
 
   </div>

app/views/groups/_group_event.html.erb

@@ -15,6 +15,7 @@
           class: "font-weight-bold" %>
       </h2>
       <p class="event-box__date">
+        <%= calendar_icon %>
         <%= event.start_date_prettyfied %>
       </p>
       <% if controller_name == "groups" %>

app/views/groups/show.html.erb

@@ -33,6 +33,7 @@
                   Location
                 </h3>
                 <p>
+                  <%= location_icon %>
                   <%= @group.location %>
                 </p>
               </div>