Skip to content

Commit e51997f

Browse files
blast007blast007
committedDec 25, 2020
Add support for screenshots on the project history page.
1 parent c1e14d4 commit e51997f

File tree

4 files changed

+126
-84
lines changed

4 files changed

+126
-84
lines changed
 

Diff for: ‎_includes/screenshots.html.twig

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
2+
3+
<!-- Background of PhotoSwipe.
4+
It's a separate element as animating opacity is faster than rgba(). -->
5+
<div class="pswp__bg"></div>
6+
7+
<!-- Slides wrapper with overflow:hidden. -->
8+
<div class="pswp__scroll-wrap">
9+
10+
<!-- Container that holds slides.
11+
PhotoSwipe keeps only 3 of them in the DOM to save memory.
12+
Don't modify these 3 pswp__item elements, data is added later on. -->
13+
<div class="pswp__container">
14+
<div class="pswp__item"></div>
15+
<div class="pswp__item"></div>
16+
<div class="pswp__item"></div>
17+
</div>
18+
19+
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
20+
<div class="pswp__ui pswp__ui--hidden">
21+
22+
<div class="pswp__top-bar">
23+
24+
<!-- Controls are self-explanatory. Order can be changed. -->
25+
26+
<div class="pswp__counter"></div>
27+
28+
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
29+
30+
<button class="pswp__button pswp__button--share" title="Share"></button>
31+
32+
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
33+
34+
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
35+
36+
<div class="pswp__preloader">
37+
<div class="pswp__preloader__icn">
38+
<div class="pswp__preloader__cut">
39+
<div class="pswp__preloader__donut"></div>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
44+
45+
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
46+
<div class="pswp__share-tooltip"></div>
47+
</div>
48+
49+
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
50+
</button>
51+
52+
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
53+
</button>
54+
55+
<div class="pswp__caption">
56+
<div class="pswp__caption__center"></div>
57+
</div>
58+
59+
</div>
60+
61+
</div>
62+
63+
</div>
64+
65+
<script src="/assets/js/photoswipe.min.js"></script>
66+
<script src="/assets/js/photoswipe-ui-default.min.js"></script>
67+
<script src="/assets/js/screenshots.js"></script>

Diff for: ‎_pages/history.html.twig

+24-2
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ permalink: /history/
3333
<p class="text-center mb-0"><a href="#origin" class="origin-collapsed">Read More</a><a href="#" class="origin-expanded">Read Less</a></p>
3434
</div>
3535

