Integrate Font Awesome throughout app

* Add nav and guidance icons to login pages * Add inline service icons for insights in context with text * Decorate and clarify search/statusbar functions with icons * Remove service user icon images and avatars from each insight
ThinkUpLLC · Feb 20, 2013 · a5f2c39 · a5f2c39
1 parent 327b33e
commit a5f2c39
Show file tree

Hide file tree

Showing 22 changed files with 51 additions and 26 deletions.
diff --git a/webapp/_lib/view/_statusbar.tpl b/webapp/_lib/view/_statusbar.tpl
@@ -23,9 +23,9 @@
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="border-left : none;"><i class="icon-search"></i></a>
         <ul class="dropdown-menu">
         {foreach from=$instances key=tid item=i}
-            <li><a onclick="searchMe('{$site_root_path}search.php?u={$i->network_username|urlencode}&n={$i->network|urlencode}&c=posts&q=');" href="#">{if $i->network eq 'twitter'}@{/if}{$i->network_username}'s {if $i->network eq 'twitter'}tweets{elseif $i->network eq 'foursquare'}checkins{else}{$i->network|ucwords} posts{/if}</a></li>
+            <li><a onclick="searchMe('{$site_root_path}search.php?u={$i->network_username|urlencode}&n={$i->network|urlencode}&c=posts&q=');" href="#"><i class="icon-{$i->network}{if $i->network eq 'google+'} icon-google-plus{/if} icon-muted"></i> {if $i->network eq 'twitter'}@{/if}{$i->network_username}'s {if $i->network eq 'twitter'}tweets{elseif $i->network eq 'foursquare'}checkins{else}{$i->network|ucwords} posts{/if}</a></li>
             {if $i->network eq 'twitter'}
-            <li><a onclick="searchMe('{$site_root_path}search.php?u={$i->network_username|urlencode}&n={$i->network|urlencode}&c=followers&q=');" href="#">{if $i->network eq 'twitter'}@{/if}{$i->network_username}'s followers</a></li>
+            <li><a onclick="searchMe('{$site_root_path}search.php?u={$i->network_username|urlencode}&n={$i->network|urlencode}&c=followers&q=');" href="#"><i class="icon-twitter icon-muted"></i> {if $i->network eq 'twitter'}@{/if}{$i->network_username}'s followers</a></li>
             {/if}
         {/foreach}
         </ul>
@@ -50,16 +50,16 @@
           <b class="caret"></b>
         </a>
         <ul class="dropdown-menu">
-          <li class="{if $smarty.get.m eq "manage"}active{/if}"><a href="{$site_root_path}account/?m=manage">Settings</a></li>
-          <li><a href="{$site_root_path}session/logout.php">Log Out</a></li>
+          <li class="{if $smarty.get.m eq "manage"}active{/if}"><a href="{$site_root_path}account/?m=manage"><i class="icon-cog icon-muted"></i> Settings</a></li>
+          <li><a href="{$site_root_path}session/logout.php"><i class="icon-signout icon-muted"></i> Log Out</a></li>
         </ul>
     </li>
 </ul> 
 
       {else}
 <ul class="nav pull-right">
     <li><a href="http://thinkupapp.com/" >Get ThinkUp</a></li>
-    <li><a href="{$site_root_path}session/login.php" >Log In</a></li>
+    <li><a href="{$site_root_path}session/login.php" ><i class="icon-signin icon-muted"></i> Log In</a></li>
 </ul>
       {/if}
           </div><!--/.nav-collapse -->

diff --git a/webapp/_lib/view/_usermessage.tpl b/webapp/_lib/view/_usermessage.tpl
@@ -3,7 +3,7 @@
         {if $field}
             {if $success_msgs.$field}
              <span class="label label-success">
-
+                    <i class="icon icon-lightbulb"></i>
                    {if $success_msg_no_xss_filter}
                        {$success_msgs.$field}
                    {else}
@@ -14,7 +14,8 @@
             {/if}
             {if $error_msgs.$field}
              <span class="label label-error">
-
+
+                    <i class="icon icon-warning-sign"></i>
                    {if $error_msg_no_xss_filter}
                        {$error_msgs.$field}
                    {else}
@@ -38,7 +39,7 @@
         {else}
             {if $success_msg}
              <span class="label label-info" style="">
-
+                    <i class="icon icon-lightbulb"></i>
                    {if $success_msg_no_xss_filter}
                        {$success_msg}
                    {else}
