Flexbox Card modules

: mod_article_category

Live Demo 

Flexbox Card module


Daniel Dubois

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mauris augue, aliquam quis massa...

Lire la suite...

Daniel Dubois

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mauris augue, aliquam quis massa...

Lire la suite...

Daniel Dubois

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mauris augue, aliquam quis massa...

Lire la suite...

Daniel Dubois

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mauris augue, aliquam quis massa...

Lire la suite...

Daniel Dubois

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mauris augue, aliquam quis massa...

Lire la suite...

Daniel Dubois

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mauris augue, aliquam quis massa...

Lire la suite...

Markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_category
		* @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;
	
?>

<div class="category-module<?php echo $moduleclass_sfx; ?>">
	
	<?php foreach ($list as $group_name => $group) : ?>
	
	<div class="module-card-wrap">
		
		<?php foreach ($group as $item) : ?>
		
		<div class="module-card">
		
			<div class="module-card-title">
				<?php if ($params->get('link_titles') == 1) : ?>
					<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>">
						<?php echo $item->title; ?>
					</a>
					<?php else : ?>
					<?php echo $item->title; ?>
					<?php endif; ?>
			</div>
			
			<div class="module-card-meta">
				<?php if ($item->displayCategoryTitle) : ?>				
				<div class="module-card-category">
					<span class="fa fa-tag"></span>
					<span><?php echo $item->displayCategoryTitle; ?></span>
				</div>
				<?php endif; ?>
				
				<?php if ($params->get('show_author')) : ?>
				<div class="module-card-author">
					<span class="fa fa-user"></span>
					<span><?php echo $item->displayAuthorName; ?></span>
				</div>			
				<?php endif; ?>				
			</div>
			
			<div class="module-card-bottom">
                <?php
					$article_images  = json_decode($item->images);
					$article_image   = '';
					$article_image_alt   = '';
					if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
						$article_image  = $article_images->image_intro;
						$article_image_alt  = $article_images->image_intro_alt;
						}?>  					
											
					<a href="/<?php echo $item->link; ?>">
						<img class="module-card-img card-img-top" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
					</a>
				
				<?php if ($params->get('show_introtext')) : ?>
				<div> 
					<p class="mod-articles-category-introtext"><?php echo $item->displayIntrotext; ?></p>
				</div>
				<?php endif; ?>	
				
				<?php if ($params->get('show_readmore')) : ?>
					<p class="mod-articles-category-readmore">
						<a class="module-card-button mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>">
							<?php if ($item->params->get('access-view') == false) : ?>
								<?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
							<?php elseif ($readmore = $item->alternative_readmore) : ?>
								<?php echo $readmore; ?>
								<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
									<?php if ($params->get('show_readmore_title', 0) != 0) : ?>
										<?php echo JHtml::_('string.truncate', $this->item->title, $params->get('readmore_limit')); ?>
									<?php endif; ?>
								<?php elseif ($params->get('show_readmore_title', 0) == 0) : ?>
								<?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
								<?php else : ?>
								<?php echo JText::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
								<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
							<?php endif; ?>
						</a>
					</p>
				<?php endif; ?>
						
			</div>
		</div>
		
		<?php endforeach; ?>
		
	</div>
	
<?php endforeach; ?>

</div>

CSS

* {
  box-sizing: border-box;
}

.module-card-wrap {
  max-width: 70%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}

.module-card {
  background: #fff;
  border: 1px solid #f1f1f1;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
  min-width: 100%;
  padding: 10px;
  margin-bottom: 5%;
  display: flex;
  flex-direction: column;
}

.module-card-title {
  font-size: 120%; 
  font-weight: 700;
}

.module-card-meta {
  display: flex;
}

.module-card-category, .module-card-author {
  flex: 1;
}

.module-card-author {
  text-align: right;
}

.module-card-bottom {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* a flex: 1 also works here, but is buggy on IE11 */
}

.module-card-img {
  margin: 20px 0;
  align-self: center;
  width: 100%;
  height: auto;
}

.module-card-button {
  background: seagreen;
  color: white;
  border: none;
  margin-top: auto;
  padding: 10px;
}

@media screen and (min-width: 600px) {
  .module-card {
    width: 48%;
    margin: 0 auto 2%;
    min-width: 0;
  }
}
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.