From: Wolfram Schneider <wosch@indexdata.dk>
Date: Wed, 5 Nov 2014 09:43:18 +0000 (+0000)
Subject: Merge branch 'master' of ssh://git.indexdata.com:222/home/git/pub/mkws
X-Git-Tag: 1.0.0~83
X-Git-Url: http://jsfdemo.indexdata.com/?a=commitdiff_plain;h=c07acf628bd0580ed707eeb58db77de5d41e3ca2;hp=198d13156f04dd64bf2703bdaefac005308a2ec5;p=mkws-moved-to-github.git

Merge branch 'master' of ssh://git.indexdata.com:222/home/git/pub/mkws
---

diff --git a/doc/mkws-manual.markdown b/doc/mkws-manual.markdown
index 0601a79..c25dde4 100644
--- a/doc/mkws-manual.markdown
+++ b/doc/mkws-manual.markdown
@@ -659,6 +659,9 @@ Name              Description
                   widget be subclassed to store the generated widget
                   definitions in more useful places.
 
+`button`          The search button. Usually generated a `search`
+                  widget.
+
 `categories`      Obtains from the Service Proxy a list of the target
                   categories associated with the library in use, and
                   displays them in a drop-down list. When a category
@@ -699,55 +702,141 @@ Name              Description
                   be changed by overriding the `done` template using
                   `<script class="mkws-template-done" type="text/x-handlebars-template">`.
 
-`facet`           x
-
-`facets`          x
-
-`google-image`    x
-
-`images`          x
-
-`lang`            x
-
-`log`             x
-
-`lolcat`          x
-
-`motd-container`  x
-
-`motd`            x
-
-`navi`            x
-
-`pager`           x
-
-`per-page`        x
-
-`progress`        x
-
-`query`           x
-
-`ranking`         x
-
-`record`          x
-
-`records`         x
-
-`reference`       x
-
-`results`         x
-
-`search-form`     x
-
-`search`          x
-
-`sort`            x
-
-`stat`            x
-
-`switch`          x
+`facet`           A facet that displays the frequency with which a set
+                  of terms occur within a specific field. The specific
+                  field whose contents are analysed must be specified
+                  by the widget's `facet` configuration item, which
+                  may conveniently be done by means of the
+                  `data-mkws-facet` attribute on the HTML
+                  element. The supported facets are "subject",
+                  "author" and "xtargets" -- the latter a special case
+                  which treats the target providing a record as a
+                  facet. Most often, `facet` widgets are generated
+                  by a `facets` widget, which knows which facets are
+                  required, but they can also be placed individually.
+
+`facets`          An area that contains a "Facets" heading and several
+                  `facet` widgets. The set of facet widgets generated
+                  is specified by the `facets` configuration item,
+                  which may be set globally or at the level of the
+                  widget or the team. The value of this configuration
+                  item is an array of zero or more strings, each
+                  naming a facet.
+
+`google-image`    A specialisation of the `images` widget which
+                  defaults to the `Google_Images` target.
+
+`images`          A specialisation of the `records` widget which
+                  defaults to the `images` template. Unlike the default
+                  summary template, this displays an image from the
+                  URL specified by the `md-thumburl` field of each
+                  record.
+
+`lang`            Provides a selection between the supported set of
+                  languages (which defaults to English, German and
+                  Danish, but can be configured by the `lang`
+                  configuration item, whose value is an array of
+                  two-letter language codes).
+
+`log`             Initially empty, this widget accumulates a log of
+                  messages generated by the widget set, similar to
+                  those emitted on the JavaScript console.
+
+`lolcat`          A specialisation of the `google-image` widget which
+                  defaults to the search-term "kitteh" and
+                  auto-executes.
+
+`motd-container`  An empty container which the `motd` widget, if any,
+                  is moved into for initial display. Usually generated
+                  as part of the `results` widget.
+
+`motd`            May be provided, containing content to appear in the
+                  area where records will later appear. It is moved
+                  into this area (the `motd-container` widget) and
+                  initially displayed; then hidden when the first
+                  search is run. It can be used to provide a "message
+                  of the day".
+
+`navi`            Shows a list of the facets that have been selected,
+                  and allows them to be deselected.
+
+`pager`           Shows a list of the available pages of results, and
+                  allows the user to navigate to a selected page.
+
+`per-page`        Provides a dropdown allowing the user to choose how
+                  many records should appear on each page. The
+                  available set of page-sizes can be set as the
+                  `perpage_options` configuration item, whose value is
+                  an array of integers. The initial selected value can
+                  be set by the `perpage_default` configuration item.
+
+`progress`        Shows a progress bar which indicates how many of the
+                  targets have responded to the search.
+
+`query`           The input area for a query. Usually generated a `search`
+                  widget.
 
