Version 1.0 #26

Merged
dbroqua merged 19 commits from develop into master 2022-04-08 15:03:01 +02:00
5 changed files with 42 additions and 16 deletions
Showing only changes of commit b27cbd467b - Show all commits

View file

@ -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);
}
}
} }

View file

@ -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">

View file

@ -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 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</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>
&lt;div class="grid grid-cols-1 md:grid-cols-2 list hover"&gt;
&lt;div class="item"&gt;
Contenu
&lt;/div&gt;
&lt;/div&gt;
</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">

View file

@ -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>