From 311873960a8a5e33dda1c05f3cbc1fe76d611289 Mon Sep 17 00:00:00 2001 From: Christian Franke Date: Sat, 7 Dec 2013 15:24:08 +0100 Subject: Add some code to allow placement of nodes --- web/css/eventmap.css | 29 ++-- web/css/leaflet.contextmenu.css | 53 +++++++ web/css/leaflet.css | 4 +- web/css/leaflet.draw.css | 296 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 369 insertions(+), 13 deletions(-) create mode 100644 web/css/leaflet.contextmenu.css create mode 100644 web/css/leaflet.draw.css (limited to 'web/css') diff --git a/web/css/eventmap.css b/web/css/eventmap.css index bd01c1b..e2d1d24 100644 --- a/web/css/eventmap.css +++ b/web/css/eventmap.css @@ -1,21 +1,28 @@ html, body { height: 100%; + padding: 0px; + margin: 0px; + overflow: hidden; } -#main { - width: 70%; +#main, #map { height: 100%; - background-color: #f00; - float: left; + z-index: 0; + display: block; + position: relative; } #sidebar { - width: 30%; - height: 100%; + position: absolute; background-color: #00f; - float: right; -} - -#map { - height: 100%; + border-radius: 8px; + -moz-border-radius: 8px; + -webkit-border-radius: 8px; + margin: 5px; + padding: 10px; + width: 390px; + left: 7px; + top: 90px; + bottom: 9px; + display: none; } diff --git a/web/css/leaflet.contextmenu.css b/web/css/leaflet.contextmenu.css new file mode 100644 index 0000000..4d47086 --- /dev/null +++ b/web/css/leaflet.contextmenu.css @@ -0,0 +1,53 @@ +.leaflet-contextmenu { + display: none; + box-shadow: 0 1px 7px rgba(0,0,0,0.4); + -webkit-border-radius: 4px; + border-radius: 4px; + padding: 4px 0; + background-color: #fff; + cursor: default; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.leaflet-contextmenu a.leaflet-contextmenu-item { + display: block; + color: #222; + font-size: 12px; + line-height: 20px; + text-decoration: none; + padding: 0 12px; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + cursor: default; +} + +.leaflet-contextmenu a.leaflet-contextmenu-item-disabled { + opacity: 0.5; +} + +.leaflet-contextmenu a.leaflet-contextmenu-item:hover { + background-color: #f4f4f4; + border-top: 1px solid #f0f0f0; + border-bottom: 1px solid #f0f0f0; +} + +.leaflet-contextmenu a.leaflet-contextmenu-item-disabled:hover { + background-color: inherit; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; +} + +.leaflet-contextmenu-icon { + margin: 2px 8px 0 0; + width: 16px; + height: 16px; + float: left; + border: 0; +} + +.leaflet-contextmenu-separator { + border-bottom: 1px solid #ccc; + margin: 5px 0; +} \ No newline at end of file diff --git a/web/css/leaflet.css b/web/css/leaflet.css index ac0cd17..0b08270 100644 --- a/web/css/leaflet.css +++ b/web/css/leaflet.css @@ -278,12 +278,12 @@ border-radius: 5px; } .leaflet-control-layers-toggle { - background-image: url(images/layers.png); + background-image: url(../images/layers.png); width: 36px; height: 36px; } .leaflet-retina .leaflet-control-layers-toggle { - background-image: url(images/layers-2x.png); + background-image: url(../images/layers-2x.png); background-size: 26px 26px; } .leaflet-touch .leaflet-control-layers-toggle { diff --git a/web/css/leaflet.draw.css b/web/css/leaflet.draw.css new file mode 100644 index 0000000..a80f88e --- /dev/null +++ b/web/css/leaflet.draw.css @@ -0,0 +1,296 @@ +/* ================================================================== */ +/* Toolbars +/* ================================================================== */ + +.leaflet-draw-section { + position: relative; +} + +.leaflet-draw-toolbar { + margin-top: 12px; +} + +.leaflet-draw-toolbar-top { + margin-top: 0; +} + +.leaflet-draw-toolbar-notop a:first-child { + border-top-right-radius: 0; +} + +.leaflet-draw-toolbar-nobottom a:last-child { + border-bottom-right-radius: 0; +} + +.leaflet-draw-toolbar a { + background-image: url('../images/spritesheet.png'); + background-repeat: no-repeat; +} + +.leaflet-retina .leaflet-draw-toolbar a { + background-image: url('../images/spritesheet-2x.png'); + background-size: 270px 30px; +} + +.leaflet-draw a { + display: block; + text-align: center; + text-decoration: none; +} + +/* ================================================================== */ +/* Toolbar actions menu +/* ================================================================== */ + +.leaflet-draw-actions { + display: none; + list-style: none; + margin: 0; + padding: 0; + position: absolute; + left: 26px; /* leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */ + top: 0; +} + +.leaflet-right .leaflet-draw-actions { + right:26px; + left:auto; +} + +.leaflet-draw-actions li { + display: inline-block; +} + +.leaflet-draw-actions li:first-child a { + border-left: none; +} + +.leaflet-draw-actions li:last-child a { + -webkit-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; +} + +.leaflet-right .leaflet-draw-actions li:last-child a { + -webkit-border-radius: 0; + border-radius: 0; +} + +.leaflet-right .leaflet-draw-actions li:first-child a { + -webkit-border-radius: 4px 0 0 4px; + border-radius: 4px 0 0 4px; +} + +.leaflet-draw-actions a { + background-color: #919187; + border-left: 1px solid #AAA; + color: #FFF; + font: 11px/19px "Helvetica Neue", Arial, Helvetica, sans-serif; + line-height: 28px; + text-decoration: none; + padding-left: 10px; + padding-right: 10px; + height: 28px; +} + +.leaflet-draw-actions-bottom { + margin-top: 0; + white-space: nowrap; +} + +.leaflet-draw-actions-top { + margin-top: 1px; + white-space: nowrap; +} + +.leaflet-draw-actions-top a, +.leaflet-draw-actions-bottom a { + height: 27px; + line-height: 27px; +} + +.leaflet-draw-actions a:hover { + background-color: #A0A098; +} + +.leaflet-draw-actions-top.leaflet-draw-actions-bottom a { + height: 26px; + line-height: 26px; +} + +/* ================================================================== */ +/* Draw toolbar +/* ================================================================== */ + +.leaflet-draw-toolbar .leaflet-draw-draw-polyline { + background-position: -2px -2px; +} + +.leaflet-draw-toolbar .leaflet-draw-draw-polygon { + background-position: -31px -2px; +} + +.leaflet-draw-toolbar .leaflet-draw-draw-rectangle { + background-position: -62px -2px; +} + +.leaflet-draw-toolbar .leaflet-draw-draw-circle { + background-position: -92px -2px; +} + +.leaflet-draw-toolbar .leaflet-draw-draw-marker { + background-position: -122px -2px; +} + +/* ================================================================== */ +/* Edit toolbar +/* ================================================================== */ + +.leaflet-draw-toolbar .leaflet-draw-edit-edit { + background-position: -152px -2px; +} + +.leaflet-draw-toolbar .leaflet-draw-edit-remove { + background-position: -182px -2px; +} + +.leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled { + background-position: -212px -2px; +} + +.leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled { + background-position: -242px -2px; +} + +/* ================================================================== */ +/* Drawing styles +/* ================================================================== */ + +.leaflet-mouse-marker { + background-color: #fff; + cursor: crosshair; +} + +.leaflet-draw-tooltip { + background: rgb(54, 54, 54); + background: rgba(0, 0, 0, 0.5); + border: 1px solid transparent; + -webkit-border-radius: 4px; + border-radius: 4px; + color: #fff; + font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif; + margin-left: 20px; + margin-top: -21px; + padding: 4px 8px; + position: absolute; + visibility: hidden; + white-space: nowrap; + z-index: 6; +} + +.leaflet-draw-tooltip:before { + border-right: 6px solid black; + border-right-color: rgba(0, 0, 0, 0.5); + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + content: ""; + position: absolute; + top: 7px; + left: -7px; +} + +.leaflet-error-draw-tooltip { + background-color: #F2DEDE; + border: 1px solid #E6B6BD; + color: #B94A48; +} + +.leaflet-error-draw-tooltip:before { + border-right-color: #E6B6BD; +} + +.leaflet-draw-tooltip-single { + margin-top: -12px +} + +.leaflet-draw-tooltip-subtext { + color: #f8d5e4; +} + +.leaflet-draw-guide-dash { + font-size: 1%; + opacity: 0.6; + position: absolute; + width: 5px; + height: 5px; +} + +/* ================================================================== */ +/* Edit styles +/* ================================================================== */ + +.leaflet-edit-marker-selected { + background: rgba(254, 87, 161, 0.1); + border: 4px dashed rgba(254, 87, 161, 0.6); + -webkit-border-radius: 4px; + border-radius: 4px; +} + +.leaflet-edit-move { + cursor: move; +} + +.leaflet-edit-resize { + cursor: pointer; +} + +/* ================================================================== */ +/* Old IE styles +/* ================================================================== */ + +.leaflet-oldie .leaflet-draw-toolbar { + border: 3px solid #999; +} + +.leaflet-oldie .leaflet-draw-toolbar a { + background-color: #eee; +} + +.leaflet-oldie .leaflet-draw-toolbar a:hover { + background-color: #fff; +} + +.leaflet-oldie .leaflet-draw-actions { + left: 32px; + margin-top: 3px; +} + +.leaflet-oldie .leaflet-draw-actions li { + display: inline; + zoom: 1; +} + +.leaflet-oldie .leaflet-edit-marker-selected { + border: 4px dashed #fe93c2; +} + +.leaflet-oldie .leaflet-draw-actions a { + background-color: #999; +} + +.leaflet-oldie .leaflet-draw-actions a:hover { + background-color: #a5a5a5; +} + +.leaflet-oldie .leaflet-draw-actions-top a { + margin-top: 1px; +} + +.leaflet-oldie .leaflet-draw-actions-bottom a { + height: 28px; + line-height: 28px; +} + +.leaflet-oldie .leaflet-draw-actions-top.leaflet-draw-actions-bottom a { + height: 27px; + line-height: 27px; +} -- cgit v1.2.1