shylie/serra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Lazy load images

Browse Source
This commit is contained in:
Florian Baumann 2023-02-27 15:20:39 +01:00
parent 48086358d2
commit 04d5f20b46
1 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
templates/index.tmpl
View File

@ -8,27 +8,29 @@
<!-- <link rel="stylesheet" href="https://unpkg.com/bulma-dracula"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<style>
.cardpreview {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
<style>
.cardpreview {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.cardpreview .cardpreviewtext {
visibility: hidden;
width: 300px;
color: #fff;
.cardpreview .cardpreviewtext {
visibility: hidden;
display: none;
width: 300px;
color: #fff;
/* Position the cardpreview */
position: absolute;
z-index: 1;
}
/* Position the cardpreview */
position: absolute;
z-index: 1;
}
.cardpreview:hover .cardpreviewtext {
visibility: visible;
}
</style>
.cardpreview:hover .cardpreviewtext {
visibility: visible;
display: inline-block;
}
</style>
</head>
@ -64,7 +66,8 @@
<select name="set" id="set" form="searchform">
<option value="">-</option>
{{range .sets}}
<option value="{{ index . "code" }}">{{ printf "%.25s" (index . "_id") }} ({{ index . "count" }})</option>
<option value="{{ index . "code" }}">{{ printf "%.25s" (index . "_id") }} ({{ index . "count" }})
</option>
{{end}}
</select>
</div>
@ -141,12 +144,12 @@
<tr>
<td>{{.SerraCount}}</td>
<td>
<div class="cardpreview"><strong>{{.Name }}</strong>
<span class="cardpreviewtext">
<img src="{{ .ImageUris.Normal }}" alt="" />
</span>
</div>
</td>
<div class="cardpreview"><strong>{{.Name }}</strong>
<span class="cardpreviewtext">
<img loading="lazy" src="{{ .ImageUris.Normal }}" alt="" />
</span>
</div>
</td>
<td>{{.TypeLine}}</td>
<td>{{.Set}}</td>
<td>{{.CollectorNumber}}</td>
@ -160,7 +163,7 @@
</tbody>
</table>
</div>
</div>
</section>
</body>