#2080 results details

assets/css/app.scss

@@ -1401,19 +1401,23 @@ footer[role="tools"]{
     @include accordeon-transition($list-item-h * 3);
     >header{
       >*{
-        padding:0 0 5px;
+        // padding:0 0 5px;
         // line-height: $base-line / 2;
         &.v-select{
           padding-top:5px;
         }
       }
 
-      .search-keys{
+      div.results-details{
-        font-size: 0.756em;
+        line-height: $base-line * 0.5;
-        font-weight: 500;
+        .search-keys{
-      }
+          font-size: 0.756em;
-      .results-count{
+          font-weight: 500;
-        font-size: 0.756em;
+        }
+        .results-count{
+          white-space:nowrap;
+          font-size: 0.756em;
+        }
       }
     }
     .results-list{

src/components/Content/TocItem.vue

@@ -191,9 +191,9 @@ export default {
         id: this.editionid,
         textid: this.item.uuid,
         title: this.item.title,
-        editionTitle: this.editionTitle
+        editionTitle: this.editionTitle,
-        // pages: this.item.pages,
+        pages: this.item.pages,
-        // size: this.item.size
+        size: this.item.size
       })
       this.$emit('onClickTocItem', e.target.getAttribute('uuid'))
     },

src/components/nav/Results.vue

@@ -8,8 +8,8 @@
     >
       <header class="small-col-12 med-col-1 large-col-1">
         <h2>Resultats</h2>
-        <div>
+        <div class="results-details">
-          <span class="search-keys">{{ searchedKeys }}</span>
+          <span class="search-keys">{{ searchedKeys }}</span><br>
           <span v-if="resultsQuantity" class="results-count">{{ resultsCount }}</span>
         </div>
         <v-select
@@ -111,7 +111,7 @@ export default {
        * above.
        */
       const popper = createPopper(component.$refs.toggle, dropdownList, {
-        placement: 'top',
+        placement: 'bottom',
         modifiers: [
           {
             name: 'offset',
@@ -124,7 +124,7 @@ export default {
             enabled: true,
             phase: 'write',
             fn ({ state }) {
-              component.$el.classList.toggle('drop-up', state.placement === 'top')
+              component.$el.classList.toggle('drop-up', state.placement === 'bottom')
             }
           }]
       })