aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorhellekin <hellekin@cepheide.org>2020-10-08 17:38:04 +0200
committerhellekin <hellekin@cepheide.org>2020-10-08 17:38:04 +0200
commitc0a3378d2587c9fda27e97645799dd7a008819a1 (patch)
tree9bd6b99848e6c906cbfc921c545dda4d0d93562b
parent00ac912be46d858379fb5685b7290fe8d60001ef (diff)
downloadincommon-map-c0a3378d2587c9fda27e97645799dd7a008819a1.tar.gz
Make map more beautiful
This commit introduces a few things: 1. New `content_for` hooks for :debug, :head, and :body_end so that views code remains consistent and clean 2. Fullscreen map! 3. Welcome#index view, the Rails way It also moves controller-related code to the controller, Enjoy!
-rw-r--r--app/assets/images/incommon-map-icon.svg116
-rw-r--r--app/assets/stylesheets/application/_body.scss4
-rw-r--r--app/assets/stylesheets/application/_debug.scss12
-rw-r--r--app/assets/stylesheets/application/_map.scss14
-rw-r--r--app/controllers/welcome_controller.rb2
-rw-r--r--app/views/application/_debug.html.erb5
-rw-r--r--app/views/layouts/application.html.erb3
-rw-r--r--app/views/welcome/index.html.erb53
8 files changed, 177 insertions, 32 deletions
diff --git a/app/assets/images/incommon-map-icon.svg b/app/assets/images/incommon-map-icon.svg
new file mode 100644
index 0000000..558325a
--- /dev/null
+++ b/app/assets/images/incommon-map-icon.svg
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="320"
+ height="320"
+ viewBox="0 0 320 320"
+ version="1.1"
+ id="svg8"
+ inkscape:export-filename="/home/how/src/incommon.cc/v1/incommon-map/app/assets/images/login.png"
+ inkscape:export-xdpi="96"
+ inkscape:export-ydpi="96"
+ inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+ sodipodi:docname="incommon-map-icon.svg">
+ <defs
+ id="defs2">
+ <marker
+ inkscape:stockid="Arrow2Lend"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Lend"
+ style="overflow:visible;"
+ inkscape:isstock="true">
+ <path
+ id="path850"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#ffffff;stroke-opacity:1;fill:#ffffff;fill-opacity:1"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(1.1) rotate(180) translate(1,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mend"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Mend"
+ style="overflow:visible;"
+ inkscape:isstock="true">
+ <path
+ id="path838"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#e1ffff;stroke-width:1pt;stroke-opacity:1;fill:#e1ffff;fill-opacity:1"
+ transform="scale(0.4) rotate(180) translate(10,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Lend"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Lend"
+ style="overflow:visible;"
+ inkscape:isstock="true">
+ <path
+ id="path832"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#e1ffff;stroke-width:1pt;stroke-opacity:1;fill:#e1ffff;fill-opacity:1"
+ transform="scale(0.8) rotate(180) translate(12.5,0)" />
+ </marker>
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1"
+ inkscape:cx="160"
+ inkscape:cy="160"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="false"
+ units="px"
+ inkscape:window-width="1916"
+ inkscape:window-height="1041"
+ inkscape:window-x="0"
+ inkscape:window-y="18"
+ inkscape:window-maximized="0" />
+ <metadata
+ id="metadata5">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Layer 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(0,-212.3333)">
+ <circle
+ style="opacity:1;fill:#216778;fill-opacity:1;stroke:none;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
+ id="path815"
+ cx="160"
+ cy="372.33331"
+ r="160" />
+ <path
+ style="fill:none;stroke:#ffffff;stroke-width:20;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow2Lend)"
+ d="M 121.85231,407.83675 237.94589,293.38278"
+ id="path827"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ </g>
+</svg>
diff --git a/app/assets/stylesheets/application/_body.scss b/app/assets/stylesheets/application/_body.scss
index cadac51..f151b47 100644
--- a/app/assets/stylesheets/application/_body.scss
+++ b/app/assets/stylesheets/application/_body.scss
@@ -38,6 +38,10 @@ body {
}
}
+main > article {
+ background-color: rgba(255, 255, 255, 0.8);
+}
+
img {
max-width: 100%;
}
diff --git a/app/assets/stylesheets/application/_debug.scss b/app/assets/stylesheets/application/_debug.scss
new file mode 100644
index 0000000..75b1988
--- /dev/null
+++ b/app/assets/stylesheets/application/_debug.scss
@@ -0,0 +1,12 @@
+/*
+ DEBUG
+*/
+
+#debug {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ padding: 0.5rem;
+ background-color: rgba(255,0,0,0.5);
+ color: white;
+}
diff --git a/app/assets/stylesheets/application/_map.scss b/app/assets/stylesheets/application/_map.scss
new file mode 100644
index 0000000..d2330e1
--- /dev/null
+++ b/app/assets/stylesheets/application/_map.scss
@@ -0,0 +1,14 @@
+/*
+ MAP
+*/
+
+#map {
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: -1;
+}
diff --git a/app/controllers/welcome_controller.rb b/app/controllers/welcome_controller.rb
index 5e80d26..48167b2 100644
--- a/app/controllers/welcome_controller.rb
+++ b/app/controllers/welcome_controller.rb
@@ -1,6 +1,8 @@
class WelcomeController < ApplicationController
# GET /
def index
+ @resources = Resource.order(:uuid).page params[:page]
+ Rails.logger.info "WECLOME ///// #{@resources&.count || 0}"
end
# GET /authenticate(/:token)
diff --git a/app/views/application/_debug.html.erb b/app/views/application/_debug.html.erb
new file mode 100644
index 0000000..fce114d
--- /dev/null
+++ b/app/views/application/_debug.html.erb
@@ -0,0 +1,5 @@
+<% if Rails.env.development? %>
+ <div id="debug">
+ <%= yield :debug %>
+ </div>
+<% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 38dcf46..02c8553 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -7,6 +7,7 @@
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
+ <%= yield :head %>
</head>
<body>
@@ -26,6 +27,8 @@
<footer>
<%= yield :footer %>
</footer>
+ <%= render partial: 'debug' %>
<%= render partial: 'flash' %>
+ <%= yield :body_end %>
</body>
</html>
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
index 9873194..1977962 100644
--- a/app/views/welcome/index.html.erb
+++ b/app/views/welcome/index.html.erb
@@ -1,23 +1,26 @@
-<head>
- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
- integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
- crossorigin="">
- </link>
-</head>
-
-<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
- integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
- crossorigin="">
-</script>
+<% content_for :head do %>
+ <%= stylesheet_link_tag("https://unpkg.com/leaflet@1.7.1/dist/leaflet.css",
+ integrity: "sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==",
+ crossorigin: '') %>
+ <%= javascript_include_tag("https://unpkg.com/leaflet@1.7.1/dist/leaflet.js",
+ integrity: "sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==",
+ crossorigin: '') %>
+<% end %>
<h1>Bienvenue à l'atelier carto d'IN COMMON</h1>
-<div id="mapid" style="height: 500px;">
-</div>
+<%= tag.div(id: 'map') %>
+
+<% content_for :debug do %>
+ <p>Premier élément de la liste:</p>
+ <% res = @resources.first %>
+ <p><%= res.feature["properties"]["name"] %></p>
+ <p><%= res.feature["geometry"]["coordinates"] %></p>
+<% end %>
+
+<% content_for :body_end do %>
<script>
- <% @resources = Resource.order(:uuid).page params[:page] %>
- <% res = @resources.first%>
- var mymap = L.map('mapid').setView([50.8503396, 4.3517103],13);
+ var mymap = L.map('map').setView([50.8503396, 4.3517103],13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery <a href="https://www.mapbox.com/">Mapbox</a>',
@@ -27,24 +30,10 @@
zoomOffset: -1,
accessToken: 'pk.eyJ1IjoibmVtYWVsIiwiYSI6ImNrZzBrYjBudTB3bnMyenFmNWtrN3h3bmMifQ.Rkeyhm-9iIQOV7NAMA5LaA'
}).addTo(mymap);
- //var marker = L.marker(<%= [res.feature["geometry"]["coordinates"][1],res.feature["geometry"]["coordinates"][0]]%>).addTo(mymap);
var marker = L.marker([50.850, 4.351]).addTo(mymap);
- //CONTINUER AVEC LES WHILE ET CONDITIONS, @resources ne contient que 25 elements (lié au nombre d'élément par page?)
+ //CONTINUER AVEC LES WHILE ET CONDITIONS, @resources ne contient que 25 elements (lié au nombre d'élément par page?) -- oui
//OU PLUTOT UTILISER POSTGRES POUR FAIRE DES REQUESTES SUR @resources
var count = 0
- <% i = 0
- while i < 25
- if @resources[i] != nil%>
- //var marker = L.marker(<%= [@resources[i].feature["geometry"]["coordinates"][1],@resources[i].feature["geometry"]["coordinates"][0]]%>).addTo(mymap);
- //console.log('<%= @resources[i].feature["properties"]["name"] %>');
- console.log('<%= @resources[i].feature["geometry"]["coordinates"] %>');
- count += 1
- <% end %>
-
- <% i += 1
- end %>
console.log(count)
</script>
-<p>Premier élément de la liste:</p>
-<p><%= res.feature["properties"]["name"] %></p>
-<p><%= res.feature["geometry"]["coordinates"] %></p>
+<% end %>