~fabrixxm/pytrek

408a784da3a9951c46c673c448bd7953cdea1d20 — fabrixxm 3 months ago 7b0df96 master
Template: add map in index with starting points

this diff is a mess. The editor has it's ideas about how code
should be formatted, which are different than mine.
M pytrek/themes/default/assets/site.css => pytrek/themes/default/assets/site.css +91 -67
@@ 1,6 1,6 @@
html,
body {
  font-family: sans-serif;
    font-family: sans-serif;
}

h1,


@@ 9,132 9,156 @@ h3,
h4,
h5,
h6 {
  font-family: serif;
    font-family: serif;
}

body {
  padding: 0;
  margin: 0;
    padding: 0;
    margin: 0;
}

h1 {
  font-size: 3em;
    font-size: 3em;
}

.head {
  height: 5em;
  width: 100%;
  background-size: cover;
  background-position: center;
  text-align: center;
  padding-top: 3em;
    height: 5em;
    width: 100%;
    background-size: cover;
    background-position: center;
    text-align: center;
    padding-top: 3em;
}

.head a {
  color: #000;
  font-family: serif;
  font-size: 3em;
    color: #000;
    font-family: serif;
    font-size: 3em;
}

.mainbody {
  max-width: 50rem;
  padding: 0em 2rem;
  margin: auto;
    max-width: 50rem;
    padding: 0em 2rem;
    margin: auto;
}

section {
  margin: 1.5em 0;
    margin: 1.5em 0;
}

.footer {
  margin-top: 2rem;
  padding: 2rem;
  border-top: 1px solid lightgray;
  font-size: 0.75rem;
  text-align: center;
    margin-top: 2rem;
    padding: 2rem;
    border-top: 1px solid lightgray;
    font-size: 0.75rem;
    text-align: center;
}

.footer>div {
    max-width: 50rem;
    margin: auto;
}
.footer > div { max-width: 50rem; margin: auto; }

.postcontent {
  text-align: justify;
  font-size: 1em;
    text-align: justify;
    font-size: 1em;
}

.highlight {
  padding: 0.01em 0.7em;
    padding: 0.01em 0.7em;
}

.postedby {
  font-size: 0.75rem;
  font-style: italic;
    font-size: 0.75rem;
    font-style: italic;
}

.postimage {
  width: 100%;
    width: 100%;
}

.postcontent img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.syntax {
  width: 100%;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #ff79c6 #282a36;
    width: 100%;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #ff79c6 #282a36;
}

#headermap {
    width: 100%;
    height: 400px;
}

#map {
  width: 100%; height: 50rem;
    width: 100%;
    height: 50rem;
}

