Job board

Live demo

Job Board

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="wrapper">
			
			<ul id="job-board">
			
			<?php foreach ($list as $group_name => $group) : ?>
			
				<li class="date"><?php echo $group_name; ?></li> 
				
				<?php foreach ($group as $item) : ?>
				<?php $item->urls = new JRegistry($item->urls); ?>
                  
				<a href="/<?php echo $item->link; ?>">
					<li class="listing clearfix">
						<div class="image_wrapper">
						    <?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;
							}?> 
							<img src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>"> 
						</div>
						<div class="info">
							<span class="job_title"><?php echo $item->title; ?></span> 
							<span class="job_info"><?php echo $item->urls->get('urlatext'); ?> <span>&bull; 
								</span> <?php echo $item->urls->get('urlbtext'); ?> <span>&bull; 
							</span> <?php echo $item->displayDate; ?></span> 
						</div>
						<span class="job_type"><?php echo $item->urls->get('urlctext'); ?></span> 
					</li>
				</a>
				
				<?php endforeach; ?>
			
			<?php endforeach; ?>
			
			</ul>
			
		</div>

CSS

.wrapper {
  max-width: 90%;
  margin: 0 auto;
}
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
#job-board {
  width: 100%;
  position: relative;
  list-style: none;
  padding: 0;
}
#job-board:after {
  content: " ";
  width: 1px;
  background: 1px #d9dee9;
  height: 90%;
  position: absolute;
  top: 3em;
  left: 3em;
  z-index: 0;
}
#job-board a {
  text-decoration: none;
}
#job-board .listing {
  background: #fff;
  border: 1px solid #d9dee9;
  border-radius: 0.3em;
  padding: 1em;
  margin-bottom: 1em;
  position: relative;
  z-index: 1;
  display: table;
  width: 96%;
  transition: all 0.3s ease-in-out;
}
#job-board .listing img, #job-board .listing .info, #job-board .listing .job_type {
  display: table-cell;
  vertical-align: middle;
  font-size: 0.9em;
  color: #9592ad;
}
#job-board .listing .image_wrapper {
  width: 60px;
}
#job-board .listing .image_wrapper img {
  width: 60px;
  display: block;
  margin: 0 auto;
  border-radius: 0.25em;
}
#job-board .listing .info {
  line-height: 1.25;
  width: 640px;
  padding-left: 25px;
}
#job-board .listing .info .job_title {
  font-weight: 700;
  color: #34314c;
  font-size: 1.5em;
}
#job-board .listing .info .job_info {
  color: #9592ad;
  display: block;
}
#job-board .listing .info .job_info span {
  margin: 0 0.75em;
}
#job-board .listing .job_type {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.75em;
  position: relative;
  white-space: nowrap;
  padding-top: 0.6em;
  color: #fd7473;
}
#job-board .listing .job_type:before {
  content: " ";
  background: #fd7473;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  position: absolute;
  left: -20px;
  top: 27px;
}
#job-board .listing:hover {
  cursor: pointer;
  box-shadow: 0px 2px 40px 0 rgba(0, 0, 0, .1);
}
#job-board .date {
  display: inline-block;
  padding: 0.6em 0;
  width: 100px;
  background: #fff;
  border: 1px solid #d9dee9;
  border-radius: 3em;
  font-weight: 700;
  font-size: 0.75em;
  text-align: center;
  z-index: 2;
  position: relative;
  margin: 1em 0 2em 0;
}

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.