Replace Home Table Panel with Cards

[xbox2007]

hello
i try change home page table panel with cards

and this is result with admin user

admin.png (107.52 KiB) Viewed 6133 times

and this result with User ( have some table permission )

user.png (93.63 KiB) Viewed 6133 times

this result when hide link in Homepage

hide.png (108.36 KiB) Viewed 6133 times

about my code
i make new page name panel02.php with following Code

Code: Select all

<style>
.wrimagecard{	
	margin-top: 0;
    margin-bottom: 1.5rem;
    text-align: left;
    position: relative;
    background: #fff;
    box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15);
    border-radius: 4px;
    transition: all 0.3s ease;
}
.wrimagecard .fa{
	position: relative;
    font-size: 70px;
}
.wrimagecard-topimage_header{
padding: 20px;
}
a.wrimagecard:hover, .wrimagecard-topimage:hover {
    box-shadow: 2px 4px 8px 0px rgba(46,61,73,0.2);
}
.wrimagecard-topimage a {
    width: 100%;
    height: 100%;
    display: block;
}
.wrimagecard-topimage_title {
    padding: 20px 24px;
    height: 80px;
    padding-bottom: 0.75rem;
    position: relative;
}
.wrimagecard-topimage a {
    border-bottom: none;
    text-decoration: none;
    color: #525c65;
    transition: color 0.3s ease;
}
</style>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
	<div class="container-fluid">
		<div class="row">
<?php
	//echo "Hello";

	//$t_perm = getTablePermissions($tn);
	
	//print_r ($tc);

	foreach($groups as $grp => $tables) {
		foreach($tables as $tn) {
			$tg[$tn] = $grp;
		//echo $grp;
		//echo $tn;
		//print_r ($tc);
		$tc = $arrTables[$tn];
		$sql_from = get_sql_from($tn, false, true);
		$count_records = ($sql_from ? sqlValue("select count(1) from " . $sql_from) : 0);
	//Array ( [Caption] => Users [Description] => Show Users [tableIcon] => resources/table_icons/administrator.png [group] => Users [homepageShowCount] => 1 )	
?>


			<div class="col-md-3 col-sm-4">
				<div class="wrimagecard wrimagecard-topimage">
					<a href="#">
					<div class="wrimagecard-topimage_header" style="background-color:rgba(187, 120, 36, 0.1) ">
						<center><img src="<?php echo $tc['tableIcon']; ?>"></center>
					</div>
					<div class="wrimagecard-topimage_title">
						<h4><?php echo $tc['Description']; ?>
						<div class="pull-right badge"><?php echo $count_records; ?></div></h4>
					</div>
					</a>
				</div>
			</div>

	
<?php		
	}
	}		
?>				
	</div>
</div>

and add this code in home.php after <?php $current_group = $tgroup;

Code: Select all

include_once(__DIR__ . '/hooks/panel02.php');

i hope we can improve code

[xbox2007]

hello

sorry i was forget to add link to card to open table

this new edit

Code: Select all

<style>
.wrimagecard{	
	margin-top: 0;
    margin-bottom: 1.5rem;
    text-align: left;
    position: relative;
    background: #fff;
    box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15);
    border-radius: 4px;
    transition: all 0.3s ease;
}
.wrimagecard .fa{
	position: relative;
    font-size: 70px;
}
.wrimagecard-topimage_header{
padding: 20px;
}
a.wrimagecard:hover, .wrimagecard-topimage:hover {
    box-shadow: 2px 4px 8px 0px rgba(46,61,73,0.2);
}
.wrimagecard-topimage a {
    width: 100%;
    height: 100%;
    display: block;
}
.wrimagecard-topimage_title {
    padding: 20px 24px;
    height: 80px;
    padding-bottom: 0.75rem;
    position: relative;
}
.wrimagecard-topimage a {
    border-bottom: none;
    text-decoration: none;
    color: #525c65;
    transition: color 0.3s ease;
}

.badge {
    display: inline-block;
    min-width: 20px;
    padding: 3px 7px;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #c53535;
    border-radius: 20px;
}
</style>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
	<div class="container-fluid">
		<div class="row">
<?php
	foreach($groups as $grp => $tables) {
		foreach($tables as $tn) {
			$tg[$tn] = $grp;		
			$tc = $arrTables[$tn];
			$sql_from = get_sql_from($tn, false, true);
			$count_records = ($sql_from ? sqlValue("select count(1) from " . $sql_from) : 0);
			
			$GG = $tc['group'];
			if($GG =='Table'){
				$background = '#59df59';
			}else if($GG =='Roll'){
				$background = '#e3625c';
			}else if($GG =='Users'){
				$background = '#5fd3ed';
			}			
?>
			<div class="col-md-2 col-sm-8">
				<div class="wrimagecard wrimagecard-topimage">
					<a href="<?php echo $tn; ?>_view.php<?php echo $searchFirst; ?>">
					<div class="wrimagecard-topimage_header" style="background-color:<?php echo $background;?> ">
						<center><img src="<?php echo $tc['tableIcon']; ?>"></center>
					</div>
					<div class="wrimagecard-topimage_title">
						<h4><?php echo $tc['Description']; ?>
						<div class="pull-right badge"><?php echo $count_records; ?></div></h4>
					</div>
					</a>
				</div>
			</div>	
<?php		
		}
	}		
?>				
	</div>
</div>

• add some code to change card color depend on table group

• change card size to (col-md-2) to allow show 6 cards on one line

Screenshot 2024-04-08 142539.png (25.76 KiB) Viewed 6102 times

Under Progress ,
We live to learn and share what we learn

[jfischer]

Hello Xbox2007

I created the new page panel02 under hooks with your code and added your code to home.php, but nothing comes up.
What could be the problem?

Kind regards from Austria - jfischer

[xbox2007]

hello jfischer
please make sure you have Table group

Screenshot 2024-05-10 233445.png (51 KiB) Viewed 5807 times

[jfischer]

Hello Xbox2007

Table groups exist, but no new cards are shown. I suspect it's because of the script

Code: Select all

include_once(__DIR__ . '/hooks/panel02.php');

I inserted this as you suggested and made the PHP page panel02.php in the hooks folder with the script.
As you suggested in the penultimate posting

Best regards jfischer

[xbox2007]

sorry jfischer
i just see your post now ,
please let me know if it work with you ?

thanks a lot