--- /dev/null
+/* 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-termlists {
+ 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-termlists {
+ margin-right: 30px;
+ }
+}
+@media screen and (max-width: 900px) {
+ .mkws-pager {
+ margin: 0;
+ }
+ .mkws-pager > div {
+ margin-top: 10px;
+ }
+ .main {
+ flex-wrap: wrap;
+ }
+ .mkws-termlists {
+ 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
+}
+
--- /dev/null
+<!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-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-termlists"></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>
+
+
}
.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;
}
.mkws-google-image img {
max-width: 100%;
- max-height: 200px;
+ max-height: 180px;
padding: 1em 0 .5em;
}
.list-group-item {
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;
-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;
+ }
+}
<!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>
<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">
var mkws_config = { sp_auth_credentials: "credo/emu" };
</script>
<script type="text/javascript" src="//mkws.indexdata.com/mkws-complete.js"></script>
- <!-- <script type="text/javascript" src="//mkws.local/mkws-complete.js"></script> -->
<link rel="stylesheet" type="text/css" href="topic.css">
<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>
<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}}
<div class='page-header container' autosearch='!param!q'>
<div class="row">
<!-- reference entry -->
- <div class="jumbotron panel col-md-8">
+ <div class="jumbotron panel col-md-8 col-sm-7">
<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">
+ <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>
<!-- 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>
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>
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>
</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>
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();
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}}
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>
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}}"/>
+ </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}}
$("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);
});
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);
});