36-
<div id="milestones">
36+
<div id="milestones" class="js-screenshots">
3737
{% set lastYearLine = 0 %}
3838
{% for i, milestone in attribute(data, 'milestones') | order('date', 'ASC') %}
3939
{% set thisYearLine = milestone.date | date('Y') // yearStep * yearStep %}
@@ -42,6 +42,28 @@ permalink: /history/
4242
<div class="history-line"></div>
4343
<div class="history-year">{{ thisYearLine }}</div>
4444
{% endif %}
45+
{% if milestone.image %}
46+
<div class="history-line"></div>
47+
<figure class="history-screenshot"
48+
itemprop="associatedMedia"
49+
itemscope
50+
itemtype="http://schema.org/ImageObject"
51+
>
52+
<a href="{{ url('assets/images/about/milestones/' ~ milestone.image.full) }}"
53+
itemprop="contentUrl"
54+
data-size="{{ milestone.image.fullSize }}"
55+
>
56+
<img src="{{ url('assets/images/about/milestones/' ~ milestone.image.thumb) }}"
57+
itemprop="thumbnail"
58+
alt="{{ milestone.image.caption | striptags | e }}"
59+
/>
60+
</a>
61+
62+
{% if milestone.image.caption %}
63+
<figcaption itemprop="caption description">{{ milestone.image.caption }}</figcaption>
64+
{% endif %}
65+
</figure>
66+
{% endif %}
4567
<div class="history-line"></div>
4668
<div class="history-milestone{% if i % 2 == 0 %} even{% endif %}">
4769
<h2>{{ milestone.title }}</h2>
@@ -53,6 +75,6 @@ permalink: /history/
5375
</div>
5476
</div>
5577

56-
{% include "_includes/edit_me.html.twig" %}
78+
{% include "_includes/screenshots.html.twig" %}
5779
</main>
5880
{% endblock %}

Diff for: ‎_pages/media.html.twig

+1-67
Original file line numberDiff line numberDiff line change
@@ -60,71 +60,5 @@ permalink: /media/
6060
{% endfor %}
6161
</div>
6262

63-
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
64-
65-
<!-- Background of PhotoSwipe.
66-
It's a separate element as animating opacity is faster than rgba(). -->
67-
<div class="pswp__bg"></div>
68-
69-
<!-- Slides wrapper with overflow:hidden. -->
70-
<div class="pswp__scroll-wrap">
71-
72-
<!-- Container that holds slides.
73-
PhotoSwipe keeps only 3 of them in the DOM to save memory.
74-
Don't modify these 3 pswp__item elements, data is added later on. -->
75-
<div class="pswp__container">
76-
<div class="pswp__item"></div>
77-
<div class="pswp__item"></div>
78-
<div class="pswp__item"></div>
79-
</div>
80-
81-
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
82-
<div class="pswp__ui pswp__ui--hidden">
83-
84-
<div class="pswp__top-bar">
85-
86-
<!-- Controls are self-explanatory. Order can be changed. -->
87-
88-
<div class="pswp__counter"></div>
89-
90-
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
91-
92-
<button class="pswp__button pswp__button--share" title="Share"></button>
93-
94-
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
95-
96-
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
97-
98-
<div class="pswp__preloader">
99-
<div class="pswp__preloader__icn">
100-
<div class="pswp__preloader__cut">
101-
<div class="pswp__preloader__donut"></div>
102-
</div>
103-
</div>
104-
</div>
105-
</div>
106-
107-
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
108-
<div class="pswp__share-tooltip"></div>
109-
</div>
110-
111-
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
112-
</button>
113-
114-
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
115-
</button>
116-
117-
<div class="pswp__caption">
118-
<div class="pswp__caption__center"></div>
119-
</div>
120-
121-
</div>
122-
123-
</div>
124-
125-
</div>
126-
127-
<script src="/assets/js/photoswipe.min.js"></script>
128-
<script src="/assets/js/photoswipe-ui-default.min.js"></script>
129-
<script src="/assets/js/screenshots.js"></script>
63+
{% include "_includes/screenshots.html.twig" %}
13064
{% endblock %}

Diff for: ‎_sass/pages/_history.scss

+34-15
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,11 @@
5252
}
5353
}
5454

55+
#milestones {
56+
margin: 0 auto 1em;
57+
width: 500px;
58+
}
59+
5560
.history-line {
5661
margin: 0 auto;
5762
width: 0;
@@ -66,26 +71,40 @@
6671
text-align: center;
6772
}
6873

69-
.history-milestone {
70-
background-color: rgba(#000, 0.2);
71-
box-shadow: $box-shadow;
72-
}
74+
.history-image img {
7375

74-
#milestones {
75-
margin: 0 auto 1em;
76-
width: 500px;
76+
}
7777

78-
.milestone-date {
79-
font-size: 10pt;
78+
.history-screenshot {
79+
figcaption {
80+
display: none;
8081
}
8182

82-
.history-milestone {
83+
img {
84+
display: block;
85+
margin: 10px auto;
8386
padding: 10px;
84-
width: 400px;
85-
margin: 10px 0;
8687

87-
&.even {
88-
margin-left: 80px;
89-
}
88+
background-color: rgba(#000, 0.2);
89+
box-shadow: $box-shadow;
90+
}
91+
}
92+
93+
94+
.history-milestone {
95+
margin: 10px 0;
96+
padding: 10px;
97+
width: 400px;
98+
99+
background-color: rgba(#000, 0.2);
100+
box-shadow: $box-shadow;
101+
102+
&.even {
103+
margin-left: 80px;
90104
}
91105
}
106+
107+
.milestone-date {
108+
font-size: 10pt;
109+
}
110+

0 commit comments

Comments
 (0)
Please sign in to comment.