Commit 65337cd7 authored by Roisin Pearson's avatar Roisin Pearson Committed by Cecilia Vela Gurovic
Browse files

Bug #1742347 Adding the timeline bar 

Removed demo example files

behatnotneeded

Change-Id: If6bdf0aa3ab3aaa354c9234d45e58b40c79936a3
parent 83beaaab

htdocs/js/jTLine/LICENSE

0 → 100644
+21 −0
Original line number Diff line number Diff line 
MIT License



Copyright (c) 2017 NADY



Permission is hereby granted, free of charge, to any person obtaining a copy

of this software and associated documentation files (the "Software"), to deal

in the Software without restriction, including without limitation the rights

to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

copies of the Software, and to permit persons to whom the Software is

furnished to do so, subject to the following conditions:



The above copyright notice and this permission notice shall be included in all

copies or substantial portions of the Software.



THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE

SOFTWARE.

htdocs/js/jTLine/README.Mahara

0 → 100644
+12 −0
Original line number Diff line number Diff line 
jTLine

==================



Website: https://naadydev.github.io/jTLine/

Version: 1.0



jQuery plugin, that create Horizontal Timeline,

Build upon the fantastic "codyhouse" article.



Changes:



* Removed demo examples

htdocs/js/jTLine/README.md

0 → 100644
+2 −0
Original line number Diff line number Diff line 
# <a href="https://naadydev.github.io/jTLine/"> jTLine </a>

jQuery plugin, that create Horizontal Timeline, Documentation : https://naadydev.github.io/jTLine/

htdocs/js/jTLine/css/JTstyle.css

0 → 100644
+420 −0
Original line number Diff line number Diff line 
/* --------------------------------



Primary style



-------------------------------- */

*, *::after, *::before {

  box-sizing: border-box;

}



/* html {

  font-size: 62.5%;

}



body {

  font-size: 1.6rem;

  font-family: "Fira Sans", sans-serif;

  color: #383838;

  background-color: #f8f8f8;

}



a {

  color: #7b9d6f;

  text-decoration: none;

} */



/* --------------------------------



Main Components



-------------------------------- */

.jtline {

  /* opacity: 0; */

  color: #000;

  margin: 2em auto;

  -webkit-transition: opacity 0.2s;

  -moz-transition: opacity 0.2s;

  transition: opacity 0.2s;

}

.jtline::before {

  /* never visible - this is used in jQuery to check the current MQ */

  content: 'mobile';

  display: none;

}

.jtline.loaded {

  /* show the timeline after events position has been set (using JavaScript) */

  opacity: 1;

}

.jtline .timeline {

  position: relative;

  height: 100px;

  width: 100%;

  max-width: 850px;

  margin: 0 auto;

}

.jtline .events-wrapper {

  position: relative;

  height: 90%;

  margin: -40px 40px 0 40px;

  overflow: hidden;

}

.jtline .events-wrapper::after, .jtline .events-wrapper::before {

  /* these are used to create a shadow effect at the sides of the timeline */

  content: '';

  position: absolute;

  z-index: 2;

  top: 0;

  height: 100%;

  width: 20px;

}

.jtline .events-wrapper::before {

  left: 0;

  background-image: -webkit-linear-gradient( left , #f8f8f8, rgba(248, 248, 248, 0));

  background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));

}

.jtline .events-wrapper::after {

  right: 0;

  background-image: -webkit-linear-gradient( right , #f8f8f8, rgba(248, 248, 248, 0));

  background-image: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0));

}

.jtline .events {

  /* this is the grey line/timeline */

  position: absolute;

  z-index: 1;

  left: 0;

  top: 49px;

  height: 3px;

  /* width will be set using JavaScript */

  background: #dfdfdf;

  -webkit-transition: -webkit-transform 0.4s;

  -moz-transition: -moz-transform 0.4s;

  transition: transform 0.4s;

}

.jtline .filling-line {

  /* this is used to create the green line filling the timeline */

  position: absolute;

  z-index: 1;

  left: 0;

  top: 0;

  height: 100%;

  width: 100%;

  background-color: #7b9d6f;

  -webkit-transform: scaleX(0);

  -moz-transform: scaleX(0);

  -ms-transform: scaleX(0);

  -o-transform: scaleX(0);

  transform: scaleX(0);

  -webkit-transform-origin: left center;

  -moz-transform-origin: left center;

  -ms-transform-origin: left center;

  -o-transform-origin: left center;

  transform-origin: left center;

  -webkit-transition: -webkit-transform 0.3s;

  -moz-transition: -moz-transform 0.3s;

  transition: transform 0.3s;

}

.jtline .events a {

  position: absolute;

  bottom: 0;

  z-index: 2;

  text-align: center;

  font-size: 1.3rem;

  padding-bottom: 15px;

  color: #383838;

  /* fix bug on Safari - text flickering while timeline translates */

  -webkit-transform: translateZ(0);

  -moz-transform: translateZ(0);

  -ms-transform: translateZ(0);

  -o-transform: translateZ(0);

  transform: translateZ(0);

}