@@ -50,6 +51,7 @@
             {if $error_msg}
              <span class="label label-error" style="">
 
+                    <i class="icon icon-warning-sign"></i>
                    {if $error_msg_no_xss_filter}
                        {$error_msg}
                    {else}
@@ -77,7 +79,7 @@
         {if $field}
             {if $success_msgs.$field}
              <div class="alert alert-success">
-                 <p>
+                 <p><i class="icon icon-lightbulb"></i>
                    {if $success_msg_no_xss_filter}
                        {$success_msgs.$field}
                    {else}
@@ -88,7 +90,7 @@
             {/if}
             {if $error_msgs.$field}
              <div class="alert alert-error">
-                 <p>
+                 <p><i class="icon icon-warning-sign"></i>
                    {if $error_msg_no_xss_filter}
                        {$error_msgs.$field}
                    {else}
@@ -113,7 +115,7 @@
         {else}
             {if $success_msg}
              <div class="alert alert-info" style="">
-                 <p>
+                 <p><i class="icon icon-lightbulb"></i>
                    {if $success_msg_no_xss_filter}
                        {$success_msg}
                    {else}
@@ -124,7 +126,7 @@
             {/if}
             {if $error_msg}
              <div class="alert alert-error" style="">
-                 <p>
+                 <p><i class="icon icon-warning-sign"></i>
                    {if $error_msg_no_xss_filter}
                        {$error_msg}
                    {else}

diff --git a/webapp/_lib/view/account.index.tpl b/webapp/_lib/view/account.index.tpl
@@ -45,7 +45,7 @@
                     {if $user_is_admin}
                       <td>
                       <span id="spanpluginactivation{$ip->id}">
-                          <a href="{$site_root_path}account/?p={$ip->folder_name|get_plugin_path}" class="btn">Configure</a>
+                          <a href="{$site_root_path}account/?p={$ip->folder_name|get_plugin_path}" class="btn"><i class="icon-cog "></i> Configure</a>
                       </span>
                       <span style="display: none;" class='linkbutton' id="messageactive{$ip->id}"></span>
                       </td>

