Separate container for non-thumbnail metadata makes it all better.

diff --git a/examples/htdocs/prettysimple.css b/examples/htdocs/prettysimple.css
index 262b5bf..ce5a2c7 100644 (file)
--- a/examples/htdocs/prettysimple.css
+++ b/examples/htdocs/prettysimple.css
@@ -32,11 +32,9 @@ a {
 .mkws-search {
   width: 30em;
   margin-left: auto;
 .mkws-search {
   width: 30em;
   margin-left: auto;

-  flex: 0 0 min-content;

 }
 .mkws-results {
   display: flex;
 }
 .mkws-results {
   display: flex;

-  margin-left: 70px;

 }
 .mkws-termlists {
   margin-top: 72px;
 }
 .mkws-termlists {
   margin-top: 72px;

@@ -48,7 +46,6 @@ a {
 /* https://github.com/philipwalton/solved-by-flexbox/blob/master/_sass/components/_input-add-on.scss */
 .mkws-search-form {
   display: flex;
 /* https://github.com/philipwalton/solved-by-flexbox/blob/master/_sass/components/_input-add-on.scss */
 .mkws-search-form {
   display: flex;

-  width: min-content;

   margin-left: auto;
   margin-bottom: 1em;
 }
   margin-left: auto;
   margin-bottom: 1em;
 }

@@ -171,11 +168,14 @@ a {
 
 /* Result containers */
 .mkws-summary {
 
 /* Result containers */
 .mkws-summary {

-  height: 120px;
-  width: 100%;

   padding: 40px 20px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   display: flex;
   padding: 40px 20px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   display: flex;

+  flex-direction: row;
+}
+.result-data {
+  flex: 1;
+  display: flex;

   flex-direction: column;
   flex-wrap: wrap;
   align-items: flex-start;
   flex-direction: column;
   flex-wrap: wrap;
   align-items: flex-start;

@@ -184,14 +184,15 @@ a {
 }
 
 /* Result fields */
 }
 
 /* Result fields */

+.result-data > * {
+  flex 1;
+}

 .result-date {
 .result-date {

-  flex: 1 1 min-content;

   order: 1;
   font-size: 14px;
   color: rgba(0, 0, 0, 0.3);
 }
 .result-title {
   order: 1;
   font-size: 14px;
   color: rgba(0, 0, 0, 0.3);
 }
 .result-title {

-  flex: 1 1 min-content;

   order: 2;
   font-family: "Open Sans Light", sans-serif;
   font-size: 24px;
   order: 2;
   font-family: "Open Sans Light", sans-serif;
   font-size: 24px;

@@ -200,11 +201,9 @@ a {
   margin-bottom: 4px;
 }
 .result-title-remainder {
   margin-bottom: 4px;
 }
 .result-title-remainder {

-  flex: 1 1 min-content;

   order: 3;
   font-family: "Open Sans Light", sans-serif;
   font-size: 12px;
   order: 3;
   font-family: "Open Sans Light", sans-serif;
   font-size: 12px;

-  line-height: .8;

   margin-top: -4px;
   margin-bottom: 4px;
   overflow: hidden; 
   margin-top: -4px;
   margin-bottom: 4px;
   overflow: hidden; 

@@ -212,7 +211,6 @@ a {
   white-space: nowrap;
 }
 .result-description {
   white-space: nowrap;
 }
 .result-description {

-  flex: 1 1 min-content;

   order: 4;
   font-family: "Open Sans Light", sans-serif;
   font-size: 18px;
   order: 4;
   font-family: "Open Sans Light", sans-serif;
   font-size: 18px;

@@ -221,7 +219,6 @@ a {
   overflow: hidden;
 }
 .result-author {
   overflow: hidden;
 }
 .result-author {

-  flex: 1 1 min-content;

   order: 5;
   font-weight: bold;
   font-size: 12px;
   order: 5;
   font-weight: bold;
   font-size: 12px;

diff --git a/src/templates/summary.handlebars b/src/templates/summary.handlebars
index 3838d17..b29f3e2 100644 (file)
--- a/src/templates/summary.handlebars
+++ b/src/templates/summary.handlebars
@@ -15,27 +15,29 @@ md-* - metadata fields passed through from backend
     <img src="{{md-thumburl}}"/>
   </a>
 {{/if}}
     <img src="{{md-thumburl}}"/>
   </a>
 {{/if}}

-<span class="result-title">
-<a href="#" id="{{detailLinkId}}" onclick="{{detailClick}}">
-  {{md-title}}
-</a>
-</span>
-{{#if md-title-remainder}}
-  <span class="result-title-remainder">{{md-title-remainder}}</span>
-{{/if}}
-{{#if md-author}}
-  <span class="result-author">{{md-author}}</span>
-{{else}}
-  {{#if md-title-responsibility}}
-    <span class="result-author">{{md-title-responsibility}}</span>
+<div class="result-data">
+  <span class="result-title">
+  <a href="#" id="{{detailLinkId}}" onclick="{{detailClick}}">
+    {{md-title}}
+  </a>
+  </span>
+  {{#if md-title-remainder}}
+    <span class="result-title-remainder">{{md-title-remainder}}</span>

   {{/if}}
   {{/if}}

-{{/if}}
-{{#if md-description}}
-  <div class="result-description">{{md-description}}</div>
-{{/if}}
-{{#if md-date}}
-  <span class="result-date">{{md-date}}</span>
-{{/if}}
-{{#if renderedDetails}}
-  {{{renderedDetails}}}
-{{/if}}
+  {{#if md-author}}
+    <span class="result-author">{{md-author}}</span>
+  {{else}}
+    {{#if md-title-responsibility}}
+      <span class="result-author">{{md-title-responsibility}}</span>
+    {{/if}}
+  {{/if}}
+  {{#if md-description}}
+    <div class="result-description">{{md-description}}</div>
+  {{/if}}
+  {{#if md-date}}
+    <span class="result-date">{{md-date}}</span>
+  {{/if}}
+  {{#if renderedDetails}}
+    {{{renderedDetails}}}
+  {{/if}}
+</div>