.jtline .events a::after {

  /* this is used to create the event spot */

  content: '';

  position: absolute;

  left: 50%;

  right: auto;

  -webkit-transform: translateX(-50%);

  -moz-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  -o-transform: translateX(-50%);

  transform: translateX(-50%);

  bottom: -5px;

  height: 15px;

  width: 15px;

  border-radius: 50%;

  border: 2px solid #dfdfdf;

  background-color: #f8f8f8;

  -webkit-transition: background-color 0.3s, border-color 0.3s;

  -moz-transition: background-color 0.3s, border-color 0.3s;

  transition: background-color 0.3s, border-color 0.3s;

}

.no-touch .jtline .events a:hover::after {

  background-color: #7b9d6f;

  border-color: #7b9d6f;

}

.jtline .events a.selected {

  pointer-events: none;

}

.jtline .events a.selected::after {

  background-color: #7b9d6f;

  border-color: #7b9d6f;

}

.jtline .events a.older-event::after {

  border-color: #7b9d6f;

}

@media only screen and (min-width: 1100px) {

  .jtline {

    margin: 6em auto;

  }

  .jtline::before {

    /* never visible - this is used in jQuery to check the current MQ */

    content: 'desktop';

  }

}



.cd-timeline-navigation a {

  /* these are the left/right arrows to navigate the timeline */

  position: absolute;

  z-index: 1;

  top: 50%;

  bottom: auto;

  -webkit-transform: translateY(-50%);

  -moz-transform: translateY(-50%);

  -ms-transform: translateY(-50%);

  -o-transform: translateY(-50%);

  transform: translateY(-50%);

  height: 34px;

  width: 34px;

  border-radius: 50%;

  border: 2px solid #dfdfdf;

  /* replace text with an icon */

  overflow: hidden;

  color: transparent;

  text-indent: 100%;

  white-space: nowrap;

  -webkit-transition: border-color 0.3s;

  -moz-transition: border-color 0.3s;

  transition: border-color 0.3s;

}

.cd-timeline-navigation a::after {

  /* arrow icon */

  content: '';

  position: absolute;

  height: 16px;

  width: 16px;

  left: 50%;

  top: 50%;

  bottom: auto;

  right: auto;

  -webkit-transform: translateX(-50%) translateY(-50%);

  -moz-transform: translateX(-50%) translateY(-50%);

  -ms-transform: translateX(-50%) translateY(-50%);

  -o-transform: translateX(-50%) translateY(-50%);

  transform: translateX(-50%) translateY(-50%);

  background: url(../img/cd-arrow.svg) no-repeat 0 0;

}

.cd-timeline-navigation a.prev {

  left: 0;

  -webkit-transform: translateY(-50%) rotate(180deg);

  -moz-transform: translateY(-50%) rotate(180deg);

  -ms-transform: translateY(-50%) rotate(180deg);

  -o-transform: translateY(-50%) rotate(180deg);

  transform: translateY(-50%) rotate(180deg);

}

.cd-timeline-navigation a.next {

  right: 0;

}

.no-touch .cd-timeline-navigation a:hover {

  border-color: #7b9d6f;

}

.cd-timeline-navigation a.inactive {

  cursor: not-allowed;

}

.cd-timeline-navigation a.inactive::after {

  background-position: 0 -16px;

}

.no-touch .cd-timeline-navigation a.inactive:hover {

  border-color: #dfdfdf;

}



.jtline .events-content {

    width:800px;

    margin:0 auto;

  position: relative;



  overflow: hidden;

  -webkit-transition: height 0.4s;

  -moz-transition: height 0.4s;

  transition: height 0.4s;

}

.jtline .events-content li {

  position: absolute;

  z-index: 1;

  width: 100%;

  left: 0;

  top: 0;

  -webkit-transform: translateX(-100%);

  -moz-transform: translateX(-100%);

  -ms-transform: translateX(-100%);

  -o-transform: translateX(-100%);

  transform: translateX(-100%);

  opacity: 0;

  -webkit-animation-duration: 0.4s;

  -moz-animation-duration: 0.4s;

  animation-duration: 0.4s;

  -webkit-animation-timing-function: ease-in-out;

  -moz-animation-timing-function: ease-in-out;

  animation-timing-function: ease-in-out;

}

.jtline .events-content li.selected {

  /* visible event content */

  position: relative;

  z-index: 2;

  opacity: 1;

  -webkit-transform: translateX(0);

  -moz-transform: translateX(0);

  -ms-transform: translateX(0);

  -o-transform: translateX(0);

  transform: translateX(0);

}

.jtline .events-content li.enter-right, .jtline .events-content li.leave-right {

  -webkit-animation-name: cd-enter-right;

  -moz-animation-name: cd-enter-right;

  animation-name: cd-enter-right;

}

.jtline .events-content li.enter-left, .jtline .events-content li.leave-left {

  -webkit-animation-name: cd-enter-left;

  -moz-animation-name: cd-enter-left;

  animation-name: cd-enter-left;

}

