From 3d5f18c4775ec770b84520765c14bc3eb7b91283 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Sun, 2 Aug 2020 16:26:38 +0200
Subject: [PATCH] fix css bookmark

---
 resources/js/views/Bookmark/Bookmark.vue | 15 ++++++++-------
 resources/js/views/DashBoard.vue         |  2 +-
 resources/js/views/Memo/MemoIndex.vue    |  2 +-
 resources/sass/components/_base.scss     |  4 ++++
 tailwind.config.js                       |  5 ++++-
 5 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/resources/js/views/Bookmark/Bookmark.vue b/resources/js/views/Bookmark/Bookmark.vue
index 9891fde..3b04611 100644
--- a/resources/js/views/Bookmark/Bookmark.vue
+++ b/resources/js/views/Bookmark/Bookmark.vue
@@ -2,12 +2,13 @@
     <div class="bg-white rounded text-black m-2 p-2">
         <div v-if="!edit" class="edit flex flex-wrap items-center">
             <a :href="bookmark.data.attributes.data.url"
-               class="flex-1">
+               target="_blank"
+               class="flex-1 no-underline">
                 <img v-if="bookmark.data.attributes.data.favicon"
                      class="w-5 h-5 mr-2 inline-block"
                      :src="bookmark.data.attributes.data.favicon"
                      alt="">
-                <span class="font-bold">
+                <span class="font-bold border border-transparent">
                     {{ bookmark.data.attributes.data.name }}
                 </span>
             </a>
@@ -15,20 +16,20 @@
                 <svg-vue icon="edit" class="inline w-4 fill-current cursor-pointer mx-2" />
             </span>
         </div>
-        <div v-else class="flex items-center">
+        <div v-else class="flex items-center flex-no-wrap">
             <img v-if="bookmark.data.attributes.data.favicon"
-                 class="w-5 h-5 mr-2 inline-block"
+                 class="w-5 h-5 mr-2 inline-block flex-none"
                  :src="bookmark.data.attributes.data.favicon"
                  alt="">
             <input
                 type="text"
                 v-model="name"
                 @keypress.enter="update"
-                class="flex-1 w-10 font-semibold pl-1">
-            <div @click="edit = !edit">
+                class="flex-auto min-w-24 font-semibold p-0 pl-1">
+            <div @click="edit = !edit" class="flex-none">
                 <svg-vue icon="edit" class="w-4 fill-current cursor-pointer mx-2" />
             </div>
-            <div @click="destroy">
+            <div @click="destroy" class="flex-none">
                 <svg-vue icon="close" class="w-4 fill-current text-red-dark cursor-pointer mx-2" />
             </div>
         </div>
diff --git a/resources/js/views/DashBoard.vue b/resources/js/views/DashBoard.vue
index ad326e0..fb017d1 100644
--- a/resources/js/views/DashBoard.vue
+++ b/resources/js/views/DashBoard.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="mx-2 p-2">
         <div class="box">
-            <div class="flex justify-between">
+            <div class="flex justify-between flex-wrap">
                 <h1 class="page-title">Administration</h1>
                 <a href="#" @click.prevent="logout" class="btn">
                     <svg-vue icon="logout" /> Déconnexion
diff --git a/resources/js/views/Memo/MemoIndex.vue b/resources/js/views/Memo/MemoIndex.vue
index 6c1b5e9..4f1d0cb 100755
--- a/resources/js/views/Memo/MemoIndex.vue
+++ b/resources/js/views/Memo/MemoIndex.vue
@@ -10,7 +10,7 @@
                 <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
             </div>
             <router-link v-for="memo in memos" :key="memo.data.memo_id" :to="'/memos/' + memo.data.memo_id" class="flex-initial sm:mx-auto md:w-1/2 md:mx-0 lg:w-1/3 xl:w-1/4 mb-4 no-underline">
-                <div class="card">
+                <div class="card sm:max-w-124">
                     <div class="-m-4">
                         <img :src="memo.data.attributes.thumbnail_cover_image.data.attributes.path" alt="" class="w-full rounded rounded-b-none">
                     </div>
diff --git a/resources/sass/components/_base.scss b/resources/sass/components/_base.scss
index c99e067..e5daee9 100644
--- a/resources/sass/components/_base.scss
+++ b/resources/sass/components/_base.scss
@@ -67,6 +67,10 @@ textarea {
     max-width: 12rem;
 }
 
+.min-w-24 {
+    min-width: 8rem;
+}
+
 .min-h-16 {
     min-height: 4rem;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index f118a0b..9ce97a4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -54,7 +54,10 @@ module.exports = {
                 '128': '32rem',
             },
             width: {
-                '96': '24rem'
+                '96': '24rem',
+            },
+            maxWidth: {
+                '124': '31rem',
             }
         },
     },