diff --git a/webapp/_lib/view/plugins/insert.help_link.php b/webapp/_lib/view/plugins/insert.help_link.php
@@ -43,7 +43,7 @@
 function smarty_insert_help_link($params, &$smarty) {
     if (isset($smarty->_tpl_vars['help'][$params['id']])){
         return '<a href="http://thinkupapp.com/docs/'.$smarty->_tpl_vars['help'][$params['id']].
-        '.html" title="Learn more" class="btn btn-mini btn-help">Help</a>';
+        '.html" title="Learn more" class="btn btn-mini btn-help">Help <i class="icon-question-sign "></i></a>';
     } else {
         return '';
     }

diff --git a/webapp/_lib/view/session.forgot.tpl b/webapp/_lib/view/session.forgot.tpl
@@ -28,9 +28,10 @@
 
                 <fieldset style="background-color : white; padding-top : 30px;">
 
-                    <div class="control-group">
+                    <div class="control-group input-prepend">
                         <label class="control-label" for="email">Email:</label>
                         <div class="controls">
+                            <span class="add-on"><i class="icon-envelope"></i></span>
                             <input class="input-xlarge" type="email" name="email" id="email">
                         </div>
                     </div>

diff --git a/webapp/_lib/view/session.login.tpl b/webapp/_lib/view/session.login.tpl
@@ -19,16 +19,18 @@
 
                 <fieldset style="background-color : white; padding-top : 30px;">
 
-                    <div class="control-group">
+                    <div class="control-group input-prepend">
                         <label class="control-label" for="email">Email</label>
                         <div class="controls">
+                            <span class="add-on"><i class="icon-envelope"></i></span>
                             <input class="input-xlarge" type="email" name="email" id="email"{if isset($email)} value="{$email|filter_xss}"{/if} autofocus="autofocus">
                         </div>
                     </div>
 
-                    <div class="control-group">
+                    <div class="control-group input-prepend">
                         <label class="control-label" for="pwd">Password</label>
                         <div class="controls">
+                            <span class="add-on"><i class="icon-key"></i></span>
                             <input class="input-xlarge" type="password" name="pwd" id="pwd">
                         </div>
                     </div>

diff --git a/webapp/_lib/view/session.register.tpl b/webapp/_lib/view/session.register.tpl
@@ -30,20 +30,22 @@
                         </div>
                     </div>
 
-                    <div class="control-group"> 
+                    <div class="control-group input-prepend"> 
 
                         <label for="email" class="control-label">Email:</label>
                         <div class="controls">
+                            <span class="add-on"><i class="icon-envelope"></i></span>
                             <input name="email" type="text" id="email"{if  isset($mail)} value="{$mail|filter_xss}"{/if}> {include file="_usermessage.tpl" field="email" enable_bootstrap="true" inline="true"}
                         </div>
                     </div>
 
-                    <div class="control-group"> 
+                    <div class="control-group input-prepend"> 
 
                         <label for="pass1" class="control-label">Password:</label>
                         <div class="controls">
 
                             <div class="password-meter">
+                                <span class="add-on"><i class="icon-key"></i></span>
                                 <input type="password" name="pass1" id="pass1" class="password"><span for="pass1" class="password-meter-message"> </span> {include file="_usermessage.tpl" field="password" enable_bootstrap="true" inline="true"}
 
                                 <div class="password-meter-bg">
@@ -55,9 +57,10 @@
 
                     </div>
 
-                    <div class="control-group"> 
+                    <div class="control-group input-prepend"> 
                         <label for="pass2" class="control-label">Retype password:</label>
                         <div class="controls">
+                            <span class="add-on"><i class="icon-key"></i></span>
                             <input name="pass2" type="password" id="pass2" class="password">
                         </div>
                     </div>

diff --git a/webapp/_lib/view/session.resetpassword.tpl b/webapp/_lib/view/session.resetpassword.tpl
@@ -26,16 +26,18 @@
 
                 <fieldset style="background-color : white; padding-top : 30px;">
 
-                    <div class="control-group">
+                    <div class="control-group input-prepend">
                         <label class="control-label" for="password">New password:</label>
                         <div class="controls">
+                            <span class="add-on"><i class="icon-key"></i></span>
                             <input class="input-xlarge" type="password" name="password" id="password">
                         </div>
                     </div>
 
-                    <div class="control-group">
+                    <div class="control-group input-prepend">
                         <label class="control-label" for="password_confirm">New password:</label>
                         <div class="controls">
+                            <span class="add-on"><i class="icon-key"></i></span>
                             <input class="input-xlarge" type="password" name="password_confirm" id="password_confirm">
                         </div>
                     </div>

diff --git a/webapp/assets/css/insights.css b/webapp/assets/css/insights.css
@@ -181,8 +181,13 @@ color : #666;
     margin-right : auto;
 }
 
