hugh/public_library_map
hugh/public_library_map
1
Fork 0
Code Issues 9 Pull requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into readme

Browse source
This commit is contained in:
Hugh Rundle 2024-08-03 18:25:54 +10:00
parent 6bf7f1c1ea 3c46049c32
commit 49cf422a42
Signed by: hugh
GPG key ID: A7E35779918253F9
3 changed files with 52 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -18,7 +18,7 @@ See [contributing](https://librarymap.hugh.run/contributing/), especially *[whic
## Contributors ## Contributors
Contributors (whether via GitHub or another way) are listed at [contributors.txt](contributors.txt). Contributors are listed at [contributors.txt](contributors.txt).
## Licenses ## Licenses

37
website/load-map.js
View file

@ -439,38 +439,11 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches, caul])
infoBoxes.loanPeriod.update = function (props) { infoBoxes.loanPeriod.update = function (props) {
this._div.innerHTML = ` this._div.innerHTML = `
<section> <section>
<div><div class="circle" style="background: <div><div class="circle two-weeks"></div>2 weeks</div>
radial-gradient(4px 4px at 6px 6px, #3a3a3a 50%, transparent 75%), <div><div class="circle three-weeks"></div>3 weeks</div>
radial-gradient(4px 4px at 16px 6px, #3a3a3a 50%, transparent 75%), <div><div class="circle four-weeks"></div>4 weeks</div>
radial-gradient(4px 4px at 2px 12px, #3a3a3a 50%, transparent 75%), <div><div class="circle six-weeks"></div>6 weeks</div>
radial-gradient(4px 4px at 12px 12px, #3a3a3a 50%, transparent 75%), <div><div class="circle unknown-weeks"></div>Unknown (help me find out!)</div>
radial-gradient(4px 4px at 20px 12px, #3a3a3a 50%, transparent 75%),
radial-gradient(4px 4px at 8px 18px, #3a3a3a 50%, transparent 75%);
background-repeat: no-repeat;
border: 1px solid black;
"></div>2 weeks</div>
<div><div class="circle" style="background: repeating-linear-gradient(
0deg,
#3a3a3a,
#3a3a3a 2px,
#fff 2px,
#3a3a3a 4px
)"></div>3 weeks</div>
<div><div class="circle" style="background: repeating-linear-gradient(
45deg,
#3a3a3a,
#3a3a3a 3px,
#fff 1px,
#3a3a3a 4px
)"></div>4 weeks</div>
<div><div class="circle" style="background: repeating-linear-gradient(
135deg,
#fff,
#fff 8px,
#3a3a3a 2px,
#fff 10px
)"></div>6 weeks</div>
<div><div class="circle" style="background-color: #bbb"></div>Unknown (help me find out!)</div>
</section> </section>
` `
}; };

46
website/style.css
View file

@ -273,6 +273,52 @@ ul#libraries li {
background-color: #bbb background-color: #bbb
} }
.two-weeks {
background:
radial-gradient(4px 4px at 6px 6px, #3a3a3a 50%, transparent 75%),
radial-gradient(4px 4px at 16px 6px, #3a3a3a 50%, transparent 75%),
radial-gradient(4px 4px at 2px 12px, #3a3a3a 50%, transparent 75%),
radial-gradient(4px 4px at 12px 12px, #3a3a3a 50%, transparent 75%),
radial-gradient(4px 4px at 20px 12px, #3a3a3a 50%, transparent 75%),
radial-gradient(4px 4px at 8px 18px, #3a3a3a 50%, transparent 75%);
background-repeat: no-repeat;
border: 1px solid black;
}
.three-weeks {
background: repeating-linear-gradient(
0deg,
#3a3a3a,
#3a3a3a 2px,
#fff 2px,
#3a3a3a 4px
)
}
.four-weeks {
background: repeating-linear-gradient(
45deg,
#3a3a3a,
#3a3a3a 3px,
#fff 1px,
#3a3a3a 4px
)
}
.six-weeks {
background: repeating-linear-gradient(
135deg,
#fff,
#fff 8px,
#3a3a3a 2px,
#fff 10px
)
}
.unknown-weeks {
background-color: #bbb;
}
@media only screen and (max-width: 800px) { @media only screen and (max-width: 800px) {
nav ul { nav ul {