Skip to content

Commit 7848cea

Browse files
kimchouardkimchouard
committed
Better loading -> hg-include & loading
1 parent 89bf8cb commit 7848cea

File tree

6 files changed

+126
-106
lines changed

6 files changed

+126
-106
lines changed

‎index.html‎

Lines changed: 25 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,11 @@
4949
<div class="large-12 columns">
5050
<h4>Statistics</h4>
5151
</div>
52-
<div class="large-12 columns">
53-
<ul>
54-
<li><strong>{{projects.length}}</strong> public repos</li>
55-
<li><strong>{{orgs.length}}</strong> organisations</li>
56-
<li><strong>{{langs.length}}</strong> languages</li>
57-
<li><strong>{{stats.nbLinesCode | unitNum}}bytes</strong> of code</li>
58-
<li><strong>{{projects[0].pushed_at | timeDiff}}</strong> since last commit</li>
59-
</ul>
52+
<div class="large-12 columns" ng-show="loading">
53+
<ng-include src="'views/loading.html'"/>
54+
</div>
55+
<div class="large-12 columns" ng-show="!loading">
56+
<ng-include src="'views/stats.html'"/>
6057
</div>
6158
</div>
6259
<div class="large-6 columns" ng-click="posLabel()">
@@ -113,7 +110,7 @@ <h2 class="large-6 small-4 columns" data-magellan-destination="projects">Repos</
113110
<option value="name">Name</option>
114111
</select>
115112
</div>
116-
<div class="button large-2 small-2 culumns" ng-click="toggleFilters = !toggleFilters">
113+
<div class="button large-2 small-2 culumns" ng-click="toggleFilters = !toggleFilters" ng-class="{disabled: loading}">
117114
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
118115
<path fill="#000000" d="M50.717,2.495c-29.288,0-47.692,6-47.692,10.833c0,5.932,16.029,19.893,20.167,23.667 c4.712,4.299,16.044,16.058,16.5,18.001c0.147,2.147,2.002,35.008,2.002,35.008s-0.168,5.5,8.998,5.5 c9.166,0,8.498-5.334,8.498-5.334s2.169-32.674,2.169-34.84s8.333-10.835,18.5-20.002c10.167-9.167,18.167-15.758,18.167-22 C98.025,8.299,80.004,2.495,50.717,2.495z M50.481,21.083C28.676,21.083,11,17.965,11,14.12s17.676-7.964,39.481-7.964 c21.801,0,39.478,4.119,39.478,7.964S72.282,21.083,50.481,21.083z"/>
119116
</svg>
@@ -123,91 +120,22 @@ <h2 class="large-6 small-4 columns" data-magellan-destination="projects">Repos</
123120
</div>
124121

125122
<!-- ------- Filters -------- -->
126-
<div class="filters" ng-class="{flat: !toggleFilters}">
127-
<div class="row">
128-
<form class="custom large-12 columns mainFilters">
129-
<div class="large-4 columns">
130-
<input type="text" ng-model="searchName" placeholder="Search name, description...">
131-
</div>
132-
133-
<div class="large-3 columns">
134-
<input type="text" ng-model="searchLangInput" id="searchLang" placeholder="Languages">
135-
</div>
136-
137-
<div class="large-3 columns">
138-
<input type="text" ng-model="searchOrgInput" id="searchOrg" placeholder="Organisations">
139-
</div>
140-
141-
<div class="star large-2 columns">
142-
<a ng-show="filterStarIndex" ng-click="majFilterStar(0); majDisplayStar(0)" class="button tiny cancel">X</a>
143-
<div class="fitlerStar" ng-repeat="i in [1,2,3,4,5]" ng-class="{on: (i <= displayStarIndex)}" ng-click="majFilterStar(i)" ng-mouseenter="majDisplayStar(i)" ng-mouseleave="majDisplayStar(filterStarIndex)"></div>
144-
</div>
145-
</form>
146-
147-
<div ng-show="searchLang.length != 0 || searchOrg.length != 0 || searchName">
148-
<div class="large-12 columns activeFilter">
149-
<ul class="button-group filterLang" ng-repeat="lang in searchLang">
150-
<li><a class="button tiny"># {{lang}}</a></li>
151-
<li><a class="button tiny" ng-click="deleteFilter(searchLang, $index)">X</a></li>
152-
</ul>
153-
<ul class="button-group filterLang" ng-repeat="org in searchOrg">
154-
<li><a class="button tiny">{{org}}</a></li>
155-
<li><a class="button tiny" ng-click="deleteFilter(searchOrg, $index)">X</a></li>
156-
</ul>
157-
</div>
158-
</div>
159-
</div>
160-
</div>
123+
<div>
124+
<ng-include src="'views/filters.html'"/>
125+
</div>
161126