-.icon-googleplus:before {
-    content: "\f0d5";
+.icon-muted{
+    color:#ccc
+}
+
+.icon-foursquare:before {
+    content:"\f046";
+    content:"\f041";
 }
 
 .service-user-icons {

diff --git a/webapp/plugins/insightsgenerator/view/_footer.tpl b/webapp/plugins/insightsgenerator/view/_footer.tpl
@@ -1,2 +1,2 @@
-	<div class="clearfix"></div>
+    <div class="clearfix"></div>
 </div> <!--/alert-->
diff --git a/webapp/plugins/insightsgenerator/view/_header.tpl b/webapp/plugins/insightsgenerator/view/_header.tpl
@@ -1,2 +1 @@
 <div class="alert {if $i->emphasis eq '1'}alert-info{elseif $i->emphasis eq '2'}alert-info{elseif $i->emphasis eq '3'}alert-error{else}alert-info{/if} emphasis-{$i->emphasis} insight-item">
-    <div class="service-user-icons hidden-phone hidden-tablet"><i class="icon icon-{$i->instance->network}"></i><img src="{$i->instance->avatar}" width="16" height="16" alt="{$i->instance->network_username}"></div>
diff --git a/webapp/plugins/insightsgenerator/view/_post.tpl b/webapp/plugins/insightsgenerator/view/_post.tpl
@@ -9,6 +9,7 @@
     {/if}
 
     <span class="label label-{if $i->emphasis eq '1'}info{elseif $i->emphasis eq '2'}success{elseif $i->emphasis eq '3'}error{else}info{/if}"><i class="icon-white icon-{$icon}"></i> <a href="?u={$i->instance->network_username}&n={$i->instance->network}&d={$i->date|date_format:'%Y-%m-%d'}&s={$i->slug}">{$i->prefix}</a></span> 
+        <i class="icon-{$i->instance->network}{if $i->instance->network eq 'google+'} icon-google-plus{/if} icon-muted"></i>
         {$i->text|link_usernames_to_twitter}
 {/if}
 

diff --git a/webapp/plugins/insightsgenerator/view/_posts.tpl b/webapp/plugins/insightsgenerator/view/_posts.tpl
@@ -7,6 +7,7 @@ $icon (required) Icon glyph name, from http://twitter.github.com/bootstrap/base-
 *}
 
 <span class="label label-{if $i->emphasis eq '1'}info{elseif $i->emphasis eq '2'}success{elseif $i->emphasis eq '3'}error{else}info{/if}"><i class="icon-white icon-{$icon}"></i> <a href="?u={$i->instance->network_username}&n={$i->instance->network}&d={$i->date|date_format:'%Y-%m-%d'}&s={$i->slug}">{$i->prefix}</a></span> 
+<i class="icon-{$i->instance->network}{if $i->instance->network eq 'google+'} icon-google-plus{/if} icon-muted"></i>
 {$i->text|link_usernames_to_twitter}
 {foreach from=$i->related_data key=uid item=p name=bar}
 

diff --git a/webapp/plugins/insightsgenerator/view/_textonly.tpl b/webapp/plugins/insightsgenerator/view/_textonly.tpl
@@ -8,6 +8,7 @@ $icon (required) Icon glyph name, from http://twitter.github.com/bootstrap/base-
 
 <div class="insight-attachment-detail none">
         <span class="label label-{if $i->emphasis eq '1'}info{elseif $i->emphasis eq '2'}success{elseif $i->emphasis eq '3'}error{else}info{/if}"><i class="icon-white icon-{$icon}"></i> <a href="?u={$i->instance->network_username}&n={$i->instance->network}&d={$i->date|date_format:'%Y-%m-%d'}&s={$i->slug}">{$i->prefix}</a></span>
+        <i class="icon-{$i->instance->network}{if $i->instance->network eq 'google+'} icon-google-plus{/if} icon-muted"></i>
         {$i->text|link_usernames_to_twitter}
 </div>
 
diff --git a/webapp/plugins/insightsgenerator/view/_users.tpl b/webapp/plugins/insightsgenerator/view/_users.tpl
@@ -8,6 +8,7 @@ $icon (required) Icon glyph name, from http://twitter.github.com/bootstrap/base-
 
 <span class="label label-{if $i->emphasis eq '1'}info{elseif $i->emphasis eq '2'}success{elseif $i->emphasis eq '3'}error{else}info{/if}"><i class="icon-white icon-{$icon}"></i> <a href="?u={$i->instance->network_username}&n={$i->instance->network}&d={$i->date|date_format:'%Y-%m-%d'}&s={$i->slug}">{$i->prefix}</a></span> 
 
+<i class="icon-{$i->instance->network}{if $i->instance->network eq 'google+'} icon-google-plus{/if} icon-muted"></i>
 {$i->text|link_usernames_to_twitter}
 
 {foreach from=$i->related_data key=uid item=u name=bar}

diff --git a/webapp/plugins/insightsgenerator/view/amplifier.tpl b/webapp/plugins/insightsgenerator/view/amplifier.tpl
@@ -2,6 +2,7 @@
 
 <span class="label label-info"><i class="icon-white icon-bullhorn"></i> <a href="?u={$i->instance->network_username}&n={$i->instance->network}&d={$i->date|date_format:'%Y-%m-%d'}&s={$i->slug}">{$i->prefix}</a></span> 
 
+<i class="icon-{$i->instance->network}{if $i->instance->network eq 'google+'} icon-google-plus{/if} icon-muted"></i>
 {$i->text|link_usernames_to_twitter}
 
 <div class="insight-attachment-detail post">

diff --git a/webapp/plugins/insightsgenerator/view/clickspike.tpl b/webapp/plugins/insightsgenerator/view/clickspike.tpl
@@ -6,6 +6,7 @@
 
 <span class="label label-{if $i->emphasis eq '1'}info{elseif $i->emphasis eq '2'}success{elseif $i->emphasis eq '3'}error{else}info{/if}"><i class="icon-white icon-fire"></i> <a href="?u={$i->instance->network_username}&n={$i->instance->network}&d={$i->date|date_format:'%Y-%m-%d'}&s={$i->slug}">{$i->prefix}</a></span> 
 
+<i class="icon-{$i->instance->network}{if $i->instance->network eq 'google+'} icon-google-plus{/if} icon-muted"></i>
 {$i->text|link_usernames_to_twitter}
 
 <div class="insight-attachment-detail post">

diff --git a/webapp/plugins/insightsgenerator/view/flashbacks.tpl b/webapp/plugins/insightsgenerator/view/flashbacks.tpl
@@ -2,6 +2,7 @@
 
 <span class="label label-{if $i->emphasis eq '1'}info{elseif $i->emphasis eq '2'}success{elseif $i->emphasis eq '3'}error{else}info{/if}"><i class="icon-white icon-time"></i> <a href="?u={$i->instance->network_username}&n={$i->instance->network}&d={$i->date|date_format:'%Y-%m-%d'}&s={$i->slug}">{$i->prefix}</a></span> 
 
+<i class="icon-{$i->instance->network}{if $i->instance->network eq 'google+'} icon-google-plus{/if} icon-muted"></i>
 {$i->text|link_usernames_to_twitter}
 <div class="insight-attachment-detail post">
     {include file=$tpl_path|cat:"_post.tpl" post=$i->related_data hide_insight_header=true}

diff --git a/webapp/plugins/insightsgenerator/view/followercounthistory.tpl b/webapp/plugins/insightsgenerator/view/followercounthistory.tpl
@@ -6,6 +6,7 @@
 
 <span class="label label-{if $i->emphasis eq '1'}info{elseif $i->emphasis eq '2'}success{elseif $i->emphasis eq '3'}error{else}info{/if}"><i class="icon-white icon-road"></i> <a href="?u={$i->instance->network_username}&n={$i->instance->network}&d={$i->date|date_format:'%Y-%m-%d'}&s={$i->slug}">{$i->prefix}</a></span> 
 
+<i class="icon-{$i->instance->network}{if $i->instance->network eq 'google+'} icon-google-plus{/if} icon-muted"></i>
 {$i->text|link_usernames_to_twitter}
 
 {include file=$tpl_path|cat:'_counthistorychart.tpl'}

diff --git a/webapp/plugins/insightsgenerator/view/listmembership.tpl b/webapp/plugins/insightsgenerator/view/listmembership.tpl
@@ -6,6 +6,7 @@
 
 <span class="label label-{if $i->emphasis eq '1'}info{elseif $i->emphasis eq '2'}success{elseif $i->emphasis eq '3'}error{else}info{/if}"><i class="icon-white icon-list"></i> <a href="?u={$i->instance->network_username}&n={$i->instance->network}&d={$i->date|date_format:'%Y-%m-%d'}&s={$i->slug}">{$i->prefix}</a></span> 
 
+<i class="icon-{$i->instance->network}{if $i->instance->network eq 'google+'} icon-google-plus{/if} icon-muted"></i>
 {$i->text|link_usernames_to_twitter}
 
 {include file=$tpl_path|cat:'_counthistorychart.tpl'}

diff --git a/webapp/plugins/insightsgenerator/view/retweetspike.tpl b/webapp/plugins/insightsgenerator/view/retweetspike.tpl
@@ -6,6 +6,7 @@
 
 <span class="label label-{if $i->emphasis eq '1'}info{elseif $i->emphasis eq '2'}success{elseif $i->emphasis eq '3'}error{else}info{/if}"><i class="icon-white icon-fire"></i> <a href="?u={$i->instance->network_username}&n={$i->instance->network}&d={$i->date|date_format:'%Y-%m-%d'}&s={$i->slug}">{$i->prefix}</a></span> 
 
+<i class="icon-{$i->instance->network}{if $i->instance->network eq 'google+'} icon-google-plus{/if} icon-muted"></i>
 {$i->text|link_usernames_to_twitter}
 
 <div class="insight-attachment-detail post">

diff --git a/webapp/plugins/insightsgenerator/view/stylestats.tpl b/webapp/plugins/insightsgenerator/view/stylestats.tpl
@@ -5,6 +5,7 @@
 {/if}
         <span class="label label-{if $i->emphasis eq '1'}info{elseif $i->emphasis eq '2'}success{elseif $i->emphasis eq '3'}error{else}info{/if}"><i class="icon-white icon-eye-open"></i> <a href="?u={$i->instance->network_username}&n={$i->instance->network}&d={$i->date|date_format:'%Y-%m-%d'}&s={$i->slug}">{$i->prefix}</a></span> 
 
+<i class="icon-{$i->instance->network}{if $i->instance->network eq 'google+'} icon-google-plus{/if} icon-muted"></i>
 {$i->text|link_usernames_to_twitter}
 
 {if  !$expand}