Your IP : 216.73.216.84
<?php defined('_JEXEC') or die;
/*
* @package mod_uk_timeline
* @copyright Copyright (C) Joomlaplates. All rights reserved.
* @license GNU General Public License version 3 or later; see http://www.gnu.org/licenses/gpl-3.0.txt
*/
$timeline_date = $params->get('timeline_date');
$subtitle = $params->get('subtitle');
$animation = $params->get('animation');
$animationrepeat = $params->get('animationrepeat');
$animationdelay = $params->get('animationdelay');
$headline = $params->get('headline');
?>
<div class="main-timeline">
<?php
foreach ($items as $item)
{
?>
<?php if ($item->title) { ?>
<?php } ?>
<div class="timeline" uk-scrollspy="cls: <?php echo $animation; ?>; target: .timeline-content; delay: <?php echo $animationdelay; ?>; repeat: <?php echo $animationrepeat; ?>">
<span class="timeline-icon"></span>
<span class="year"><?php echo $item->timeline_date; ?></span>
<div class="p-4 timeline-content">
<?php if ($item->title) { ?>
<<?php echo $headline; ?> ><?php echo $item->title; ?></<?php echo $headline; ?>>
<?php } ?>
<?php if ($item->subtitle) { ?>
<p class="p-0 m-0" ><?php echo $item->subtitle; ?></p>
<hr/>
<?php } ?>
<p class="description">
<?php echo $item->content; ?>
</p>
</div>
</div>
<?php } ?>
</div>
<style type="text/css">
.main-timeline{
overflow: hidden;
position: relative;
}
.main-timeline:before{
content: "";
width: 3px;
height: 100%;
background: #d6d5d5;
position: absolute;
top: 0;
left: 50%;
}
.main-timeline .timeline{
padding-right: 30px;
position: relative;
}
.main-timeline .timeline:before,
.main-timeline .timeline:after{
content: "";
display: block;
width: 100%;
clear: both;
}
.main-timeline .timeline:first-child:before,
.main-timeline .timeline:last-child:before{
content: "";
width: 13px;
height: 13px;
border-radius: 50%;
border: 2px solid #d6d5d5;
background: #fff;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: -3px;
}
.main-timeline .timeline:last-child:before{
top: auto;
bottom: 0;
}
.main-timeline .timeline-icon{
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid #d6d5d5;
box-sizing: content-box;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: -4px;
}
.main-timeline .timeline-icon:before{
content: "";
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #737ab4;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.main-timeline .year{
display: inline-block;
padding: 6px 20px;
margin: 0;
font-size: 14px;
color: #fff;
background: #737ab4;
text-align: center;
position: absolute;
top: 50%;
right: 35%;
transform: translateY(-50%);
}
.main-timeline .year:before{
content: "";
border-right: 18px solid #737ab4;
border-top: 18px solid transparent;
border-bottom: 18px solid transparent;
position: absolute;
top: 0;
left: -18px;
}
.main-timeline .timeline-content{
width: 46.5%;
margin: 0 20px 0 0;
position: relative;
}
.main-timeline .timeline-content:after{
content: "";
border-left: 20px solid #f2f2f2;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
position: absolute;
top: 50%;
right: -20px;
transform: translateY(-50%);
}
.main-timeline .title{
font-size: 24px;
font-weight: bold;
margin: 0 20px 0 0;
}
.main-timeline .post{
display: inline-block;
font-size: 14px;
margin-top: 6px;
}
.main-timeline .description{
font-size: 14px;
line-height: 24px;
margin: 0;
clear: both;
}
.main-timeline .timeline:nth-child(2n){ padding: 0 0 0 30px; }
.main-timeline .timeline:nth-child(2n) .year{
right: auto;
left: 35%;
}
.main-timeline .timeline:nth-child(2n) .year:before{
border: 18px solid transparent;
border-right: none;
border-left: 18px solid #737ab4;
left: auto;
right: -18px;
}
.main-timeline .timeline:nth-child(2n) .timeline-content{
float: right;
margin: 0 0 0 20px;
}
.main-timeline .timeline:nth-child(2n) .timeline-content:after{
border-left: none;
border-right: 20px solid #f2f2f2;
right: auto;
left: -20px;
}
@media only screen and (max-width: 1200px){
.main-timeline .year{ right: 30%; }
.main-timeline .timeline:nth-child(2n) .year{ left: 30%; }
}
@media only screen and (max-width: 990px){
.main-timeline .year{ right: 25%; }
.main-timeline .timeline:nth-child(2n) .year{ left: 25%; }
}
@media only screen and (max-width: 767px){
.main-timeline:before{ left: 10px; }
.main-timeline .timeline{
padding: 0 0 0 30px;
margin-bottom: 20px;
}
.main-timeline .timeline:last-child{ margin-bottom: 0; }
.main-timeline .timeline:first-child:before,
.main-timeline .timeline:last-child:before{ display: none; }
.main-timeline .timeline-icon{
margin: 0;
position: absolute;
top: 7px;
left: 0;
}
.main-timeline .year,
.main-timeline .timeline:nth-child(2n) .year{
display: block;
font-weight: bold;
margin: 0 0 32px 30px;
z-index: 1;
position: relative;
top: auto;
left: auto;
right: auto;
transform: none;
}
.main-timeline .timeline:nth-child(2n) .year:before{
border-left: none;
border-right: 18px solid #737ab4;
right: auto;
left: -18px;
}
.main-timeline .timeline-content{ padding: 20px; }
.main-timeline .timeline-content,
.main-timeline .timeline:nth-child(2n) .timeline-content{
width: auto;
float: none;
margin: 0 0 0 30px;
}
.main-timeline .timeline-content:after,
.main-timeline .timeline:nth-child(2n) .timeline-content:after{
border: none;
border-bottom: 20px solid #f2f2f2;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
top: -20px;
left: 50%;
right: auto;
transform: translateX(-50%);
}
}
@media only screen and (max-width: 480px){
.main-timeline .title{
float: none;
margin: 0;
}
.main-timeline .year,
.main-timeline .timeline:nth-child(2n) .year{ margin-left: 20px; }
.main-timeline .timeline-content,
.main-timeline .timeline:nth-child(2n) .timeline-content{ margin-left: 10px; }
.main-timeline .post{ margin: 5px 0; }
}
.main-timeline .timeline:nth-child(2n) .year:before{
border-left: 18px solid <?php echo $timelinecolor; ?>;
}
.main-timeline .timeline-icon:before{
background: <?php echo $timelinecolor; ?>;
}
.main-timeline .year{
background: <?php echo $timelinecolor; ?>;
}
.main-timeline .year::before {
border-right: 18px solid <?php echo $timelinecolor; ?>;
}
@media only screen and (max-width: 767px){
.main-timeline .timeline:nth-child(2n) .year:before{
border-right: 18px solid <?php echo $timelinecolor; ?>;
border-left:none}
.main-timeline .timeline-content::after {display: none}
}
.main-timeline .timeline-content{
background: <?php echo $timeline_bg; ?>;
color:<?php echo $timeline_color; ?>;
}
.main-timeline .timeline:nth-child(2n) .timeline-content::after {
border-right: 20px solid <?php echo $timeline_bg; ?>;
}
.main-timeline .timeline-content::after {
border-left: 20px solid <?php echo $timeline_bg; ?>;
}
.main-timeline .timeline-content h3.title{
color:<?php echo $timeline_color; ?>;
}
</style>