diff options
| -rw-r--r-- | www/photo.causal.agency/trips.html | 32 |
1 files changed, 21 insertions, 11 deletions
diff --git a/www/photo.causal.agency/trips.html b/www/photo.causal.agency/trips.html index 3085ae02..d6c41c3a 100644 --- a/www/photo.causal.agency/trips.html +++ b/www/photo.causal.agency/trips.html @@ -4,7 +4,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> -body { font-family: sans-serif; } +body { font-family: sans-serif; line-height: 1.5em; } input, button, select { font-size: 100%; } form { display: grid; @@ -56,7 +56,7 @@ input[type="number"] { width: 5ch; } <label for="trip-first">Exposures:</label> <span> <input id="trip-first" type="number" required min="0" max="36"> -- +– <input id="trip-last" type="number" required min="0" max="36"> </span> <label for="trip-note">Note:</label> @@ -98,7 +98,7 @@ input[type="number"] { width: 5ch; } <label for="lens-length">Focal length:</label> <span><input id="lens-length" required pattern="[0-9-]+">mm</span> <label for="lens-aperture">Aperture:</label> - <span>f/<input id="lens-aperture" required pattern="[0-9.-]+"></span> + <span>ƒ/<input id="lens-aperture" required pattern="[0-9.-]+"></span> <label for="lens-mount">Mount:</label> <input id="lens-mount" list="mounts" required> <button type="button" onclick="addLens()">Add</button> @@ -133,6 +133,17 @@ function setBodies() { } setBodies(); +function endashify(str) { + return str.replaceAll("-", "–"); +} +function lensString(lens) { + return ` + ${lens.name} + ${endashify(lens.focalLength)}mm + ƒ/${endashify(lens.aperture)} + `; +} + function setLenses() { localStorage.setItem("lenses", JSON.stringify(lenses)); let ul = document.querySelector("#lenses > ul"); @@ -140,8 +151,7 @@ function setLenses() { for (lens of lenses) { let li = document.createElement("li"); li.appendChild(document.createTextNode(` - ${lens.name} ${lens.focalLength}mm f/${lens.aperture} - (${lens.mount}) + ${lensString(lens)} (${lens.mount}) `)); ul.appendChild(li); } @@ -182,11 +192,13 @@ function setTrips() { let li = document.createElement("li"); li.appendChild(document.createTextNode(` ${trip.date}: - ${trip.firstExposure}-${trip.lastExposure} - (${trip.lens}) + ${trip.firstExposure}–${trip.lastExposure} `)); + li.appendChild(document.createElement("br")); + li.appendChild(document.createTextNode(trip.lens)); if (trip.note) { - li.appendChild(document.createTextNode(`"${trip.note}"`)); + li.appendChild(document.createElement("br")); + li.appendChild(document.createTextNode(`“${trip.note}”`)); } rollUl.appendChild(li); } @@ -203,9 +215,7 @@ function setTripBody() { select.innerHTML = ""; for (lens of lenses.filter(lens => lens.mount == body.mount)) { let option = document.createElement("option"); - option.appendChild(document.createTextNode(` - ${lens.name} ${lens.focalLength}mm f/${lens.aperture} - `)); + option.appendChild(document.createTextNode(lensString(lens))); select.appendChild(option); } let roll = rolls[body.name]; |