Skip to content

Commit 3949161

Browse files
HeliasHelias
committed
Implemented mobile compatibility, updated README.md
1 parent 28a8a70 commit 3949161

File tree

8 files changed

+172
-13
lines changed

8 files changed

+172
-13
lines changed

‎README.md

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,11 @@
1-
# TC-PVEStats
2-
PVE statistics system for World of Warcraft
1+
# TC-PvEStats
2+
3+
PvE statistics system for World of Warcraft
4+
5+
## [Live Demo](http://usefulness.altervista.org/PvEstats/)
6+
7+
# ![PvEstats](https://raw.githubusercontent.com/Helias/TC-PvEstats/master/screens/PvEstats.png)
8+
9+
# ![PvEstats](https://raw.githubusercontent.com/Helias/TC-PvEstats/master/screens/PvEstats2.png)
10+
11+
# ![PvEstats](https://raw.githubusercontent.com/Helias/TC-PvEstats/master/screens/PvEstats_mobile.png)

‎css/style.css

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ td { font-size: 20px; }
1818
.horde { color: #f44336; }
1919
.alliance, .horde { font-weight: bold; }
2020

21+
.yellowText { color: #ffd100; }
22+
2123
.category, .sub_category, .statistic, .sub_statistic {
2224
transition: all .5s;
2325
font-weight: bold;
@@ -130,7 +132,7 @@ td { font-size: 20px; }
130132
width: 370px;
131133
margin: 0 auto;
132134
position: relative;
133-
}
135+
}
134136

135137
.progress-bar-wow {
136138
background-image: linear-gradient(to bottom, #fb8c00 0,#7d5412 70%, #7d5412 100%);
@@ -147,3 +149,63 @@ td { font-size: 20px; }
147149
font-weight: bold;
148150
color: #fdd835;
149151
}
152+
153+
/* Sidebar */
154+
.sidebar {
155+
z-index: 10;
156+
position: fixed;
157+
top: 0;
158+
left: -300px;
159+
transition: 100ms left;
160+
}
161+
162+
.sidebar button, .mobile {
163+
font-size: 15px;
164+
}
165+
166+
#navigation-toggle {
167+
border: none;
168+
border-radius: 1em;
169+
border-top-left-radius: 0em;
170+
border-bottom-left-radius: 0em;
171+
172+
background-color: #361409;
173+
color: #ffd100;
174+
font-size: 25px;
175+
176+
position: absolute;
177+
left: 300px;
178+
top: 27px;
179+
padding: 15px;
180+
margin-left: 35px;
181+
text-decoration: none;
182+
}
183+
184+
.show {
185+
left: 0;
186+
width: 340px;
187+
padding: 20px;
188+
background-color: #262626;
189+
border-radius: 1em;
190+
border-bottom: 1px solid #fff;
191+
border-right: 1px solid #fff;
192+
}
193+
194+
.navigation {
195+
list-style: none;
196+
padding: 0;
197+
margin: 0;
198+
}
199+
200+
.navigation-items a {
201+
display: block;
202+
background-color: #444;
203+
color: white;
204+
line-height: 2em;
205+
text-decoration: none;
206+
padding: 10px 30px;
207+
width: 100px;
208+
209+
}
210+
211+
.navigation-items a:hover { background-color: #222; }

‎index.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,13 @@
22
<html lang="en" ng-app="pvestats">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=0.6, user-scalable=no">
66
<meta name="description" content="TrinityCore PvE Stats">
77
<meta name="author" content="ShinDarth, Helias">
88

9-
<title>TrinityCore PVE Stats</title>
9+
<title>TrinityCore PvEstats</title>
1010

11+
<!-- Javascript -->
1112
<script src="js/lib/angular.min.js"></script>
1213
<script src="js/lib/angular-ui-router.min.js"></script>
1314
<script src="js/lib/angular-animate.js"></script>
@@ -18,7 +19,7 @@
1819
<script src="js/app/routes.js"></script>
1920
<script src="config.js"></script>
2021

21-
22+
<!-- CSS -->
2223
<link rel="stylesheet" href="css/bootstrap.min.css">
2324
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
2425
<link rel="stylesheet" href="css/loading-bar.min.css">
@@ -34,7 +35,7 @@
3435
<div class="container">
3536
<div class="row">
3637
<div class="col-xs-12">
37-
<p class="h1 text-center">PvE Stats</p>
38+
<p class="h1 text-center">PvEstats</p>
3839
<br>
3940
<br>
4041
<div ui-view></div>

‎js/app/app.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,36 @@
33

44
var app = angular.module('pvestats', ['ui.router', 'ui.bootstrap', 'chieffancypants.loadingBar', 'ngAnimate', 'ngSanitize']);
55

6+
/* Sidebar*/
7+
app.controller('SidebarController', function($scope) {
8+
9+
$scope.arrow = '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>';
10+
$scope.state = false;
11+
12+
$scope.toggleState = function() {
13+
$scope.state = !$scope.state;
14+
15+
if (!$scope.state)
16+
$scope.arrow = '<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>';
17+
else
18+
$scope.arrow = '<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>';
19+
};
20+
});
21+
22+
app.directive('sidebarDirective', function() {
23+
return {
24+
link : function(scope, element, attr) {
25+
scope.$watch(attr.sidebarDirective, function(newVal) {
26+
if(newVal) {
27+
element.addClass('show');
28+
return;
29+
}
30+
element.removeClass('show');
31+
});
32+
}
33+
};
34+
});
35+
636
app.controller('rankController', function($scope, $http, $state) {
737

838
/* Retrieve all achievement_progress data */
@@ -56,6 +86,10 @@
5686

5787
/* Initialize all categories */
5888
$scope.categories = data;
89+
$scope.categoriesArray = [];
90+
91+
for (var i = 0; i < $scope.categories.length; i++)
92+
$scope.categoriesArray[$scope.categories[i].ID] = $scope.categories[i].Name;
5993

6094
/* Initialize parentCategories and collapseCategories */
6195
$scope.parentCategories = [];

‎partials/player.html

Lines changed: 59 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,58 @@
1+
<!-- Mobile -->
2+
<div ng-controller="SidebarController" class="visible-xs">
3+
<div class="sidebar" sidebar-directive="state">
4+
<button id="navigation-toggle" ng-click="toggleState()" ng-bind-html="arrow"></button>
5+
<h4><a href="#/" class="yellowText">← Back</a></h4>
6+
7+
<div ng-repeat="parentCategory in parentCategories track by $index">
8+
9+
<!-- parentCategory -->
10+
<button type="button"
11+
class="category mobile"
12+
ng-click="showCategory($index, parentCategory.ID)"
13+
ui-sref=".ach({ catId: currentCategory })"
14+
id="{{ parentCategory.ID }}">
15+
<h4>{{ parentCategory.Name }}</h4>
16+
</button>
17+
18+
<div uib-collapse="collapseCategory[$index]"
19+
ng-init="t = ($index == parentCategories.length-1 ? childStatistics : []);
20+
class = ($index == parentCategories.length-1 ? 'statistic' : 'sub_category')"
21+
>
22+
23+
<!-- childCategory -->
24+
<div ng-repeat="childCategory in childCategories[$index]" ng-init="tmp = $index">
25+
<button class="{{ class }}"
26+
ng-click="collapseChildCategories(childCategory.ID, class, $index)"
27+
ui-sref="{{ (parentCategory.ID != 1 ? '.ach({ catId: currentCategory })' : '.stats({ statsId: currentCategory })') }}"
28+
id="{{ childCategory.ID }}">
29+
<h4>{{ childCategory.Name }}</h4>
30+
</button>
31+
32+
<!-- statistic subcategory -->
33+
<div ng-repeat="statistic in t[$index]" uib-collapse="collapseStatistics[tmp]">
34+
<button class="sub_category"
35+
ng-click="updateCurrentCategory(statistic.ID)"
36+
ui-sref=".stats({ statsId: currentCategory })"
37+
id="{{ statistic.ID }}">
38+
<h4>{{ statistic.Name }}</h4>
39+
</button>
40+
</div>
41+
42+
</div>
43+
44+
</div>
45+
46+
</div>
47+
</div>
48+
</div>
49+
50+
<!-- Desktop & Tablet -->
151
<div class="row">
2-
<div class="col-xs-3">
352

4-
<a href="#/">← Back</a>
53+
<div class="col-xs-3 hidden-xs">
54+
55+
<a href="#/" class="yellowText">← Back</a>
556

657
<br>
758
<br>
@@ -28,16 +79,16 @@ <h4>{{ parentCategory.Name }}</h4>
2879
ng-click="collapseChildCategories(childCategory.ID, class, $index)"
2980
ui-sref="{{ (parentCategory.ID != 1 ? '.ach({ catId: currentCategory })' : '.stats({ statsId: currentCategory })') }}"
3081
id="{{ childCategory.ID }}">
31-
{{ childCategory.Name }}
82+
<h4>{{ childCategory.Name }}</h4>
3283
</button>
3384

34-
<!-- statistic subcategory -->
85+
<!-- statistic subcategory -->
3586
<div ng-repeat="statistic in t[$index]" uib-collapse="collapseStatistics[tmp]">
3687
<button class="sub_category"
3788
ng-click="updateCurrentCategory(statistic.ID)"
3889
ui-sref=".stats({ statsId: currentCategory })"
3990
id="{{ statistic.ID }}">
40-
{{ statistic.Name }}
91+
<h4>{{ statistic.Name }}</h4>
4192
</button>
4293
</div>
4394

@@ -48,7 +99,7 @@ <h4>{{ parentCategory.Name }}</h4>
4899
</div>
49100

50101
</div>
51-
<div class="col-xs-8">
102+
<div class="col-sm-8 col-xs-12">
52103

53104
<table class="table table-striped player">
54105
<tbody>
@@ -62,6 +113,8 @@ <h4>{{ parentCategory.Name }}</h4>
62113
</tbody>
63114
</table>
64115

116+
<h2 class="text-center yellowText">{{ categoriesArray[currentCategory] }}</h2>
117+
65118
<div ui-view></div>
66119

67120
</div>

‎screens/PvEstats.png

28.5 KB
Loading

‎screens/PvEstats2.png

622 KB
Loading

‎screens/PvEstats_mobile.png

536 KB
Loading

0 commit comments

Comments
 (0)