Skip to content

Commit 0844acd

Browse files
smashedrsmashedr
authored
Merge pull request #1 from django-files/template
Add Templating to Screenshots Page
2 parents 787c9c8 + 16615cd commit 0844acd

File tree

5 files changed

+187
-144
lines changed

5 files changed

+187
-144
lines changed

‎.eslintrc.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es2021": true,
5+
"jquery": true,
6+
"webextensions": true
7+
},
8+
"extends": "eslint:recommended",
9+
"parserOptions": {
10+
"ecmaVersion": "latest",
11+
"sourceType": "module"
12+
},
13+
"rules": {
14+
"no-extra-semi": "off",
15+
"no-undef": "off"
16+
}
17+
}

‎.prettierrc.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"trailingComma": "es5",
3+
"tabWidth": 4,
4+
"semi": false,
5+
"singleQuote": true,
6+
"overrides": [
7+
{
8+
"files": ["**/*.html"],
9+
"options": {
10+
"singleQuote": false
11+
}
12+
},
13+
{
14+
"files": ["**/*.json"],
15+
"options": {
16+
"tabWidth": 2
17+
}
18+
}
19+
]
20+
}

‎css/screenshots.css

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
html,
2+
body {
3+
font-family:
4+
Helvetica Neue,
5+
Helvetica,
6+
Arial,
7+
sans-serif;
8+
font-size: 14px;
9+
margin: 0;
10+
padding: 0;
11+
position: relative;
12+
height: 100%;
13+
background: #111;
14+
color: #111;
15+
}
16+
body {
17+
background: #343432;
18+
font-family:
19+
Helvetica Neue,
20+
Helvetica,
21+
Arial,
22+
sans-serif;
23+
font-size: 14px;
24+
color: #111;
25+
margin: 0;
26+
padding: 0;
27+
}
28+
.swiper {
29+
width: 100%;
30+
height: 300px;
31+
margin-left: auto;
32+
margin-right: auto;
33+
}
34+
.swiper-slide {
35+
text-align: center;
36+
font-size: 18px;
37+
display: flex;
38+
justify-content: center;
39+
align-items: center;
40+
background-size: cover;
41+
background: #343432 center;
42+
}
43+
.swiper-slide img {
44+
display: block;
45+
max-width: 100%;
46+
max-height: 100%;
47+
object-fit: cover;
48+
}
49+
.mySwiper2 {
50+
height: 80%;
51+
width: 100%;
52+
}
53+
.mySwiper {
54+
height: 20%;
55+
box-sizing: border-box;
56+
padding: 8px 0;
57+
}
58+
.mySwiper .swiper-slide {
59+
width: 25%;
60+
height: 100%;
61+
opacity: 0.4;
62+
}
63+
.mySwiper .swiper-slide-thumb-active {
64+
opacity: 1;
65+
}
66+
.swiper-pagination {
67+
color: white;
68+
}

‎js/screenshots.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
// JS for screenshots.html
2+
3+
const baseDir = 'screenshots/'
4+
const screenShots = [
5+
'01_Login.png',
6+
'02_Home.png',
7+
'03_Stats.png',
8+
'04_Gallery.png',
9+
'05_Upload.png',
10+
'06_Files.png',
11+
'07_Files-delete-click.png',
12+
'08_Files-delete-deleted.png',
13+
'09_Shorts.png',
14+
'10_Shorts-create.png',
15+
'11_Shorts-delete-click.png',
16+
'12_Shorts-delete-deleted.png',
17+
'13_Settings.png',
18+
'14_Settings-save-settings.png',
19+
'15_Settings-flush-cache.png',
20+
'16_Preview-gps2.jpg.png',
21+
'17_Raw-gps2.jpg.png',
22+
'18_Preview-README.md.png',
23+
'19_Preview-requirements.txt.png',
24+
'20_Preview-main.html.png',
25+
'21_Preview-home_tags.py.png',
26+
'22_Preview-an225.jpg.png',
27+
'23_logout.png',
28+
]
29+
30+
const shotsEl = document.getElementById('swiper-shots')
31+
const thumbsEl = document.getElementById('swiper-thumbs')
32+
33+
for (const shot of screenShots) {
34+
// console.debug('shot', shot)
35+
const div = document.createElement('div')
36+
div.classList.add('swiper-slide')
37+
const img = document.createElement('img')
38+
img.src = `${baseDir}${shot}`
39+
img.alt = shot
40+
div.appendChild(img)
41+
shotsEl.appendChild(div)
42+
thumbsEl.appendChild(div.cloneNode(true))
43+
}
44+
45+
const swiper = new Swiper('.mySwiper', {
46+
freeMode: true,
47+
grabCursor: true,
48+
loop: true,
49+
mousewheel: true,
50+
slidesPerView: 5,
51+
spaceBetween: 10,
52+
watchSlidesProgress: true,
53+
})
54+
55+
const swiper2 = new Swiper('.mySwiper2', {
56+
grabCursor: true,
57+
effect: 'fade',
58+
loop: true,
59+
mousewheel: true,
60+
spaceBetween: 10,
61+
zoom: true,
62+
keyboard: {
63+
enabled: true,
64+
},
65+
navigation: {
66+
nextEl: '.swiper-button-next',
67+
prevEl: '.swiper-button-prev',
68+
},
69+
pagination: {
70+
el: '.swiper-pagination',
71+
type: 'fraction',
72+
},
73+
thumbs: {
74+
swiper: swiper,
75+
},
76+
})

