From 3accfb5b66e43eadaee13ccc6a2b91845587ae6b Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Fri, 9 Jul 2021 13:29:39 +0200
Subject: [PATCH] add ButtonUrl component & misc fixes

---
 src/components/globals/ButtonImage.vue     |  2 +-
 src/components/globals/ButtonUrl.vue       | 68 ++++++++++++++++++++++
 src/components/nodes/NodeViewBody.vue      |  2 +
 src/components/nodes/NodeViewFigure.vue    | 13 +++--
 src/components/nodes/NodeViewHeaderRef.vue |  2 +-
 src/components/nodes/NodeViewTitle.vue     |  8 ++-
 src/pages/gallery/GalleryView.vue          |  4 +-
 7 files changed, 87 insertions(+), 12 deletions(-)
 create mode 100644 src/components/globals/ButtonUrl.vue

diff --git a/src/components/globals/ButtonImage.vue b/src/components/globals/ButtonImage.vue
index df27926..08834d6 100644
--- a/src/components/globals/ButtonImage.vue
+++ b/src/components/globals/ButtonImage.vue
@@ -32,7 +32,7 @@ export default {
   border: 0;
   transition: 100ms;
 
-  @include media-breakpoint-up($size-bp) {
+  @media (orientation: landscape) {
     width: 250px;
     height: 250px;
 
diff --git a/src/components/globals/ButtonUrl.vue b/src/components/globals/ButtonUrl.vue
new file mode 100644
index 0000000..b1b2ef5
--- /dev/null
+++ b/src/components/globals/ButtonUrl.vue
@@ -0,0 +1,68 @@
+<template>
+  <b-button
+    v-on="$listeners"
+    v-bind="$attrs"
+    variant="link"
+    class="btn-url"
+    :href="link.url"
+    target="_blank"
+  >
+    <span class="sr-only">{{ link.title }}</span>
+    <svg aria-hiden="true" viewBox="0 0 39 39">
+      <path d="M 18,6 h-12 v27 h27 v-12" />
+      <path d="M 24,6 h9 v9" />
+      <path d="M 33,6 13.5,25.5" />
+    </svg>
+  </b-button>
+</template>
+
+<script>
+export default {
+  name: 'ButtonUrl',
+
+  props: {
+    link: { type: Object, required: true }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-url {
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  border: 0;
+  line-height: 0;
+
+  position: relative;
+  top: -3px;
+
+  @include media-breakpoint-up($size-bp) {
+    top: -5px;
+    width: 40px;
+    height: 40px;
+  }
+
+  &:hover,
+  &:focus {
+    path {
+      stroke: $black;
+    }
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    display: inline;
+  }
+
+  path {
+    fill: none;
+    stroke: lighten($black, 15%);
+    stroke-width: 4px;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}
+</style>
diff --git a/src/components/nodes/NodeViewBody.vue b/src/components/nodes/NodeViewBody.vue
index 504ce06..0eb5168 100644
--- a/src/components/nodes/NodeViewBody.vue
+++ b/src/components/nodes/NodeViewBody.vue
@@ -137,7 +137,9 @@ export default {
   width: 100%;
 
   img {
+    display: block;
     max-width: 100%;
+    max-height: 80vh;
   }
 
   font: {
diff --git a/src/components/nodes/NodeViewFigure.vue b/src/components/nodes/NodeViewFigure.vue
index 566c226..005a87b 100644
--- a/src/components/nodes/NodeViewFigure.vue
+++ b/src/components/nodes/NodeViewFigure.vue
@@ -10,22 +10,23 @@
     </div>
 
     <figcaption class="mt-3">
-      <p class="m-0">
-        <strong>{{ toCommaList(node.authors) }}</strong>,
-        <em v-html="' ' + trim(node.title)" />
-        <br class="d-none d-md-inline">
-        {{ node.date.start }}
-      </p>
+      <node-view-title :node="node" tag="p" class="m-0" />
     </figcaption>
   </figure>
 </template>
 
 <script>
 import { trim, toCommaList } from '@/helpers/common'
+import { NodeViewTitle } from '@/components/nodes'
+
 
 export default {
   name: 'NodeViewFigure',
 
+  components: {
+    NodeViewTitle
+  },
+
   props: {
     node: { type: Object, required: true }
   },
diff --git a/src/components/nodes/NodeViewHeaderRef.vue b/src/components/nodes/NodeViewHeaderRef.vue
index 22b04cc..aa1d892 100644
--- a/src/components/nodes/NodeViewHeaderRef.vue
+++ b/src/components/nodes/NodeViewHeaderRef.vue
@@ -14,7 +14,7 @@
 
       <node-view-title
         :node="node" tag="h4"
-        block edition
+        block edition url
         class="mr-auto"
       />
     </div>
diff --git a/src/components/nodes/NodeViewTitle.vue b/src/components/nodes/NodeViewTitle.vue
index b950137..a6bb445 100644
--- a/src/components/nodes/NodeViewTitle.vue
+++ b/src/components/nodes/NodeViewTitle.vue
@@ -10,7 +10,10 @@
       class="node-view-title-container"
     >
       <slot name="default" />
-      <span><strong>{{ toCommaList(node.authors) }}</strong>,</span>
+      <span>
+        <strong>{{ toCommaList(node.authors) }}</strong>,
+        <button-url v-if="url && node.piece" :link="node.piece" />
+      </span>
       <span>
         <span v-if="node.preTitle" v-html="' ' + trim(node.preTitle) + ','" />
         <em v-html="' ' + trim(node.italTitle || node.title) || 'pas de titre ital'" />
@@ -39,7 +42,8 @@ export default {
     link: { type: Boolean, default: false },
     block: { type: Boolean, default: false },
     edition: { type: Boolean, default: false },
-    noDate: { type: Boolean, default: false }
+    noDate: { type: Boolean, default: false },
+    url: { type: Boolean, default: false }
   },
 
   data () {
diff --git a/src/pages/gallery/GalleryView.vue b/src/pages/gallery/GalleryView.vue
index 1419b1b..108f574 100644
--- a/src/pages/gallery/GalleryView.vue
+++ b/src/pages/gallery/GalleryView.vue
@@ -106,7 +106,7 @@ export default {
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    height: 100%;
+    height: calc(100% - 4rem);
     margin: auto;
 
     width: calc(100% - 4rem);
@@ -115,7 +115,7 @@ export default {
       width: calc(100% - 270px);
 
       @include media-breakpoint-up($size-bp) {
-        width: calc(100% - 450px);
+        width: calc(100% - 500px);
       }
     }