Skip to content

Commit

Permalink
Merge pull request #200 from bcgov/jp-bugfix-0019
Browse files Browse the repository at this point in the history 
Dev - Homepage Alignment [jp-bugfix-0019] 2nd version
  • Loading branch information
@jp-Telus
jp-Telus authored Jun 7, 2023
2 parents 8fc1d90 + b2de8c9 commit 56f6a04
Showing 1 changed file with 77 additions and 155 deletions.
232 changes: 77 additions & 155 deletions resources/views/home.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,50 +3,65 @@
@section('content')

<style>
p.text-primary{
font-size:12px;
color:#1a5a96;
font-weight:bold;
.home-tiles .card {
border-radius: 12px;
border: 2px solid #ebedec;
background-color: #f8fafc;
}
.card {
border-radius: 12px;
.home-tiles .card:hover {
background-color: #1a5a96;
color: white;
}
.home-tiles .card:hover i {
text-decoration-color: white;
color:white;
}
.card:hover span{
.home-tiles .card span {
font-size: 22px;
}
.home-tiles .card:hover span{
text-decoration-color: white;
color:white;
text-decoration: underline;
}
.card:hover p{
.home-tiles .card:hover p {
text-decoration-color: white;
color:white;
text-decoration: underline;
}
</style>

<div class="container mb-4">
<div class="row">
<div class="col-12 col-xl-12 ">
<h1 class="text-center">Welcome, {{ Auth::user()->name }}</h1>
<p class="text-center h5"><b>Choose from the options below:</b></p>
<h1 class="text-center text-primary">Welcome, {{ Auth::user()->name }}</h1>
<p class="text-center h5 text-primary"><b>Choose from the options below:</b></p>
</div>
</div>
</div>


<div class="container">
<div class="row" style="min-height:550px" >
<div class="container home-tiles">
<div class="row" style="min-height:580px" >

<div class="col col-md-6">
<div class="card card_hook" style="height: 100%">
<a href="{{route('donations.list')}}" class="card-body d-table">
<div class="d-table-cell align-middle text-center">
<img src="/svgs/give.svg" style="color:white;" alt="Connect" height="55">
<p class="text-primary "> <span style="font-size:22px;" >Donations </span></p>
<p style="color:black;">Support the charities of your choice with payroll deductions in any amount.</p>
</div>
<div class="container h-100">

<a href="{{route('donations.list')}}">
<div class="card card_hook d-table" style="height: 100%">
<div class="card-body d-table-cell align-middle text-center">
{{-- <img src="/svgs/give.svg" style="color:white;" alt="Connect" height="55"> --}}
<i class="nav-icon fa fa-hand-holding-heart fa-2x"></i><br>
<p class="font-weight-bold"> <span>Donations</span></p>
<p >Support the charities of your choice with payroll deductions in any amount.</p>
</div>
</div>
</a>
</div>
</div>
Expand All @@ -55,59 +70,63 @@
<div class="container h-100" >
<div class="row h-50 pb-2">
<div class="col col-md-6">
<a href="#" data-toggle="modal" data-target="#learn-more-modal">
<div class="card px-2 d-table" style="height: 100%">
<div class="card-body d-table-cell align-middle text-center">
{{-- <span class="card-body text-center" data-toggle="modal" data-target="#learn-more-modal"> --}}
<i class="nav-icon fas fa-info-circle fa-2x"></i><br>
<p class="font-weight-bold"><span></span></p>
<p class="">Learn more about PECSF and how to donate</p>
{{-- </span> --}}
</div>

<div class="card card_hook px-4 d-table" style="height: 100%">
<div class="d-table-cell align-middle text-center">
<a class="card-body text-center" data-toggle="modal" data-target="#learn-more-modal">
<i class="x nav-icon fas fa-info-circle fa-2x bottom-right"></i><br>
<p style="color:black;">Learn more about PECSF and how to donate</p>
</a>
</div>
</div>

</a>
</div>

<div class="col col-md-6">

<div class="card card_hook px-4 d-table" style="height: 100%">
<div class="d-table-cell align-middle text-center">
<a class="card-body text-center" href="{{route('volunteering.index')}}">
<i class="x nav-icon fas fa-hands-helping fa-2x"></i>
<p class="text-primary "> <span style="font-size:20px;">Volunteering</span></p>
<p class="" style="color:black;"> Looking to do more than just donate? Volunteer to help run a campaign or host an event.</p>
</a>
<a href="{{route('volunteering.index')}}">
<div class="card px-2 d-table" style="height: 100%">
<div class="card-body d-table-cell align-middle text-center">
{{-- <a class="card-body text-center" href="{{route('volunteering.index')}}"> --}}
<i class="x nav-icon fas fa-hands-helping fa-2x"></i>
<p class="font-weight-bold"><span >Volunteering</span></p>
<p class="" > Looking to do more than just donate? Volunteer to help run a campaign or host an event.</p>
{{-- </a> --}}
</div>
</div>
</div>

</a>
</div>

</div>

<div class="row h-50 pt-2">
<div class="col col-md-6">

<div class="card card_hook px-4 d-table" style="height: 100%">
<div class="d-table-cell align-middle text-center">
<a href="{{route('bank_deposit_form')}}" class="card-body">
<i class="x nav-icon fa-solid fas fa-money-check-alt fa-2x bottom-right"></i><br>
<p class="text-primary "> <span style="font-size:22px;" >eForm </span></p>
<p style="color:black;">Submit for your cash, cheque, fundraising or gaming bank deposit form.</p>
</a>
<a href="{{route('bank_deposit_form')}}">
<div class="card px-2 d-table" style="height: 100%">
<div class="card-body d-table-cell align-middle text-center">
{{-- <a href="{{route('bank_deposit_form')}}" class="card-body"> --}}
<i class="nav-icon fas fa-money-check-alt fa-2x "></i><br>
<p class="font-weight-bold "><span>eForm</span></p>
<p >Submit for your cash, cheque, fundraising or gaming bank deposit form.</p>
{{-- </a> --}}
</div>
</div>
</div>

</a>
</div>

<div class="col col-md-6">

<div class="card card_hook px-4 d-table" style="height: 100%">
<div class="d-table-cell align-middle text-center">
<a href="{{route('contact')}}" class="card-body">
<i class="x nav-icon fas fa-question-circle fa-2x "></i>
<p class="text-primary "> <span style="font-size:22px;">Contact </span></p>
<p class="">Got questions? &nbsp;&nbsp; We are here to help!</p>
</a>
<a href="{{route('contact')}}">
<div class="card px-2 d-table" style="height: 100%">
<div class="card-body d-table-cell align-middle text-center">
{{-- <a href="{{route('contact')}}" class="card-body"> --}}
<i class="nav-icon fas fa-question-circle fa-2x "></i><br>
<p class="text-primary font-weight-bold"><span style="font-size:22px;">Contact</span></p>
<p class="">Got questions? &nbsp;We are here to help!</p>
{{-- </a> --}}
</div>
</div>
</div>

</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -244,103 +263,6 @@

@push('js')
<script>
var mouseOutTimer = false;
function reset(){
$(".card_hook").css("background","white");
$(".card_hook").find("span").css("color","#1a5a96");
$(".card_hook").find("i").css("color","#1a5a96");
$(".card_hook").find("p").css("color","#000");
$(".card_hook").find("p.text-primary").css("color","#1a5a96");
$(".card_hook").find("img").css("filter","none");
}
$(".card_hook").mouseout(function(){
clearTimeout(mouseOutTimer);
mouseOutTimer = setTimeout(function(){
reset();
},200);
});
$(".card_hook").mouseover(function(){
clearTimeout(mouseOutTimer);
});
$(".card_hook").hover(function(){
reset();
$(this).css("background","#1a5a96");
$(this).find("span").css("color","#fff");
$(this).find("i").css("color","#fff");
$(this).find("img").css("filter","invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(106%) contrast(106%)");
$(this).find("p").css("color","#fff");
});
$(".card_hook").mouseout(function(){
/* $(".card_hook").removeClass("col-md-3");
$(".card_hook").removeClass("col-md-5");
$(".card_hook")[1].addClass("col-md-5");
$(".card_hook")[0].addClass("col-md-3");
$(".card_hook")[2].addClass("col-md-3");
*/
});
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable2");
switching = true;
// Set the sorting direction to ascending:
dir = "asc";
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = table.rows;
/* Loop through all table rows (except the
first, which contains table headers): */
for (i = 1; i < (rows.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/* Check if the two rows should switch place,
based on the direction, asc or desc: */
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
// Each time a switch is done, increase this count by 1:
switchcount ++;
} else {
/* If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again. */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
@endpush

0 comments on commit 56f6a04

Please sign in to comment.