‎screenshots.html

Lines changed: 6 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -19,165 +19,27 @@
1919

2020
<link rel="icon" href="favicon.ico" sizes="any">
2121
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
22-
<style>
23-
html,
24-
body {
25-
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
26-
font-size: 14px;
27-
margin: 0;
28-
padding: 0;
29-
position: relative;
30-
height: 100%;
31-
background: #111;
32-
color: #111;
33-
}
34-
body {
35-
background: #343432;
36-
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
37-
font-size: 14px;
38-
color: #111;
39-
margin: 0;
40-
padding: 0;
41-
}
42-
.swiper {
43-
width: 100%;
44-
height: 300px;
45-
margin-left: auto;
46-
margin-right: auto;
47-
}
48-
.swiper-slide {
49-
text-align: center;
50-
font-size: 18px;
51-
display: flex;
52-
justify-content: center;
53-
align-items: center;
54-
background-size: cover;
55-
background: #343432 center;
56-
}
57-
.swiper-slide img {
58-
display: block;
59-
max-width: 100%;
60-
max-height: 100%;
61-
object-fit: cover;
62-
}
63-
.mySwiper2 {
64-
height: 80%;
65-
width: 100%;
66-
}
67-
.mySwiper {
68-
height: 20%;
69-
box-sizing: border-box;
70-
padding: 8px 0;
71-
}
72-
.mySwiper .swiper-slide {
73-
width: 25%;
74-
height: 100%;
75-
opacity: 0.4;
76-
}
77-
.mySwiper .swiper-slide-thumb-active {
78-
opacity: 1;
79-
}
80-
.swiper-pagination {
81-
color: white;
82-
}
83-
</style>
22+
<link rel="stylesheet" href="/css/screenshots.css">
8423

8524
</head>
8625
<body>
8726