-`targets`         x
+`ranking`         The result-ranking area, consisting of a `sort`
+                  widget and a `per-page` widget. These may instead
+                  be specified separately if preferred.
+
+`record`          A detailed display of a single record, usually
+                  appearing when the user clicks on a summary
+                  record. This is generated by the `records` widget.
+
+`records`         The area in which summary records appear. (Clicking
+                  on a summary record make it pop up as a detailed
+                  record.)
+
+`reference`       A short summary about a subject specified by the
+                  `autosearch` configuration item. This is created by
+                  drawing a picture and a paragraph of text from
+                  Wikipedia. To work correctly, this widget must be
+                  used in a library that provides the
+                  `wikimedia_wikipedia_single_result` target.
+
+`results`         A large compound widget used to provide the most
+                  important results-oriented widgets in a pre-packaged
+                  framework: `facets`, `ranking`, `pager`, `navi` and
+                  `records`.
+
+`search-form`     The search form, containing the query area and the
+                  button. Usually generated a `search` widget.
+
+`search`          The search box, consisting of a form containing a
+                  query area and a button.
+
+`sort`            Provides a dropdown allowing the user to choose how
+                  the displayed records should be sorted. The
+                  available set of sort criteria can be set as the
+                  `sort_options` configuration item, whose value is
+                  an array of two-element arrays. The first item of
+                  each sub-array is a pazpar2 sort-expression such as
+                  `data:0` and the second is a human-readable label
+                  such as `newest`. The initial selected
+                  value can be set by the `sort_default` configuration
+                  item.
+
+`stat`            A summary line stating how many targets remain
+                  active, how many records have been found, and how
+                  many of them have been retrieved for display. For
+                  most purposes, the `progress` widget may be
+                  preferable.
+
+`summary`         A short record, included in the list shown when a
+                  search is run. When clicked, this generally pops up
+                  a detailed `record` widget. This widget is generated
+                  by the toolkit in response to search results.
+
+`switch`          A pair of buttons allowing the user to switch
+                  between viewing the search results (the usual case)
+                  or the target list.
+
+`targets`         A list of all targets in the present library,
+                  showing their ID, the number of records they have
+                  found for the current search, any diagnostics they
+                  have returned, the number of records that have been
+                  returned for display, and the connection state.
 ----
 
 
@@ -765,8 +854,15 @@ reasonably narrow.
 ----
 Element                   Type    Default   Description
 --------                  -----   --------- ------------
-log_level                 int     1         Level of debugging output to emit. 0 = none, 1 = messages, 2 = messages with
-                                            datestamps, 3 = messages with datestamps and stack-traces.
+auth_hostname
+
+autosearch
+
+facet
+
+facet_caption_*
+
+facet_max_*
 
 facets                    array   *Note 1*  Ordered list of names of facets to display. Supported facet names are
                                             `xtargets`, `subject` and `author`.
@@ -782,22 +878,43 @@ language_*                hash              Support for any number of languages
                                             `language_` followed by the code of the language. See the separate section below for
                                             details.
 
+limit
+
+log_level                 int     1         Level of debugging output to emit. 0 = none, 1 = messages, 2 = messages with
+                                            datestamps, 3 = messages with datestamps and stack-traces.
+
+maxrecs
+
+paragraphs
+
 pazpar2_url               string  *Note 2*  The URL used to access the metasearch middleware. This service must be configured to
                                             provide search results, facets, etc. It may be either unmediated or Pazpar2 the
                                             MasterKey Service Proxy, which mediates access to an underlying Pazpar2 instance. In
                                             the latter case, `service_proxy_auth` must be provided.
 
+perpage
+
 perpage_default           string  20        The initial value for the number of records to show on each page.
 
 perpage_options           array   *Note 3*  A list of candidate page sizes. Users can choose between these to determine how many
                                             records are displayed on each page of results.
 
+pp2_hostname
+
+pp2_path
+
+query
+
 query_width               int     50        The width of the query box, in characters.
 
 responsive_design_width   int               If defined, then the facets display moves between two locations as the screen-width
                                             varies, as described above. The specified number is the threshhold width, in pixels,
                                             at which the facets move between their two locations.
 