.trackinfo {
  display: flex;
  flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
}
.trackinfo > dl {
  flex-grow: 2;
  margin: 0;
  margin-right: 0.25em;
  padding-right: 0.25em;
  border-right: 1px solid lightgray;

.trackinfo>dl {
    flex-grow: 2;
    margin: 0;
    margin-right: 0.25em;
    padding-right: 0.25em;
    border-right: 1px solid lightgray;
}
.trackinfo > dl:last-child {
  margin: 0; padding: 0;
  border: 0;

.trackinfo>dl:last-child {
    margin: 0;
    padding: 0;
    border: 0;
}

.trackinfo dt {
  text-align: center;
  font-weight: bold;
  margin: 0; padding: 0.1em;
    text-align: center;
    font-weight: bold;
    margin: 0;
    padding: 0.1em;
}

.trackinfo dd {
  text-align: center;
  margin: 0; margin: 0; padding: 0.5em;
  white-space: nowrap;
    text-align: center;
    margin: 0;
    margin: 0;
    padding: 0.5em;
    white-space: nowrap;
}

.gallery a {
  position: relative;
    position: relative;
}

.gallery img {
  width: 19%;
  transition: all 100ms;
  position: relative;
  top: 0;
  left: 0;
    width: 19%;
    transition: all 100ms;
    position: relative;
    top: 0;
    left: 0;
}

.gallery img:hover {
  top: -2px;
  box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
    top: -2px;
    box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 720px) {
  .mainbody {
    padding: 0 0.2em;
  }
    .mainbody {
        padding: 0 0.2em;
    }

    #headermap,
    #map {
        height: 30vh;
    }
}
\ No newline at end of file

M pytrek/themes/default/templates/base.html.j2 => pytrek/themes/default/templates/base.html.j2 +22 -4
@@ 3,7 3,7 @@
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="generator" content="{{ pytrek }}" />
        <meta name="generator" content="{{ pytrek }}" />
        <link rel="icon" type="image/png" href="{% asset 'favicon.png' %}">

        <title>


@@ 12,27 12,45 @@
        {% block head %}
        {% endblock head %}

        <link type="text/css" rel="stylesheet" href="{% asset 'leaflet.css' %}" />
        <link type="text/css" rel="stylesheet" href="{% asset 'leaflet.elevation-0.0.4-d3v4.css' %}" />
        <link type="text/css" rel="stylesheet" href="{% asset 'MarkerCluster.css' %}" />
        <link type="text/css" rel="stylesheet" href="{% asset 'Leaflet.Photo.css' %}" />
        <link type="text/css" rel="stylesheet" href="{% asset 'Leaflet.fullscreen.css' %}" />

        <script src="{% asset 'd3v4.min.js' %}"></script>
        <script src="{% asset 'leaflet.js' %}"></script>
        <script src="{% asset 'gpx.min.js' %}"></script>
        <script src="{% asset 'leaflet.elevation-0.0.4-d3v4.src.js' %}"></script>
        <script src="{% asset 'leaflet.markercluster.js' %}"></script>
        <script src="{% asset 'Leaflet.Photo.js' %}"></script>
        <script src="{% asset 'Leaflet.fullscreen.min.js' %}"></script>

        <link type="text/css" rel="stylesheet" href="{% asset 'site.css' %}" />
    </head>
    <body>
        <header class="head">
            <nav>
            {% block nav %}
			    <a href="{{ home_href }}"><img src="{% asset 'favicon.png' %}"> {{ site.title }}</a>
                <a href="{{ home_href }}"><img src="{% asset 'favicon.png' %}"> {{ site.title }}</a>
            {% endblock nav %}
            </nav>
        </header>
        
        {% block prebody %}
        {% endblock prebody %}

        <article class="mainbody">
        {% block body %}
        {% endblock body %}
        </article>

        <footer class="footer">
		{% block footer %}
        {% block footer %}
            <div>
                Generated by <a href="https://git.sr.ht/~fabrixxm/pytrek">{{ pytrek }}</a>
            </div>
		{% endblock footer %}
        {% endblock footer %}
        </footer>

        {% block foot %}

M pytrek/themes/default/templates/entry.html.j2 => pytrek/themes/default/templates/entry.html.j2 +29 -42
@@ 1,7 1,7 @@
{% extends "base.html.j2" %}

{%- macro longtitle(entry) -%}
	{{ entry.date.start|date }}{% if entry.date.end and entry.date.start|date != entry.date.end|date %}~{{ entry.date.end|date }}{% endif %} - {{ entry.title }}
    {{ entry.date.start|date }}{% if entry.date.end and entry.date.start|date != entry.date.end|date %}~{{ entry.date.end|date }}{% endif %} - {{ entry.title }}
{%- endmacro -%}

{% block title %}


@@ 10,43 10,30 @@


{% block head %}
	{% if site.baseurl %}
	<meta property="og:site_name" content="{{ site.title }}" />
	<meta property="og:title" content="{{ longtitle(entry) }}" />
	<meta property="twitter:title" content="{{ longtitle(entry) }}" />
	<meta property="og:type" content="article" />
	<meta property="og:url" content="{{ site.baseurl }}/{{ entry.url }}/" />
	{% if entry.description -%}
	<meta property="og:description" content="{{ entry.description|striptags|truncate(50) }}" />
	<meta property="twitter:description" content="{{ entry.description|striptags|truncate(50) }}" />
	<meta name="description" content="{{ entry.description|striptags|truncate(50) }}" />
	{%- else -%}
	<meta property="og:description" content="Track and photos" />
	<meta property="twitter:description" content="Track and photos" />
	<meta name="description" content="Track and photos" />
	{%- endif %}
	{% if entry.images|length > 0 -%}
	<meta property="og:image" content="{{ site.baseurl }}/{{ entry.url }}/{{ entry.images.0.url }}" />
	<meta property="twitter:image" content="{{ site.baseurl }}/{{ entry.url }}/{{ entry.images.0.url }}" />
	{%- else -%}
	<meta property="og:image" content="{% asset 'favicon.png' %}" />
	<meta property="twitter:image" content="{% asset 'favicon.png' %}" />
	{%- endif %}
	{% endif %}

    <link type="text/css" rel="stylesheet" href="{% asset 'leaflet.css' %}" />
    <link type="text/css" rel="stylesheet" href="{% asset 'leaflet.elevation-0.0.4-d3v4.css' %}" />
    <link type="text/css" rel="stylesheet" href="{% asset 'MarkerCluster.css' %}" />
    <link type="text/css" rel="stylesheet" href="{% asset 'Leaflet.Photo.css' %}" />
    <link type="text/css" rel="stylesheet" href="{% asset 'Leaflet.fullscreen.css' %}" />

    <script src="{% asset 'd3v4.min.js' %}"></script>
    <script src="{% asset 'leaflet.js' %}"></script>
    <script src="{% asset 'gpx.min.js' %}"></script>
    <script src="{% asset 'leaflet.elevation-0.0.4-d3v4.src.js' %}"></script>
    <script src="{% asset 'leaflet.markercluster.js' %}"></script>
    <script src="{% asset 'Leaflet.Photo.js' %}"></script>
    <script src="{% asset 'Leaflet.fullscreen.min.js' %}"></script>
    {% if site.baseurl %}
    <meta property="og:site_name" content="{{ site.title }}" />
    <meta property="og:title" content="{{ longtitle(entry) }}" />
    <meta property="twitter:title" content="{{ longtitle(entry) }}" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="{{ site.baseurl }}/{{ entry.url }}/" />
    {% if entry.description -%}
    <meta property="og:description" content="{{ entry.description|striptags|truncate(50) }}" />
    <meta property="twitter:description" content="{{ entry.description|striptags|truncate(50) }}" />
    <meta name="description" content="{{ entry.description|striptags|truncate(50) }}" />
    {%- else -%}
    <meta property="og:description" content="Track and photos" />
    <meta property="twitter:description" content="Track and photos" />
    <meta name="description" content="Track and photos" />
    {%- endif %}
    {% if entry.images|length > 0 -%}
    <meta property="og:image" content="{{ site.baseurl }}/{{ entry.url }}/{{ entry.images.0.url }}" />
    <meta property="twitter:image" content="{{ site.baseurl }}/{{ entry.url }}/{{ entry.images.0.url }}" />
    {%- else -%}
    <meta property="og:image" content="{% asset 'favicon.png' %}" />
    <meta property="twitter:image" content="{% asset 'favicon.png' %}" />
    {%- endif %}
    {% endif %}

{% endblock head %}




@@ 134,7 121,7 @@
                {% endif %}
            </dd>
        </dl>
		{% if entry.date.end %}
        {% if entry.date.end %}
        <dl>
            <dt title="End">{# clock-afternoon #}
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M224,128a96,96,0,1,1-96-96A96,96,0,0,1,224,128Z" opacity="0.2"></path><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H147.31l26.35,26.34a8,8,0,0,1-11.32,11.32l-40-40A8,8,0,0,1,128,120h56A8,8,0,0,1,192,128Z"></path></svg>


@@ 147,7 134,7 @@
                {% endif %}
            </dd>
        </dl>
		{% endif %}
        {% endif %}
        <dl>
            <dt title="Min elevation">{# arrow-line-down #}
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M200,112l-72,72L56,112Z" opacity="0.2"></path><path d="M122.34,189.66a8,8,0,0,0,11.32,0l72-72A8,8,0,0,0,200,104H136V32a8,8,0,0,0-16,0v72H56a8,8,0,0,0-5.66,13.66ZM180.69,120,128,172.69,75.31,120ZM224,216a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,216Z"></path></svg>


@@ 190,14 177,14 @@
            </dt>
            <dd>{{ "%.1f" % (entry.stats.moving_distance / 1000) }} km</dd>
        </dl>
		{#
        {#
        <dl>
            <dt title="Max speed">{-# gauge #-}
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M232,160v24a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V161.13C24,103.65,70.15,56.2,127.63,56A104,104,0,0,1,232,160Z" opacity="0.2"></path><path d="M207.06,80.67A111.24,111.24,0,0,0,128,48h-.4C66.07,48.21,16,99,16,161.13V184a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V160A111.25,111.25,0,0,0,207.06,80.67ZM224,184H119.71l54.76-75.3a8,8,0,0,0-12.94-9.42L99.92,184H32V161.13c0-3.08.15-6.12.43-9.13H56a8,8,0,0,0,0-16H35.27c10.32-38.86,44-68.24,84.73-71.66V88a8,8,0,0,0,16,0V64.33A96.14,96.14,0,0,1,221,136H200a8,8,0,0,0,0,16h23.67c.21,2.65.33,5.31.33,8Z"></path></svg>
            </dt>
            <dd>{{ "%.1f" % entry.stats.max_speed_kmh }} km/h</dd>
        </dl>
		#}
        #}
    </section>

    <section class="postcontent">

M pytrek/themes/default/templates/index.html.j2 => pytrek/themes/default/templates/index.html.j2 +64 -0
@@ 2,6 2,70 @@

{% block title %}{{ site.title }}{% endblock title %}

{% block head %}
    {% if site.baseurl %}
    <meta property="og:site_name" content="{{ site.title }}" />
    <meta property="og:title" content="{{ site.title }}" />
    <meta property="twitter:title" content="{{ site.title }}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{ site.baseurl }}/" />
    <meta property="og:description" content="Track and photos" />
    <meta property="twitter:description" content="Track and photos" />
    <meta name="description" content="Track and photos" />
    <meta property="og:image" content="{% asset 'favicon.png' %}" />
    <meta property="twitter:image" content="{% asset 'favicon.png' %}" />
    {% endif %}
{% endblock head %}

{% block prebody %}
	<div id="headermap"></div>
	<script>
		var map = L.map('headermap', {
			fullscreenControl: {
				pseudoFullscreen: true,
			}
		})
			.setView([0.0, 0.0], 2);

		var markers = L.featureGroup()
			.on("add", function(e) {
				var bounds = e.target.getBounds();
				if (bounds.isValid()) map.fitBounds(bounds);
			});

		var icon = L.icon({
			iconUrl: '{% asset "pin-start.png" %}',
			iconSize: [33, 45],
			iconAnchor: [15, 44],
			popupAnchor: [-3, -76],
			shadowUrl: '{% asset "pin-shadow.png" %}',
			shadowSize: [33, 45],
			shadowAnchor: [11, 40]
		});


		{% for entry in site.entries  -%}
		L.marker(
			[{{ entry.starting_point.latitude }},
				{{ entry.starting_point.longitude }},],
			{
				icon: icon,
				title: {{ entry.title|jstr }},
				riseOnHover: true,
			}
		).addTo(markers);
		{%- endfor -%}

		markers.addTo(map);

		L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 19,
			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
		}).addTo(map);

	</script>
{% endblock prebody %}

{% block body %}
    <h2>Tracks</h2>
    <ul>