A little app to serve my photography from my personal website
mobile version of index page
Waiting for spindle ...
+98
-11
+72
-1
assets/photos/index.css
+72
-1
assets/photos/index.css
···
17
17
max-height: 500px;
18
18
overflow: hidden;
19
19
transition: transform 0.3s;
20
-
opacity: 0;
20
+
display: none;
21
21
}
22
22
23
23
.photos > *:hover {
···
65
65
cursor: pointer;
66
66
}
67
67
68
+
.mobile-only {
69
+
display: none;
70
+
}
71
+
68
72
.photos__nav {
69
73
flex-basis: max-content;
70
74
min-width: 200px;
71
75
}
72
76
77
+
.photos__nav .close {
78
+
position: fixed;
79
+
top: 30px;
80
+
right: 30px;
81
+
border: none;
82
+
background: none;
83
+
appearance: none;
84
+
padding: 0;
85
+
width: 30px;
86
+
height: 30px;
87
+
}
88
+
89
+
.photos__nav .close svg {
90
+
width: 100%;
91
+
height: 100%;
92
+
}
93
+
73
94
.photos__nav a {
74
95
text-decoration: none;
75
96
color: black;
···
110
131
width: 15px;
111
132
height: 15px;
112
133
}
134
+
135
+
.photos__mobile-nav {
136
+
display: flex;
137
+
justify-content: space-between;
138
+
align-items: center;
139
+
}
140
+
141
+
.photos__mobile-nav button {
142
+
border: solid black 1px;
143
+
border-radius: 5px;
144
+
padding: 5px 10px;
145
+
background: none;
146
+
appearance: none;
147
+
font-size: 14pt;
148
+
}
149
+
150
+
.photos__mobile-nav .sort {
151
+
text-decoration: none;
152
+
color: black;
153
+
font-size: 14pt;
154
+
}
155
+
156
+
@media (max-width: 700px) {
157
+
.photos__layout {
158
+
flex-direction: column;
159
+
}
160
+
161
+
.photos__nav {
162
+
display: none;
163
+
position: absolute;
164
+
top: 0;
165
+
left: 0;
166
+
right: 0;
167
+
bottom: 0;
168
+
padding: 30px;
169
+
background: white;
170
+
}
171
+
172
+
.photos__nav.open {
173
+
display: block;
174
+
}
175
+
176
+
.mobile-only {
177
+
display: initial;
178
+
}
179
+
180
+
.photos__mobile-nav {
181
+
display: flex;
182
+
}
183
+
}
+7
-1
assets/photos/index.js
+7
-1
assets/photos/index.js
···
54
54
photos.forEach(({ element, width, height }) => {
55
55
element.style.height = `${height}px`;
56
56
element.style.maxWidth = `${width}px`;
57
-
element.style.opacity = 100;
57
+
element.style.display = 'initial';
58
58
});
59
59
};
60
60
···
73
73
url.searchParams.set("page", page);
74
74
window.location = url.toString();
75
75
});
76
+
77
+
document.querySelectorAll(".mobile-nav-toggle").forEach((el) => {
78
+
el.addEventListener("click", () => {
79
+
document.querySelector(".photos__nav").classList.toggle("open");
80
+
});
81
+
});
+19
-9
templates/photos/index.jinja
+19
-9
templates/photos/index.jinja
···
3
3
{% block head %}<link rel="stylesheet" href="/assets/photos/index.css" />{% endblock %}
4
4
{% block body %}
5
5
<div class="photos__layout">
6
+
<div class="photos__mobile-nav mobile-only">
7
+
<button type="button" class="mobile-nav-toggle">Filter</button>
8
+
<a href="/?{{ sort_link }}" class="sort">
9
+
Sort {% if sort_dir == "asc" -%}↑{% else -%}↓{% endif %}
10
+
</a>
11
+
</div>
6
12
<div class="photos__container">
7
13
<div class="photos">
8
14
{% for photo in photos %}
···
74
80
{% if sort_dir == "asc" -%}↑{% else -%}↓{% endif %}
75
81
</a>
76
82
</p>
77
-
</select>
78
-
</nav>
79
-
</div>
80
-
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none">
81
-
<defs>
82
-
<path id="close-icon" d="M20.7457 3.32851C20.3552 2.93798 19.722 2.93798 19.3315 3.32851L12.0371 10.6229L4.74275 3.32851C4.35223 2.93798 3.71906 2.93798 3.32854 3.32851C2.93801 3.71903 2.93801 4.3522 3.32854 4.74272L10.6229 12.0371L3.32856 19.3314C2.93803 19.722 2.93803 20.3551 3.32856 20.7457C3.71908 21.1362 4.35225 21.1362 4.74277 20.7457L12.0371 13.4513L19.3315 20.7457C19.722 21.1362 20.3552 21.1362 20.7457 20.7457C21.1362 20.3551 21.1362 19.722 20.7457 19.3315L13.4513 12.0371L20.7457 4.74272C21.1362 4.3522 21.1362 3.71903 20.7457 3.32851Z" fill="currentColor"/>
83
-
</defs>
84
-
</svg>
85
-
<script src="/assets/photos/index.js" type="text/javascript"></script>
83
+
<button type="button" class="close mobile-only mobile-nav-toggle">
84
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
85
+
<use xlink:href="#close-icon" />
86
+
</svg>
87
+
</button>
88
+
</nav>
89
+
</div>
90
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none">
91
+
<defs>
92
+
<path id="close-icon" d="M20.7457 3.32851C20.3552 2.93798 19.722 2.93798 19.3315 3.32851L12.0371 10.6229L4.74275 3.32851C4.35223 2.93798 3.71906 2.93798 3.32854 3.32851C2.93801 3.71903 2.93801 4.3522 3.32854 4.74272L10.6229 12.0371L3.32856 19.3314C2.93803 19.722 2.93803 20.3551 3.32856 20.7457C3.71908 21.1362 4.35225 21.1362 4.74277 20.7457L12.0371 13.4513L19.3315 20.7457C19.722 21.1362 20.3552 21.1362 20.7457 20.7457C21.1362 20.3551 21.1362 19.722 20.7457 19.3315L13.4513 12.0371L20.7457 4.74272C21.1362 4.3522 21.1362 3.71903 20.7457 3.32851Z" fill="currentColor"/>
93
+
</defs>
94
+
</svg>
95
+
<script src="/assets/photos/index.js" type="text/javascript"></script>
86
96
{% endblock %}