Timeline mit Flexbox

Override von mod_articles_latest um Beiträge als Timeline anzuzeigen. Verwendet Flexbox und ist somit unabhängig vom Template Framework.

https://codepen.io/woluweb/pen/MNrZYV

Die Datei timeline-joomla4.php ist die neue Version dieses Overrides und ist kompatibel mit Joomla 4

Benötigte Override-Dateien

• woluweb-timeline-flex.php
• custom.css
• timeline-joomla4.php

• <?php
  /**
   * @package     Joomla.Site
   * @subpackage  mod_articles_latest
   *
   * @copyright   Copyright (C) 2005 - 2015 Open Source Matters, Inc. All rights reserved.
   * @license     GNU General Public License version 2 or later; see LICENSE.txt
   
   create for each language a file like /language/overrides/en-GB.override.ini containing the date format (as wished for that language). Example :
   DATE_FORMAT_CALENDAR_MONTH_YEAR="F Y"
   DATE_FORMAT_CALENDAR_DAY="d"
   The advantage of using those language strings is that
   1. you can customize the layout directly from the backend of Joomla via the language overrides
   2. you can have different formats according to the languages (example : Year Month Day, Day Month Year, Month Day Year, ...)
   
   See live example on  https://codepen.io/woluweb/pen/MNrZYV
   
   NB : it is possible to add first characters of introtext with the following code :
   <p><?php echo JHTML::_('string.truncate',(strip_tags ($item->introtext)), 140); ?></p>
   */
  
  defined('_JEXEC') or die;
  
  ?>
  
  <div class="latestnews<?php echo $moduleclass_sfx; ?>">
  
  <?php foreach ($list as $item) :  ?>
  
  	<div class="row-alternating">
  	
  		<div class="row-date">
  		  <div class="alternating-container-timeline">
  			<span class="alternating-category-timeline">
  			  <?php echo $item->category_title; ?>
  			</span>
  			<span class="alternating-day-timeline">
  			 <?php echo JHtml::_('date', $item->publish_up, JText::_('DATE_FORMAT_CALENDAR_DAY')); ?>
  			</span>
  			<span class="alternating-month-year-timeline">
  			  <?php echo JHtml::_('date', $item->publish_up, JText::_('DATE_FORMAT_CALENDAR_MONTH_YEAR')); ?>
  			</span>
  		  </div>
  		</div>
  		
  		<div class="row-content">
  		  <h4 class="row-title" itemprop="name">
  			<a href="<?php echo $item->link; ?>" itemprop="url"><?php echo $item->title; ?></a>
  		  </h4>
  		</div>
  		
  	</div>
  
  <?php endforeach; ?>
  
  </div>

• .row-alternating {
    display:flex;
    /*background-color:#eee;*/
    /*min-height:16em;*/
  }
  
  .row-alternating:nth-child(2n){
    flex-direction:row-reverse;
    /*background-color:#d3d2be;*/
    /*color:white;*/
  }
  
  .row-content, .row-date{
    padding: 0.5em 2em;
    width: 50%;
    display: flex;
    align-items: center;
  }
  
  .row-title{
    /*text-transform:uppercase;*/
    /*font-size: 1.2em;*/
    margin:0;
  }
  
  .row-alternating:nth-child(2n) .row-content {
  	justify-content: flex-end;
  	text-align: right; /* when multiple lines */
  }
  
  .row-alternating:nth-child(2n+1) .row-date {
  	justify-content: flex-end;
  }
  
  .row-alternating:nth-child(2n) .row-date, .row-alternating:nth-child(2n + 1) .row-content{
      position:relative;
      border-left: 1px solid lightgray;
  }
  .row-alternating:nth-child(2n) .row-date:before, .row-alternating:nth-child(2n + 1) .row-content:before {
      /*display:block;*/
      background: lightgray none repeat scroll 0 0;
      border: 4px solid white;
      border-radius: 50%;
      content: "";
      height: 21px;
      width: 21px;
      left: -15px;
      position: absolute;
      top: calc(50% - 10px);
    } 
  
  .alternating-container-timeline {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .alternating-category-timeline {
      font-size: 0.7em;
      font-weight: 500;
      text-transform: uppercase;
  }
  .alternating-day-timeline {
      font-size: 3em;
      margin: 5px 0 10px;
  }
  .alternating-month-year-timeline {
      font-size: 1.1em;
  }

• <?php
  /**
   * @package     Joomla.Site
   * @subpackage  mod_articles_latest
   *
   * @copyright   (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
   * @license     GNU General Public License version 2 or later; see LICENSE.txt
  
  
   create for each language a file like /language/overrides/en-GB.override.ini containing the date format (as wished for that language). Example :
   DATE_FORMAT_CALENDAR_MONTH_YEAR="F Y"
   DATE_FORMAT_CALENDAR_DAY="d"
   The advantage of using those language strings is that
   1. you can customize the layout directly from the backend of Joomla via the language overrides
   2. you can have different formats according to the languages (example : Year Month Day, Day Month Year, Month Day Year, ...)
  
   See live example on  https://codepen.io/woluweb/pen/MNrZYV
  
   NB : it is possible to add first characters of introtext with the following code :
   <p><?php echo JHTML::_('string.truncate',(strip_tags ($item->introtext)), 140); ?></p>
   */
  
  defined('_JEXEC') or die;
  
  use Joomla\CMS\HTML\HTMLHelper;
  use Joomla\CMS\Language\Text;
  
  ?>
  
  <div class="latestnews-timeline">
  
  <?php foreach ($list as $item) :  ?>
  
      <div class="row-alternating">
          <div class="row-date">
              <div class="alternating-container-timeline">
              <span class="alternating-category-timeline">
                  <?php echo $item->category_title; ?>
              </span>
              <span class="alternating-day-timeline">
                  <?php echo HTMLHelper::_('date', $item->publish_up, Text::_('DATE_FORMAT_CALENDAR_DAY')); ?>
              </span>
              <span class="alternating-month-year-timeline">
                  <?php echo HTMLHelper::_('date', $item->publish_up, Text::_('DATE_FORMAT_CALENDAR_MONTH_YEAR')); ?>
              </span>
              </div>
          </div>
          <div class="row-content">
              <h4 class="row-title" itemprop="name">
              <a href="<?php echo $item->link; ?>" itemprop="url"><?php echo $item->title; ?></a>
              </h4>
          </div>
      </div>
  
  <?php endforeach; ?>
  
  </div>