Skip to content

Commit

Permalink
Bootstrapify insights feed
Browse files Browse the repository at this point in the history 
* Add core bootstrap assets for insights.
* Finish header styling & links, add in favicon and Apple shortcut icons.
* Implement beautiful full-browser footer.
* Initial implementation of two-column insights feed with basic per-insight styling.
* Working show/hide functions for extended insight data, with nice graphical buttons to display them.
[ci skip]
Closes #1353
Signed-off-by: Anil Dash <anil@dashes.com>
  • Loading branch information
@anildash @ginatrapani
anildash authored and ginatrapani committed Jul 4, 2012
1 parent 831dfb1 commit e0640cf
Show file tree
Hide file tree
Showing 18 changed files with 7,771 additions and 26 deletions.
39 changes: 38 additions & 1 deletion webapp/_lib/view/_footer.tpl
View file
@@ -1,8 +1,42 @@
<div class="small center" id="footer">
{if $linkify neq 'false'}
<script type="text/javascript" src="{$site_root_path}assets/js/linkify.js"></script>
{/if}



{if $smarty.get.v eq "insights"}

</div>

<footer class="" style="clear : left;">
<div class="container footer">
<p class="pull-right"><a href="#">Back to top</a></p>
<p><a href="http://thinkup.com/">ThinkUp</a> 2.0&#945; | <a href="http://thinkupapp.com/docs/">Documentation</a> | <a href="https://groups.google.com/forum/?fromgroups#!forum/thinkupapp">Mailing List</a> | <a href="http://twitter.com/thinkup">@thinkup</a></p>
<p>&copy; ThinkUp LLC 2012. It's nice to be nice.</p>
</div>
</footer>


<script src="{$site_root_path}assets/js/jquery.js"></script>
<script src="{$site_root_path}assets/js/bootstrap-collapse.js"></script>

{literal}
<script type="text/javascript">
$(document).ready(function() {
$(".post").hover(
function() { $(this).children(".small").children(".metaroll").show(); },
function() { $(this).children(".small").children(".metaroll").hide(); }
);
$(".metaroll").hide();
$(".collapse").collapse()
});
</script>
{/literal}

{else}


<div class="small center" id="footer">
<div id="ft" role="contentinfo">
<div id="">
<p>
Expand All @@ -21,6 +55,9 @@
</div> <!-- .content -->

<div id="screen"></div>

{/if} <!-- end insights loop -->

</body>

</html>
60 changes: 48 additions & 12 deletions webapp/_lib/view/_header.tpl
View file
Expand Up @@ -4,6 +4,31 @@
<meta charset="utf-8">
<title>{if $controller_title}{$controller_title} | {/if}{$app_title}</title>
<link rel="shortcut icon" type="image/x-icon" href="{$site_root_path}assets/img/favicon.png">

{if $smarty.get.v eq "insights"}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="./assets/css/bootstrap.css" rel="stylesheet">
<style>
{literal}
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
{/literal}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
{else}
<link type="text/css" rel="stylesheet" href="{$site_root_path}assets/css/base.css">
<link type="text/css" rel="stylesheet" href="{$site_root_path}assets/css/style.css">
{foreach from=$header_css item=css}
Expand All @@ -14,6 +39,29 @@
<script type="text/javascript" src="{$site_root_path}assets/js/jquery.min-1.4.js"></script>
<script type="text/javascript" src="{$site_root_path}assets/js/jquery-ui.min-1.8.js"></script>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{$site_root_path}assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{$site_root_path}assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{$site_root_path}assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="{$site_root_path}assets/ico/apple-touch-icon-57-precomposed.png">
{literal}
<script type="text/javascript">
$(document).ready(function() {
$(".post").hover(
function() { $(this).children(".small").children(".metaroll").show(); },
function() { $(this).children(".small").children(".metaroll").hide(); }
);
$(".metaroll").hide();
});
</script>
{/literal}
{/if}
<!-- google chart tools -->
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
Expand Down Expand Up @@ -75,18 +123,6 @@
</style>
{/literal}
{literal}
<script type="text/javascript">
$(document).ready(function() {
$(".post").hover(
function() { $(this).children(".small").children(".metaroll").show(); },
function() { $(this).children(".small").children(".metaroll").hide(); }
);
$(".metaroll").hide();
});
</script>
{/literal}
{if $post->post_text}
<meta itemprop="name" content="{$post->network|ucwords} post by {$post->author_username} on ThinkUp">
Expand Down
7 changes: 5 additions & 2 deletions webapp/_lib/view/_insights.count_history.tpl
View file
@@ -1,5 +1,8 @@
<div align="right"><a href="javascript:;" title="See chart" onclick="{literal}${/literal}('#chart-{$i->id}').show(); return false;">see chart...</a>&nbsp;&nbsp;</div>
<div style="display:none" id="chart-{$i->id}">


<div class="pull-right" style="margin-top : -12px;"><button class="btn-mini" data-toggle="collapse" data-target="#chart-{$i->id}"><i class="icon-signal"></i></button></div>

<div class="collapse in" id="chart-{$i->id}">

<div id="count_history_{$i->id}"></div>

Expand Down
10 changes: 7 additions & 3 deletions webapp/_lib/view/_insights.posts.tpl
View file
Expand Up @@ -2,7 +2,7 @@
{foreach from=$i->related_data key=uid item=p name=bar}
{* Hide posts after the first one *}
{if $smarty.foreach.bar.index eq 1}
<div style="display:none" id="flashback-{$i->id}">
<div class="collapse in" id="flashback-{$i->id}">
{/if}