+scan_all_nodes
+
+sentences
+
 service_proxy_auth        url     *Note 4*  A URL which, when `use_service_proxy` is true, is fetched once at the beginning of each
                                             session to authenticate the user and establish a session that encompasses a defined set
                                             of targets to search in.
@@ -815,6 +932,8 @@ show_sort                 bool    true      Indicates whether or not to display
 show_switch               bool    true      Indicates whether or not to display the switch menu, for switching between showing
                                             retrieved records and target information.
 
+sort
+
 sort_default              string  relevance The label of the default sort criterion to use. Must be one of those in the `sort`
                                             array.
 
@@ -822,6 +941,22 @@ sort_options              array   *Note 6*  List of supported sort criteria. Eac
                                             the first element of each sublist is a pazpar2 sort-expression such as `data:0` and
                                             the second is a human-readable label such as `newest`.
 
+sp_auth_credentials
+
+sp_auth_path
+
+sp_auth_query
+
+target
+
+targetfilter
+
+targets
+
+template
+
+text
+
 use_service_proxy         bool    true      If true, then a Service Proxy is used to deliver searching services rather than raw
                                             Pazpar2.
 ----
diff --git a/examples/htdocs/prettysimple.css b/examples/htdocs/prettysimple.css
new file mode 100644
index 0000000..2984f7c
--- /dev/null
+++ b/examples/htdocs/prettysimple.css
@@ -0,0 +1,386 @@
+/* General styling */
+html {
+  height: 100%;
+  margin: 0;
+}
+body {
+  display: flex;
+  align-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  height: 100%;
+  width: 100%;
+  max-width: 1100px;
+  margin: auto;
+  font-family: "Open Sans", sans-serif;
+}
+a {
+ text-decoration: none;
+ color: black;
+}
+
+/* Top level layout */
+.header {
+  width: 100%;
+  display: flex;
+  margin: .5em;
+  margin-bottom: 1em;
+}
+.mkws-switch {
+  margin-left: auto;
+}
+.main {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  margin: 1em;
+  margin-bottom: auto;
+}
+.forms {
+  width: 100%;
+  margin: 1em;
+}
+.mkws-facets {
+  margin-right: 66px;
+  flex: 1;
+}
+.results {
+  flex: 3;
+}
+
+/* Search form */
+/* heavily inspired by: */
+/* https://github.com/philipwalton/solved-by-flexbox/blob/master/_sass/components/_input-add-on.scss */
+.mkws-search {
+  margin-left: auto;
+  margin-bottom: 0;
+}
+.mkws-search-form {
+  display: flex;
+  margin-left: auto;
+  max-width: 30em;
+}
+.mkws-search-form .mkws-query {
+  flex: 1;
+  border-right: 0 !important;
+  border-radius: 2px 0 0 2px;
+  font-size: 1.1em;
+}
+.mkws-search-form .mkws-button {
+  border-radius: 0 2px 2px 0;
+  background-color: hsla(31, 15%, 50%, 0.1);
+  font: inherit;
+  font-weight: normal;
+}
+.mkws-search-form .mkws-query, .mkws-search-form .mkws-button {
+  border: 1px solid hsla(31, 15%, 50%, 0.25);
+  padding: 0.5em 0.75em;
+  margin: 0;
+}
+.mkws-ranking {
+  font-family: "Open Sans Light", sans-serif;
+  border-top: none;
+  border-bottom-left-radius: 5em 100%;
+  margin-top: 0;
+  margin-left: auto;
+  font-size: .9em;
+  text-align: right;
+  max-width: 25em;
+}
+.mkws-ranking select {
+ font-size: 1.0em;
+ font-family: "Open Sans", sans-serif;
+ border: none;
+ background: none;
+}
+
+/* Misc. elements */
+.mkws-lang {
+  color: gray;
+  font-family: "Open Sans Light", sans-serif;
+}
+.mkws-lang > span {
+  color: black;
+  font-family: "Open Sans", sans-serif;
+}
+.mkws-switch {
+  color: gray;
+  font-family: "Open Sans Light", sans-serif;
+}
+.mkws-switch > a {
+  color: black;
+}
+.mkws-pager {
+  width: 100%;
+}
+.mkws-current-page {
+  background: gray;
+  border-radius: 3em;
+  padding: 0 .5em;
+  color: white;
+}
+.mkws-navi {
+  margin-top: 10px;
+  width: 100%;
+  
+}
+.mkws-removable:after {
+  content: " X";
+  color: DarkRed; 
+}
+.mkws-removable:hover {
+  text-decoration: line-through;
+}
+.mkws-records {
+  width: 100%;
+}
+
+
+/* Facets */
+.mkws-facet {
+  padding-bottom: 1em;
+}
+.mkws-facet-title {
+  border-left: 5px solid #7d8187;
+  padding: .5em 10px;
+  text-transform: uppercase;
+}
+.mkws-facet:nth-child(1)>.mkws-facet-title {
+  border-color: #2980b9;
+}
+.mkws-facet:nth-child(2)>.mkws-facet-title {
+  border-color: #68a863;
+}
+.mkws-facet:nth-child(3)>.mkws-facet-title {
+  border-color: #b45b47;
+}
+
+.mkws-facet:last-child {
+  padding-bottom: initial;
+}
+.mkws-term {
+  display: flex;
+  padding-left: 15px;
+  font-size: .9em;
+}
+.mkws-term a {
+  flex: 1;
+  overflow: hidden; 
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mkws-term span {
+  flex: 0 0 min-content;
+  float: right;
+  margin-left: .7em;
+}
+.mkws-stat {
+  font-family: "Open Sans Light", sans-serif;
+  text-align: right;
+  font-size: .9em;
+}
+
+
+/* Result containers */
+.mkws-summary {
+  padding: 40px 20px;
+  min-height: 120px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+}
+.mkws-summary:last-child {
+  border: none;
+}
+.mkws-field-data {
+  min-height: 120px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  align-content: flex-start;
+  justify-content: space-around;
+}
+
+/* Result fields */
+.mkws-field-data > * {
+  flex 1;
+}
+.mkws-field-date {
+  order: 1;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.3);
+}
+.mkws-field-title {
+  order: 2;
+  font-family: "Open Sans Light", sans-serif;
+  font-size: 24px;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  margin-bottom: 4px;
+}
+.mkws-field-title-remainder {
+  order: 3;
+  font-family: "Open Sans Light", sans-serif;
+  font-size: 12px;
+  margin-top: -4px;
+  margin-bottom: 4px;
+  overflow: hidden; 
+  text-overflow: ellipsis;
+}
+.mkws-field-description {
+  order: 4;
+  font-family: "Open Sans Light", sans-serif;
+  font-size: 18px;
+  line-height: 1.2;
+  max-height: 44px;
+  overflow: hidden;
+}
+.mkws-field-author {
+  order: 5;
+  font-weight: bold;
+  font-size: 12px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.mkws-field-thumb {
+  float: left;
+  margin-right: 25px;
+}
+.mkws-field-thumb > img {
+  width: 140px;
+  height: 120px;
+  object-fit: contain;
+}
+.mkws-details {
+  margin-top: 25px;
+}
+.mkws-prev, .mkws-next {
+  text-transform: uppercase;
+  font-size: .75em;
+} 
+
+
+/* Responsive */
+@media screen and (max-width: 1020px) {
+  .mkws-facets {
+    margin-right: 30px;
+  }
+}
+@media screen and (max-width: 900px) {
+  .mkws-pager {
+    margin: 0;
+  }
+  .mkws-pager > div {
+    margin-top: 10px;
+  }
+  .main {
+    flex-wrap: wrap;
+  }
+  .mkws-facets {
+    order: 99;
+    width: 100%;
+    margin-top: 40px;
+    margin-right: 0;
+    flex: none;
+  }
+  .results {
+    width: 100%;
+    order 1;
+    flex: none;
+  }
+  .mkws-ranking {
+    width: 100%;
+  }
+  .mkws-search {
+    width: 100%;
+  }
+  .mkws-summary {
+    min-height: 60px;
+    padding: 20px 10px;
+  }
+  .mkws-field-data {
+    min-height: 60px;
+  }
+  .mkws-field-date {
+    font-size: 12px;
+  }
+  .mkws-field-title {
+    font-size: 18px;
+  }
+  .mkws-field-description {
+    font-size: 14px;
+    max-height: 34px;
+  }
+  .mkws-field-author {
+    font-size: 11px;
+  }
+  .mkws-field-thumb {
+    order: -1;
+    margin-right: 10px;
+  }
+  .mkws-field-thumb > img {
+    width: 70px;
+    height: 60px;
+    object-fit: contain;
+  }
+  .mkws-pager > div {
+    float: none !important;
+  }
+}
+
+/* Font (from mozilla.org) */
+@font-face{
+  font-family:'Open Sans Light';
+  src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.eot);
+  src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Light-webfont.svg#OpenSansLight) format('svg');
+  font-weight:400;
+  font-style:normal
+}
+
+@font-face{
+  font-family:'Open Sans Light';
+  src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.eot);
+  src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format('svg');
+  font-weight:700;
+  font-style:normal
+}
+
+@font-face{
+  font-family:'Open Sans Light';
+  src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.eot);
+  src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-LightItalic-webfont.svg#OpenSansRegular) format('svg');
+  font-weight:400;
+  font-style:italic
+}
+
+@font-face{
+  font-family:'Open Sans';
+  src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.eot);
+  src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format('svg');
+  font-weight:400;
+  font-style:normal
+}
+
+@font-face{
+  font-family:'Open Sans';
+  src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.eot);
+  src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold) format('svg');
+  font-weight:700;
+  font-style:normal
+}
+
+@font-face{
+  font-family:'Open Sans';
+  src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.eot);
+  src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-Italic-webfont.svg#OpenSansItalic) format('svg');
+  font-weight:400;
+  font-style:italic
+}
+
+@font-face{
+  font-family:'Open Sans Extra Bold';
+  src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.eot);
+  src:url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.eot?#iefix) format('embedded-opentype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.woff) format('woff'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.ttf) format('truetype'),url(//mozorg.cdn.mozilla.net/media/fonts/OpenSans-ExtraBold-webfont.svg#OpenSansSemibold) format('svg');
+  font-weight:700;
+  font-style:normal
+}
+
diff --git a/examples/htdocs/prettysimple.html b/examples/htdocs/prettysimple.html
new file mode 100644
index 0000000..28874bc
--- /dev/null
+++ b/examples/htdocs/prettysimple.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>MKWS demo</title>
+    <!-- <script type="text/javascript" src="//mkws.indexdata.com/mkws&#45;complete.js"></script> -->
+    <script type="text/javascript" src="//mkws.local/mkws-complete.js"></script>
+    <link rel="stylesheet" href="prettysimple.css" />
+  </head>
+  <body>
+    <div class="header">
+      <div class="mkws-lang"></div>
+      <div class="mkws-switch"></div>
+    </div>
+    <div class="forms">
+      <div class="mkws-search"></div>
+      <div class="mkws-ranking"></div>
+    </div>
+    <div class="main">
+      <div class="mkws-facets"></div>
+      <div class="results">
+        <div class="mkws-pager"></div>
+        <div class="mkws-navi"></div>
+        <div class="mkws-records"></div>
+        <div class="mkws-targets"></div>
+        <div class="mkws-stat"></div>
+      </div>
+    </div>
+  </body>
+</html>
+
+
diff --git a/examples/htdocs/topic.css b/examples/htdocs/topic.css
index 47da435..9e0e181 100644
--- a/examples/htdocs/topic.css
+++ b/examples/htdocs/topic.css
@@ -50,8 +50,15 @@ b, strong {
   }
 
 .mkws-summary {
-  padding: .5em 0;
+  margin: .5em 0;
   line-height: 1.35;
+  min-height: 60px;
+}
+.articles .mkws-summary, .alltargets .mkws-summary {
+  min-height: 0;
+}
+.articles .mkws-field-thumb, .alltargets .mkws-field-thumb {
+  display: none;
 }
 .mkws-summary:last-child {
   padding-bottom: 0;
@@ -80,7 +87,7 @@ b, strong {
 }
   .mkws-google-image img {
     max-width: 100%;
-    max-height: 200px;
+    max-height: 180px;
     padding: 1em 0 .5em;
   }
 .list-group-item {
@@ -90,6 +97,25 @@ b, strong {
   box-shadow: none;
   -webkit-box-shadow: none;
 }
+
+/* Fields */
+.mkws-field-thumb {
+  height: 60px;
+  width: 80px;
+  overflow: hidden;
+  margin-right: 1em;
+  float: left;
+}
+.mkws-field-thumb > img {
+  height: 60px;
+  max-width: 80px;
+} 
+.mkws-field-description {
+  overflow: hidden; 
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 @media screen and (min-width:700px) {
   .multicol {
     column-count: 2;
@@ -100,3 +126,13 @@ b, strong {
     -webkit-column-gap: 20px;
   }
 }
+@media screen and (min-width:900px) {
+  .multicol {
+    column-count: 3;
+    column-gap: 20px;
+    -moz-column-count: 3;
+    -moz-column-gap: 20px;
+    -webkit-column-count: 3;
+    -webkit-column-gap: 20px;
+  }
+}
diff --git a/examples/htdocs/topic.html b/examples/htdocs/topic.html
index 642941b..0c727e1 100644
--- a/examples/htdocs/topic.html
+++ b/examples/htdocs/topic.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
+<html lang="en"><head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>MKWS demo: Compound reference widget, Bootstrap edition</title>
+  <title>MKWS demo</title>
+
+  <!-- Include Bootstrap. It needs jQuery. -->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
@@ -13,35 +14,33 @@
   <!-- <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" rel="stylesheet"> -->
   <!-- <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.1.1/united/bootstrap.min.css" rel="stylesheet"> -->
   <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
+
+  <!-- Before including MKWS we can define a configuration object. -->
   <script type="text/javascript">
     var mkws_config = { sp_auth_credentials: "credo/emu" };
   </script>
+
+  <!-- mkws-complete.js includes jQuery and Handlebars. It will co-exist with
+       another copy of jQuery as we have here but you can also use mkws.js
+       if you have included both separately -->
   <script type="text/javascript" src="//mkws.indexdata.com/mkws-complete.js"></script>
-  <!-- <script type="text/javascript" src="//mkws.local/mkws&#45;complete.js"></script> -->
   <link rel="stylesheet" type="text/css" href="topic.css">
+
+  <!-- Handlebars templates can make calls to Javascript functions you
+       define this way. -->
   <script>
-    // The Google Images database returns links like:
-    //      http://images.google.com/url?q=http://eofdreams.com/fish.html&sa=U&ei=RAB-U9XNDo2Dqga1o4L4Bw&ved=0CC4Q9QEwAA&usg=AFQjCNFhRtn6GMevHbpITZ6kfx6rsHV2ow
-    // This Handlebars helper avoids a pointless redirect by transforming
-    // this to the URL of the underling page, in this case
-    //      http://eofdreams.com/fish.html
-    Handlebars.registerHelper('mkws-googleurl', function(obj) {
-      if (!obj) {
-        return "obj undefined";
-      } else if (!obj[0]) {
-        return "obj[0] undefined, JSON=" + $.toJSON(obj);
-      } else {
-        return mkws.getParameterByName('q', obj[0]);
-      }
-    });
     Handlebars.registerHelper('mkws-topicurl', function(topic) {
+      /* Creates a link back to this page with the topic as a parameter */
       return window.location.pathname + "?q=" + encodeURIComponent(topic);
     });
   </script>
+
+  <!-- Here we create replacement templates that incorporate bootstrap. 
+       The prefix "mkws-template-" makes them available to MKWS -->
   <script class="mkws-template-topic-image" type="text/x-handlebars-template">
     {{#each hits}}
       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
-       <a href="{{mkws-googleurl md-electronic-url}}" target="_blank">
+       <a href="{{md-electronic-url}}" target="_blank">
         {{#mkws-first md-thumburl}}
           <img src="{{this}}" alt="{{../md-title}}"/>
         {{/mkws-first}}
@@ -60,19 +59,31 @@
     {{/each}}
   </script>
 </head>
+
 <body>
-  <div class='page-header container' autosearch='!param!q'>
+  <div class='page-header container'>
     <div class="row">
-      <!-- reference entry -->
-      <div class="jumbotron panel col-md-8">
+      <!-- mkws-reference - A widget that fetches a Wikipedia entry -->
+      <div class="jumbotron panel col-md-8 col-sm-7">
+        <!-- Note the "autosearch" attribute. It indicates where to get
+             the search term from, in this case a URL parameter.  A URL
+             path component or Javascript variable are also possible. --> 
         <div class="panel-body mkws-reference mkws-team-ref" autosearch="!param!q"
              data-mkws-config='{"paragraphs":1}'></div>
       </div>
-      <!-- related topics -->
-      <div class="col-md-offset-1 col-md-3"><div class="panel panel-default">
+      <!-- Related topics -->
+      <div class="col-md-offset-1 col-md-3 col-sm-5"><div class="panel panel-default">
         <div class="panel-heading title">
           <h3 class="panel-title">Related Topics</h3>
         </div>
+        <!-- This mkws-facet widget is particularly illustrative: 
+             * the data-mkws-facet attribute specifies a particular facet
+             * data-mkws-config allows configuration override; in this case
+               we employ one of the templates we defined above.
+             * having the class mkws-team-main groups this widget with others
+               on the same team. The mkws-records widget at the bottom of
+               the page shares the same team and is thus working from the same
+               result set. -->
         <ul class="panel-body list-group mkws-facet mkws-team-main"
             autosearch="!param!q"
             data-mkws-facet="subject"
@@ -85,6 +96,7 @@
         <div class="panel-heading title">
           <h3 class="panel-title">Images</h3>
         </div>
+        <!-- The "target" config key narrows the search to a list of targets -->
         <div class="panel-body mkws-google-image" autosearch="!param!q"
              data-mkws-config='{ "maxrecs": 4, "template": "topic-image", "target": "google_images_js" }'></div>
       </div></div>
@@ -92,15 +104,16 @@
 
     <!-- sources -->
     <div class="row">
-        <div class="col-md-4 col-sm-6"><div class="panel panel-default">
+        <div class="news col-md-4 col-sm-6"><div class="panel panel-default">
           <div class="panel-heading title">
             <h3 class="panel-title">News</h3>
           </div>
+          <!-- The "targetfilter" narrows the search to targets matching some criteria -->
           <div class="panel-body mkws-records mkws-team-news" autosearch="!param!q"
                data-mkws-config='{"targetfilter":"categories=news",
                                   "perpage":7}'></div>
         </div></div>
-        <div class="col-md-4 col-sm-6"><div class="panel panel-default">
+        <div class="articles col-md-4 col-sm-6"><div class="panel panel-default">
           <div class="panel-heading title">
             <h3 class="panel-title">Articles</h3>
           </div>
@@ -108,7 +121,7 @@
                data-mkws-config='{"targetfilter":"categories=articles",
                                   "perpage":7}'></div>
         </div></div>
-        <div class="col-md-4 col-sm-6"><div class="panel panel-default">
+        <div class="books col-md-4 col-sm-6"><div class="panel panel-default">
           <div class="panel-heading title">
             <h3 class="panel-title">Books</h3>
           </div>
@@ -118,7 +131,7 @@
         </div></div>
     </div>
     <div class="row">
-        <div class="col-md-12"><div class="panel panel-default">
+        <div class="alltargets col-md-12"><div class="panel panel-default">
           <div class="panel-heading title">
             <h3 class="panel-title">Results from all targets</h3>
           </div>
diff --git a/src/mkws-widget-main.js b/src/mkws-widget-main.js
index 8a51a4d..0fe9d90 100644
--- a/src/mkws-widget-main.js
+++ b/src/mkws-widget-main.js
@@ -56,7 +56,7 @@ mkws.registerWidgetType('pager', function() {
     output.found = data.total;
 
     //client indexes pages from 1 but pz2 from 0
-    var onsides = 6;
+    var onsides = 5;
     var pages = Math.ceil(that.team.totalRecordCount() / that.team.perpage());
     var currentPage = that.team.currentPage();
 
diff --git a/src/templates/facets.handlebars b/src/templates/facets.handlebars
index 8ebc91f..3ca13a6 100644
--- a/src/templates/facets.handlebars
+++ b/src/templates/facets.handlebars
@@ -4,8 +4,6 @@ Facets, a container of all configured facets.
 team - the current team
 facets - array of facet names
 }}
-
-<div class="mkws-facets-title mkwsTermlistsTitle">{{mkws-translate "Facets"}}</div>
 {{#each facets}}
   <div class="mkws-facet mkwsFacet mkws-team-{{../team}}" data-mkws-facet="{{this}}"></div>
 {{/each}}
diff --git a/src/templates/search.handlebars b/src/templates/search.handlebars
index 82cbd15..446ba16 100644
--- a/src/templates/search.handlebars
+++ b/src/templates/search.handlebars
@@ -2,10 +2,9 @@
 Search form
 
 team - MKWS team
-queryWidth - configured width for search box
 }}
 <form name="mkws-search-form" class="mkws-search-form mkws-team-{{team}}" action="">
-  <input class="mkws-query mkws-query mkwsQuery mkws-team-{{team}}" type="text" size="{{queryWidth}}">
+  <input class="mkws-query mkws-query mkwsQuery mkws-team-{{team}}" type="text">
   <input class="mkws-button mkws-button mkwsButton mkws-team-{{team}}" type="submit" value="{{{mkws-translate "Search"}}}">
 </form>
 
diff --git a/src/templates/summary.handlebars b/src/templates/summary.handlebars
index aa2ed10..85b371d 100644
--- a/src/templates/summary.handlebars
+++ b/src/templates/summary.handlebars
@@ -10,15 +10,34 @@ detailClick - a click event handler for details
 renderedDetails - active record details rendered from the details template
 md-* - metadata fields passed through from backend
 }}
-<a href="#" id="{{detailLinkId}}" onclick="{{detailClick}}">
-  <b>{{md-title}}</b>
-</a>
-{{#if md-title-remainder}}
-  <span>{{md-title-remainder}}</span>
-{{/if}}
-{{#if md-title-responsibility}}
-  <span><i>{{md-title-responsibility}}</i></span>
+{{#if md-thumburl}}
+  <a class="mkws-field-thumb" href="#" onclick="{{detailClick}}">
+    <img src="{{md-thumburl.[0]}}"/>
+  </a>
 {{/if}}
+<div class="mkws-field-data">
+  <span class="mkws-field-title">
+  <a href="#" id="{{detailLinkId}}" onclick="{{detailClick}}">
+    {{md-title}}
+  </a>
+  </span>
+  {{#if md-title-remainder}}
+    <span class="mkws-field-title-remainder">{{md-title-remainder}}</span>
+  {{/if}}
+  {{#if md-author}}
+    <span class="mkws-field-author">{{md-author}}</span>
+  {{else}}
+    {{#if md-title-responsibility}}
+      <span class="mkws-field-author">{{md-title-responsibility}}</span>
+    {{/if}}
+  {{/if}}
+  {{#if md-description}}
+    <div class="mkws-field-description">{{md-description}}</div>
+  {{/if}}
+  {{#if md-date}}
+    <span class="mkws-field-date">{{md-date}}</span>
+  {{/if}}
+</div>
 {{#if renderedDetails}}
   {{{renderedDetails}}}
 {{/if}}
diff --git a/test/Makefile b/test/Makefile
index 1b986b4..1f6060c 100644
--- a/test/Makefile
+++ b/test/Makefile
@@ -105,7 +105,7 @@ node_modules node-modules:
 
 apache-start:
 	bin/apache-template-update
-	${APACHE_HTTPD} -f `pwd`/${TMP_DIR}/jasmine-dev-${APACHE_PORT}.conf
+	umask 002; ${APACHE_HTTPD} -f `pwd`/${TMP_DIR}/jasmine-dev-${APACHE_PORT}.conf
 
 APACHE_PID_FILE=${TMP_DIR}/mkws-jasmine-${APACHE_PORT}.pid
 apache-stop:
diff --git a/test/spec/mkws-pazpar2.js b/test/spec/mkws-pazpar2.js
index ccc161e..c295b32 100644
--- a/test/spec/mkws-pazpar2.js
+++ b/test/spec/mkws-pazpar2.js
@@ -674,7 +674,7 @@ describe("Check SortBy options", function () {
 
         function title_list(prefix) {
             var list = [];
-            var terms = $("div.mkws-records > div.mkws-summary > a");
+            var terms = $("div.mkws-records > div.mkws-summary");
             for (var i = 0; i < terms.length; i++) {
                 var term = $(terms[i]).text().trim();
                 list.push(term);
@@ -707,7 +707,7 @@ describe("Check SortBy options", function () {
             $("div.mkws-records").unbind("DOMNodeInserted DOMNodeRemoved propertychange");
             debug("unbind by sort");
 
-            var records = $("div.mkws-records > div.mkws-summary > a");
+            var records = $("div.mkws-records > div.mkws-summary");
             debug("Sort by got now " + records.length + " records");
             expect(records.length).toBe(per_page_number);
         });
@@ -740,7 +740,7 @@ describe("Check async widget discovery", function () {
       var numInput = $("div.mkws-search input").length;
       debug("Input elements present: " + numInput);
       expect(numInput).toBe(4);
-      var numRec = $("div.mkws-records > div.mkws-summary > a").length;
+      var numRec = $("div.mkws-records > div.mkws-summary").length;
       debug("Records should still be present. There are: " + numRec);
       expect(numRec).toBeGreaterThan(0);
     });