Skip to content
Snippets Groups Projects
Commit 7afe6b94 authored by Martin Leblanc's avatar Martin Leblanc
Browse files

Merge branch 'feature/ISTWCMS-5723-ebremner-timeline' into '1.0.x' 

ISTWCMS-5723: adding timeline

See merge request !29
parents be903391 c94e6ccf
No related branches found
No related tags found
1 merge request!29ISTWCMS-5723: adding timeline
Hide whitespace changes
Inline Side-by-side
src/patterns/04-components/_index.scss
+ 1
− 0
View file @ 7afe6b94
......@@ -48,6 +48,7 @@
@forward 'tag/tag';
@forward 'tag-list/tag-list';
@forward 'territorial-statement/territorial-statement';
@forward 'timeline/timeline';
@forward 'twitter/twitter';
@forward 'view/view';
@forward 'view/view-content/view-content';
......
src/patterns/04-components/timeline/_timeline.scss 0 → 100644
+ 195
− 0
View file @ 7afe6b94
@use '../../01-core' as *;
.vertical-timeline {
font-family: var(--font-secondary);
font-size: var(--font-size-1);
font-weight: 200;
list-style: none;
/* 2 padding-top to allow pulling the line up above the first entry */
padding: 0;
padding-top: var(--size-6) !important;
position: relative;
z-index: var(--layer-background);
b,
strong {
font-family: var(--font-book);
font-weight: 500;
}
@media(min-width: $screen-sm) {
margin-left: var(--size-4);
}
@media(min-width: $screen-md) {
margin: 0;
}
p {
font-family: var(--font-secondary);
font-size: var(--font-size-1);
margin-top: var(--size-1);
}
a {
text-decoration: none;
}
li {
margin: 0;
padding: 0;
}
ol {
display: inline-block;
list-style: none;
margin: 0;
overflow: visible;
padding: 0;
vertical-align: top;
}
.timeline-year {
background: var(--uw-black);
color: var(--uw-white);
display: inline-block;
@media(min-width: $screen-md) {
margin-left: inherit;
}
padding: var(--size-05) var(--size-1);
position: relative;
text-align: center;
/* Fix the width so the line always lines up. */
width: var(--size-6);
z-index: var(--layer-wrapper);
}
.timeline-month {
background: var(--gray-5);
color: var(--uw-white);
display: inline-block;
@media(min-width: $screen-md) {
margin-left: -0.23rem;
}
padding: var(--size-05) var(--size-1);
position: relative;
text-align: center;
text-transform: uppercase;
/* Fix the width so the line always lines up. */
width: var(--size-6);
z-index: var(--layer-wrapper);
}
.timeline-info {
border: var(--size-xs) solid var(--uw-white);
box-shadow: var(--size-sm) var(--size-sm) 0 var(--gray-2);
margin-bottom: var(--size-4);
padding: var(--size-sm) var(--size-2) var(--size-4);
position: relative;
a {
display: block;
/* Margin/padding tricks to make links cover the padding of the li */
margin: -1rem -1rem -2rem;
padding: var(--size-2) var(--size-2) var(--size-2);
&:hover,
&:focus{
background: var(--gray-2);
}
&::after {
/* Modern clearfix from https://css-tricks.com/snippets/css/clear-fix/ */
clear: both;
content: '';
display: table;
}
}
&::before {
/* Trick CSS to add the circle. */
background: var(--gray-1);
border: 1px solid var(--gray-4);
border-radius: 50%;
content: '';
display: inline-block;
height: var(--size-105);
left: -0.5rem;
@media(min-width: $screen-md) {
left: -1.45rem;
}
position: absolute;
top: var(--size-05);
width: var(--size-105);
}
&::after {
/* Modern clearfix from https://css-tricks.com/snippets/css/clear-fix/ */
clear: both;
content: '';
display: table;
}
&__withlink {
&:hover {
&::before {
background: var(--gray-3);
border: var(--size-xs) solid var(--gray-4);
}
}
}
}
.timeline-photo {
border: var(--size-xs) solid #dddddd;
float: right;
margin: 0 0 0.7rem 0.7rem;
}
&.vertical-year,
&.vertical-month {
overflow: visible;
}
&.vertical-year,
&.vertical-month ol {
/* -2 margin-top + 2 padding-top to pull the line up above the first entry */
margin-top: -2rem;
padding-top: var(--size-4);
width: 100%;
@media(min-width: $screen-md) {
width: calc(100% - 4rem);
}
}
&.vertical-year ol,
&.vertical-month ol ol {
border-left: var(--size-xs) solid var(--gray-4);
/* -2 margin-top + 2 padding-top to pull the line up above the first entry */
margin: 0;
width: 100%;
@media(min-width: $screen-md) {
margin: -1rem 0 0 var(--size-4);
padding: var(--size-2) var(--size-2) 0;
width: calc(100% - 8rem);
}
}
}
.timeline {
&-headline {
font-size: var(--font-size-0);
line-height: 1.25;
}
&-year,
&-month {
font-family: var(--font-systemmedium);
font-size: var(--font-size-00);
}
}
src/patterns/04-components/timeline/timeline.md 0 → 100644
+ 0
− 0
View file @ 7afe6b94
src/patterns/04-components/timeline/timeline.twig 0 → 100644
+ 55
− 0
View file @ 7afe6b94
{% set modifier_classes -%}
uw-timeline vertical-timeline vertical-{{ timeline.style }} {{ modifier_classes }}
{%- endset %}
<ol class="{{ modifier_classes }}">
{% for year, years in timeline.items %}
<li>
<span class="timeline-year">{{ year }}</span>
<ol>
{% for month, months in years %}
{% if timeline.style == 'month' %}
<li>
{% set date = year ~ "-" ~ month ~ "-1" %}
<span class="timeline-month">{{ date|date("M") }}</span>
<ol>
{% endif %}
{% for days in months %}
{% for entry in days %}
<li class="timeline-info{% if entry.link %} timeline-info__withlink {% endif %}">
{% if entry.link %}
<a href="{{ entry.link }}">
{% endif %}
{% if entry.image %}
<img src="{{ entry.image }}" alt="" class="timeline-photo"/>
{% endif %}
<div class="timeline-headline"><strong>{{ entry.headline }}</strong></div>
<p>{{ entry.content }}</p>
{% if entry.link %}
</a>
{% endif %}
</li>
{% endfor %}
{% endfor %}
{% if timeline.style == 'month' %}
</ol>
</li>
{% endif %}
{% endfor %}
</ol>
</li>
{% endfor %}
</ol>
\ No newline at end of file
src/patterns/04-components/timeline/timeline.yml 0 → 100644
+ 190
− 0
View file @ 7afe6b94
---
timeline:
style: 'month'
items:
1966:
6:
8:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'The Polyphemus moths have begun to emerge from their cocoons - 7 females and 2 males emerge in one day. I put the females into 3 separate mating boxes and leave them by an open window so that they can release their pheromones. By 1 am, they have called in a couple of male moths. I mate two of the females with wild males.'
9:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'I release all the moths except one of the pregnant Polyphemus moths which I keep in a paper bag to lay her eggs.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_9.jpg?itok=9i7qSooF'
11:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'The female Polyphemus has laid a total of 103 eggs. Half of these eggs are now in the Ecology Lab under modified temperature and humidity conditions. As a control measure, the other half of the eggs have been placed in a natural area, their habitat was not modified in any way so that they are subject to natural conditions.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_10.jpg?itok=rZoYiTP_'
13:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'A total of 10 males and 1 female Cecropia Moths have emerged, which is a stark contrast to the sex ratio of the Polyphemus moths. I will attempt to mate the female tonight using the same method as the Polyphemus moths. I will also be releasing the males tonight, but I have tagged them with small stickers to prevent inbreeding should they find their way back to the female through her pheromones.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_13.jpg?itok=-TIDW7D8'
16:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'Successfully mated a Cecropia moth at 2:40 am on June16th, and over the next 2 days she laid 153 eggs into a paper bag. However, she presented odd behaviour while laying eggs, and laid thick bundles of 10-20 eggs on her legs rather than on the bag. Usually a female will lay groups of 3 eggs randomly, and never on her own body. I removed them from her and pulled apart the eggs before the substrate used to stick eggs to leaves completely dried. However I do not know if I have accidentally damaged any eggs in the process, despite my carefulness. This will be interesting to observe once the caterpillars begin to hatch in 10-14 days. '
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_16.jpg?itok=18idxfuY'
7:
8:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'The Polyphemus moths have begun to emerge from their cocoons - 7 females and 2 males emerge in one day. I put the females into 3 separate mating boxes and leave them by an open window so that they can release their pheromones. By 1 am, they have called in a couple of male moths. I mate two of the females with wild males.'
9:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'I release all the moths except one of the pregnant Polyphemus moths which I keep in a paper bag to lay her eggs.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_9.jpg?itok=9i7qSooF'
10:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'The female Polyphemus has laid a total of 103 eggs. Half of these eggs are now in the Ecology Lab under modified temperature and humidity conditions. As a control measure, the other half of the eggs have been placed in a natural area, their habitat was not modified in any way so that they are subject to natural conditions.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_10.jpg?itok=rZoYiTP_'
13:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'A total of 10 males and 1 female Cecropia Moths have emerged, which is a stark contrast to the sex ratio of the Polyphemus moths. I will attempt to mate the female tonight using the same method as the Polyphemus moths. I will also be releasing the males tonight, but I have tagged them with small stickers to prevent inbreeding should they find their way back to the female through her pheromones.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_13.jpg?itok=-TIDW7D8'
16:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'Successfully mated a Cecropia moth at 2:40 am on June16th, and over the next 2 days she laid 153 eggs into a paper bag. However, she presented odd behaviour while laying eggs, and laid thick bundles of 10-20 eggs on her legs rather than on the bag. Usually a female will lay groups of 3 eggs randomly, and never on her own body. I removed them from her and pulled apart the eggs before the substrate used to stick eggs to leaves completely dried. However I do not know if I have accidentally damaged any eggs in the process, despite my carefulness. This will be interesting to observe once the caterpillars begin to hatch in 10-14 days. '
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_16.jpg?itok=18idxfuY'
8:
8:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'The Polyphemus moths have begun to emerge from their cocoons - 7 females and 2 males emerge in one day. I put the females into 3 separate mating boxes and leave them by an open window so that they can release their pheromones. By 1 am, they have called in a couple of male moths. I mate two of the females with wild males.'
9:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'I release all the moths except one of the pregnant Polyphemus moths which I keep in a paper bag to lay her eggs.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_9.jpg?itok=9i7qSooF'
10:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'The female Polyphemus has laid a total of 103 eggs. Half of these eggs are now in the Ecology Lab under modified temperature and humidity conditions. As a control measure, the other half of the eggs have been placed in a natural area, their habitat was not modified in any way so that they are subject to natural conditions.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_10.jpg?itok=rZoYiTP_'
13:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'A total of 10 males and 1 female Cecropia Moths have emerged, which is a stark contrast to the sex ratio of the Polyphemus moths. I will attempt to mate the female tonight using the same method as the Polyphemus moths. I will also be releasing the males tonight, but I have tagged them with small stickers to prevent inbreeding should they find their way back to the female through her pheromones.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_13.jpg?itok=-TIDW7D8'
16:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'Successfully mated a Cecropia moth at 2:40 am on June16th, and over the next 2 days she laid 153 eggs into a paper bag. However, she presented odd behaviour while laying eggs, and laid thick bundles of 10-20 eggs on her legs rather than on the bag. Usually a female will lay groups of 3 eggs randomly, and never on her own body. I removed them from her and pulled apart the eggs before the substrate used to stick eggs to leaves completely dried. However I do not know if I have accidentally damaged any eggs in the process, despite my carefulness. This will be interesting to observe once the caterpillars begin to hatch in 10-14 days. '
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_16.jpg?itok=18idxfuY'
1967:
1:
8:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'The Polyphemus moths have begun to emerge from their cocoons - 7 females and 2 males emerge in one day. I put the females into 3 separate mating boxes and leave them by an open window so that they can release their pheromones. By 1 am, they have called in a couple of male moths. I mate two of the females with wild males.'
9:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'I release all the moths except one of the pregnant Polyphemus moths which I keep in a paper bag to lay her eggs.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_9.jpg?itok=9i7qSooF'
10:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'The female Polyphemus has laid a total of 103 eggs. Half of these eggs are now in the Ecology Lab under modified temperature and humidity conditions. As a control measure, the other half of the eggs have been placed in a natural area, their habitat was not modified in any way so that they are subject to natural conditions.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_10.jpg?itok=rZoYiTP_'
13:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'A total of 10 males and 1 female Cecropia Moths have emerged, which is a stark contrast to the sex ratio of the Polyphemus moths. I will attempt to mate the female tonight using the same method as the Polyphemus moths. I will also be releasing the males tonight, but I have tagged them with small stickers to prevent inbreeding should they find their way back to the female through her pheromones.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_13.jpg?itok=-TIDW7D8'
16:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'Successfully mated a Cecropia moth at 2:40 am on June16th, and over the next 2 days she laid 153 eggs into a paper bag. However, she presented odd behaviour while laying eggs, and laid thick bundles of 10-20 eggs on her legs rather than on the bag. Usually a female will lay groups of 3 eggs randomly, and never on her own body. I removed them from her and pulled apart the eggs before the substrate used to stick eggs to leaves completely dried. However I do not know if I have accidentally damaged any eggs in the process, despite my carefulness. This will be interesting to observe once the caterpillars begin to hatch in 10-14 days. '
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_16.jpg?itok=18idxfuY'
2:
8:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'The Polyphemus moths have begun to emerge from their cocoons - 7 females and 2 males emerge in one day. I put the females into 3 separate mating boxes and leave them by an open window so that they can release their pheromones. By 1 am, they have called in a couple of male moths. I mate two of the females with wild males.'
9:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'I release all the moths except one of the pregnant Polyphemus moths which I keep in a paper bag to lay her eggs.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_9.jpg?itok=9i7qSooF'
10:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'The female Polyphemus has laid a total of 103 eggs. Half of these eggs are now in the Ecology Lab under modified temperature and humidity conditions. As a control measure, the other half of the eggs have been placed in a natural area, their habitat was not modified in any way so that they are subject to natural conditions.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_10.jpg?itok=rZoYiTP_'
13:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'A total of 10 males and 1 female Cecropia Moths have emerged, which is a stark contrast to the sex ratio of the Polyphemus moths. I will attempt to mate the female tonight using the same method as the Polyphemus moths. I will also be releasing the males tonight, but I have tagged them with small stickers to prevent inbreeding should they find their way back to the female through her pheromones.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_13.jpg?itok=-TIDW7D8'
16:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'Successfully mated a Cecropia moth at 2:40 am on June16th, and over the next 2 days she laid 153 eggs into a paper bag. However, she presented odd behaviour while laying eggs, and laid thick bundles of 10-20 eggs on her legs rather than on the bag. Usually a female will lay groups of 3 eggs randomly, and never on her own body. I removed them from her and pulled apart the eggs before the substrate used to stick eggs to leaves completely dried. However I do not know if I have accidentally damaged any eggs in the process, despite my carefulness. This will be interesting to observe once the caterpillars begin to hatch in 10-14 days. '
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_16.jpg?itok=18idxfuY'
1968:
2:
8:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'The Polyphemus moths have begun to emerge from their cocoons - 7 females and 2 males emerge in one day. I put the females into 3 separate mating boxes and leave them by an open window so that they can release their pheromones. By 1 am, they have called in a couple of male moths. I mate two of the females with wild males.'
9:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'I release all the moths except one of the pregnant Polyphemus moths which I keep in a paper bag to lay her eggs.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_9.jpg?itok=9i7qSooF'
10:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'The female Polyphemus has laid a total of 103 eggs. Half of these eggs are now in the Ecology Lab under modified temperature and humidity conditions. As a control measure, the other half of the eggs have been placed in a natural area, their habitat was not modified in any way so that they are subject to natural conditions.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_10.jpg?itok=rZoYiTP_'
13:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'A total of 10 males and 1 female Cecropia Moths have emerged, which is a stark contrast to the sex ratio of the Polyphemus moths. I will attempt to mate the female tonight using the same method as the Polyphemus moths. I will also be releasing the males tonight, but I have tagged them with small stickers to prevent inbreeding should they find their way back to the female through her pheromones.'
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_13.jpg?itok=-TIDW7D8'
16:
-
link: 'https://uwaterloo.ca'
headline: 'This is a headline.'
content: 'Successfully mated a Cecropia moth at 2:40 am on June16th, and over the next 2 days she laid 153 eggs into a paper bag. However, she presented odd behaviour while laying eggs, and laid thick bundles of 10-20 eggs on her legs rather than on the bag. Usually a female will lay groups of 3 eggs randomly, and never on her own body. I removed them from her and pulled apart the eggs before the substrate used to stick eggs to leaves completely dried. However I do not know if I have accidentally damaged any eggs in the process, despite my carefulness. This will be interesting to observe once the caterpillars begin to hatch in 10-14 days. '
image: 'https://uwaterloo.ca/ecology-lab/sites/ca.ecology-lab/files/styles/thumbnail/public/june_16.jpg?itok=18idxfuY'
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment