Gmail inbox

Live demo

Gmail Inbox

Markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_category
 *
 * @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

?>
  
  <div class="container">
	<div class="row">
		<!-- First row -->
		<div class="col-12 col-sm-12 col-md-3 col-lg-3">
			<!-- Left column (First row) -->
			<a href="#" class="btn btn-danger btn-block">
				<i class="fa fa-edit"></i>&nbsp;Compose
			</a>
		</div>
		<div class="col-12 col-sm-12 col-md-9 col-lg-9">
			<!-- Left side buttons -->
			<div class="btn-group" role="group">
				<button type="button" class="btn btn-outline-secondary">&nbsp;<i class="fa fa-refresh" aria-hidden="true"></i>&nbsp;</button>
				<button type="button" class="btn btn-outline-secondary">&nbsp;<i class="fa fa-star" aria-hidden="true"></i>&nbsp;</button>
				<button type="button" class="btn btn-outline-secondary">&nbsp;<i class="fa fa-ellipsis-v" aria-hidden="true"></i>&nbsp;</button>
			</div>
			<!-- Right side buttons -->
			<div class="pull-right">
				<button type="button" class="btn btn-outline-secondary">&nbsp;<i class="fa fa-angle-left" aria-hidden="true"></i>&nbsp;</button>
				<button type="button" class="btn btn-outline-secondary">&nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i>&nbsp;</button>
				<button type="button" class="btn btn-outline-secondary">&nbsp;<i class="fa fa-bars" aria-hidden="true"></i>&nbsp;</button>
				<button type="button" class="btn btn-outline-secondary">&nbsp;<i class="fa fa-cog" aria-hidden="true"></i>&nbsp;</button>
			</div>
		</div>
		<!-- END: Right column -->
		
	</div>
	<!-- END: first row -->
	<hr>
	<div class="row">
		<!-- Second row -->
		<div class="col-12 col-sm-12 col-md-3 col-lg-3">
			<!-- LEFT COLUMN Menu (Second row) -->
			<ul class="list-group">
				<!-- Menu -->
				<?php 
					$model = JModelLegacy::getInstance('Articles', 'ContentModel', array( 'ignore_request' => true )); 
					$params = JFactory::getApplication()->getParams();
					$model->setState('params', $params);
					$model->setState('filter.category_id', 62); // xxxx category ID 
					$num_articles = $model->getTotal();
					?>
				<li class="list-group-item d-flex active justify-content-between align-items-center py-2">
					Published
					<span class="badge badge-default badge-light"><?php echo $num_articles; ?></span>
				</li>
				<li class="list-group-item d-flex justify-content-between align-items-center py-2">
					Unpublished
					<span class="badge badge-secondary badge-pill">2</span>
				</li>
				<li class="list-group-item d-flex justify-content-between align-items-center py-2">
					Archived
					<span class="badge badge-secondary badge-pill">1</span>
				</li>
				<li class="list-group-item d-flex justify-content-between align-items-center py-2">
					Trashed
					<span class="badge badge-secondary badge-pill">0</span>
				</li>
			</ul>
			<!-- End left menu -->
		</div>
		<!-- END: Left column (Second row) -->
		<div class="col-12 col-sm-12 col-md-9 col-lg-9">
			<!-- Tabs -->
			<ul class="nav nav-tabs">
				<li class="nav-item">
					<a class="nav-link active"><i class="fa fa-inbox"></i>&nbsp;&nbsp;Inbox</a>
				</li>
				<li class="nav-item">
					<a class="nav-link"><i class="fa fa-users"></i>&nbsp;&nbsp;Social</a>
				</li>
				<li class="nav-item">
					<a class="nav-link"><i class="fa fa-tags"></i>&nbsp;&nbsp;Notifications</a>
				</li>
				<li class="nav-item">
					<a class="nav-link"><i class="fa fa-info-circle"></i>&nbsp;&nbsp;Updates</a>
				</li>
			</ul>
			<!-- END: Tabs -->
			<div class="list-group">
			
				<?php foreach ($list as $item) : ?>
				<ul class="list-inline d-flex articles-items">
				<li class="list-inline-item articles-items d-flex list-group-item justify-content-start">
					
					<span class="checkbox pr-2"><input type="checkbox"></span>
					
					<?php if ($item->featured == 1) : ?>						
						<span style="color: #EBC043" class="pr-2 fa fa-star"></span>				
                       <?php else : ?>
                        <span class="pr-2 fa fa-star-o"></span>
                       <?php endif; ?>
											
                  	<span class="name fullname"><?php echo $item->displayAuthorName; ?></span> 
                  
					<span class="title pr-2"><?php echo JHTML::_('string.truncate', $item->title, 33, false, false) ; ?></span>					
					<span class="pr-2"><?php echo JHTML::_('string.truncate', $item->introtext, 27, false, false) ; ?></span> <!-- titre + intro : maxi 70 caractères -->
					
					<span class="ml-auto pl-3">
						<span class="fa fa-paperclip"></span>
						<span class="badge badge-default badge-pill"><?php echo $item->displayDate; ?></span>
					</span>
				</li>
				</ul>
				<?php endforeach; ?>
				
			</div>
		</div>
	</div>
</div>

CSS

/* Gmail inbox */
.navbar {
	background-color: #f1f1f1;
	height: 62px;
}
.navbar .container {
	margin-top: 0px;
}
.navbar input {
	min-width: 360px;
}
.navbar input, .navbar button {
	border-radius: 0;
	border-right-width: 0;
	height: 34px;
}
.fullname {
	min-width: 70px;
	display: inline-block;
}
.title {
	display: inline-block;
  	font-weight: 600;
}
.articles-items{
min-width:780px;
}

A PROPOS DE L'AUTEUR :

Webmaster freelance passionné par Joomla depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Daniel est également très impliqué dans la communauté Joomla depuis 2014 en étant membre actif de plusieurs projets, conférencier et fondateur du JUG Breizh.