8827
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2">
89-
<div class="swiper-wrapper">
90-
<div class="swiper-slide"><img src="screenshots/01_Login.png" alt="01_Login.png"></div>
91-
<div class="swiper-slide"><img src="screenshots/02_Home.png" alt="02_Home.png"></div>
92-
<div class="swiper-slide"><img src="screenshots/03_Stats.png" alt="03_Stats.png"></div>
93-
<div class="swiper-slide"><img src="screenshots/04_Gallery.png" alt="04_Gallery.png"></div>
94-
<div class="swiper-slide"><img src="screenshots/05_Upload.png" alt="05_Upload.png"></div>
95-
<div class="swiper-slide"><img src="screenshots/06_Files.png" alt="06_Files.png"></div>
96-
<div class="swiper-slide"><img src="screenshots/07_Files-delete-click.png" alt="07_Files-delete-click.png"></div>
97-
<div class="swiper-slide"><img src="screenshots/08_Files-delete-deleted.png" alt="08_Files-delete-deleted.png"></div>
98-
<div class="swiper-slide"><img src="screenshots/09_Shorts.png" alt="09_Shorts.png"></div>
99-
<div class="swiper-slide"><img src="screenshots/10_Shorts-create.png" alt="10_Shorts-create.png"></div>
100-
<div class="swiper-slide"><img src="screenshots/11_Shorts-delete-click.png" alt="11_Shorts-delete-click.png"></div>
101-
<div class="swiper-slide"><img src="screenshots/12_Shorts-delete-deleted.png" alt="12_Shorts-delete-deleted.png"></div>
102-
<div class="swiper-slide"><img src="screenshots/13_Settings.png" alt="13_Settings.png"></div>
103-
<div class="swiper-slide"><img src="screenshots/14_Settings-save-settings.png" alt="14_Settings-save-settings.png"></div>
104-
<div class="swiper-slide"><img src="screenshots/15_Settings-flush-cache.png" alt="15_Settings-flush-cache.png"></div>
105-
<div class="swiper-slide"><img src="screenshots/16_Preview-gps2.jpg.png" alt="16_Preview-gps2.jpg.png"></div>
106-
<div class="swiper-slide"><img src="screenshots/17_Raw-gps2.jpg.png" alt="17_Raw-gps2.jpg.png"></div>
107-
<div class="swiper-slide"><img src="screenshots/18_Preview-README.md.png" alt="18_Preview-README.md.png"></div>
108-
<div class="swiper-slide"><img src="screenshots/19_Preview-requirements.txt.png" alt="19_Preview-requirements.txt.png"></div>
109-
<div class="swiper-slide"><img src="screenshots/20_Preview-main.html.png" alt="20_Preview-main.html.png"></div>
110-
<div class="swiper-slide"><img src="screenshots/21_Preview-home_tags.py.png" alt="21_Preview-home_tags.py.png"></div>
111-
<div class="swiper-slide"><img src="screenshots/22_Preview-an225.jpg.png" alt="22_Preview-an225.jpg.png"></div>
112-
<div class="swiper-slide"><img src="screenshots/23_logout.png" alt="23_logout.png"></div>
28+
<div class="swiper-wrapper" id="swiper-shots">
29+
<!-- <div class="swiper-slide"><img src="screenshots/01_Login.png" alt="01_Login.png"></div>-->
11330
</div>
11431
<div class="swiper-button-next"></div>
11532
<div class="swiper-button-prev"></div>
11633
<div class="swiper-pagination"></div>
11734
</div>
11835
<div thumbsSlider="" class="swiper mySwiper">
119-
<div class="swiper-wrapper">
120-
<div class="swiper-slide"><img src="screenshots/01_Login.png" alt="01_Login.png"></div>
121-
<div class="swiper-slide"><img src="screenshots/02_Home.png" alt="02_Home.png"></div>
122-
<div class="swiper-slide"><img src="screenshots/03_Stats.png" alt="03_Stats.png"></div>
123-
<div class="swiper-slide"><img src="screenshots/04_Gallery.png" alt="04_Gallery.png"></div>
124-
<div class="swiper-slide"><img src="screenshots/05_Upload.png" alt="05_Upload.png"></div>
125-
<div class="swiper-slide"><img src="screenshots/06_Files.png" alt="06_Files.png"></div>
126-
<div class="swiper-slide"><img src="screenshots/07_Files-delete-click.png" alt="07_Files-delete-click.png"></div>
127-
<div class="swiper-slide"><img src="screenshots/08_Files-delete-deleted.png" alt="08_Files-delete-deleted.png"></div>
128-
<div class="swiper-slide"><img src="screenshots/09_Shorts.png" alt="09_Shorts.png"></div>
129-
<div class="swiper-slide"><img src="screenshots/10_Shorts-create.png" alt="10_Shorts-create.png"></div>
130-
<div class="swiper-slide"><img src="screenshots/11_Shorts-delete-click.png" alt="11_Shorts-delete-click.png"></div>
131-
<div class="swiper-slide"><img src="screenshots/12_Shorts-delete-deleted.png" alt="12_Shorts-delete-deleted.png"></div>
132-
<div class="swiper-slide"><img src="screenshots/13_Settings.png" alt="13_Settings.png"></div>
133-
<div class="swiper-slide"><img src="screenshots/14_Settings-save-settings.png" alt="14_Settings-save-settings.png"></div>
134-
<div class="swiper-slide"><img src="screenshots/15_Settings-flush-cache.png" alt="15_Settings-flush-cache.png"></div>
135-
<div class="swiper-slide"><img src="screenshots/16_Preview-gps2.jpg.png" alt="16_Preview-gps2.jpg.png"></div>
136-
<div class="swiper-slide"><img src="screenshots/17_Raw-gps2.jpg.png" alt="17_Raw-gps2.jpg.png"></div>
137-
<div class="swiper-slide"><img src="screenshots/18_Preview-README.md.png" alt="18_Preview-README.md.png"></div>
138-
<div class="swiper-slide"><img src="screenshots/19_Preview-requirements.txt.png" alt="19_Preview-requirements.txt.png"></div>
139-
<div class="swiper-slide"><img src="screenshots/20_Preview-main.html.png" alt="20_Preview-main.html.png"></div>
140-
<div class="swiper-slide"><img src="screenshots/21_Preview-home_tags.py.png" alt="21_Preview-home_tags.py.png"></div>
141-
<div class="swiper-slide"><img src="screenshots/22_Preview-an225.jpg.png" alt="22_Preview-an225.jpg.png"></div>
142-
<div class="swiper-slide"><img src="screenshots/23_logout.png" alt="23_logout.png"></div>
36+
<div class="swiper-wrapper" id="swiper-thumbs">
37+
<!-- <div class="swiper-slide"><img src="screenshots/01_Login.png" alt="01_Login.png"></div>-->
14338
</div>
14439
</div>
14540

14641
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
147-
148-
<script>
149-
var swiper = new Swiper(".mySwiper", {
150-
freeMode: true,
151-
grabCursor: true,
152-
loop: true,
153-
mousewheel: true,
154-
slidesPerView: 5,
155-
spaceBetween: 10,
156-
watchSlidesProgress: true,
157-
});
158-
var swiper2 = new Swiper(".mySwiper2", {
159-
grabCursor: true,
160-
effect: 'fade',
161-
loop: true,
162-
mousewheel: true,
163-
spaceBetween: 10,
164-
zoom: true,
165-
keyboard: {
166-
enabled: true,
167-
},
168-
navigation: {
169-
nextEl: ".swiper-button-next",
170-
prevEl: ".swiper-button-prev",
171-
},
172-
pagination: {
173-
el: ".swiper-pagination",
174-
type: "fraction",
175-
},
176-
thumbs: {
177-
swiper: swiper,
178-
},
179-
});
180-
</script>
42+
<script type="text/javascript" src="/js/screenshots.js"></script>
18143

18244
</body>
18345
</html>

0 commit comments

Comments
 (0)