WP6
/
expub_compendium


			
							<!--
# @name: base.html
# @version: 0.1
# @creation_date: 2021-10-20
# @license: The MIT License <https://opensource.org/licenses/MIT>
# @author: Simon Bowie <ad7588@coventry.ac.uk>
# @purpose: Basic layout for all pages
# @acknowledgements:
# https://www.digitalocean.com/community/tutorials/how-to-make-a-web-application-using-flask-in-python-3
# Bootstrap 5.1.3: https://getbootstrap.com/
# Flask-Moment: https://flask-moment.readthedocs.io/en/latest/
# Boostrap select: https://stackoverflow.com/questions/67942546/bootstrap-5-select-dropdown-with-the-multiple-attribute-collapsed
-->

{% macro resource_lead(type, title, leadtext, url, year, thumbnail='', large_title=false) %}
    <div class="relative cell ">
        <a 
            class="block cursor-pointer"

            href="{{ url }}" 
            hx-target="#modal-content" 
            hx-select="main" 
            hx-swap="innerHTML" 

            @click="openModal()"
        >
            {% if large_title %}
                <h2 class="">{{ title }}</h2>
            {% else %}
                <h3 class="">{{ title }}</h3>
            {% endif %}
            
            {% if year %}
                <div class="">{{ year }}</div>
            {% endif %}

            {% if type == 'book' and thumbnail %}
                <img class="w-40 h-40 object-contain float-right m-16 grayscale rotate-[15deg]" src={{ book['thumbnail'] }} alt="cover for {{ title }}">
            {% endif %}

            <div class="">
                {{ leadtext | truncate(100) }}
            </div>
        </a>
        {% if current_user.is_authenticated %}
            <div class="">
                {% if resource['type'] == 'tool' %}
                <a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}">
                    <span class="absolute top-0 left-0 text-xs">Edit</span>
                </a>
                {% elif resource['type'] == 'practice' %}
                <a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}">
                    <span class="absolute top-0 left-0 text-xs">Edit</span>
                </a>
                {% elif resource['type'] == 'book' %}
                <a href="{{ url_for('book.edit_book', book_id=resource['id']) }}">
                    <span class="absolute top-0 left-0 text-xs">Edit</span>
                </a>
                {% endif %}
            </div>
        {% endif %}
    </div>

{% endmacro %}

{% macro resource_small(resource) %}
    {% if resource['type'] == 'tool' %}
        {{  
            resource_lead(
                resource['type'], 
                resource['name'], 
                resource['description'], 
                url_for('tool.show_tool', 
                tool_id=resource['id']),
                null,
                '',
                true
            ) 
        }}
    {% elif resource['type'] == 'practice' %}
        {{ 
            resource_lead(
                resource['type'], 
                resource['name'], 
                resource['description'], 
                url_for('practice.show_practice', 
                practice_id=resource['id']),
                null
            ) 
        }}
    {% elif resource['type'] == 'book' %}
        {{ 
            resource_lead(
                resource['type'], 
                resource['name'], 
                resource['author'], 
                url_for('book.show_book', 
                book_id=resource['id']), 
                null,
                resource['thumbnail'],
                true
            ) 
        }}
    {% endif %}
{% endmacro %}


<!DOCTYPE html>
<html>

<head>
    {{ moment.include_moment() }}
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/htmx.org@1.8.6"></script>
    <script src="//unpkg.com/alpinejs" defer></script>
    <title>ExPub Compendium</title>
    <link href="{{ url_for('static',filename='styles/main.css') }}" rel="stylesheet">
</head>

    <script>
        htmx.logAll();
        function base() {
            return {
                menuOpen: false,
                modalOpen: false,
                home: '/',
                init() {
                    window.addEventListener('popstate', e => {
                        console.log(document.location);
                        if (document.location == this.home) {
                            this.modalOpen = false;
                        }
                    })
                },
                hideOverlay() {
                    this.modalOpen = false;
                    window.history.pushState({}, '', this.home);
                },
                openModal() {
                    this.$refs.modal.innerHTML = '';
                    this.modalOpen = true;
                }
            }
        }
    </script>
<body 
    class="text-base overflow-y-scroll" 
    x-data="base()" 
    hx-boost="true"
    hx-select="#all"
    hx-target="#all"
    hx-indicator="#loading"

>
    <div id="loading" class="loading">
        <div class="pointer-events-none fixed top-0 left-0 w-full h-screen z-50 flex justify-center items-center p-4">
            <div class="rounded-full  bg-black text-white p-4 ">
                Loading...
            </div>
        </div>
    </div>
    <div id="all">
        <header class="sticky top-0 z-10 bg-white std-padding border-b-[3px] border-black">
            <nav class="lg:flex gap-8">
    
                <a class="mr-auto" href="{{ url_for('main.index')}}">ExPub Compendium</a>
    
                <a href="{{ url_for('main.about') }}" class="nav-link">
                    About
                </a>
                <a href="{{ url_for('tool.get_tools') }}" class="nav-link">
                    Tools
                </a>
                <a href="{{ url_for('practice.get_practices') }}" class="nav-link">
                    Practices
                </a>
                <a href="{{ url_for('book.get_books') }}" class="nav-link">
                    Books
                </a>
                {% if current_user.is_authenticated %}
                <a href="{{ url_for('create.create_resource') }}" class="nav-link">
                    Add resource
                </a>
                {% endif %}
                {% if current_user.is_authenticated %}
                <a href="{{ url_for('main.profile') }}" class="nav-link">
                    Profile
                </a>
                {% endif %}
                {% if not current_user.is_authenticated %}
                <a href="{{ url_for('auth.login') }}" class="nav-link">
                    Login
                </a>
                <a href="{{ url_for('auth.signup') }}" class="nav-link">
                    Sign Up
                </a>
                {% endif %}
                {% if current_user.is_authenticated %}
                <a href="{{ url_for('auth.logout') }}" class="nav-link">
                    Logout
                </a>
                {% endif %}
            </nav>
        </header>
    
        <!-- Begin page content -->
        <main>
            {% with messages = get_flashed_messages() %}
            {% if messages %}
                <div class="alert alert-danger">
                    {{ messages[0] }}
                </div>
            {% endif %}
            {% endwith %}
            {% block content %}
            {% endblock %}
        </main>
    </div>

    <div id="modal" x-show="modalOpen"  class="modal h-screen  w-full fixed top-0 z-20 p-8 bg-black/20">
        <div class="cross cursor-pointer absolute top-10 right-10 w-10 h-10" @click="hideOverlay()">
            <svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2 2L18 18M18 2L2 18" stroke="black" stroke-width="1"></path>
            </svg>
        </div>
        <div id="modal-content" @click.outside="hideOverlay()" x-ref="modal" class="content w-full overflow-y-scroll h-full bg-white " style="box-shadow:0 0 4rem rgba(0,0,0,0.3)">

        </div>
    </div>

    <!-- Sticky footer-->
    <footer class="std-margin mt-20 text-sm">
        <div class="container">
            <span class="">© 2022–{{ moment().format('YYYY') }} <a href="https://copim.ac.uk/">COPIM</a> and licensed under a <a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License (CC BY 4.0)</a>.</span>
        </div>
    </footer>
    <!-- JavaScript -->
    <!-- jQuery first, then Popper JS, then Bootstrap JS -->
    <script src="{{ url_for('static',filename='js/main.js') }}"></script>
</body>

</html>