Gmail inbox

: mod_articles_category

Live demo

Gmail Inbox



  • Published 271
  • Unpublished 2
  • Archived 1
  • Trashed 0
  • Daniel Dubois SEO - les meilleurs annuaires en... Accroître sa visibilité en... 2020-05-09
  • Lana Miro Joomla Portfolio Template as an E... Creating a portfolio is a v... 2020-05-13
  • Daniel Dubois Comment se défendre contre l'aspi... Vous ne le saviez peut-être... 2020-05-14
  • Daniel Dubois Analyse d'une refonte réussie Fin juin 2019, je mettais e... 2020-02-13
  • Daniel Dubois Joomla - The Ultimate SEO Checkli... Create a website with Jooml... 2020-05-05

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;
}
 

Daniel Dubois

Daniel Dubois

Passionné par le Web 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.
Très impliqué dans la communauté Joomla depuis 2014, il est actif de plusieurs projets, conférencier et fondateur du JUG Breizh.