Fixed up some phone rendering issues.

This commit is contained in:
2025-08-25 13:35:03 +10:00
parent baf1f5ccde
commit ca847193d0
3 changed files with 13 additions and 3 deletions

View File

@@ -18,9 +18,15 @@ body {
.container .container-fluid { .container .container-fluid {
display: flex; display: flex;
} }
body.phone .logo {
display: none;
}
.container .container-fluid .logo img { .container .container-fluid .logo img {
max-height: 220px; max-height: 220px;
margin-right: 40px; margin-right: 40px;
} }
.container .container-fluid .banner { .container .container-fluid .banner {
} }
body.phone .calBanner .col:first-child {
display: none;
}

View File

@@ -19,4 +19,8 @@ $(document).ready(function () {
window.open( url, target ); window.open( url, target );
} }
}); });
var isPhone = /Mobi|Android|iPhone|iPod/i.test(navigator.userAgent) || window.innerWidth <= 768;
if (isPhone) {
$("body").addClass("phone");
}
}); });

View File

@@ -75,8 +75,8 @@ use Michelf\Markdown;
</div> </div>
</div> </div>
</div> </div>
<hr id="calendar" /> <hr />
<div class="row mt-4"> <div class="row mt-4 calBanner">
<div class="col" style="max-width: 250px;"> <div class="col" style="max-width: 250px;">
<img src="image/icon/calendar.png" style="max-height: 200px; padding-left: 20px;" /> <img src="image/icon/calendar.png" style="max-height: 200px; padding-left: 20px;" />
</div> </div>
@@ -90,7 +90,7 @@ use Michelf\Markdown;
</p> </p>
</div> </div>
</div> </div>
<div class="row mt-2"> <div class="row mt-2 calDetails">
<div class="col"> <div class="col">
<?php <?php
$events = getEvents(); $events = getEvents();