Calendar list

: mod_articles_latest

Live demo

Calendar list


 
 

Markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_latest
		* @Author	   web-eau.net
		* @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;
	
?>  

<ul class="latestnews<?php echo $moduleclass_sfx; ?> list-unstyled">				
	
	<?php foreach ($list as $item) : ?>			
	<li class="media my-4">
		
		<div class="calendar-list mr-3">
			<span class="month-list"><?php echo JHtml::_('date', $item->created, "M"); ?></span>
			<span class="day-list"><?php echo JHtml::_('date', $item->created, "d"); ?></span>
		</div>
		
		<div class="media-body">
			<h5 class="mt-0 mb-1"><a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h5>
			<p class="description"><?php echo JHTML::_('string.truncate', $item->introtext, 50, false, false) ; ?></p>
		</div>
		
	</li>	
	<?php endforeach; ?>
	
</ul>

CSS

/* Calendar list - Source: https://codepen.io/elisabeth_hamel/pen/vKgKwR */
.calendar-list {
  width: 60px;
  height: 60px;
  border: 3px solid #216e69;
  border-top: 20px solid #216e69;
  position: relative;
  /*margin: 50px auto;*/
  font-family: sans-serif;
  text-align: center;
}
.calendar-list:before,
.calendar-list:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.calendar-list:after {
  bottom: -5px;
  right: -5px;
  border-width: 0 0 19px 19px;
  border-color: transparent transparent #fff transparent;
}
.calendar-list:before {
  bottom: -3px;
  right: -3px;
  border-width: 15px 15px 0 0;
  border-color: #216e69 transparent transparent transparent;
}
.month-list {
  position: absolute;
  top: -21px;
  left: 0;
  right: 0;
  color: #fff;
  text-transform: uppercase;
}
.day-list{
  display: block;
  margin: 5px 0 0;
  font-size: 20px;
  color: #216e69;
}
sup {
  position: relative;
  top: -0.5em;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
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.