[QSL Card] Adjusted class and css to make QSL card images more responsive

This commit is contained in:
Andreas 2023-05-12 12:25:23 +02:00
parent 849f6c9b46
commit e7376846b5
3 changed files with 11 additions and 6 deletions

View File

@ -2186,7 +2186,7 @@ $(document).ready(function(){
function viewQsl(picture, callsign) {
var baseURL= "<?php echo base_url();?>";
var $textAndPic = $('<div></div>');
$textAndPic.append('<img class="img-fluid" style="height:auto;width:auto;"src="'+baseURL+'/assets/qslcard/'+picture+'" />');
$textAndPic.append('<img class="img-fluid w-qsl" style="height:auto;width:auto;"src="'+baseURL+'/assets/qslcard/'+picture+'" />');
var title = '';
if (callsign == null) {
title = 'QSL Card';
@ -2315,7 +2315,7 @@ function deleteQsl(id) {
'</tr>');
var quantity = $(".carousel-indicators li").length;
$(".carousel-indicators").append('<li data-target="#carouselExampleIndicators" data-slide-to="'+quantity+'"></li>');
$(".carousel-inner").append('<div class="carousel-item carouselimageid_'+data.status.front.insertid+'"><img class="d-block w-100" src="'+baseURL+'/assets/qslcard/'+data.status.front.filename+'" alt="QSL picture #'+(quantity+1)+'"></div>');
$(".carousel-inner").append('<div class="carousel-item carouselimageid_'+data.status.front.insertid+'"><img class="img-fluid w-qsl" src="'+baseURL+'/assets/qslcard/'+data.status.front.filename+'" alt="QSL picture #'+(quantity+1)+'"></div>');
$("#qslcardfront").val(null);
}
else {
@ -2335,7 +2335,7 @@ function deleteQsl(id) {
$('.qslcardtab').removeAttr('hidden');
var quantity = $(".carousel-indicators li").length;
$(".carousel-indicators").append('<li class="active" data-target="#carouselExampleIndicators" data-slide-to="'+quantity+'"></li>');
$(".carousel-inner").append('<div class="active carousel-item carouselimageid_'+data.status.front.insertid+'"><img class="d-block w-100" src="'+baseURL+'/assets/qslcard/'+data.status.front.filename+'" alt="QSL picture #'+(quantity+1)+'"></div>');
$(".carousel-inner").append('<div class="active carousel-item carouselimageid_'+data.status.front.insertid+'"><img class="img-fluid w-qsl" src="'+baseURL+'/assets/qslcard/'+data.status.front.filename+'" alt="QSL picture #'+(quantity+1)+'"></div>');
$(".carouselExampleIndicators").carousel();
$("#qslcardfront").val(null);
}
@ -2354,7 +2354,7 @@ function deleteQsl(id) {
'</tr>');
var quantity = $(".carousel-indicators li").length;
$(".carousel-indicators").append('<li data-target="#carouselExampleIndicators" data-slide-to="'+quantity+'"></li>');
$(".carousel-inner").append('<div class="carousel-item carouselimageid_'+data.status.back.insertid+'"><img class="d-block w-100" src="'+baseURL+'/assets/qslcard/'+data.status.back.filename+'" alt="QSL picture #'+(quantity+1)+'"></div>');
$(".carousel-inner").append('<div class="carousel-item carouselimageid_'+data.status.back.insertid+'"><img class="img-fluid w-qsl" src="'+baseURL+'/assets/qslcard/'+data.status.back.filename+'" alt="QSL picture #'+(quantity+1)+'"></div>');
$("#qslcardback").val(null);
}
else {
@ -2374,7 +2374,7 @@ function deleteQsl(id) {
$('.qslcardtab').removeAttr('hidden');
var quantity = $(".carousel-indicators li").length;
$(".carousel-indicators").append('<li class="active" data-target="#carouselExampleIndicators" data-slide-to="'+quantity+'"></li>');
$(".carousel-inner").append('<div class="active carousel-item carouselimageid_'+data.status.back.insertid+'"><img class="d-block w-100" src="'+baseURL+'/assets/qslcard/'+data.status.back.filename+'" alt="QSL picture #'+(quantity+1)+'"></div>');
$(".carousel-inner").append('<div class="active carousel-item carouselimageid_'+data.status.back.insertid+'"><img class="img-fluid w-qsl" src="'+baseURL+'/assets/qslcard/'+data.status.back.filename+'" alt="QSL picture #'+(quantity+1)+'"></div>');
$(".carouselExampleIndicators").carousel();
$("#qslcardback").val(null);
}

View File

@ -537,7 +537,7 @@
echo ' active';
}
echo '">';
echo '<img class="d-block w-100" src="' . base_url() . '/assets/qslcard/' . $image->filename .'" alt="QSL picture #'. $i++.'">';
echo '<img class="img-fluid w-qsl" src="' . base_url() . '/assets/qslcard/' . $image->filename .'" alt="QSL picture #'. $i++.'">';
echo '</div>';
}
?>

View File

@ -431,4 +431,9 @@ div#station_logbooks_linked_table_paginate {
.activeRow a {
color: #fff !important;
}
.w-qsl{
max-height: calc(100vh - 270px);
overflow-y: auto;
}