162127
<!-- ------- Items -------- -->
163128
<div class="row wrapProjects">
164-
<div class="large-12 columns" ng-show="loading == false">
165-
<div class="row">
166-
<div class="large-6 columns" ng-repeat="project in projects | projectsFilter:this" ng-class-odd="'clear'">
167-
<a href="{{project | linkProject}}" target="_blank">
168-
<section class="project">
169-
<div class="row">
170-
<div class="large-6 columns">
171-
<h1>{{project.name}}</h1>
172-
</div>
173-
<div class="large-6 columns">
174-
<div class="star right" ng-repeat="i in [0,1,2,3,4]">
175-
<img ng-src="img/star_{{ { id: 4-i, value: project.watchers_count} | star}}.svg" />
176-
</div>
177-
178-
<div class="watchCount">{{project.watchers_count | niceNum}}</div>
179-
</div>
180-
</div>
181-
<div class="row">
182-
<p class=" large-6 columns"><span ng-repeat="language in Object.keys(project.languages)" ng-hide="Math.floor( project.languages[language].value * 100 / project.languagesTotal ) < 10 ">{{project.languages[language].name}}<span ng-hide="$last">, </span></span><span ng-hide="project.languages.length != 0">Unknown</span></p>
183-
<p class=" large-6 columns text-right">{{project.org}}</p>
184-
</div>
185-
<p class="details">{{project.description | shortenStr}}</p>
186-
<div class="row more">
187-
<p class="details large-6 columns"><strong>Last pushed:</strong> {{project.pushed_at | timeDiff }}</p>
188-
<p class="link large-6 columns">View on github ></p>
189-
</div>
190-
</section>
191-
</a>
192-
</div>
193-
194-
<!-- Reseter -->
195-
<div class="large-6 columns clear"></div>
196-
</div>
197-
</div>
198-
199-
<div ng-class="{ buttonLess: projLast > 10, buttonMore : projLast == 10 }" ng-hide="(projects | projectsFilter:this).length < 10">
200-
<div class="row text-center">
201-
<button class="button" ng-click="showHideProj()">
202-
<span ng-hide="projLast != 10">Show more...</span>
203-
<span id="showLess" ng-show="projLast > 10">Show less...</span>
204-
</button>
205-
</div>
206-
</div>
207-
208-
<div ng-hide="loading == false">
209-
Loading...
129+
<div ng-show="loading">
130+
<ng-include src="'views/loading.html'"/>
210131
</div>
132+
133+
<div ng-show="!loading">
134+
<ng-include src="'views/projects.html'"/>
135+
</div>
136+
137+
<!-- Reseter -->
138+
<div class="large-6 columns" class"clear"></div>
211139
</div>
212140
</div>
213141

@@ -245,23 +173,14 @@ <h1>{{project.name}}</h1>
245173

246174
<a name="organisations" class="anchor"></a>
247175
<h2 data-magellan-destination="organisations">Organisations</h2>
248-
249-
<!-- Grid Example -->
176+
250177
<div class="row">
251-
<div class="large-6 columns" ng-repeat="org in orgs" ng-class-odd="'clear'">
252-
<a href="{{org | linkOrg}}" target="_blank">
253-
<section class="org">
254-
<div class="row">
255-
<div class="large-6 columns">
256-
<h1>{{org.name}}</h1>
257-
</div>
258-
<div class="large-6 columns">
259-
</div>
260-
</div>
261-
<p class="details">{{org.desc | shortenStr}}</p>
262-
<p class="more">Learn more...</p>
263-
</section>
264-
</a>
178+
<div ng-show="loading">
179+
<ng-include src="'views/loading.html'"/>
180+
</div>
181+
182+
<div ng-show="!loading">
183+
<ng-include src="'views/orgs.html'"/>
265184
</div>
266185

267186
<!-- Reseter -->

