app/views/wall/display.html
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<link rel="stylesheet" type="text/css" href="css/angular-chart.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<style>
.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {
background: #3c8dbc;
color: #ffffff;
z-index: 99999;
position: relative;
right: 100px;
}
</style>
<div>
<div ng-style="{'background-color': wall.wallOptions.headerColour}" ng-class="getHeaderClass()">
<div ng-style="{'color': wall.wallOptions.headerForeColour} " class="hashtag col-md-4">{{wall.wallOptions.mainHashtag}}</div>
<div ng-style="{'color': wall .wallOptions.headerForeColour} " class="event-name col-md-4">
<div><img ng-if="wall.wallOptions.logo" class="wall-preview-logo" data-ng-src="data:{{wall.wallOptions.logo.filetype}};base64,{{wall.wallOptions.logo.base64}}">
<div ng-hide="!wall.wallOptions.showEventName" class="wall-header-eventname">{{wall.wallOptions.eventName}}</div>
</div>
</div>
<div class="banner col-md-3"><a ng-hide="!wall.wallOptions.showLoklakLogo" ng-style="{'color': wall.wallOptions.headerForeColour} " href="/">Powered by Loklak.net</a></div>
<div class="banner col-md-1">
<!-- <i ng-style="{'color': wall.wallOptions.headerForeColour} " data-toggle="modal" data-target="#wall-modal" class="fa fa-fw fa-gear"></i> -->
<i ng-style="{'color': wall.wallOptions.headerForeColour} " ng-hide="wall.fullscreenEnabled" ng-click="fullscreen()" class="fa fa-fw fa-arrows-alt"></i>
</div>
</div>
<div class="wall-container container-fluid">
<div class="container content-container wall-body" ng-style="((wall.wallOptions.layoutStyle==2)&&(wall.statuses.length>0))?{'margin-left':'-5px'}:{}">
<div ng-switch on="wall.wallOptions.layoutStyle" ng-show="wall.statuses.length>0" ng-class="wall.wallOptions.showStatistics?'col-md-8':'col-md-12'">
<div ng-switch-when="1" ng-animate ng-enter ng-enter-pending ng-repeat="status in wall.statuses" linear open="wall.open" data="status" class="animate-repeat"></div>
<div ng-switch-when="2" class="animate-repeat" ng-repeat="status in wall.statuses" card open="wall.open" data="status" leaderboardEnabled="{{wall.wallOptions.showStatistics}}"></div>
<div ng-switch-when="3" class="animate-repeat" ng-repeat="status in wall.statuses" coa open="wall.open" data="status"></div>
<div ng-switch-when="4">
<div data="wall.statuses" id="map" maplayout style="margin-left:-48px; margin-top:-10px;" ng-style="wall.wallOptions.showStatistics?{}:{'margin-right':'-48px'}" cycleTweets="{{wall.wallOptions.cycle}}"></div>
</div>
</div>
<div ng-if="wall.wallOptions.showStatistics && wall.statuses.length>0" class="col-md-4">
<h4>LEADERBOARD</h4>
<div class="row leaderboard-container">
<img class="histogram-loader" ng-hide="wall.topTwitterersData" src="images/loading.gif">
<div class="nav-tabs-custom" style="margin: 0 15px;" ng-mouseover="stopLeaderboardTimer()" ng-mouseleave="startLeaderboardTimer()">
<ul class="nav nav-tabs">
<li class="active" ng-style="getTabStyle(this)">
<a data-toggle="tab" href="#tab-twitterers">Top Twitterers</a>
</li>
<li ng-style="getTabStyle(this)">
<a data-toggle="tab" href="#tab-hashtags">Top Hashtags</a>
</li>
<li ng-style="getTabStyle(this)">
<a data-toggle="tab" href="#tab-mentions">Top Mentions</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab-twitterers">
<!-- <canvas class="chart chart-pie" options="wall.topTwitterersOptions" labels="wall.topTwitterersLabels" data="wall.topTwitterersData"></canvas> -->
<table class="table leaderboard">
<tbody>
<tr class="leaderboard-item" ng-repeat="obj in wall.topTwitterersData">
<td style="width: 11vh;" style="width: 11vh;">
<img ng-src="http://avatars.io/twitter/{{obj[0]}}" alt="">
<span ng-style="{'background-color': wall.wallOptions.headerColour, 'color': wall.wallOptions.headerForeColour}" class="label leaderboard-label">{{obj[1]}}</span>
</td>
<td class="leaderboard-text">
<a ng-href="{{'./search?q=from:' + obj[0]}}" target="_blank">@{{obj[0]}}</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="tab-hashtags">
<!-- <canvas class="chart chart-pie" options="wall.topHashtagsOptions" labels="wall.topHashtagsLabels" data="wall.topHashtagsData"></canvas> -->
<table class="table">
<tbody>
<tr class="leaderboard-item" ng-repeat="obj in wall.topHashtagsData">
<td style="width: 11vh;">
<div ng-style="{'background-color': wall.wallOptions.headerColour, 'color': wall.wallOptions.headerForeColour}" class="leaderboard-count">{{obj[1]}}</div>
</td>
<td class="leaderboard-text">
<a ng-href="{{'./search?q=#' + obj[0]}}" target="_blank">#{{obj[0]}}</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="tab-mentions">
<!-- <canvas class="chart chart-pie" options="wall.topHashtagsOptions" labels="wall.topHashtagsLabels" data="wall.topHashtagsData"></canvas> -->
<table class="table">
<tbody>
<tr class="leaderboard-item" ng-repeat="obj in wall.topMentionsData">
<td style="width: 11vh;" style="width: 11vh;">
<img ng-src="http://avatars.io/twitter/{{obj[0]}}" alt="">
<span ng-style="{'background-color': wall.wallOptions.headerColour, 'color': wall.wallOptions.headerForeColour}" class="label leaderboard-label">{{obj[1]}}</span>
</td>
<td class="leaderboard-text">
<a ng-href="{{'./search?q=@' + obj[0]}}" target="_blank">@{{obj[0]}}</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="row histogram-container" ng-style="wall.wallOptions.headerPosition == 'Bottom'?{'bottom':'120px'}:{}">
<div class="row histogram-gradient"></div>
<div class="box box-default" style="margin: 0 15px;">
<div class="box-header with-border">
<h3 class="box-title">TWEETS FREQUENCY</h3>
</div>
<div class="box-body">
<div class="row">
<img class="histogram-loader" ng-hide="wall.histogram2" src="images/loading.gif">
<canvas id="wallHistogram" class="chart chart-bar wall-histogram" options="wall.histogramOptions" labels="wall.labels" data="wall.histogram2"></canvas>
</div>
</div>
</div>
</div>
</div>
<div ng-show="wall.statuses.length<=0 && !wall.showEmpty && !wall.invalidId" class="col-md-12">
<div class="loading-redirect" style="text-align: center;"><span id="bull1">•</span><span id="bull2">•</span><span id="bull3">•</span></div>
<h2 id="redirect-text">Loading your tweet wall...</h2>
</div>
<div ng-hide="!wall.showEmpty" class="col-md-12" style="text-align: center;">
<h3>No tweets to show yet. Try changing the search parameters or come back here after some time!</h3>
</div>
<div ng-hide="!wall.invalidId" class="col-md-12" style="text-align: center;">
<img src="images/loklak_icon_yellow_45x45_transparent.png">
<h3>This wall does not exist. Please check the URL.</h3>
</div>
</div>
</div>
</div>
<div ng-include="'wall/wallCreationModal.html'"></div>