[fix] Images view

This commit is contained in:
ljf 2021-02-07 21:43:06 +01:00
parent ed9adcf483
commit f12d3cd8f8
5 changed files with 92 additions and 234 deletions

View file

@ -7,8 +7,10 @@ routes:
default: '/images'
---
<div class="hardware-image">
<div id="cards-list">
</div>
</div>
<script type="text/template" id="image-template">
<div id="{id}" class="card panel panel-default">
@ -16,12 +18,12 @@ routes:
<h3>{name}</h3>
<div class="card-comment">{comment}</div>
<div class="card-desc text-center">
<img src="/images/{image}" height=100 style="vertical-align:middle">
<img src="/user/images/{image}" height=100 style="vertical-align:middle">
</div>
</div>
<div class="annotations">
<div class="col-sm-6 annotation"><a href="{file}.sha256sum"><span class="glyphicon glyphicon-barcode" aria-hidden="true"></span> Checksum</a></div>
<div class="col-sm-6 annotation"><a href="{file}.sig"><span class="glyphicon glyphicon-tag" aria-hidden="true"></span> Signature</a></div>
<div class="annotations flex-container">
<div class="flex-child annotation"><a href="{file}.sha256sum">[fa=barcode] Checksum</a></div>
<div class="flex-child annotation"><a href="{file}.sig">[fa=tag] Signature</a></div>
</div>
<div class="btn-group" role="group">
<a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> تنزيل <small>{version}</small></a>
@ -29,60 +31,6 @@ routes:
</div>
</script>
<style>
/*
###############################################################################
Style sheet for the cards
###############################################################################
*/
#cards-list:after {
content:'';
display:block;
clear: both;
}
.card {
margin-bottom:20px;
width:270px;
float:left;
min-height: 1px;
margin-right: 10px;
margin-left: 10px;
}
.card .panel-body > h3 {
margin-top:0;
margin-bottom:5px;
font-size:1.2em;
}
.card-desc {
height:100px;
overflow: hidden;
}
.card .btn-group {
width:100%;
margin-left: 0px;
}
.card > .btn-group > .btn{
border-bottom:0;
}
.card > .btn-group {
border-left:0;
border-top-left-radius:0;
border-top-right-radius:0;
margin-left: 0px;
}
.card-comment {
font-size: 0.8em;
margin-top:-5px;
}
.card > .annotations {
text-align:center;
font-size:small;
}
</style>
<script>
/*

View file

@ -15,8 +15,10 @@ Esta página requiere que Javascript esté instalado par aparecer correctamente
N.B. : Incluso si la imagen no corresponde con la última versión de YunoHost, puedes utilizarla y actualizarla después de la instalación !
<div class="hardware-image">
<div id="cards-list">
</div>
</div>
<script type="text/template" id="image-template">
<div id="{id}" class="card panel panel-default">
@ -24,12 +26,12 @@ N.B. : Incluso si la imagen no corresponde con la última versión de YunoHost,
<h3>{name}</h3>
<div class="card-comment">{comment}</div>
<div class="card-desc text-center">
<img src="/images/{image}" height=100 style="vertical-align:middle">
<img src="/user/images/{image}" height=100 style="vertical-align:middle">
</div>
</div>
<div class="annotations">
<div class="col-sm-6 annotation"><a href="{file}.sha256sum"><span class="glyphicon glyphicon-barcode" aria-hidden="true"></span> Checksum</a></div>
<div class="col-sm-6 annotation"><a href="{file}.sig"><span class="glyphicon glyphicon-tag" aria-hidden="true"></span> Signature</a></div>
<div class="annotations flex-container">
<div class="flex-child annotation"><a href="{file}.sha256sum">[fa=barcode] Checksum</a></div>
<div class="flex-child annotation"><a href="{file}.sig">[fa=tag] Signature</a></div>
</div>
<div class="btn-group" role="group">
<a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Télécharger <small>{version}</small></a>
@ -37,60 +39,6 @@ N.B. : Incluso si la imagen no corresponde con la última versión de YunoHost,
</div>
</script>
<style>
/*
###############################################################################
Style sheet for the cards
###############################################################################
*/
#cards-list:after {
content:'';
display:block;
clear: both;
}
.card {
margin-bottom:20px;
width:270px;
float:left;
min-height: 1px;
margin-right: 10px;
margin-left: 10px;
}
.card .panel-body > h3 {
margin-top:0;
margin-bottom:5px;
font-size:1.2em;
}
.card-desc {
height:100px;
overflow: hidden;
}
.card .btn-group {
width:100%;
margin-left: 0px;
}
.card > .btn-group > .btn{
border-bottom:0;
}
.card > .btn-group {
border-left:0;
border-top-left-radius:0;
border-top-right-radius:0;
margin-left: 0px;
}
.card-comment {
font-size: 0.8em;
margin-top:-5px;
}
.card > .annotations {
text-align:center;
font-size:small;
}
</style>
<script>
/*

View file

@ -15,8 +15,10 @@ Cette page requiert que Javascript soit activé pour s'afficher correctement :s.
N.B. : Même si l'image ne correspond pas à la dernière version de YunoHost, vous pouvez tout de même l'utiliser puis faire une mise à jour du système après l'installation !
<div class="hardware-image">
<div id="cards-list">
</div>
</div>
<script type="text/template" id="image-template">
<div id="{id}" class="card panel panel-default">
@ -24,12 +26,12 @@ N.B. : Même si l'image ne correspond pas à la dernière version de YunoHost, v
<h3>{name}</h3>
<div class="card-comment">{comment}</div>
<div class="card-desc text-center">
<img src="/images/{image}" height=100 style="vertical-align:middle">
<img src="/user/images/{image}" height=100 style="vertical-align:middle">
</div>
</div>
<div class="annotations">
<div class="col-sm-6 annotation"><a href="{file}.sha256sum"><span class="glyphicon glyphicon-barcode" aria-hidden="true"></span> Checksum</a></div>
<div class="col-sm-6 annotation"><a href="{file}.sig"><span class="glyphicon glyphicon-tag" aria-hidden="true"></span> Signature</a></div>
<div class="annotations flex-container">
<div class="flex-child annotation"><a href="{file}.sha256sum">[fa=barcode] Checksum</a></div>
<div class="flex-child annotation"><a href="{file}.sig">[fa=tag] Signature</a></div>
</div>
<div class="btn-group" role="group">
<a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Télécharger <small>{version}</small></a>
@ -37,60 +39,6 @@ N.B. : Même si l'image ne correspond pas à la dernière version de YunoHost, v
</div>
</script>
<style>
/*
###############################################################################
Style sheet for the cards
###############################################################################
*/
#cards-list:after {
content:'';
display:block;
clear: both;
}
.card {
margin-bottom:20px;
width:270px;
float:left;
min-height: 1px;
margin-right: 10px;
margin-left: 10px;
}
.card .panel-body > h3 {
margin-top:0;
margin-bottom:5px;
font-size:1.2em;
}
.card-desc {
height:100px;
overflow: hidden;
}
.card .btn-group {
width:100%;
margin-left: 0px;
}
.card > .btn-group > .btn{
border-bottom:0;
}
.card > .btn-group {
border-left:0;
border-top-left-radius:0;
border-top-right-radius:0;
margin-left: 0px;
}
.card-comment {
font-size: 0.8em;
margin-top:-5px;
}
.card > .annotations {
text-align:center;
font-size:small;
}
</style>
<script>
/*

View file

@ -15,8 +15,10 @@ This page requires Javascript enabled to display properly :s.
N.B. : Even if the image does not corresponds to the latest version of YunoHost, you can still use it and do a regular system upgrade after setting up!
<div class="hardware-image">
<div id="cards-list">
</div>
</div>
<script type="text/template" id="image-template">
<div id="{id}" class="card panel panel-default">
@ -24,74 +26,19 @@ N.B. : Even if the image does not corresponds to the latest version of YunoHost,
<h3>{name}</h3>
<div class="card-comment">{comment}</div>
<div class="card-desc text-center">
<img src="/images/{image}" height=100 style="vertical-align:middle">
<img src="/user/images/{image}" height=100 style="vertical-align:middle">
</div>
</div>
<div class="annotations">
<div class="col-sm-6 annotation"><a href="{file}.sha256sum"><span class="glyphicon glyphicon-barcode" aria-hidden="true"></span> Checksum</a></div>
<div class="col-sm-6 annotation"><a href="{file}.sig"><span class="glyphicon glyphicon-tag" aria-hidden="true"></span> Signature</a></div>
<div class="annotations flex-container">
<div class="flex-child annotation"><a href="{file}.sha256sum">[fa=barcode] Checksum</a></div>
<div class="flex-child annotation"><a href="{file}.sig">[fa=tag] Signature</a></div>
</div>
<div class="btn-group" role="group">
<a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Download <small>{version}</small></a>
<a href="{file}" target="_BLANK" type="button" class="btn btn-info col-sm-12">[fa=download] Download <small>{version}</small></a>
</div>
</div>
</script>
<style>
/*
###############################################################################
Style sheet for the cards
###############################################################################
*/
#cards-list:after {
content:'';
display:block;
clear: both;
}
.card {
margin-bottom:20px;
width:270px;
float:left;
min-height: 1px;
margin-right: 10px;
margin-left: 10px;
}
.card .panel-body > h3 {
margin-top:0;
margin-bottom:5px;
font-size:1.2em;
}
.card-desc {
height:100px;
overflow: hidden;
}
.card .btn-group {
width:100%;
margin-left: 0px;
}
.card > .btn-group > .btn{
border-bottom:0;
}
.card > .btn-group {
border-left:0;
border-top-left-radius:0;
border-top-right-radius:0;
margin-left: 0px;
}
.card-comment {
font-size: 0.8em;
margin-top:-5px;
}
.card > .annotations {
text-align:center;
font-size:small;
}
</style>
<script>
/*
###############################################################################

View file

@ -87,3 +87,70 @@ img#whitelogo {
background-color: gray;
padding: 10px;
}
/*
###############################################################################
Style sheet for the cards
###############################################################################
*/
.hardware-image #cards-list:after {
content:'';
display:block;
clear: both;
}
.hardware-image .card {
margin-bottom:20px;
width:270px;
float:left;
min-height: 1px;
margin-right: 10px;
margin-left: 10px;
}
.hardware-image .card .panel-body > h3 {
margin-top:0;
margin-bottom:5px;
font-size:1.2em;
}
.hardware-image .card-desc {
height:135px;
overflow: hidden;
}
.hardware-image .card .btn-group {
width:100%;
margin-left: 0px;
}
.hardware-image .card > .btn-group > .btn{
border-bottom:0;
}
.hardware-image .card > .btn-group {
border-left:0;
border-top-left-radius:0;
border-top-right-radius:0;
margin-left: 0px;
}
.hardware-image .card-comment {
font-size: 0.8em;
margin-top:-5px;
}
.hardware-image .card > .annotations {
text-align:center;
font-size:small;
}
.hardware-image .card img {
margin: 1rem auto;
}
.hardware-image .btn-group .btn.btn-info {
color: #ffffff;
background-color: #5bc0de;
border-color: #46b8da;
}
.hardware-image .btn-group .btn.btn-info:hover, .btn.btn-info:focus {
color: #ffffff;
background-color: #39b3d7;
border-color: #269abc;
}