Improve styling for reviewDetails and search results

app/i18n/locales/en.json

@@ -16,7 +16,9 @@
     "people_header": "People",
     "series_header": "Series",
     "books_header": "Books",
-    "see_details": "See Details",
+    "see_interaction_details": "See All Interactions",
+    "see_book_details": "See Book Details",
+    "see_inventaire_details": "See Details",
     "see_details_tooltip": "Opens Inventaire in a new tab/window"
   },
   "interaction": {

app/views/search/index.js

@@ -30,11 +30,11 @@ export const searchView = (state, emit) => {
           html`<h2>${i18n.__('search.books_header')}</h2>`,
           controller.results.works.map(result => {
             return html`<div class="flex search-result">
-              <div class="two-third-500">
+              <div class="two-third-800 half-500">
                 <h3 class="title">${result.name}</h3>
                 ${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null}
               </div>
-              <div class="third-500">
+              <div class="third-800 half-500">
                 ${resultDetails(controller, result)}
               </div>
             </div>`;
@@ -47,14 +47,14 @@ export const searchView = (state, emit) => {
           html`<h2>${i18n.__('search.series_header')}</h2>`,
           controller.results.series.map(result => {
             return html`<div class="flex search-result">
-              <div class="half-500">
+              <div class="two-third-800 half-500">
                 <h3 class="title">${result.name}</h3>
                 ${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null}
               </div>
-              <div class="sixth-500 off-third-500">
+              <div class="third-800 half-500">
                 <span class="tooltip-left" data-tooltip=${i18n.__('search.see_details_tooltip')}>
                   <a class="small pseudo button" href=${result.link} target="_blank">
-                    ${i18n.__('search.see_details')}
+                    ${i18n.__('search.see_inventaire_details')}
                   </a>
                 </span>
               </div>
@@ -68,17 +68,17 @@ export const searchView = (state, emit) => {
           html`<h2>${i18n.__('search.people_header')}</h2>`,
           controller.results.humans.map(result => {
             return html`<div class="flex search-result">
-              <div class="sixth-500">
+              <div class="sixth">
                 ${result.image ? html`<img src=${result.image.url} class="search-image">` : null}
               </div>
-              <div class="half-500">
+              <div class="half-800 two-third">
                 <h3 class="title">${result.name}</h3>
                 ${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null}
               </div>
-              <div class="third-500">
+              <div class="third-800">
                 <span class="tooltip-left" data-tooltip=${i18n.__('search.see_details_tooltip')}>
                   <a class="small pseudo button" href=${result.link} target="_blank">
-                    ${i18n.__('search.see_details')}
+                    ${i18n.__('search.see_inventaire_details')}
                   </a>
                 </span>
               </div>

app/views/search/resultDetails.js

@@ -17,15 +17,79 @@ export const resultDetails = (searchController, result) => {
     </span>
   </label>`;
   
-  const modalContent = html`<article>
+  const modalContent = html`<article class="flex">
-    <span class="tooltip-left" data-tooltip=${i18n.__('search.see_details_tooltip')}>
+    <div class="sixth-700" style="text-align:center;">
-      <a class="small pseudo button" href=${result.link} target="_blank">
+      <h4>Covers</h4>
-        ${i18n.__('search.see_details')}
+      <span style="font-size:3em;"><i class="icon-loading animate-spin"></i></span>
-      </a>
+    </div>
-    </span>
+    <div class="two-third-700">
+      <h4>${i18n.__('interaction.average_rating')}</h4>
+      <span data-tooltip="${result.rating}">${starRating(result.rating)}</span>
+
+      <div class="flex">
+        <div>
+          <h4>Top Reviews</h4>
+        </div>
+        <div>
+          <a href="/book/${result.uri}" class="small button">
+            <span style="margin-right:8px;"><i class="icon-chat"></i></span>
+            <span>${result.reviewCount}</span>
+            <span>${i18n.__('search.see_interaction_details')}</span>
+          </a>
+        </div>
+      </div>
+      <article class="card">
+        <header>
+          {{USERNAME}} ${starRating(Math.ceil(result.rating))}
+        </header>
+        <footer>
+          <div class="content">
+            <p>
+              The only thing worse than yellow snow is green snow. Let's put a touch more of the magic here.
+              With practice comes confidence. You have to allow the paint to break to make it beautiful.
+            </p>
+            <p>
+              Let all these little things happen. Don't fight them. Learn to use them. Imagination is the key
+              to painting. You can't make a mistake. Anything that happens you can learn to use - and make
+              something beautiful out of it. This is a fantastic little painting. In painting, you have unlimited
+              power. You have the ability to move mountains. We don't have anything but happy trees here.
+            </p>
+            <p>
+              If what you're doing doesn't make you happy - you're doing the wrong thing. A fan brush can be
+              your best friend. Mountains are so simple, they're hard.
+            </p>
+          </div>
+          <span class="tooltip-top" data-tooltip=${i18n.__('interaction.heart')}>
+            <button class="pseudo">
+              <i class="icon-heart-outline"></i>
+            </button>
+          </span>
+          <span>
+            ${result.reviewCount}
+          </span>
+        </footer>
+      </article>
+    </div>
+    <div class="sixth-700">
+      <p>
+        <span data-tooltip=${i18n.__('interaction.add')}>
+          <button class="success">
+            <i class="icon-plus"></i>
+          </button>
+        </span>
+      </p>
+      <p>
+        <span data-tooltip=${i18n.__('search.see_details_tooltip')}>
+          <a class="small pseudo button" href=${result.link} target="_blank">
+            ${i18n.__('search.see_book_details')}
+          </a>
+        </span>
+      </p>
+    </div>
   </article>`;
   
   return modal(modalId, searchController, modalContent, {
+    styles: "width:90%;",
     buttonHTML, // This should be replaced with buttonHTML containing the ratings and number of reviews etc.
     headerText: result.name,
   });