added samples to flagcollection and linked material in thematique

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1549,10 +1549,7 @@ aside.messages {
         #content-left .flag-collection > ul > li article.card.minicard > header h1 {
           margin: 0; }
       #content-left .flag-collection > ul > li article.card.minicard > nav.tools {
-        top: auto;
+        padding: 0 0.2em; }
-        bottom: 0;
-        padding: 0 0.2em;
-        background: transparent; }
         #content-left .flag-collection > ul > li article.card.minicard > nav.tools .mdi.unflag {
           cursor: pointer; }
 
@@ -1878,12 +1875,12 @@ article.card {
       article.card.minicard > header span.ref {
         line-height: 0.5; }
     article.card.minicard > nav.tools {
-      top: auto;
-      bottom: 0;
       padding: 0 0.2em;
-      background: transparent; }
+      background: rgba(255, 255, 255, 0.8); }
       article.card.minicard > nav.tools .mdi.unflag {
         cursor: pointer; }
+      article.card.minicard > nav.tools .tool.samples:hover .tool-content {
+        max-width: 140px; }
   article.card.linkedmaterialcard {
     width: 190px;
     height: 110px; }
@@ -2003,6 +2000,12 @@ article.card {
           color: #1a1a1a; }
         article.card nav.tools .tool.flags li.create-flag span.add-btn.loading:before {
           animation: rotating 2s linear infinite; }
+    article.card nav.tools .tool.samples .tool-content {
+      font-size: 0.756em; }
+      article.card nav.tools .tool.samples .tool-content ul li {
+        font-weight: bold; }
+        article.card nav.tools .tool.samples .tool-content ul li span.showroom {
+          font-weight: 400; }
   article.card:hover nav.tools {
     opacity: 1; }
   article.card section.images {
@@ -2087,7 +2090,7 @@ article.card {
       article.card.modal-card section.col-right nav.tools div.tool-content {
         min-width: 385px; }
     article.card.modal-card section.col-right section.tool.samples div.tool-content ul {
-      font-size: 0.882em;
+      font-size: 0.756em;
       font-weight: 300; }
       article.card.modal-card section.col-right section.tool.samples div.tool-content ul li {
         padding-right: 0.5em; }
@@ -2150,9 +2153,9 @@ article.card {
 #main-content > article.thematique div.col-left section.visuel img {
   width: 100%; }
 
-#main-content > article.thematique aside.linked-materials ul {
+#main-content > article.thematique aside.linked-materials div.card-list > ul {
   width: calc(100% + 13px); }
-  #main-content > article.thematique aside.linked-materials ul li {
+  #main-content > article.thematique aside.linked-materials div.card-list > ul > li {
     display: inline-block;
     vertical-align: top;
     width: 205px;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -493,13 +493,18 @@ aside.messages{
             }
           }
           >nav.tools{
-            top: auto;
+            // top: auto;
-            bottom: 0;
+            // bottom: 0;
             padding:0 0.2em;
-            background:transparent;
+            // background:transparent;
             .mdi.unflag{
               cursor: pointer;
             }
+            .tool.samples{
+              .tool-content{
+
+              }
+            }
           }
         }
       }
@@ -998,13 +1003,18 @@ article.card{
       }
     }
     >nav.tools{
-      top: auto;
+      // top: auto;
-      bottom: 0;
+      // bottom: 0;
       padding:0 0.2em;
-      background:transparent;
+      background:rgba(255,255,255, 0.8);
       .mdi.unflag{
         cursor: pointer;
       }
+      .tool.samples:hover{
+        .tool-content{
+          max-width:140px;
+        }
+      }
     }
   }
   &.linkedmaterialcard{
@@ -1117,6 +1127,7 @@ article.card{
           max-height: 195px;
           max-width:200px;
         }
+
       }
     }
     .tool.flags{
@@ -1164,9 +1175,21 @@ article.card{
         }
       }
     }
