change camp list styling

This commit is contained in:
2021-04-19 22:01:33 +02:00
parent b25714ab6c
commit 867f3207a1
5 changed files with 262 additions and 54 deletions

View File

@@ -181,6 +181,7 @@
<form method="post" id="apply_4">
<input type="hidden" name="action" id="action" value="apply_4">
<input type="hidden" name="camp_apply_id" id="camp_apply_id" value="{$camp_apply_id}">
{*
<table>
{foreach $camp_array as $camp}
<td>{$camp->get_camp_city()}</td>
@@ -193,8 +194,72 @@
</tr>
{/foreach}
</table>
<div id="accom_list"></div>
<div id="shuttle_list"></div>
*}
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="list" id="camp-list">
{foreach $camp_array as $camp}
{if
$camp@first ||
(
$camp_array[$camp@index]->get_camp_from()|substr:5:2 != $camp_array[$camp@index-1]->get_camp_from()|substr:5:2
)
}
{if !$camp@first &&
$camp_array[$camp@index]->get_camp_from()|substr:5:2 != $camp_array[$camp@index-1]->get_camp_from()|substr:5:2
}
</div>
{/if}
<span onclick="block_action('block_{$camp->get_camp_from()|substr:0:4}{$camp->get_camp_from()|substr:5:2}');" class="date_separator clickable">{$camp_array[$camp@index]->get_camp_from()|substr:0:4}.
{$months[$camp_array[$camp@index]->get_camp_from()|substr:5:2]}
<img src="/_image/open_folder.png">
</span>
<div id="block_{$camp->get_camp_from()|substr:0:4}{$camp->get_camp_from()|substr:5:2}" class="month_block">
{/if}
<div class="list-row">
<div class="list_item line_height14 bigger_space">
<span class="size20 bold">
{$camp->get_camp_name()} ({$camp->get_camp_from(true)} - {$camp->get_camp_to(true)}) <br>
Tábor típusa: {$camp->get_camp_type()->get_ct_name()} <br>
Edző: {$camp->get_camp_leader()} <br>
</span>
{if $camp->get_camp_info()}
<br>
Tábor információk: {nl2br($camp->get_camp_info())}
{/if}
<div class="extra_row">
</div>
</div>
<div class="side_block">
Létszám: {if $camp->get_camp_count()}{$camp->get_camp_count()} / {/if}{$camp->get_camp_accepted_applies_count()}
<br>
<br>
<span class="bold">
Ár: {$camp->get_camp_price()} Ft
</span>
<br>
<input type="radio" class="camp-toggle-input" name="camp_id" id="ck-{$camp->get_camp_id()}" value="{$camp->get_camp_id()}"{if $camp@first} checked{/if}>
<div class="camp-toggle" data-checkbox-id="ck-{$camp->get_camp_id()}" style="margin-top: 15px;">
teszt
</div>
</div>
</div>
{if $camp@last}
</div>
{/if}
{/foreach}
</div>
</div>
</div>
</div>
<table class="accept_terms_box">
<tr>
<td>Kijelentem, hogy minden, az edzőtábor szempontjából fontos információt megadtam, a gyerek egyesületének edzőjét az edzőtáborról tájékoztattam.</td>
@@ -368,3 +433,61 @@ $("#accept_terms").change(function() {
</script>
<script>
function open_block(block_id) {
$("#"+block_id).slideDown("slow");
}
function close_block(block_id) {
$("#"+block_id).slideUp("slow");
}
function block_action(block_id) {
if ($("#"+block_id).is(':hidden')) {
open_block(block_id);
}
else {
close_block(block_id);
}
}
$(document).ready(function () {
$('.camp-toggle').each(function(k,v) {
let ckId = $(v).data('checkbox-id');
if ($('#'+ckId).is(':checked')) {
$(v).addClass('yes');
$(v).text('Tábor bejelölve!');
}
else {
$(v).addClass('no');
$(v).text('Jelentkezés!')
}
});
$('.camp-toggle').on('click', function() {
let ckId = $(this).data('checkbox-id');
const clickedElement = $(this);
const cBox = $('#'+ckId);
if (!$(cBox).is(':checked')) {
const prevInput = $('.camp-toggle-input:checked');
const prevBox = $(prevInput).siblings('.camp-toggle');
$(prevBox).addClass('no');
$(prevBox).removeClass('yes');
$(prevBox).text('Jelentkezés!');
//ckecbobx check
//style csere
$(cBox).prop('checked', true);
$(clickedElement).removeClass('no');
$(clickedElement).addClass('yes');
$(clickedElement).text('Tábor bejelölve!');
}
else {
}
});
});
</script>