app/views/home.html
<!-- Template for home view -->
<div ng-show="!map.isShowingMapNotHome" class="content-wrapper home-view-content-wrapper">
<!-- Main content -->
<div ng-show="root.twitterSession && root.doneGettingFeed" class="container content-container">
<!-- Left content: Who to follow, trends -->
<div class="left-result-container col-md-4 col-sm-12 col-lg-3" ng-show="root.twitterSession">
<div class="switchers">
<div class="switch-to-map" ng-click="map.toggleMapAndTimeline();">
<span>Open Map</span>
<span class="fa fa-chevron-circle-right">
</span>
</div>
<div class="switch-to-timeline-text" ng-click="map.toggleMapAndTimeline();">
<span class="fa fa-chevron-circle-left">
</span>
<span>Timeline</span>
</div>
</div>
<div class="home-user-info">
<div class="blue-background-placeholder">
<img ng-src="{{root.twitterSession.profile_banner_url }}" alt="user-banner-photo" ng-show="root.twitterSession.profile_banner_url">
</div>
<div class="home-user-info-content">
<div class="top-content">
<img ng-src="{{root.twitterSession.profile_image_url_https | homePageImage }}">
<div class="name-and-screen-name">
<span class="home-user-name">{{root.twitterSession.name}}</span>
<span class="home-user-screen-name">@{{root.twitterSession.screen_name}}</span>
</div>
</div>
<div class="bottom-content">
<div class="user-no-tweets">
<a href="">Tweets<br><span>{{root.twitterSession.statuses_count}}</span></a>
</div>
<div class="user-no-followings">
<a href="">Following<br><span>{{root.twitterSession.friends_count}}</span></a>
</div>
<div class="user-no-followers">
<a href="">Followers<br><span>{{root.twitterSession.followers_count}}</span></a>
</div>
</div>
<div ng-show="root.twitterSession.description" class="user-info-text">
{{root.twitterSession.description}}
</div>
</div>
</div>
<div ng-show="userTopology.followers.length !== 0" class="followers-list-container">
<h2>Followers<span ng-click="map.showAllFollowers();" ng-show="userTopology.followers.length > map.showFollowersLimit">Show all</span></h2>
<div class="followers-link-container clearfix">
<a class="topology-item" ng-repeat="item in userTopology.followers | limitTo: map.showFollowersLimit" ng-href="{{ './search?q=from:' + item.screen_name}}">
<img ng-src="{{item.profile_image_url_https}}">
</a>
</div>
</div>
<div ng-show="userTopology.following.length !== 0" class="followers-list-container">
<h2>Following<span ng-click="map.showAllFollowings();" ng-show="userTopology.following.length > map.showFollowingsLimit">Show all</span></h2>
<div class="followers-link-container clearfix">
<a class="topology-item" ng-repeat="item in userTopology.following | limitTo: map.showFollowingsLimit" ng-href="{{ './search?q=from:' + item.screen_name}}">
<img ng-src="{{item.profile_image_url_https}}">
</a>
</div>
</div>
</div>
<!-- Center result + option filters -->
<div class="center-result-container col-md-8 col-sm-12 col-lg-6" ng-show="root.twitterSession">
<div class="row cms-view">
<div class="main-result-container">
<button ng-show="root.timelineNewTweets.length > 0" class="timeline-more-result" ng-click="root.timelineShowNewerTweets();">Load {{root.timelineNewTweets.length}} new tweets!</button>
<div class="statuses-container box-body chat" id="chat-box" style="width: auto;" infinite-scroll="root.loadMoreHomeFeed(15)">
<div ng-repeat="status in root.twitterFriends.data | limitTo: root.homeFeedLimit" ng-attr-id="{{status.id}}" ng-click="map.openPopup(status.id);">
<div class="item" ng-click="toggleDetail($event)">
<img class="friend-profile-img" src="{{status.profile_image_url}}">
<p class="message home-tweet-text">
<span class="home-user-screen-name">@{{ status.screen_name }} - </span><span time ng-attr-timecreated="{{status.status.created_at}}"></span>
<br>
<span ng-bind-html="status.status.text | tweetTextLink | tweetMention | tweetHashtag | removeTwitterPicLink | toTrusted "></span>
</p>
<div class="home-debugged-link-container" home-debugged-link entities="status.status.entities"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right content: Other statistics -->
<div class="right-result-container col-md-3 visible-lg">
<div class="home-user-trends">
<h3 class="trend-title">Trends</h3>
<ul id="home-trend-list">
<li><a href="./search?q=%23loklak">#loklak</a></li>
<li ng-repeat="(key, value) in root.trends">
<!-- -->
<a href="./search?q=%23{{key}}">#{{key}}</a>
<!-- -->
</li>
</ul>
</div>
<div class="credits-container">
<div class="credits">
<a>© 2015 loklak</a><span>-</span>
<a href="./about">About</a><span>-</span>
<a href="http://blog.loklak.net/" target="_blank" >Blog</a><span>-</span>
<a href="https://github.com/loklak" target="_blank" >Github</a><span>-</span>
<a href="http://facebook.com/loklakmessages" target="_blank" >Facebook</a>
</div>
</div>
</div>
</div>
<div class="logged-content map-container-parent" ng-show="root.twitterSession">
<span class="toggle-map-feed fa fa-chevron-circle-right" ng-click="map.toggleMapFeed();"></span>
<div id="map" ng-show="root.twitterSession"></div>
<div class="location-fail-notice">
<div class="warning-sign"><i class="fa fa-exclamation-triangle"></i></div>
<p class="notice-text">The user you're searching for doesn't seem to have location enabled!</p>
</div>
</div>
<!-- Search box for anonymous user-no-followers -->
<div ng-include src="'anonymous-session-content.html'"></div>
<!-- End search box for anonymous users -->
</div>