‎views/filters.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<div class="filters" ng-class="{flat: !toggleFilters}">
2+
<div class="row">
3+
<form class="custom large-12 columns mainFilters">
4+
<div class="large-4 columns">
5+
<input type="text" ng-model="searchName" placeholder="Search name, description...">
6+
</div>
7+
8+
<div class="large-3 columns">
9+
<input type="text" ng-model="searchLangInput" id="searchLang" placeholder="Languages">
10+
</div>
11+
12+
<div class="large-3 columns">
13+
<input type="text" ng-model="searchOrgInput" id="searchOrg" placeholder="Organisations">
14+
</div>
15+
16+
<div class="star large-2 columns">
17+
<a ng-show="filterStarIndex" ng-click="majFilterStar(0); majDisplayStar(0)" class="button tiny cancel">X</a>
18+
<div class="fitlerStar" ng-repeat="i in [1,2,3,4,5]" ng-class="{on: (i <= displayStarIndex)}" ng-click="majFilterStar(i)" ng-mouseenter="majDisplayStar(i)" ng-mouseleave="majDisplayStar(filterStarIndex)"></div>
19+
</div>
20+
</form>
21+
22+
<div ng-show="searchLang.length != 0 || searchOrg.length != 0 || searchName">
23+
<div class="large-12 columns activeFilter">
24+
<ul class="button-group filterLang" ng-repeat="lang in searchLang">
25+
<li><a class="button tiny"># {{lang}}</a></li>
26+
<li><a class="button tiny" ng-click="deleteFilter(searchLang, $index)">X</a></li>
27+
</ul>
28+
<ul class="button-group filterLang" ng-repeat="org in searchOrg">
29+
<li><a class="button tiny">{{org}}</a></li>
30+
<li><a class="button tiny" ng-click="deleteFilter(searchOrg, $index)">X</a></li>
31+
</ul>
32+
</div>
33+
</div>
34+
</div>
35+
</div>

‎views/loading.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Loading...

‎views/orgs.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="large-6 columns" ng-repeat="org in orgs" ng-class-odd="'clear'">
2+
<a href="{{org | linkOrg}}" target="_blank">
3+
<section class="org">
4+
<div class="row">
5+
<div class="large-6 columns">
6+
<h1>{{org.name}}</h1>
7+
</div>
8+
<div class="large-6 columns">
9+
</div>
10+
</div>
11+
<p class="details">{{org.desc | shortenStr}}</p>
12+
<p class="more">Learn more...</p>
13+
</section>
14+
</a>
15+
</div>

‎views/projects.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<div class="large-12 columns">
2+
<div class="row">
3+
<div class="large-6 columns" ng-repeat="project in projects | projectsFilter:this" ng-class-odd="'clear'">
4+
<a href="{{project | linkProject}}" target="_blank">
5+
<section class="project">
6+
<div class="row">
7+
<div class="large-6 columns">
8+
<h1>{{project.name}}</h1>
9+
</div>
10+
<div class="large-6 columns">
11+
<div class="star right" ng-repeat="i in [0,1,2,3,4]">
12+
<img ng-src="img/star_{{ { id: 4-i, value: project.watchers_count} | star}}.svg" />
13+
</div>
14+
15+
<div class="watchCount">{{project.watchers_count | niceNum}}</div>
16+
</div>
17+
</div>
18+
<div class="row">
19+
<p class=" large-6 columns"><span ng-repeat="language in Object.keys(project.languages)" ng-hide="Math.floor( project.languages[language].value * 100 / project.languagesTotal ) < 10 ">{{project.languages[language].name}}<span ng-hide="$last">, </span></span><span ng-hide="project.languages.length != 0">Unknown</span></p>
20+
<p class=" large-6 columns text-right">{{project.org}}</p>
21+
</div>
22+
<p class="details">{{project.description | shortenStr}}</p>
23+
<div class="row more">
24+
<p class="details large-6 columns"><strong>Last pushed:</strong> {{project.pushed_at | timeDiff }}</p>
25+
<p class="link large-6 columns">View on github ></p>
26+
</div>
27+
</section>
28+
</a>
29+
</div>
30+
31+
<!-- Reseter -->
32+
<div class="large-6 columns clear"></div>
33+
</div>
34+
</div>
35+
36+
<div ng-class="{ buttonLess: projLast > 10, buttonMore : projLast == 10 }" ng-hide="(projects | projectsFilter:this).length < 10">
37+
<div class="row text-center">
38+
<button class="button" ng-click="showHideProj()">
39+
<span ng-hide="projLast != 10">Show more...</span>
40+
<span id="showLess" ng-show="projLast > 10">Show less...</span>
41+
</button>
42+
</div>
43+
</div>

‎views/stats.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<ul>
2+
<li><strong>{{projects.length}}</strong> public repos</li>
3+
<li><strong>{{orgs.length}}</strong> organisations</li>
4+
<li><strong>{{langs.length}}</strong> languages</li>
5+
<li><strong>{{stats.nbLinesCode | unitNum}}bytes</strong> of code</li>
6+
<li><strong>{{projects[0].pushed_at | timeDiff}}</strong> since last commit</li>
7+
</ul>

0 commit comments

Comments
 (0)