.jtline .events-content li.leave-right, .jtline .events-content li.leave-left {

  -webkit-animation-direction: reverse;

  -moz-animation-direction: reverse;

  animation-direction: reverse;

}

.jtline .events-content li > * {

  margin: 0 auto;

  list-style: none !important;

}



.jtline .timeline .cd-timeline-navigation {

  list-style: none !important;

}



.jtline .timeline ol, .ListeOL {

list-style: none !important;

margin: 0 0 0 0;

padding: 50px;

}

.jtline .events-content h2 {

  font-weight: bold;

  font-size: 2.6rem;

  font-family: "Playfair Display", serif;

  font-weight: 700;

  line-height: 1.2;

}

.jtline .events-content em {

  display: block;

  font-style: italic;

  margin: 10px auto;

  border-bottom:2px dashed #dfdfdf;

}

.jtline .events-content em::before {

  content: '- ';

}

.jtline .events-content p {

  font-size: 1.4rem;

  color: #959595;

}

.jtline .events-content em, .jtline .events-content p {

  line-height: 1.6;

}

@media only screen and (min-width: 768px) {

  .jtline .events-content h2 {

    font-size: 7rem;

  }

  .jtline .events-content em {

    font-size: 2rem;

  }

  .jtline .events-content p {

    font-size: 1.8rem;

  }

}



@-webkit-keyframes cd-enter-right {

  0% {

    opacity: 0;

    -webkit-transform: translateX(100%);

  }

  100% {

    opacity: 1;

    -webkit-transform: translateX(0%);

  }

}

@-moz-keyframes cd-enter-right {

  0% {

    opacity: 0;

    -moz-transform: translateX(100%);

  }

  100% {

    opacity: 1;

    -moz-transform: translateX(0%);

  }

}

@keyframes cd-enter-right {

  0% {

    opacity: 0;

    -webkit-transform: translateX(100%);

    -moz-transform: translateX(100%);

    -ms-transform: translateX(100%);

    -o-transform: translateX(100%);

    transform: translateX(100%);

  }

  100% {

    opacity: 1;

    -webkit-transform: translateX(0%);

    -moz-transform: translateX(0%);

    -ms-transform: translateX(0%);

    -o-transform: translateX(0%);

    transform: translateX(0%);

  }

}

@-webkit-keyframes cd-enter-left {

  0% {

    opacity: 0;

    -webkit-transform: translateX(-100%);

  }

  100% {

    opacity: 1;

    -webkit-transform: translateX(0%);

  }

}

@-moz-keyframes cd-enter-left {

  0% {

    opacity: 0;

    -moz-transform: translateX(-100%);

  }

  100% {

    opacity: 1;

    -moz-transform: translateX(0%);

  }

}

@keyframes cd-enter-left {

  0% {

    opacity: 0;

    -webkit-transform: translateX(-100%);

    -moz-transform: translateX(-100%);

    -ms-transform: translateX(-100%);

    -o-transform: translateX(-100%);

    transform: translateX(-100%);

  }

  100% {

    opacity: 1;

    -webkit-transform: translateX(0%);

    -moz-transform: translateX(0%);

    -ms-transform: translateX(0%);

    -o-transform: translateX(0%);

    transform: translateX(0%);

  }

}

htdocs/js/jTLine/css/demo.css

0 → 100644
+111 −0
Original line number Diff line number Diff line 
.snip1566 {

    position: relative;

    display: inline-block;

    margin: 20px;

    max-width: 90px;

    color: #bbb;

    font-size: 16px;

    box-shadow: none !important;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    text-align: center;

    vertical-align: middle;

}







.snip1566 *,

.snip1566:before,

.snip1566:after {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    -webkit-transition: all 0.3s linear;

    transition: all 0.3s linear;

}



.snip1566:before,

.snip1566:after {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    border-radius: 50%;

    content: '';

    position: absolute;

    top: 0px;

    bottom: 0px;

    left: 0px;

    right: 0px;

    z-index: -1;

    border: 2px solid #bbb;

    border-color: transparent #bbb;

}



.snip1566 img {

    max-width: 100%;

    backface-visibility: hidden;

    vertical-align: top;

    border-radius: 50%;

    padding: 10px;

}



.snip1566 span {

    position: absolute;

    top: 5px;

    bottom: 5px;

    left: 5px;

    right: 5px;

    opacity: 0;

    background-color: rgba(0, 0, 0, 0.9);

    border-radius: 50%;

}



.snip1566 i {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    font-size: 4em;

    z-index: 1;

}



.snip1566 a {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 1;

}



.snip1566:hover span,

.snip1566.hover span {

    opacity: 1;

    -webkit-transform: translateX(0);

    transform: translateX(0);

}



.snip1566:hover:before,

.snip1566.hover:before,

.snip1566:hover:after,

.snip1566.hover:after {

    border-width: 10px;

}



.snip1566:hover:before,

.snip1566.hover:before {

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

}



.snip1566:hover:after,

.snip1566.hover:after {

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

}





/* Demo purposes only */

body {

    /*background-color: #bbb;

    text-align: center;*/

}