Commit d0cb3c22 authored by Dorian's avatar Dorian
Browse files

going to v1

parent 949bcb4b
/* ___ COVER DESIGN ___ */
.cover h1,
.cover h2 span{
.cover h1{
display: inline-block;
font-family: "Liberation Serif";
color: black;
font-size: 1.2rem;
......@@ -11,31 +10,32 @@
text-align: left;
margin: 0;
}
.cover h2{
/* on grossis un peu ? */
/* font-size: 1rem; */
/* get back the postal code */
.cover h1{
string-set: postal attr(data-postal);
}
.cover-description{
font-size: 1em;
font-weight: normal;
text-align: left;
}
.cover h2 a{
.cover-description a{
color: black;
}
#big-potelet h2 span{
width: 10cm;
height: 4cm;
margin: 0.5cm 0;
border-radius: 50%;
border: 1pt black solid;
/* -------GRAPHIC-------- */
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
}
/* ___ POTELET STREET ___ */
.cover .street{
font-family: "Liberation Serif";
font-weight: bold;
font-size: 98pt;
line-height: 1;
margin-top: 0;
margin-bottom: 2rem;
}
/* ___ ELLIPSIS MAP ___ */
......@@ -68,18 +68,6 @@
}
/* ___ POTELET STREET ___ */
.cover .street{
font-family: "Liberation Serif";
font-weight: bold;
font-size: 98pt;
line-height: 1;
margin-top: 0;
margin-bottom: 2rem;
}
/* ___ PATTERNS ___ */
.pattern{
......@@ -87,7 +75,7 @@
top: 0; left: 0; right: 0; bottom: 0;
font-family: "Liberation Mono";
/* font-weight: bold; */
font-weight: normal;
height: 100%;
max-height: 100%;
......@@ -105,6 +93,20 @@
/* ___ BIG POTELETS ___ */
/* #big-potelet h2 span{
width: 10cm;
height: 5cm;
margin: 0.5cm 0;
border-radius: 50%;
border: 1pt black solid;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
} */
.big-potelet{
font-family: "Liberation Serif";
font-size: 700pt;
......
/*
TODO:
- comment faire que la map ou la cover (un div) prenne toute une page
- different type of page
- chapter titre courant
- chapter counter / target-counter (page x on y)
*/
/* ___ GLOBAL ____ */
......@@ -14,12 +6,14 @@ html{
}
body{
font-family: "Liberation Mono";
font-size: 0.8125rem;
font-size: 0.875rem;
counter-reset: cluster;
}
.mono{
font-family: "Liberation Mono";
font-size: 0.8125rem;
font-size: 0.875rem;
}
.serif{
font-family: "Liberation Serif";
......@@ -28,6 +22,8 @@ body{
hr{
margin: 1em 0;
border: none;
border-bottom: 0.5pt solid lightgrey;
}
ul{
padding-left: 0;
......@@ -48,41 +44,15 @@ li{
/* ___ COVER ____ */
.cover{
break-before: page;
page: cover;
}
/* ___ CLUSTERS ____ */
.cluster{
/* break-before: right; */
break-before: always;
counter-reset: poteletNumber;
counter-increment: poteletNumber;
page: cluster;
}
.cluster h1{
string-set: cluster-id content(text);
}
.cluster table.summary{
border-spacing: 0;
border-collapse: collapse;
}
.cluster table.summary th{
text-align: left;
padding-bottom: 0.5em;
}
.cluster table.summary th:not(:last-child),
.cluster table.summary td:not(:last-child){
padding-right: 2em;
page: cover;
}
/* ___ MAPS ____ */
.map{
width: 100%;
height: 10cm;
height: calc(var(--pagedjs-pagebox-height) / 2);
border-radius: 50%;
/* box-shadow: 0 0 24pt lightgrey; */
......@@ -104,66 +74,119 @@ li{
background-color: white;
}
/* ___ CLUSTERS ____ */
.cluster{
page: cluster;
counter-increment: cluster;
}
.cluster > header > h1{
font-size: 1.5em;
margin: 0;
}
.cluster > header > h1::before{
content: "Cluster " counter(cluster) " in " string(postal);
}
.cluster > header{
break-before: always;
counter-reset: potelet;
counter-set: potelet 1;
}
/* .cluster > header > p{
margin-bottom: 1em;
} */
/* .cluster h1{
string-set: cluster-id content(text);
} */
/* cluster table summary */
.cluster table.summary{
margin-top: 2em;
border-spacing: 0;
border-collapse: collapse;
width: 100%;
}
.cluster table.summary th{
text-align: left;
/* padding-bottom: 0.5em; */
}
.cluster table.summary th,
.cluster table.summary td{
border: 0.5pt solid lightgrey;
padding: 0.4em 0.5em 0.2em;
}
.cluster table.summary th:not(:last-child),
.cluster table.summary td:not(:last-child){
/* padding-right: 2em; */
}
.cluster table.summary td.damaged::before{
content: "⬤";
padding-right: 1em;
}
.cluster table.summary td.missing::before{
content: "◯";
padding-right: 1em;
}
.cluster table.summary tr{
break-inside: avoid;
}
/* ___ POTELETS ____ */
.potelet{
break-before: page;
counter-increment: poteletNumber;
/* display: none; */
/* page: incident; */
break-before: always;
page: incident;
}
.potelet footer{
counter-increment: potelet;
content: "counter-increment " counter(potelet);
display: inline;
}
/* ___ HEADER ___ */
.potelet header{
border: 1px solid lightgrey;
padding: 0 1em;
margin-bottom: 1em;
border: 0.5pt solid lightgrey;
padding: 1.5em 1em;
margin-bottom: 2em;
position: relative;
}
.potelet header h2{
font-size: 1.5em;
margin: 0;
string-set: potelet-id content(text);
}
.potelet header .onelineflex > *{
margin-bottom: 0;
}
.potelet header .onelineflex > *{
padding-right: 1rem;
}
.potelet header .onelineflex > *:last-child{
flex-grow: 1;
text-align: right;
}
.potelet header a{
font-size: large;
text-decoration: none;
}
/* ___ attachment & history column ____ */
.potelet main{
display: flex;
}
.potelet main > .attachments{
flex: 0 0 65%;
order: 1;
border-right: 1px solid lightgrey;
}
.potelet main > .history{
flex: 0 0 35%;
order: 2;
}
.potelet main h4{
border-bottom: 1px solid lightgrey;
padding-left: 1em;
border-bottom: 0.5pt solid lightgrey;
break-after: avoid;
}
.potelet main > *{
padding: 0 1em;
}
/* ___ inside the column ___ */
/* ___ THE CONTENT ___ */
/* no content */
.potelet.False main::after{
content: "No PICTURE or COMMENT for this incident...";
}
.potelet ul{
padding-left: 0;
......@@ -171,36 +194,62 @@ li{
.potelet li{
list-style: none;
break-inside: avoid;
margin: 2em 0;
}
.potelet ul p{
margin: 0.5em 0;
}
.potelet ul p:first-child{
.potelet ul li p:first-child{
margin-top: 0;
}
.potelet ul p:last-child{
.potelet ul li p{
margin: 0.5em 0;
}
.potelet ul li p:last-child{
margin-bottom: 0;
}
.potelet main .date{
text-align: right;
font-size: smaller;
/* font-size: smaller; */
}
/* ___ PICTURES ___*/
.attachments li.image{
/* display: inline-flex;
flex-direction: column; */
max-height: calc(29.1cm - calc(2 * 1.6cm));
}
/* .attachments li.image > *{
flex-grow: 0;
flex-shrink: 0;
} */
/* .attachments .img-container{
flex-grow: 1;
flex-shrink: 1;
} */
.attachments img{
max-width: 100%;
/* max-height: 10cm; */
width: 100%;
/* width: 100%;
height: auto;
flex-shrink: 1 !important; */
object-fit: contain;
object-position: top left;
}
/* ___ COMMENTS ___*/
.attachments .comment .text{
display: inline-block;
width: auto;
margin: 0;
font-family: "Liberation Serif";
font-size: 1rem;
border: 1px solid black;
padding: 0.8em 1em;
border-radius: 1.8em;
padding: 1em 1.5em;
border-radius: 2em;
}
.damaged .attachments .comment .text{
font-style: italic;
}
......@@ -208,12 +257,11 @@ li{
border-style: dashed;
}
/* not show syscomment ? */
.attachments .syscomment .text{
background: whitesmoke;
color: grey;
padding: 0.5em 1em;
display: none;
}
.attachments .syscomment{
display: none;
......
......@@ -8,30 +8,46 @@
margin-right: 1.6cm;
@bottom-right {
color: darkgrey;
content: "page " counter(page);
content: string(postal);
}
@right-bottom {
/* content: "p. " counter(page); */
/* writing-mode: vertical-rl;
transform-origin: center center;
transform: rotate(-180deg);
margin-left: 0.1em; */
}
}
@page incident{
@bottom-left {
content: string(potelet-id);
text-transform: lowercase;
}
@bottom-center {
color: darkgrey;
content: "incident " string(potelet-id) "(" counter(poteletNumber) ")";
content: "n°" counter(potelet) " of cluster " counter(cluster);
}
}
@page cluster{
@bottom-left {
color: darkgrey;
content: "cluster " string(cluster-id);
@bottom-center {
content: "cluster " counter(cluster);
}
/* @bottom-left {
content: none;
}
@bottom-center {
content: none;
}
@bottom-right {
content: none;
}
@right-bottom {
content: none;
} */
}
@page cover{
/* background: Ivory;
color: CadetBlue; */
@bottom-left {
content: none;
}
......@@ -41,6 +57,9 @@
@bottom-right {
content: none;
}
@right-bottom {
content: none;
}
}
}
......
// Zoom: it seems that open street map cannot give us zoom more than a certain one (20?)
function init_map(mapid, geojsonObject){
......@@ -45,19 +46,21 @@ function init_map(mapid, geojsonObject){
let marker = L.circleMarker(latlng, markerStyle);
// add label
label = String(feature.properties.id)
marker.bindTooltip(label, {
permanent: true,
// direction: "right",
className: "my-labels"
}).openTooltip();
// label = String(feature.properties.id)
// marker.bindTooltip(label, {
// permanent: true,
// // direction: "right",
// className: "my-labels"
// }).openTooltip();
return marker;
}
});
geojsonLayer.addTo(mymap);
mymap.fitBounds(geojsonLayer.getBounds());
mymap.fitBounds(geojsonLayer.getBounds(),{
padding: L.point([50, 50])
});
console.log(mapid + " initiated");
}
......
This diff is collapsed.
......@@ -48,13 +48,13 @@
<!-- minimal mini street -->
<div class="fullpage cover">
<div class="street">_¡_&nbsp;_<i>¡</i>_¡_¡__</div>
<div class="street">_¡_._<i>¡</i>_¡_¡__</div>
<h2>
<div class="cover-description">
missing and damaged boolards <br/>
reported on <a href="https://fixmystreet.brussels/">https://fixmystreet.brussels/</a> <br/><br/>
in <span>{{ volume.name }}</span>
</h2>
in <h1 data-postal="{{ volume.code }}">{{ volume.name }}</h1>
</div>
<p>
-- {{volume.cluster_size}} clusters <br/>
-- {{volume.incident_size}} incidents
......@@ -68,7 +68,7 @@
</div>
<div class="ellipsis">
<h1>{{ volume.name }}</h1>
<h1 data-postal="{{ volume.code }}">{{ volume.name }}</h1>
<p>
{{volume.cluster_size}} clusters <br/>
{{volume.incident_size}} incidents
......@@ -80,11 +80,11 @@
<!-- big ! -->
<div id="big-potelet" class="fullpage cover">
<h2>
<div class="cover-description">
missing and damaged boolards <br/>
reported on <a href="https://fixmystreet.brussels/">https://fixmystreet.brussels/</a> <br/>
in <span>{{ volume.name }}</span>
</h2>
reported on <a href="https://fixmystreet.brussels/">https://fixmystreet.brussels/</a> <br/><br/>
in <h1 data-postal="{{ volume.code }}">{{ volume.name }}</h1>
</div>
<p>
-- {{volume.cluster_size}} clusters <br/>
-- {{volume.incident_size}} incidents
......@@ -100,75 +100,84 @@
<div id="{{ cluster.id }}" class="cluster">
<h1>{{ cluster.id }}</h1>
<p>Cluster of {{ cluster.size }} incidents</p>
<!-- GEOJSON -->
<div id="map-{{ cluster.id }}" class="map"></div>
<script>
// dumping json from python (can read file) to js (cannot) when generating the template
// using window. so we can get it back into other js script
window.geojson["{{ cluster.id }}"] = {{ cluster.geojson|tojson|safe }} ;
console.log("added a geojson of " + window.geojson["{{ cluster.id }}"]["features"].length + " points");
</script>
<div class="streets">
<ul>
{% for streets in cluster.streetnames %}
<li>{{ streets }}</li>
<header>
<!-- <h1>{{ cluster.id }}</h1> -->
<h1 class="cluster-title"></h1>
<p>Number of incidents: {{ cluster.size }}</p>
<!-- GEOJSON -->
<div id="map-{{ cluster.id }}" class="map"></div>
<script>
// dumping json from python (can read file) to js (cannot) when generating the template
// using window. so we can get it back into other js script
window.geojson["{{ cluster.id }}"] = {{ cluster.geojson|tojson|safe }} ;
console.log("added a geojson of " + window.geojson["{{ cluster.id }}"]["features"].length + " points");
</script>
<!-- <div class="streets">
<ul>
{% for streets in cluster.streetnames %}
<li>{{ streets }}</li>
{% endfor %}
</ul>
</div> -->
<!-- <hr> -->
<table class="summary">
<tr>
<th>id</th>
<th>type</th>
<th>creation date</th>
<!-- <th>status</th> -->
<th>adress</th>
</tr>
{% for potelet in cluster.incidents %}
<tr>
<td>{{ potelet.id }}</td>
<td class="{{ potelet.subcat }}">{{ potelet.subcat }}</td>
<td>{{ potelet.creationDate.day }}</td>
<!-- <td>{{ potelet.status }}</td> -->
<td>{{ potelet.adress }}</td>
</tr>
{% endfor %}
</ul>
</div>
<hr>
<table class="summary">
<tr>