Mirrors/tinypin
1
0
Fork 0
mirror of https://github.com/slynn1324/tinypin.git synced 2026-01-23 02:25:08 +00:00
Code Issues Projects Releases Wiki Activity

style fixes and custom icons

Browse source
This commit is contained in:
slynn1324 2021-01-23 10:31:14 -06:00
parent 7dc631a84d
commit 7248f4cbf9
18 changed files with 8041 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

17
static/app.js
View file

@ -109,12 +109,7 @@ const appComponent = new Reef("#app", {
<div id="brickwall" class="brickwall"></div>
</div>
</section>
<footer class="footer" id="footer">
<div class="content has-text-right">
<a data-onclick="aboutModal.open">about tinypin</a>
</div>
</footer>
<div id="addPinModal"></div>
<div id="pinZoomModal"></div>
<div id="editBoardModal"></div>
@ -137,6 +132,15 @@ for (const [name, f] of Object.entries(app.getComponents())) {
document.addEventListener('click', (el) => {
// we always want to close the menu on click. if we clicked an item,
// that will still trigger below
let burger = el.target.closest('.navbar-burger');
console.log("the burger is: ", burger);
if ( !burger ){
store.do('navbar.closeMenu');
}
let target = el.target.closest('[data-onclick]');
if (target) {
let action = target.getAttribute('data-onclick');
@ -148,6 +152,7 @@ document.addEventListener('click', (el) => {
}
}
}
});
// focusout bubbles while 'blur' does not.

7703
static/bulma-custom.css Normal file
View file

File diff suppressed because it is too large Load diff

22
static/client.css
View file

@ -204,7 +204,7 @@
border-bottom-color: #3273dc;
}
#loader-mobile {
/* #loader-mobile {
display: none;
}
@ -222,4 +222,24 @@
position: relative;
margin-left: auto;
}
} */
.navbar-burger{
margin-left: 0;
}
#loader-mobile {
display: block;
position: relative;
margin-left: auto;
margin-top: -2px;
}
.modal-card {
max-width: 95%;
}
.navbar-item span, .navbar-item img{
line-height: 24px;
vertical-align: middle;
}

41
static/components/navbar.js
View file

@ -2,6 +2,13 @@ app.addSetter('navbar.toggleMenu', (data) => {
data.menuOpen = !data.menuOpen;
});
app.addSetter('navbar.closeMenu', (data) => {
data.menuOpen = false;
});
app.addSetter('navbar.refresh', () =>{
window.location.reload();
});
app.addComponent('navbar', (store) => { return new Reef("#navbar", {
store: store,
@ -11,13 +18,25 @@ app.addComponent('navbar', (store) => { return new Reef("#navbar", {
if ( data.board ){
boardName = /*html*/`
<span class="navbar-item">${data.board.name} &nbsp;
<a data-onclick="editBoardModal.open" style="padding-top: 3px;"><img alt="edit" width="16" height="16" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48dGl0bGU+NTE8L3RpdGxlPjxwYXRoIGQ9Ik04NC44NTAxMiw1MFY4MS43NDUxMkExMy4yNzAxMiwxMy4yNzAxMiwwLDAsMSw3MS41OTUyNCw5NUgxOC4yNTQ5MUExMy4yNzAxMiwxMy4yNzAxMiwwLDAsMSw1LDgxLjc0NTEyVjI4LjQwNTI4QTEzLjI3MDEyLDEzLjI3MDEyLDAsMCwxLDE4LjI1NDkxLDE1LjE1MDRINTBhMi41LDIuNSwwLDAsMSwwLDVIMTguMjU0OTFBOC4yNjQyMyw4LjI2NDIzLDAsMCwwLDEwLDI4LjQwNTI4VjgxLjc0NTEyQTguMjY0MjQsOC4yNjQyNCwwLDAsMCwxOC4yNTQ5MSw5MEg3MS41OTUyNGE4LjI2NDIzLDguMjY0MjMsMCwwLDAsOC4yNTQ4OC04LjI1NDg5VjUwYTIuNSwyLjUsMCwwLDEsNSwwWk04OS4xNDg0Niw2LjIzNzkyYTQuMjI2NjEsNC4yMjY2MSwwLDAsMC01Ljk3NzI5LDBsLTMzLjk2MjksMzMuOTYzTDU5Ljc5OTE2LDUwLjc5MTc2bDMzLjk2Mjg5LTMzLjk2M2E0LjIyNjUzLDQuMjI2NTMsMCwwLDAsMC01Ljk3NzIzWk00My42MjM4LDU4LjMxMjg3bDEzLjAwOTQtNC4zNTUxNkw0Ni4wNDIyNiw0My4zNjY4M2wtNC4zNTUxLDEzLjAwOTRBMS41MzAwNSwxLjUzMDA1LDAsMCwwLDQzLjYyMzgsNTguMzEyODdaIj48L3BhdGg+PC9zdmc+" /></a>
<span class="navbar-item">
<span>${data.board.name} &nbsp;</span>
<a data-onclick="editBoardModal.open"><img style="margin-top: -4px;" alt="edit" width="16" height="16" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48dGl0bGU+NTE8L3RpdGxlPjxwYXRoIGQ9Ik04NC44NTAxMiw1MFY4MS43NDUxMkExMy4yNzAxMiwxMy4yNzAxMiwwLDAsMSw3MS41OTUyNCw5NUgxOC4yNTQ5MUExMy4yNzAxMiwxMy4yNzAxMiwwLDAsMSw1LDgxLjc0NTEyVjI4LjQwNTI4QTEzLjI3MDEyLDEzLjI3MDEyLDAsMCwxLDE4LjI1NDkxLDE1LjE1MDRINTBhMi41LDIuNSwwLDAsMSwwLDVIMTguMjU0OTFBOC4yNjQyMyw4LjI2NDIzLDAsMCwwLDEwLDI4LjQwNTI4VjgxLjc0NTEyQTguMjY0MjQsOC4yNjQyNCwwLDAsMCwxOC4yNTQ5MSw5MEg3MS41OTUyNGE4LjI2NDIzLDguMjY0MjMsMCwwLDAsOC4yNTQ4OC04LjI1NDg5VjUwYTIuNSwyLjUsMCwwLDEsNSwwWk04OS4xNDg0Niw2LjIzNzkyYTQuMjI2NjEsNC4yMjY2MSwwLDAsMC01Ljk3NzI5LDBsLTMzLjk2MjksMzMuOTYzTDU5Ljc5OTE2LDUwLjc5MTc2bDMzLjk2Mjg5LTMzLjk2M2E0LjIyNjUzLDQuMjI2NTMsMCwwLDAsMC01Ljk3NzIzWk00My42MjM4LDU4LjMxMjg3bDEzLjAwOTQtNC4zNTUxNkw0Ni4wNDIyNiw0My4zNjY4M2wtNC4zNTUxLDEzLjAwOTRBMS41MzAwNSwxLjUzMDA1LDAsMCwwLDQzLjYyMzgsNTguMzEyODdaIj48L3BhdGg+PC9zdmc+" /></a>
</span>`;
} else if ( !data.hash.board ) {
boardName = /*html*/`<span class="navbar-item">Boards</span>`;
}
// ios web clip needs a refresh button. other browsers have one that's already accessible
let refreshItem = '';
if ( window.navigator.standalone ){
refreshItem = /*html*/`
<a class="navbar-item has-text-right is-hidden-desktop" data-onclick="navbar.refresh">
<span>refresh</span>
<img alt="refresh" style="width:24px;height:24px;" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxuczp4PSJodHRwOi8vbnMuYWRvYmUuY29tL0V4dGVuc2liaWxpdHkvMS4wLyIgeG1sbnM6aT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIiB4bWxuczpncmFwaD0iaHR0cDovL25zLmFkb2JlLmNvbS9HcmFwaHMvMS4wLyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2NCA2NCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PG1ldGFkYXRhPjxzZncgeG1sbnM9Imh0dHA6Ly9ucy5hZG9iZS5jb20vU2F2ZUZvcldlYi8xLjAvIj48c2xpY2VzPjwvc2xpY2VzPjxzbGljZVNvdXJjZUJvdW5kcyBoZWlnaHQ9IjE2Mzg0IiB3aWR0aD0iMTYzODkiIHg9Ii04MTY1IiB5PSItODE2MCIgYm90dG9tTGVmdE9yaWdpbj0idHJ1ZSI+PC9zbGljZVNvdXJjZUJvdW5kcz48L3Nmdz48L21ldGFkYXRhPjxnPjxwYXRoIGQ9Ik0zMiw2QzE3LjY2NCw2LDYsMTcuNjY0LDYsMzJjMCwxNC4zMzcsMTEuNjY0LDI2LDI2LDI2YzE0LjMzNywwLDI2LTExLjY2MywyNi0yNkM1OCwxNy42NjQsNDYuMzM3LDYsMzIsNnogTTMyLDQ4ICAgYy03LjcyLDAtMTQtNi4yOC0xNC0xNGMwLTcuNDU0LDUuODU5LTEzLjU0OCwxMy4yMTItMTMuOTZsLTAuNjI2LTAuNjI2Yy0wLjc4MS0wLjc4MS0wLjc4MS0yLjA0NywwLTIuODI4ICAgYzAuNzgtMC43ODEsMi4wNDctMC43ODEsMi44MjgsMGw0LDRjMC43ODEsMC43ODEsMC43ODEsMi4wNDcsMCwyLjgyOGwtNCw0QzMzLjAyMywyNy44MDUsMzIuNTEyLDI4LDMyLDI4ICAgcy0xLjAyNC0wLjE5NS0xLjQxNC0wLjU4NmMtMC43ODEtMC43ODEtMC43ODEtMi4wNDcsMC0yLjgyOGwwLjU0Mi0wLjU0MkMyNi4wMjEsMjQuNDg4LDIyLDI4Ljc4LDIyLDM0YzAsNS41MTQsNC40ODYsMTAsMTAsMTAgICBjNS41MTQsMCwxMC00LjQ4NiwxMC0xMGMwLTEuMTA0LDAuODk2LTIsMi0yczIsMC44OTYsMiwyQzQ2LDQxLjcyLDM5LjcyLDQ4LDMyLDQ4eiI+PC9wYXRoPjwvZz48L3N2Zz4=" />
</a>
`;
}
return /*html*/`
<nav class="navbar is-light" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
@ -29,7 +48,7 @@ app.addComponent('navbar', (store) => { return new Reef("#navbar", {
<div id="loader" class="button is-text ${data.loading ? 'is-loading' : ''}"></div>
</span>
<a id="burger-mobile" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-onclick="navbar.toggleMenu">
<a role="button" class="navbar-burger ${data.menuOpen ? 'is-active' : ''}" aria-label="menu" aria-expanded="false" data-onclick="navbar.toggleMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
@ -40,17 +59,23 @@ app.addComponent('navbar', (store) => { return new Reef("#navbar", {
<div class="navbar-menu ${data.menuOpen ? 'is-active' : ''} ">
<div class="navbar-end">
<span id="loader-desktop" class="navbar-item">
<div id="loader" class="button is-text ${data.loading ? 'is-loading' : ''}"></div>
</span>
<a class="navbar-item has-text-right" data-onclick="addPinModal.open">
<span class="is-hidden-desktop">Add Pin</span>
<span>add pin</span>
<img alt="add pin" style="width:24px;height:24px; margin-top:4px;" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' viewBox='0 0 100 125' x='0px' y='0px'%3E%3Ctitle%3EArtboard 164%3C/title%3E%3Cpath d='M56.77,3.11a4,4,0,1,0-5.66,5.66l5.17,5.17L37.23,33A23.32,23.32,0,0,0,9.42,36.8L7.11,39.11a4,4,0,0,0,0,5.66l21.3,21.29L3.23,91.23a4,4,0,0,0,5.66,5.66L34.06,71.72l21,21a4,4,0,0,0,5.66,0l2.31-2.31a23.34,23.34,0,0,0,3.81-27.82l19-19,5.17,5.18a4,4,0,0,0,5.66-5.66Zm1.16,81.16L15.61,42a15.37,15.37,0,0,1,21.19.51L57.42,63.08A15.39,15.39,0,0,1,57.93,84.27Zm4-28L43.59,37.94,61.94,19.59,80.28,37.94Z'/%3E%3C/svg%3E"/>
</a>
<a class="navbar-item has-text-right" data-onclick="aboutModal.open">
<span>about tinypin</span>
<img alt="about" style="width:24px;height:24px;" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48dGl0bGU+QXJ0Ym9hcmQgNzwvdGl0bGU+PHJlY3QgeD0iNDciIHk9IjQ5IiB3aWR0aD0iNiIgaGVpZ2h0PSIxNSI+PC9yZWN0PjxjaXJjbGUgY3g9IjUwIiBjeT0iMzkiIHI9IjMiPjwvY2lyY2xlPjxwYXRoIGQ9Ik01MCwyMEEzMCwzMCwwLDAsMCwyMCw1MGEyNy44OCwyNy44OCwwLDAsMCwzLjM1LDEzLjc0bC0zLDguMjFhNiw2LDAsMCwwLDcuNjksNy42OWw4LjIxLTNBMjcuODgsMjcuODgsMCwwLDAsNTAsODBhMzAsMzAsMCwxLDAsMC02MFptMCw1NGEyMS4wOCwyMS4wOCwwLDAsMS0xMy00TDI2LDc0bDQtMTFhMjEuMDgsMjEuMDgsMCwwLDEtNC0xM0EyNCwyNCwwLDEsMSw1MCw3NFoiPjwvcGF0aD48L3N2Zz4=" />
</a>
${refreshItem}
<a class="navbar-item has-text-right">
<span class="is-hidden-desktop">Sign Out</span>
<span>sign out</span>
<img alt="sign out" width="32" height="32" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48dGl0bGU+QXJ0Ym9hcmQgODQ8L3RpdGxlPjxnPjxwYXRoIGQ9Ik0yOCw4MkgzOFY3NEgyOGEyLDIsMCwwLDEtMi0yVjI4YTIsMiwwLDAsMSwyLTJIMzhWMThIMjhBMTAsMTAsMCwwLDAsMTgsMjhWNzJBMTAsMTAsMCwwLDAsMjgsODJaIj48L3BhdGg+PHBhdGggZD0iTTY2LDMyLjM0LDYwLjM0LDM4bDgsOEgzNHY4SDY4LjM0bC04LDhMNjYsNjcuNjYsODAuODMsNTIuODNhNCw0LDAsMCwwLDAtNS42NloiPjwvcGF0aD48L2c+PC9zdmc+" />
<a>
</div>
</div>
</nav>

BIN
static/icons/android-chrome-192x192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
static/icons/android-chrome-512x512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/icons/apple-touch-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5.2 KiB

9
static/icons/browserconfig.xml Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>

BIN
static/icons/favicon-16x16.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 537 B

BIN
static/icons/favicon-32x32.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 711 B

BIN
static/icons/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/icons/mstile-150x150.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

30
static/icons/safari-pinned-tab.svg Normal file
View file

@ -0,0 +1,30 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M5595 8451 c-120 -31 -196 -135 -191 -260 1 -41 10 -80 22 -103 11
-21 99 -118 197 -216 97 -98 177 -181 177 -184 0 -11 -1210 -1218 -1221 -1218
-5 0 -40 15 -77 34 -60 30 -226 92 -270 101 -9 2 -51 10 -93 19 -108 22 -158
27 -294 27 -107 0 -145 -3 -220 -16 -268 -44 -482 -136 -690 -294 -103 -79
-309 -286 -335 -338 -33 -64 -34 -168 -3 -229 14 -25 285 -303 719 -737 l698
-697 -831 -833 c-913 -915 -864 -859 -859 -980 5 -102 76 -198 171 -231 59
-20 151 -13 201 14 21 12 409 391 861 843 l822 821 690 -689 c402 -402 705
-697 727 -708 21 -11 66 -22 100 -25 97 -7 144 20 291 169 66 68 134 140 150
159 73 86 185 272 221 365 6 17 17 44 23 60 18 45 17 42 49 164 86 333 50 689
-102 1010 l-40 84 609 609 609 609 184 -184 c161 -160 192 -187 240 -204 182
-68 369 78 345 269 -4 29 -15 68 -25 88 -10 19 -609 627 -1332 1351 -971 974
-1324 1321 -1353 1334 -46 20 -127 27 -170 16z m1168 -1719 l587 -587 -590
-589 -590 -589 -589 589 -590 589 587 587 c323 323 589 588 592 588 3 0 269
-264 593 -588z m-2671 -621 c140 -37 284 -108 380 -187 43 -35 1390 -1376
1458 -1450 104 -115 204 -329 226 -484 10 -69 11 -239 1 -305 -23 -166 -110
-359 -220 -488 l-24 -28 -1358 1355 -1358 1356 19 21 c44 49 214 149 309 182
171 59 406 71 567 28z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

19
static/icons/site.webmanifest Normal file
View file

@ -0,0 +1,19 @@
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}

18
static/index.html
View file

@ -5,13 +5,25 @@
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" />
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/site.webmanifest">
<link rel="mask-icon" href="icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="icons/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="bulma-custom.css" />
<!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" />-->
<link rel="stylesheet" href="client.css" />
</head>
<body>
<div id="app"></div>
<!-- <script src="pulltorefresh.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/reefjs/dist/reef.min.js"></script>
@ -31,6 +43,8 @@
<script src="components/editpin.js"></script>
<script src="components/about.js"></script>
<script src="app.js"></script>
<script src="touch.js"></script>
</body>
</html>

1
static/logo.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 125" x="0px" y="0px"><title>Artboard 164</title><path d="M56.77,3.11a4,4,0,1,0-5.66,5.66l5.17,5.17L37.23,33A23.32,23.32,0,0,0,9.42,36.8L7.11,39.11a4,4,0,0,0,0,5.66l21.3,21.29L3.23,91.23a4,4,0,0,0,5.66,5.66L34.06,71.72l21,21a4,4,0,0,0,5.66,0l2.31-2.31a23.34,23.34,0,0,0,3.81-27.82l19-19,5.17,5.18a4,4,0,0,0,5.66-5.66Zm1.16,81.16L15.61,42a15.37,15.37,0,0,1,21.19.51L57.42,63.08A15.39,15.39,0,0,1,57.93,84.27Zm4-28L43.59,37.94,61.94,19.59,80.28,37.94Z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 534 B

7
static/pulltorefresh.js Normal file
View file

File diff suppressed because one or more lines are too long

192
static/touch.js Normal file
View file

@ -0,0 +1,192 @@
// document.addEventListener('touchstart', (e) => {
// console.log("touchstart");
// const touch = e.touches[0] || e.changedTouches[0];
// window.lastY = touch.pageY;
// });
// document.addEventListener('touchmove', (e) => {
// console.log("touchmove");
// // Check user isn't scrolling past content. If so, cancel move to prevent ios bouncing
// const touch = e.touches[0] || e.changedTouches[0];
// y = touch.pageY;
// if (y < window.lastY && e.srcElement.scrollTop == (e.srcElement.scrollHeight - e.srcElement.clientHeight)) {
// console.log("user is trying to scroll down without anywhere to scroll to. Canceling propagation.");
// e.preventDefault();
// } else if (y > window.lastY && e.srcElement.scrollTop == 0) {
// console.log("user is trying to scroll up without anywhere to scroll to. Canceling propagation.");
// e.preventDefault();
// }
// });
// window.scrollY = 1;
// document.addEventListener("scroll", (evt) => {
// console.log(evt);
// console.log(window.scrollY + "," + window.scrollX);
// console.log("body=" + document.body.scrollTop);
// console.log(document.getElementById("app").scrollTop);
// if (window.scrollY = 0 ){
// console.log("bump");
// window.scrollY = 1;
// }
// });
// document.addEventListener("scroll", (evt) => {
// console.log(window.scrollY);
// // if ( window.scrollY < 1 ){
// // window.scrollY = 1;
// // }
// });
// PullToRefresh.init({
// onRefresh() {
// window.location.reload();
// }
// });
// let startX = 0;
// let startY = 0;
// let topPos = 0;
// let lastX = 0;
// let lastY = 0;
// let pullCapped = false;
// let setTop = (i) => {
// topPos = parseInt(i);
// if ( topPos > 200 ){
// topPos = 200;
// pullCapped = true;
// div.style.backgroundColor = "green";
// } else {
// pullCapped = false;
// div.style.backgroundColor = "blue";
// }
// div.style.top = `${topPos-120}px`;
// console.log("set top=" + topPos);
// };
// document.addEventListener('touchstart', (evt)=>{
// console.log("touch start", evt);
// startX = evt.touches[0].clientX;
// startY = evt.touches[0].clientY;
// });
// document.addEventListener('touchend', (evt) =>{
// console.log("end");
// startX = 0;
// startY = 0;
// div.style.transitionDuration = "0.2s";
// div.style.top = "-80px";
// topPos = 0;
// setTimeout(() => {
// div.style.transitionDuration = "0";
// }, 200);
// if ( pullCapped ){
// window.location.reload();
// }
// });
// document.addEventListener('touchcancel', (evt) =>{
// console.log("cancel");
// startX = 0;
// startY = 0;
// div.style.top = "-80px";
// if ( pullCapped ){
// window.location.reload();
// }
// });
// document.addEventListener('touchmove', (evt) => {
// let x = evt.touches[0].clientX;
// let y = evt.touches[0].clientY;
// let diff = (y - startY); // / window.devicePixelRatio;
// if ( window.scrollY == 0 || topPos > 0 ){
// setTop(diff);
// }
// // if ( diff > 0 ){
// // addTop(diff)
// // }
// console.log(diff);
// // lastY = y;
// // let diffY = y - startY;
// // if ( y > lastY ){
// // if ( window.scrollY == 0 ){
// // let showPixels = diffY / window.devicePixelRatio;
// // let pullHeight = showPixels - (80+25);
// // if ( pullHeight > 0 ){
// // console.log("cap pull height");
// // pullHeight = 0;
// // pullCapped = true;
// // }
// // setTop(pullHeight);
// // }
// // lastY = y;
// // } else {
// // let lastDiff = lastY-y;
// // console.log(lastDiff);
// // }
// });
// let div = document.createElement("div");
// div.style.position = "fixed";
// div.style.height = "80px";
// div.style.width = "100%";
// div.style.top = "-80px";
// div.style.zIndex = "99999";
// div.style.backgroundColor = "blue";
// // div.style.transitionProperty = 'top';
// // div.style.transitionDuration = "0.2s";
// let content = document.createElement("div");
// content.style="text-align: center";
// content.style.marginTop= "20px";
// let img = document.createElement("img");
// img.src = "data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxuczp4PSJodHRwOi8vbnMuYWRvYmUuY29tL0V4dGVuc2liaWxpdHkvMS4wLyIgeG1sbnM6aT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIiB4bWxuczpncmFwaD0iaHR0cDovL25zLmFkb2JlLmNvbS9HcmFwaHMvMS4wLyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDY0IDY0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2NCA2NCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PG1ldGFkYXRhPjxzZncgeG1sbnM9Imh0dHA6Ly9ucy5hZG9iZS5jb20vU2F2ZUZvcldlYi8xLjAvIj48c2xpY2VzPjwvc2xpY2VzPjxzbGljZVNvdXJjZUJvdW5kcyBoZWlnaHQ9IjE2Mzg0IiB3aWR0aD0iMTYzODkiIHg9Ii04MTY1IiB5PSItODE2MCIgYm90dG9tTGVmdE9yaWdpbj0idHJ1ZSI+PC9zbGljZVNvdXJjZUJvdW5kcz48L3Nmdz48L21ldGFkYXRhPjxnPjxwYXRoIGQ9Ik0zMiw2QzE3LjY2NCw2LDYsMTcuNjY0LDYsMzJjMCwxNC4zMzcsMTEuNjY0LDI2LDI2LDI2YzE0LjMzNywwLDI2LTExLjY2MywyNi0yNkM1OCwxNy42NjQsNDYuMzM3LDYsMzIsNnogTTMyLDQ4ICAgYy03LjcyLDAtMTQtNi4yOC0xNC0xNGMwLTcuNDU0LDUuODU5LTEzLjU0OCwxMy4yMTItMTMuOTZsLTAuNjI2LTAuNjI2Yy0wLjc4MS0wLjc4MS0wLjc4MS0yLjA0NywwLTIuODI4ICAgYzAuNzgtMC43ODEsMi4wNDctMC43ODEsMi44MjgsMGw0LDRjMC43ODEsMC43ODEsMC43ODEsMi4wNDcsMCwyLjgyOGwtNCw0QzMzLjAyMywyNy44MDUsMzIuNTEyLDI4LDMyLDI4ICAgcy0xLjAyNC0wLjE5NS0xLjQxNC0wLjU4NmMtMC43ODEtMC43ODEtMC43ODEtMi4wNDcsMC0yLjgyOGwwLjU0Mi0wLjU0MkMyNi4wMjEsMjQuNDg4LDIyLDI4Ljc4LDIyLDM0YzAsNS41MTQsNC40ODYsMTAsMTAsMTAgICBjNS41MTQsMCwxMC00LjQ4NiwxMC0xMGMwLTEuMTA0LDAuODk2LTIsMi0yczIsMC44OTYsMiwyQzQ2LDQxLjcyLDM5LjcyLDQ4LDMyLDQ4eiI+PC9wYXRoPjwvZz48L3N2Zz4=";
// img.style.width="48px";
// img.style.height="48px"
// content.appendChild(img);
// div.appendChild(content);
// document.body.appendChild(div);
// console.log("pixel ratio = " + window.devicePixelRatio);