summaryrefslogtreecommitdiff
path: root/themes/flog/layouts/partials/listing.html
blob: c6522945bd05086c8dba42471dbe153205d5cb9b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<main role="main">
    <img src="/logo/smalltext.svg" style="width: 100%; max-height: 30em;"></img>
    <div class="row grid">
        <div class="grid-sizer col s1"></div>
        {{ range .Data.Pages }}
            {{ if .Params.image }}
        <article itemscope itemtype="http://schema.org/BlogPosting" class="col s12 m6 grid-item grid--width6">
            {{ else }}
        <article itemscope itemtype="http://schema.org/BlogPosting" class="col s12 m4 grid-item grid--width4">
            {{ end }}
            <div class="card">
                {{ if .Params.image }}
                <div class="card-image">
                    <a class="jsonly" href="{{ .RelPermalink }}"><img src="/images/min/{{ .Params.image }}" onload="this.src = '/images/{{ .Params.image }}'"></a>
                    <noscript>
                        <a href="{{ .RelPermalink }}"><img src="/images/{{ .Params.image }}"></a>
                        <style>.jsonly { display: none }</style>
                    </noscript>
                </div>
                {{ end }}
                <section class="card-content" itemprop="text">
                    <span class="card-title" itemprop="headline">{{ .Title }}</span>
                    <div>
                        {{ .Summary }}
                    </div>
                </section>
                <div class="card-action">
                    <a href="{{ .RelPermalink }}">
                    Weiterlesen…
                    {{ if .Params.rating }}
                        <i class="material-icons right">
                        {{ range seq .Params.rating }}
                        star
                        {{ end }}
                        {{ range seq (sub 5 (int .Params.rating)) }}
                        star_border
                        {{ end }}
                        </i>
                    {{ end }}
                    </a>
                </div>
            </div>
        </article>
        {{ end }}
    </div>
</main>
<script type="text/javascript">
    var masonryReadyAttached,
        imageLoadAttached;
    
    if (typeof $ === 'undefined') {
        document.addEventListener('DOMContentLoaded', loadMasonry);
    }
    if (typeof masonryReadyAttached === 'undefined') {
        masonryReadyAttached = true;
        document.addEventListener('pageReady', loadMasonry);
    }
    
    function loadMasonry() {
        if (typeof imageLoadAttached === 'undefined') {
            imageLoadAttached = true;
            imagesLoaded(document.body).on('always', loadMasonry)
        }

        if (typeof Masonry === 'undefined') {
            console.log('loading masonry files');
            $.getScript('/js/masonry-4.1.min.js', showMasonry);
        } else {
            console.log('masonry files already present');
            showMasonry();
        }
    }
    function showMasonry() {
        if ($('.grid').length == 0) return;
        console.log('using masonry to fix this grid');
        new Masonry('.grid', { itemSelector: '.grid-item', percentPosition: true, columnWidth: '.grid-sizer' });
    }
</script>