fix css bookmark
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
4
resources/sass/components/_base.scss
vendored
4
resources/sass/components/_base.scss
vendored
@@ -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
5
tailwind.config.js
vendored
@@ -54,7 +54,10 @@ module.exports = {
|
|||||||
'128': '32rem',
|
'128': '32rem',
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
'96': '24rem'
|
'96': '24rem',
|
||||||
|
},
|
||||||
|
maxWidth: {
|
||||||
|
'124': '31rem',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user