fix css bookmark

This commit is contained in:
2020-08-02 16:26:38 +02:00
parent 81b600339f
commit 3d5f18c477
5 changed files with 18 additions and 10 deletions

View File

@@ -2,12 +2,13 @@
<div class="bg-white rounded text-black m-2 p-2"> <div class="bg-white rounded text-black m-2 p-2">
<div v-if="!edit" class="edit flex flex-wrap items-center"> <div v-if="!edit" class="edit flex flex-wrap items-center">
<a :href="bookmark.data.attributes.data.url" <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" <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"
:src="bookmark.data.attributes.data.favicon" :src="bookmark.data.attributes.data.favicon"
alt=""> alt="">
<span class="font-bold"> <span class="font-bold border border-transparent">
{{ bookmark.data.attributes.data.name }} {{ bookmark.data.attributes.data.name }}
</span> </span>
</a> </a>
@@ -15,20 +16,20 @@
<svg-vue icon="edit" class="inline w-4 fill-current cursor-pointer mx-2" /> <svg-vue icon="edit" class="inline w-4 fill-current cursor-pointer mx-2" />
</span> </span>
</div> </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" <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" :src="bookmark.data.attributes.data.favicon"
alt=""> alt="">
<input <input
type="text" type="text"
v-model="name" v-model="name"
@keypress.enter="update" @keypress.enter="update"
class="flex-1 w-10 font-semibold pl-1"> class="flex-auto min-w-24 font-semibold p-0 pl-1">
<div @click="edit = !edit"> <div @click="edit = !edit" class="flex-none">
<svg-vue icon="edit" class="w-4 fill-current cursor-pointer mx-2" /> <svg-vue icon="edit" class="w-4 fill-current cursor-pointer mx-2" />
</div> </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" /> <svg-vue icon="close" class="w-4 fill-current text-red-dark cursor-pointer mx-2" />
</div> </div>
</div> </div>

View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="mx-2 p-2"> <div class="mx-2 p-2">
<div class="box"> <div class="box">
<div class="flex justify-between"> <div class="flex justify-between flex-wrap">
<h1 class="page-title">Administration</h1> <h1 class="page-title">Administration</h1>
<a href="#" @click.prevent="logout" class="btn"> <a href="#" @click.prevent="logout" class="btn">
<svg-vue icon="logout" /> Déconnexion <svg-vue icon="logout" /> Déconnexion

View File

@@ -10,7 +10,7 @@
<p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p> <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
</div> </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"> <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"> <div class="-m-4">
<img :src="memo.data.attributes.thumbnail_cover_image.data.attributes.path" alt="" class="w-full rounded rounded-b-none"> <img :src="memo.data.attributes.thumbnail_cover_image.data.attributes.path" alt="" class="w-full rounded rounded-b-none">
</div> </div>

View File

@@ -67,6 +67,10 @@ textarea {
max-width: 12rem; max-width: 12rem;
} }
.min-w-24 {
min-width: 8rem;
}
.min-h-16 { .min-h-16 {
min-height: 4rem; min-height: 4rem;
} }

5
tailwind.config.js vendored
View File

@@ -54,7 +54,10 @@ module.exports = {
'128': '32rem', '128': '32rem',
}, },
width: { width: {
'96': '24rem' '96': '24rem',
},
maxWidth: {
'124': '31rem',
} }
}, },
}, },