Skip to content

Commit 50eca01

Browse files
twobobtwobob
committed
2 Column Layout, switch to 1.3 Model, Fix display
on tiny screens.
1 parent 1c8bc6c commit 50eca01

7 files changed

+117
-52
lines changed

‎2ColumnScreenshot.JPG

152 KB
Loading

‎app.js

+83-34
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
//requirejs.config({waitSeconds:0});
1+
requirejs.config({waitSeconds:0});
22
require([
33
'./jquery.js',
44
'./handlebars.min.js',
@@ -9,39 +9,41 @@ require([
99
'text!data.json'
1010
], function (_, Mustache, elasticlunr, questionView, questionList, wordList, data, indexDump) {
1111

12+
//, 'text!example_index.json', 'text!example_data.json',
13+
1214
var WLtemplate = Mustache.compile(wordList);
1315
var QLtemplate = Mustache.compile(questionList);
1416
var QVtemplate = Mustache.compile(questionView);
1517

16-
var seeder = 999999;
18+
var seeder = 11091974;
1719

1820
var BodyRef = document.getElementById("body");
1921
var clearButton = $('#clearButton');
2022

21-
2223
var renderQuestionList = function (qs) {
2324
$("#question-list-container")
2425
.empty()
25-
.append(QLtemplate({questions: qs}))
26+
.append(QLtemplate({questions: qs}));
2627
}
2728

2829
var renderWordList = function (qs) {
30+
2931
$("#question-list-container")
3032
.empty()
31-
.append(WLtemplate({list: qs}))
33+
.append(PRERENDERED_LIST_HTML);
3234
}
3335

3436
var renderQuestionView = function (question) {
3537
$("#question-view-container")
3638
.empty()
37-
.append(QVtemplate(question))
39+
.append(QVtemplate(question));
3840

3941
}
40-
42+
4143
window.profile = function (term) {
42-
console.profile('search')
43-
window.idx.search(term)
44-
console.profileEnd('search')
44+
console.profile('search');
45+
window.idx.search(term);
46+
console.profileEnd('search');
4547
}
4648

4749
window.search = function (term) {
@@ -59,23 +61,69 @@ var clearButton = $('#clearButton');
5961
this.saveDocument(false);
6062
});
6163

62-
var fulllist = new Array();
64+
Mustache.registerHelper('everyOther', function (index, options) {
65+
if(index%2 == 0){
66+
return options.fn(this);
67+
} else {
68+
return options.inverse(this);
69+
}
70+
71+
});
72+
73+
// Modified to
74+
Array.prototype.byCount= function(){
75+
//var lenHolder = [];
76+
var itm, a= [], L= this.length, o= {};
77+
for(var i= 0; i<L; i++){
78+
itm= this[i];
79+
if(!itm) continue;
80+
if(o[itm]== undefined) o[itm]= 1;
81+
else ++o[itm];
82+
}
83+
countHolder = [];
84+
for(var p in o) {a[a.length]= p;
85+
countHolder[countHolder.length] = { name: a.slice(-1).toString() , amount: o[p]};
86+
}
87+
var returnWithCounts =
88+
a.sort(function(a, b){
89+
return o[b]-o[a];
90+
})
91+
countHolder.sort(function(a, b){
92+
return a.amount >b.amount;
93+
})
94+
return returnWithCounts };
95+
96+
// prep the questions
97+
var fulllist = [];
98+
var rawQuestions = JSON.parse(data).questions;
99+
100+
rawQuestions.map(function (raw) {
101+
for (thing in raw.question.content )
102+
{
103+
fulllist[fulllist.length]= thing; //{'x': thing};
104+
}
105+
})
106+
107+
var shortlist = fulllist.byCount();
108+
dict = {}
109+
countHolder.forEach(function(x) {
110+
dict[x.name] = x.amount
111+
})
112+
63113

64-
var questions = JSON.parse(data).questions.map(function (raw) {
65-
var holder = ""
114+
var questions = rawQuestions.map(function (raw) {
115+
rawQuestion = raw;
116+
117+
var holder = ""
66118
for (i in raw.question.content){
67119
holder +=i +' : '+ raw.question.content[i]+'\n';
68120
}
69121
var make_id = murmurhash3_32_gc(raw.img.filename, seeder);
122+
//console.log(make_id);
70123

71-
for (thing in raw.question.content )
72-
{
73-
fulllist[fulllist.length]= thing; //{'x': thing};
74-
}
75-
76124
var clickableTags = Object.keys(raw.question.content).map(function (k) {
77125

78-
var result = '<a style="cursor:pointer" onclick="searchTerm(\''+k+'\')">'+k+'</a>';
126+
var result = '<a title="'+dict[k]+' results for '+k+ '" style="cursor:pointer" onclick="searchTerm(\''+k+'\')">'+k+'</a>';
79127

80128
return result;
81129
})
@@ -87,7 +135,7 @@ var clearButton = $('#clearButton');
87135
title: raw.img.filename.replace('.JPG',''),
88136
body: holder,
89137
searchTerms: Object.keys(raw.question.content).join(' '),
90-
tags: clickableTags,
138+
tags: clickableTags, // Object.keys(raw.question.content).join(' '),
91139
img: raw.img.filename,
92140
thumb: raw.thumb.filename
93141
}
@@ -107,17 +155,14 @@ window.idx = idx;
107155
document.getElementById("loader").style.display = "none" ;
108156
document.getElementById("hiding_title").style.display = "none" ;
109157

110-
111-
// this is how one might expose the complete engine for saving in a NON Node.js scenario.
112-
// var code = JSON.stringify(idx);
113-
// $('#codehere').text(code);
114-
115158
renderQuestionView(questions[0])
116-
159+
117160

118-
var shortlist = fulllist.filter((v, i, a) => a.indexOf(v) === i).map(function (raw) {
119-
return { x : raw }
120-
});
161+
162+
shortlist = countHolder.map(function (raw) { return { x : raw.name, count: raw.amount } });
163+
164+
var PRERENDERED_LIST_HTML = WLtemplate({list: shortlist});
165+
121166

122167
var emptyFunction = function emptyMe (){
123168

@@ -152,23 +197,27 @@ window.emptyFunction = emptyFunction;
152197

153198
function doHeavyWork(results, start, totalResultsToRender, term) {
154199
var total = totalResultsToRender;
155-
var fragment = 50;
200+
var fragment = 20;
156201
var end = start + fragment;
157202
var left = totalResultsToRender - end ;
158203

204+
205+
// console.log( left + ' results of '+ totalResultsToRender +' total left to render');
159206

160207
// partially render list
161208
// the thing to render, the start record and the end record
162209
renderPartialQuestionList(results, end-fragment, end)
163-
clearButton.text(end+fragment +' of '+results.length+' for '+term);
210+
clearButton.text(end +' of '+results.length+' for '+term);
164211

212+
//clearButton.addClass('blink');
165213

166214
if (end >= total) {
167215

168216
// If we reached the end, stop and change status
169217
clearButton.removeClass('blink');
170218
clearButton.text(results.length+' for '+term);
171-
BodyRef.style.cursor = '';
219+
$('body').removeClass('custom');
220+
//BodyRef.style.cursor = '';
172221

173222
} else {
174223
// Otherwise, process next fragment
@@ -180,10 +229,10 @@ window.emptyFunction = emptyFunction;
180229

181230
function dowork(results, totalResultsToRender, term) {
182231
// Set "working" status
183-
document.body.style.cursor = "wait";
232+
184233
document.getElementById("clearButton").innerHTML = "working";
185234
// render the single view and set term in search bar
186-
235+
$('body').addClass('custom'); //document.body.style.cursor = "progress";
187236
renderQuestionView(results[0]);
188237

189238
// render big view in chunks

‎css/bootstrap.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/sticky-footer-navbar.css

+13
Original file line numberDiff line numberDiff line change
@@ -97,3 +97,16 @@ blink, .blink, #blink{
9797
-webkit-animation-timing-function: ease-in-out;
9898
-webkit-animation-iteration-count: infinite;
9999
}
100+
101+
body.custom, body.custom.a, body.custom input{ cursor: wait; }
102+
103+
104+
/* a {text-shadow: 0.0em 0.0em 0.2em white, 0.0em 0.0em 0.1em white; } */
105+
106+
@media screen and (max-width: 1130px) {
107+
.qvcontainer { margin-top: -50px !important ; }
108+
109+
.fixed{position: relative !important};
110+
}
111+
112+

‎index.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ <h1 id="hiding_title">Kaycare<span>KI</span></h1>
3030

3131

3232
<div class="row" style="margin-left: 0px; margin-right: 0px;">
33-
<div class="col-md-6" style="margin-left: 0px; margin-right: 0px;">
34-
<div style="margin-left: 0px; margin-right: 0px; position: fixed; width: 480px;">
33+
<div class="col-md-6" style="margin-left: 0px; margin-right: 0px; width: 520px;">
34+
<div class="fixed" style="margin-left: 0px; margin-right: 0px; position: fixed; width: 480px;">
3535
<form>
3636
<div class="form-group has-success">
3737
<div class="col-xs-9" style="padding-left: 0px;">
@@ -41,11 +41,11 @@ <h1 id="hiding_title">Kaycare<span>KI</span></h1>
4141
<div style="text-align: right; width: 480px; padding-top: 8px; " id="clearButton"></div>
4242
</form></div>
4343

44-
<div id='question-view-container' style="margin-left: 0px; margin-right: 0px; position: fixed; width: 440px; margin-top: 70px; "></div>
44+
<div id='question-view-container' class="fixed" style="margin-left: 0px; margin-right: 0px; position: fixed; width: 440px; margin-top: 70px; "></div>
4545
</div>
4646

47-
<div class="col-md-6" style="margin-left: 0px; margin-right: 0px; padding-right: 0px; padding-left: 0px;">
48-
<div id='question-list-container' style="margin-left: 0px; margin-right: 0px; padding-right: 0px; padding-left: 0px; margin-top: 12px;"></div>
47+
<div class="col-md-6 qvcontainer" style="margin-left: 0px; margin-right: 0px; padding-right: 0px; padding-left: 0px; margin-top:60px">
48+
<div id='question-list-container' style="margin-left: 0px; margin-right: 0px; padding-right: 0px; padding-left: 0px; margin-top: 12px; width: 650px;"></div>
4949
</div>
5050
</div>
5151
</main>

‎templates/question_list.mustache

+14-11
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
1-
<div>
2-
<ul style="margin-left: 0px; margin-right: 0px; padding-left: 0px;">
1+
<!-- <div> -->
2+
<!-- <ul style="margin-left: 0px; margin-right: 0px; padding-left: 0px;"> -->
33
{{#questions}}
4+
<div style="width:320px; overflow:hidden; max-height: 173px; min-height: 173px; float:{{#everyOther @index}}left; {{else}}none{{/everyOther}}">
5+
<ul>
46
<li data-question-id="{{id}}">
5-
<h2 style="padding-bottom: 10px;" ><a href="#">{{title}}</a></h2>
7+
<h2 style="padding-bottom: 0px;" ><a href="#">{{title}}</a></h2>
68
<img style="float:left; margin-right: 10px;" class="resizable_img" src="./img/thumbs/{{{thumb}}}" width="120" height="120" ></img>
7-
<!-- <img class="lazy" data-original="./img/thumbs/{{{thumb}}}" width="120" height="120"> -->
8-
<p style="min-height: 100px;">{{#each tags}}
9+
10+
<p style="line-height: 1.0em; min-height: 100px; margin-top: -14px;"><small>{{#each tags}}
911
{{{this}}}{{#unless @last}}, {{/unless}}
10-
{{/each}}</p>
11-
12-
<!-- <p style="min-height: 100px;">{{{tags}}}</p> -->
12+
{{/each}}</small></p>
13+
1314
</li>
14-
{{/questions}}
15-
</ul>
16-
</div>
15+
</ul>
16+
</div>
17+
{{/questions}}
18+
<!-- </ul> -->
19+
<!-- </div> -->

‎templates/word_list.mustache

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div>
22
<ul style="margin-left: 0px; margin-right: 0px; padding-left: 0px;">
33
{{#list}}
4-
<a style="cursor:pointer" onclick="searchTerm('{{{x}}}')" class="listThing" >{{{x}}}</a>,
4+
<a style="cursor:pointer" title="{{{count}}} results for {{{x}}}" onclick="searchTerm('{{{x}}}')" class="listThing" >{{{x}}}</a>,
55
{{/list}}
66
</ul>
77
</div>

0 commit comments

Comments
 (0)