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

fix inline styles for loan periods

Browse source
This commit is contained in:
Hugh Rundle 2024-06-29 12:01:10 +10:00
parent b3c4aef2c6
commit 55a9742fa4
Signed by: hugh
GPG key ID: A7E35779918253F9
2 changed files with 51 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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 {