{* Show "X years ago you posted" text if post is from a different year than the last one *}
Expand All @@ -14,7 +14,7 @@

{* Show more link if there are more posts after the first one *}
{if $smarty.foreach.bar.total gt 0 and $smarty.foreach.bar.first}
<div align="right"><a href="javascript:;" title="See more flashback posts" onclick="{literal}${/literal}('#flashback-{$i->id}').show(); return false;">more...</a>&nbsp;&nbsp;</div>
<div class="pull-right" style="margin-top : -12px;"><button class="btn-mini" data-toggle="collapse" data-target="#flashback-{$i->id}"><i class=" icon-chevron-down"></i></button></div>
{/if}

{* Close up hidden div if there is one *}
Expand All @@ -28,4 +28,8 @@
{foreach from=$i->related_data key=uid item=p name=bar}
{include file="_insights.post.tpl" post=$p}
{/foreach}
{/if}
{/if}




7 changes: 6 additions & 1 deletion webapp/_lib/view/dashboard.tpl
View file
@@ -1,4 +1,8 @@
{include file="_header.tpl"}
{if $smarty.get.v eq "insights"}
{include file="insights.tpl"}
{else}

{include file="_statusbar.tpl"}

<div class="container_24">
Expand Down Expand Up @@ -169,6 +173,7 @@
</div> <!-- /.clearfix -->
</div> <!-- /.container_24 -->

<script type="text/javascript" src="{$site_root_path}assets/js/linkify.js"></script>
{/if}


{include file="_footer.tpl"}
71 changes: 64 additions & 7 deletions webapp/_lib/view/insights.tpl
View file
@@ -1,21 +1,75 @@

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">

{if $logged_in_user}
<ul class="nav pull-right">
{if $user_is_admin}<li><script src="{$site_root_path}install/checkversion.php"></script></li>{/if}
<li><p class="navbar-text">{$logged_in_user}{if $user_is_admin} (admin){/if}</p></li>
<li><a href="{$site_root_path}account/?m=manage">Settings</a></li>
<li><a href="{$site_root_path}session/logout.php">Log Out</a></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>

</ul>
{/if}
</div><!--/.nav-collapse -->
<a href="{$site_root_path}{$logo_link}" class="brand pull-left"><span style="color : #00AEEF; font-weight : 800;">Think</span><span style="color : black; font-weight : 200;">Up</span></a>
<a href="{$site_root_path}crawler/updatenow.php{if $developer_log}?log=full{/if}" class="btn pull-left">Update Data</a>

</div>
</div>
</div>


<div id="main" class="container">

{if sizeof($insights) eq 0}
<div class="alert urgent">
<p>No insights are available! Get active on your network and check back later.</p>
</div>
{/if}


{assign var='cur_date' value=''}
{foreach from=$insights key=tid item=i name=foo}
<div class="row">
{if $i->text neq ''}
{if $cur_date neq $i->date}
<h1>{$i->date|relative_day|ucfirst}</h1>
<div class="span3">
<div class="sidebar-nav">
<ul class="nav nav-list">
<li class="">{$i->date|relative_day|ucfirst}</li>
</ul>
</div><!--/.well -->
</div><!--/span3-->

{assign var='cur_date' value=$i->date}

{else}

<div class="span3">&nbsp;</div>

{/if}
<div class="alert {if $i->emphasis eq '2'}urgent{else}helpful{/if}">



<div class="span9">
<div class="alert {if $i->emphasis eq '1'}alert-info{elseif $i->emphasis eq '2'}alert-success{elseif $i->emphasis eq '3'}alert-error{/if}">
<p>
<span class="ui-icon ui-icon-check" style="float: left; margin:.3em 0.3em 0 0;"></span>
<span class="label label-{if $i->emphasis eq '1'}info{elseif $i->emphasis eq '2'}success{elseif $i->emphasis eq '3'}error{/if}">{if $i->emphasis eq '1'}Milestone:{elseif $i->emphasis eq '2'}Cool!{elseif $i->emphasis eq '3'}Hey!{else}Insight:{/if}</span>
<i class="icon-star"></i>
{$i->text}

<!--begin {$i->related_data_type} attachment data-->
<!-- begin related_data_type attachment data -->
{if $i->related_data_type eq 'users'}
{include file="_insights.users.tpl"}
{elseif $i->related_data_type eq 'post'}
Expand All @@ -25,13 +79,15 @@
{elseif $i->related_data_type eq 'count_history'}
{include file="_insights.count_history.tpl"}
{/if}
<!--end {$i->related_data_type} attachment data-->

</span>
<!--end related_data_type attachment data-->
</p>
</div>
</div><!--/span9-->

{/if}
</div><!--/row-->
{/foreach}


<div class="view-all" id="older-posts-div">
{if $next_page}
Expand All @@ -41,4 +97,5 @@
| <a href="{$site_root_path}?{if $smarty.get.v}v={$smarty.get.v}&{/if}{if $smarty.get.u}u={$smarty.get.u}&{/if}{if $smarty.get.n}n={$smarty.get.n|urlencode}&{/if}page={$last_page}" id="last_page">Newer &#62;</a>
{/if}
</div>


0 comments on commit e0640cf

Please sign in to comment.