Gmail inbox

: mod_articles_category

Live demo

Gmail Inbox



  • Published 133
  • Unpublished 2
  • Archived 1
  • Trashed 0
  • Daniel Dubois 3 bonnes raisons d'opter pour Ope... Alors que Chrome vient offi... 2016-05-07
  • Daniel Dubois Monétiser son blog, les conseils... Dans les précédents épisode... 2016-05-02
  • Daniel Dubois Monétiser son blog, les méthodes... Dans le premier épisode con... 2016-05-02
  • Daniel Dubois Monétiser son blog, comment faire... Si vous cherchez à savoir c... 2016-05-02
  • Daniel Dubois Analyse concurrentielle : mode d'... Quelque soit la thématique... 2016-05-11

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 au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.