+    .tool.samples{
+      .tool-content{
+        font-size: 0.756em;
+        ul li{
+          font-weight: bold;
+          span.showroom{
+            font-weight: 400;
+          }
+        }
+      }
+    }
     opacity: 0;
     transition: opacity 0.2s ease-in-out;
   }
+
   &:hover{
     nav.tools{
       opacity:1;
@@ -1304,7 +1327,7 @@ article.card{
           ul{
             // display: flex;
             // flex-flow: row wrap;
-            font-size: 0.882em;
+            font-size: 0.756em;
             font-weight: 300;
             // line-height: 1.35;
             li{
@@ -1426,14 +1449,17 @@ article.card{
     }
   }
   aside.linked-materials{
-    ul{
+    div.card-list{
-      width:calc(100% + #{$column_goutiere});
+      >ul{
-      li{
+        width:calc(100% + #{$column_goutiere});
-        display: inline-block;
+        >li{
-        vertical-align: top;
+          display: inline-block;
-        width:$column_width;
+          vertical-align: top;
-        margin:0 $column_goutiere $column_goutiere 0;
+          width:$column_width;
+          margin:0 $column_goutiere $column_goutiere 0;
+        }
       }
+
     }
     h3.field__label{
       font-size: 1em;

web/themes/custom/materiotheme/vuejs/api/gql/materiauflaglist.fragment.gql

@@ -6,5 +6,12 @@ fragment MateriauFields on Materiau {
     style_minicard{
       url
     }
+  }
+	samples{
+    showroom{
+      name
+      id
+    }
+    location
   }
 }

web/themes/custom/materiotheme/vuejs/api/gql/materiaumodal.fragment.gql

@@ -1,7 +1,9 @@
 fragment MateriauFields on Materiau {
+  id
   title
 	short_description
   reference
+  body
   note{
     id
     contenu
@@ -68,16 +70,6 @@ fragment MateriauFields on Materiau {
       family_name
     }
   }
-  attachments {
-    description
-    file{
-      fid
-      filename
-      url
-      filesize
-    }
-  }
-  body
 	samples{
     showroom{
       name

web/themes/custom/materiotheme/vuejs/api/gql/thematique.fragment.gql

@@ -14,6 +14,13 @@ fragment ThematiqueFields on Thematique {
       url
       style_cardmedium_url
       style_hd_url
+    }
+  	samples{
+      showroom{
+        name
+        id
+      }
+      location
     }
   }
   images {

web/themes/custom/materiotheme/vuejs/components/Content/MiniCard.vue

@@ -7,6 +7,20 @@
       <span v-if="item.reference" class="ref">{{ item.reference }}</span>
     </header>
     <nav class="tools">
+      <section class="tool samples" v-if="item.samples && item.samples.length">
+        <span class="btn mdi mdi-beaker-outline"/>
+        <div class="tool-content">
+          <span class="label">{{ $t("materio.Samples") }}</span>
+          <ul>
+            <li
+              v-for="sample in item.samples"
+              :key="sample.showroom.id"
+            >
+              <span class="showroom">{{ sample.showroom.name }}</span>: {{ sample.location }}
+            </li>
+          </ul>
+        </div>
+      </section>
       <section class="tool flags">
         <span
           class="mdi unflag"

web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue

@@ -7,7 +7,7 @@
       <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
         <h5
           :flagcollid="coll.id"
-          @click.prevent="onOpenFlagColl"
+          @click.prevent="onOpenFlagColl(coll.id)"
         >{{ coll.name }} <span class="length">({{ coll.items.length }})</span></h5>
         <div class="actions">
           <span
@@ -133,8 +133,8 @@ export default {
           this.is_deleting_folder = false
       }
     },
-    onOpenFlagColl (e) {
+    onOpenFlagColl (flagcollid) {
-      const flagcollid = e.target.getAttribute('flagcollid');
+      // const flagcollid = e.target.getAttribute('flagcollid');
       console.log("UserFlags onOpenFlagColl", flagcollid);
       this.openFlagColl(flagcollid)
         .then(() => {