From 6d659322b5e8e0f691297fd79684ee21d8e88013 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Tue, 1 Feb 2022 22:00:13 +0100
Subject: [PATCH] add DescriptionRow component

---
 app/src/components/globals/DescriptionRow.vue | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 app/src/components/globals/DescriptionRow.vue

diff --git a/app/src/components/globals/DescriptionRow.vue b/app/src/components/globals/DescriptionRow.vue
new file mode 100644
index 00000000..c6056892
--- /dev/null
+++ b/app/src/components/globals/DescriptionRow.vue
@@ -0,0 +1,59 @@
+<template>
+  <b-row no-gutters class="description-row">
+    <b-col v-bind="cols_">
+      <slot name="term">
+        <strong>{{ term }}</strong>
+      </slot>
+    </b-col>
+
+    <b-col>
+      <slot name="default">
+        {{ details }}
+      </slot>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+export default {
+  name: 'DescriptionRow',
+
+  props: {
+    term: { type: String, default: null },
+    details: { type: String, default: null },
+    cols: { type: Object, default: () => ({ md: 4, xl: 3 }) }
+  },
+
+  computed: {
+    cols_ () {
+      return Object.assign({ md: 4, xl: 3 }, this.cols)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.description-row {
+  @include media-breakpoint-up(md) {
+    margin: .5rem 0;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+      border-radius: 0.2rem;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+
+    &:not(:last-of-type) {
+      margin-bottom: 0.5rem;
+      padding-bottom: 0.5rem;
+      border-bottom: $border-width solid $card-border-color;
+    }
+  }
+
+  .col {
+    display: flex;
+  }
+}
+</style>