Version 1.0 #26
5 changed files with 42 additions and 16 deletions
|
@ -30,10 +30,6 @@
|
||||||
border-right: 1px solid var(--border-color);
|
border-right: 1px solid var(--border-color);
|
||||||
margin-right: -1px;
|
margin-right: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--border-color);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
@ -50,4 +46,10 @@
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.hover {
|
||||||
|
.item:hover {
|
||||||
|
background-color: var(--border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -15,7 +15,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 list">
|
<div class="grid grid-cols-1 md:grid-cols-2 list hover">
|
||||||
<div class="item" v-if="!loading" v-for="item in items">
|
<div class="item" v-if="!loading" v-for="item in items">
|
||||||
<a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
|
<a @click="loadDetails(item.id)" class="title">{{ item.artists_sort }} {{ item.title }}</a>
|
||||||
<div class="grid grid-cols-2 md:grid-cols-4">
|
<div class="grid grid-cols-2 md:grid-cols-4">
|
||||||
|
|
|
@ -318,6 +318,7 @@
|
||||||
<i class="icon-blind">.icon-blind</i>
|
<i class="icon-blind">.icon-blind</i>
|
||||||
|
|
||||||
<h2 id="listes">Les listes</h2>
|
<h2 id="listes">Les listes</h2>
|
||||||
|
<h3>Liste normale</h3>
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 list">
|
<div class="grid grid-cols-1 md:grid-cols-2 list">
|
||||||
<div class="item" v-for="item in items">
|
<div class="item" v-for="item in items">
|
||||||
<span class="title">
|
<span class="title">
|
||||||
|
@ -340,6 +341,29 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</pre>
|
</pre>
|
||||||
|
<h3>Liste avec effet au hover</h3>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 list hover">
|
||||||
|
<div class="item" v-for="item in items">
|
||||||
|
<span class="title">
|
||||||
|
{{ item.title }}
|
||||||
|
</span>
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-4">
|
||||||
|
<div>
|
||||||
|
<img :src="item.thumb" :alt="item.title" />
|
||||||
|
</div>
|
||||||
|
<div class="md:col-span-3">
|
||||||
|
{{ item.lorem }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<pre>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 list hover">
|
||||||
|
<div class="item">
|
||||||
|
Contenu
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</pre>
|
||||||
|
|
||||||
<h2 id="paginations">Les paginations</h2>
|
<h2 id="paginations">Les paginations</h2>
|
||||||
<nav class="pagination" role="navigation" aria-label="Pagination">
|
<nav class="pagination" role="navigation" aria-label="Pagination">
|
||||||
|
|
|
@ -43,7 +43,7 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 list">
|
<div class="grid grid-cols-1 md:grid-cols-2 list hover">
|
||||||
<div class="item" v-if="!loading" v-for="item in items">
|
<div class="item" v-if="!loading" v-for="item in items">
|
||||||
<span class="title">
|
<span class="title">
|
||||||
<a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>
|
<a :href="'/ma-collection/' + item._id">{{ item.artists_sort}} - {{ item.title }}</a>
|
||||||
|
|
Loading…
Reference in a new issue