Need HTML/CSS template for search results

[alerque]

We have an engine that's returning search results, but so far the console is the only place to enjoy them. We need some web front end bits to make these more accessible.

The raw data coming back in json format looks something like this:

{ id: 15660,
  type: 'a',
  parent: 280,
  refs:
   [ { osis: 'Rev.3.1-Rev.14.20',
       book: 'Rev',
       start: 50,
       end: 249,
       count: 1,
       specificity: 99.5 } ],
  TDRHP: 1,
  QTH: 0,
  SPEC: 99.5,
  APS: 64.74605681252174,
  TDRHS: 1,
  TAG: 5,
  FPS: 71.74605681252174,
  title: 'Is Revelation 3:14 saying that Christ was created by God?' }
{ id: 19149,
  type: 'a',
  parent: 19135,
  refs:
   [ { osis: 'Rev.4.1-Rev.21.27',
       book: 'Rev',
       start: 72,
       end: 383,
       count: 1,
       specificity: 155.5 } ],
  TDRHP: 1,
  QTH: 0,
  SPEC: 155.5,
  APS: 53.673599750494816,
  TDRHS: 2,
  TAG: 5,
  FPS: 61.673599750494816,
  title: 'Whose voice is it in Revelation 4:1? (Inconsistent red letter usage)' }

This should be enough information to put together a results listing page. Don't worry about HOW it gets there, for new lets just work on a mockup of what the end result would look like. We need basic HTML and CSS to put that data (or whatever subset of it is actually useful) into a web page.

I'm imagining a similar view of results will end up in two places: on the static site and in the user script. Perhaps on the static site we would show result columns for several sites:

While searching on each site would just show the ones relevant to that site:

On the other hand maybe showing more sites at once isn't useful and what the static site should do is display more detail about each result. In any event, what should a result look like and what is the HTML/CSS to make it look that way?

[alerque]

@scottgit Once you clone the repository to your computer, make a new branch (say "search-results-mockup" or something like that), then just create a new html + css file with just enough of a fragment to format the results. Add those file(s) to a commit and push it over. We can massage it into where the code will actually go to make it a template.

[alerque]

Come to think of it, it might actually me most useful for you to make your new branch off of the gh-pages rather than master. Then you can just edit the index.html file and add your mockup bits. By checking out the gh-pages branch you'll see almost none of the code that generates the site and just the final output. Branching off of that would be a nice sandbox to play with mocking up html/css. If you put it inside index.html you'll have Bootstrap already loaded in there and be working on the output much as it will look on the site.

[curiousdannii]

At this stage just a mock-up would be useful; rather than an actual template, just a page with some search results hard coded in.

When we get multiple site searching working, I think it would be best to combine them into one final result list. We could put the site icon on the left of each result.

[scottgit]

@alerque Okay, I'm about to do my first ever pull-request for the changes done on the html and css. Some work will need done to link the JSON search return to the JQuery that builds the list. This is currently hardcoded with some semi-bogus values due to various features I was testing.

[alerque]

@scottgit Bogus data is fine, we can work on wiring it up—having something to wire it up to will make all the difference!

_{P.S. This won't be your first pull request though, you fixed a spelling mistake in this very project some time ago that Github sent through an a PR ;-)}

[curiousdannii]

How are you going @Scottgit? Anything we can help with?

[scottgit]

@curiousdannii Well, maybe... I am not seeing where my pull-request from a couple of weeks ago ever got incorporated into the site, nor do I see it still sitting as a pull-request. So I am unsure what needs to be done.

[curiousdannii]

@scottgit Hmm, I don't know what happened. You did push a new branch html-css, but it didn't contain any new code.

[curiousdannii]

@scottgit Let me know if I can help. If you can't figure it out then if you email me the code I'll commit it for you.

[scottgit]

@curiousdannii Well, it may be that I forgot to "commit" before initiating a pull request. I am still unclear about GitHub workflow. I have done a commit now and attempted to make a pull request again, but it came up with a "Request Failed: Validation Failed" error, so I do not know what is wrong.

[curiousdannii]

I see your code now. It doesn't really matter that a pull request wasn't made, we can easily just just the code from the branch. :)

[edit] I just took a look at what you've made, and it's really good!

[scottgit]

@curiousdannii I'm glad you find it "good." I was a bit worried that I did not have the right concept of what was being desired. How do I view it online? I can get to the html file to see the code, but I cannot figure out where to click to "show" the results of the code as a webpage?

I know we need to actually link the true JSON return results to it, and I assume some other tweaking will need to be done once that is set, but I felt like what I produced was a good start point. Also, some of my linking to javascript libraries I'm sure will need to be cleaned up and standardized. My code could probably be cleaner as well, as I am not well practiced in following any standards. It has actually been a little while since I did anywhere near that level of html/css/javacript coding, and when I did, I was pretty much on my own how I did it, so standards... well.

[curiousdannii]

I've started integrating your code using the template system, in the html branch.