From ee7d942858cdb411b0cc7c7c91d918e281b3862b Mon Sep 17 00:00:00 2001 From: Will Bradley Date: Sun, 28 Jul 2013 22:03:09 -0400 Subject: [PATCH] Style and usability tweaks --- index.html | 24 +++++++++++++++++++----- print.html | 40 ++++++++++++++++++++++++++-------------- 2 files changed, 45 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 9420507..147e89c 100644 --- a/index.html +++ b/index.html @@ -10,20 +10,28 @@ position: absolute; top: 0; right: 0; - z-index: 999; + z-index: 9999; background-color: white; font-family: Arial, Helvetica, sans-serif; padding: 1em; - border: 1px solid black; + width: 15em; + height: 612px; + overflow-y: auto; + opacity: 0.8; } + #printbutton { + font-size: 1.5em; + font-weight: bold; + } #map { + padding: 1em; + border: 1px solid black; height: 612px; /* 8.5 inch at 72 dpi */ width: 792px; /* 11 inch at 72 dpi */ } #results { margin: 0 0 0 1em; padding: 0; - width: 12em; } #results li span { cursor: pointer; @@ -43,7 +51,13 @@
- + +

Printable High-Resolution Maps!

+
    +
  1. Search/center/zoom this map until it covers the desired area.
    2. +
  2. Click the Print button above.
    3. +
  3. A new window will open with a high-resolution map!
    4. +
@@ -54,7 +68,7 @@ var query = ""; var map = L.map('map'); //.setView([51.505, -0.09], 13); L.tileLayer('http://{s}.tile.cloudmade.com/4be2d4a8b7ae4a5e8ebc0558bb5d7db4/997/256/{z}/{x}/{y}.png', { - attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade', + attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA; Imagery © CloudMade', maxZoom: 18 }).addTo(map); diff --git a/print.html b/print.html index 4e6d7f0..01968ce 100644 --- a/print.html +++ b/print.html @@ -9,20 +9,26 @@ padding: 0; margin: 0; } - #navigation { - position: absolute; - top: 0; - left: 0; - z-index: 999; - background-color: white; - font-family: Arial, Helvetica, sans-serif; - padding: 1em; - border: 1px solid black; - } + #navigation { + position: absolute; + top: 0; + right: 0; + z-index: 9999; + background-color: white; + font-family: Arial, Helvetica, sans-serif; + padding: 1em; + width: 20em; + overflow-y: auto; + opacity: 0.8; + } #map { height: 2550px; /* 8.5 inch at 300 dpi */ width: 3300px; /* 11 inch at 300 dpi */ } + #printbutton { + font-size: 1.5em; + font-weight: bold; + }