Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev - Homepage Alignment [jp-bugfix-0019] 2nd version #200

Merged
merged 1 commit into from
Jun 7, 2023
Merged

Dev - Homepage Alignment [jp-bugfix-0019] 2nd version #200

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
232 changes: 77 additions & 155 deletions resources/views/home.blade.php
View file
Open in desktop
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