<?php
//routes/admin.php

$f3->route('GET /admin', function($f3){
    if($f3->get('SESSION.email')){
        require_once('setting.php');
        require_once('controllers/posts/select.php');
        $data = select($f3, $setting['adminPostLimit']);
        
        $f3->mset([
            'appName'=>$setting['siteTitle'], 
            'title'=>'ទំព័រ​ការផ្សាយ', 
            'date'=>$setting['date'],
            'message'=>'ចំនួន​ការផ្សាយ​សរុបៈ '.$data[1],
            'posts'=>$data[0],
            'route'=>'post'
        ]);

        $view = new View;
        echo $view->render('views/admin/index.php');
    }else{
        require_once('controllers/login.php');
        login($f3);
    }
});

require('routes/admin/post.php');

<?php 
//controllers/posts/select.php
function select($f3, $limit){
    $collection = $f3->get('DB')->posts;
    $posts = $collection->find([], ['limit'=>$limit, 'sort'=>['date'=>-1]]);
    $count = $collection->count();
    
    return [$posts, $count];
}

<!--views/admin/partials/listing.php-->
<link href='<?php echo $BASE ?>/public/styles/admin/partials/listing.css' rel='stylesheet' />

<div class='Listing region'>
    <div class='info'><?php echo $message ?></div>

    <div class="wrapper">
        <?php foreach($posts as $post){ ?>
        <div class='item'>
            <div class="thumb-wrapper">
                <a href="<?php echo $BASE.'/'.$route.'/'.$post['id'] ?>">
                    <img class="thumb" src="<?php echo $post['thumb'] ?>" />
                    <?php if($post['video']){ ?>
                    <img class='play-icon' src="<?php echo $BASE ?>/public/images/play.png" />
                    <?php } ?>
                </a>
            </div>

            <div class='title-wrapper'>
                <div class='title'>
                    <a href="<?php echo $BASE.'/'.$route.'/'.$post['id'] ?>"><?php echo $post['title'] ?></a>
                </div>
                <div class='author'><?php echo $post['author'] ?></div>
            </div>

            <div class="edit-delete">
                <a href="<?php echo $BASE.'/'.$route.'/edit/'.$post['id'] ?>">
                    <img class='edit' src="<?php echo $BASE ?>/public/images/edit.png" />
                </a>
                <a href="<?php echo $BASE.'/'.$route.'/delete/'.$post['id'] ?>">
                    <img class='delete' src="<?php echo $BASE ?>/public/images/delete.png" />
                </a>
            </div>
        </div>
        <?php } ?>
    </div>

    <div class='pagination'><img src="<?php echo $BASE ?>/public/images/load-more.png" /></div>
</div>

/* public/styles/admin/partials/listing.css */
:root{
    --background-admin:#f89d9d;
}

.Listing{
    margin-top:10px;
    margin-bottom: 20px;
}

.Listing .info{
    text-align: center;
    background: var(--background-admin);
    padding: 10px;
}

.Listing .wrapper{
    display: grid;
    grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    grid-gap: 10px;
    padding: 10px 0;
}

.Listing .wrapper .item{
    display: grid;
    grid-template-columns: 20% auto 15%;
    grid-gap:10px;
    align-items: center;
    background: var(--background-admin);
}

.Listing .wrapper .item:hover .edit-delete img{
    visibility: visible;
}

.Listing .wrapper .item .thumb-wrapper{
    position: relative;
    padding-top: 56.25%;
}

.Listing .wrapper .item .thumb-wrapper .thumb{
    position: absolute;
    width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
}

.Listing .wrapper .item .thumb-wrapper .play-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
}

.Listing .wrapper .item .title-wrapper .title{
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Listing .wrapper .item .edit-delete{
    text-align: right;
    padding-right: 10px;
}

.Listing .wrapper .item .edit-delete img{
    width: 35px;
    visibility: hidden;
}

.Listing .pagination{
    text-align: center;
    background: var(--background-admin);
    padding: 10px 0;
}

.Listing .pagination img:hover{
    cursor: pointer;
    opacity: .5;
}

GitHub: https://github.com/Sokhavuth/multimedia_

Heroku: https://khmerweb-multimedia1.herokuapp.com/