basic UI - base, header

2d0c2f4e · Tomáš Valenta · 10a855b8 · 2d0c2f4e · 2d0c2f4e · 2d0c2f4e
Commit 2d0c2f4e authored 2 years ago by Tomáš Valenta
--- a/.gitignore
+++ b/.gitignore
@@ -2,7 +2,9 @@
 __pycache__/
 staticfiles
 node_modules/*
-shared/static/*
+shared/static/shared/*.js
+shared/static/shared/*.txt
+shared/static/shared/*.css
 webpack-stats.json
 package-lock.json
 .venv
--- a/contracts/templates/contracts/index.html
+++ b/contracts/templates/contracts/index.html
+{% extends "shared/includes/base.html" %}
+{% block content %}
+{% endblock %}
--- a/contracts/urls.py
+++ b/contracts/urls.py
@@ -3,4 +3,6 @@ from django.urls import path
 from . import views
 app_name = "contracts"
-urlpatterns = []
+urlpatterns = [
+    path("", views.index, name="index"),
+]
--- a/contracts/views.py
+++ b/contracts/views.py
+from django.conf import settings
 from django.shortcuts import render
 # Create your views here.
+def index(request):
+    return render(
+        request,
+        "contracts/index.html",
+        {
+            "site_url": settings.SITE_URL,
+            "user": request.user,
+            "title": "Title",
+            "description": "Description",
+        }
+    )
--- a/env.example
+++ b/env.example
@@ -2,7 +2,7 @@ DATABASE_URL="postgresql://contracts:contracts@localhost:5432/contracts"
 SECRET_KEY=supersecret
-SITE_URL="http://localhost:8006"
+SITE_URL="http://localhost:8013"
 OIDC_RP_REALM_URL="http://localhost:8080/realms/master/"
 OIDC_RP_CLIENT_ID=contracts

--- a/oidc/templates/oidc/login.html
+++ b/oidc/templates/oidc/login.html
 {% extends "oidc/base.html" %}
 {% block content %}
-    {% if user.is_authenticated %}
+    <a href="{% url "oidc_authentication_init" %}">Přihlásit se</a>
-        <p>Current user: {{ user.email }}</p>
-        <form action="{% url "oidc_logout" %}" method="POST">
-            {% csrf_token %}
-            <input type="submit" value="logout">
-        </form>
-    {% else %}
-        <a href="{% url "oidc_authentication_init" %}">Přihlásit se</a>
-    {% endif %}
 {% endblock %}
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
    "css-loader": "^6.7.3",
    "jquery": "^3.6.3",
    "tailwindcss": "^3.2.4",
+    "vue": "v2-latest",
    "webpack": "^5.75.0",
    "webpack-bundle-tracker": "^1.8.0",
    "webpack-cli": "^5.0.1"

--- a/registry/settings/base.py
+++ b/registry/settings/base.py
@@ -23,6 +23,7 @@ BASE_DIR = pathlib.Path(__file__).parents[2]
 env = environ.Env()
 environ.Env.read_env(os.path.join(BASE_DIR, ".env"))
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/4.0/howto/deployment/checklist/
@@ -35,6 +36,8 @@ ALLOWED_HOSTS = []
 STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
+SITE_URL = env.str("SITE_URL")
 ## Application definition

--- a/registry/urls.py
+++ b/registry/urls.py
@@ -18,8 +18,8 @@ from django.urls import include, path
 from pirates.urls import urlpatterns as pirates_urlpatterns
 urlpatterns = [
+    path("", include("contracts.urls")),
    path("markdownx/", include("markdownx.urls")),
-    path("contracts/", include("contracts.urls")),
    path("oidc/", include("oidc.urls")),
    path("admin/", admin.site.urls),
 ] + pirates_urlpatterns
--- a/shared/static/shared/favicon.png
+++ b/shared/static/shared/favicon.png
--- a/shared/templates/shared/includes/base.html
+++ b/shared/templates/shared/includes/base.html
+{% load static %}
+{% load render_bundle from webpack_loader %}
+<!DOCTYPE html>
+<html lang="cs">
+    <head>
+        <meta charset="utf-8">
+        <meta name="title" content="{{ title }}">
+        <meta name="description" content="{{ description }}">
+        {% comment %}Open Graph / Facebook{% endcomment %}
+        <meta property="og:type" content="website">
+        <meta property="og:url" content="{{ site_url }}">
+        <meta property="og:title" content="{{ title }}">
+        <meta property="og:description" content="{{ description }}">
+        {% comment %}<meta property="og:image" content="">{% endcomment %}
+        {% comment %}Twitter{% endcomment %}
+        <meta property="twitter:card" content="app">
+        <meta property="twitter:url" content="{{ site_url }}">
+        <meta property="twitter:title" content="{{ title }}">
+        <meta property="twitter:description" content="{{ description }}">
+        {% comment %}<meta property="twitter:image" content="">{% endcomment %}
+        <link
+            rel="icon"
+            type="image/png"
+            href="{% static "shared/favicon.png" %}"
+        >
+        <link
+            href="https://styleguide.pirati.cz/2.11.x/css/styles.css"
+            rel="stylesheet"
+            media="all"
+        >
+        <link
+            href="https://styleguide.pirati.cz/2.11.x/css/pattern-scaffolding.css"
+            rel="stylesheet"
+            media="all"
+        >
+        {% render_bundle "shared" %}
+        {% render_bundle "base" %}
+        <title>{{ title }}</title>
+    </head>
+    <body>
+        <header>
+            <nav class="navbar navbar--simple __js-root">
+                <ui-app inline-template>
+                    <ui-navbar inline-template>
+                        <div>
+                            <div class="container container--default navbar__content" :class="{'navbar__content--initialized': true}">
+                                <div class="navbar__brand my-4 flex items-center lg:pr-8 lg:my-0">
+                                    <a href="/">
+                                        <img src="https://styleguide.pirati.cz/2.11.x/images/logo-round-white.svg" class="w-8" />
+                                    </a>
+                                    <a href="/" class="pl-4 font-bold text-xl lg:border-r lg:border-grey-300 lg:pr-8">Registr smluv</a>
+                                </div>
+                                <div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
+                                    <a href="#" @click="show = !show" class="no-underline hover:no-underline">
+                                        <i class="ico--menu text-3xl"></i>
+                                    </a>
+                                </div>
+                                <div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
+                                    <ul class="navbar-menu text-white">
+                                        <li class="navbar-menu__item">
+                                            <a href="#TODO" data-href="#TODO" class="navbar-menu__link">Všechny smlouvy</a>
+                                        </li>
+                                        <li class="navbar-menu__item">
+                                            <a href="#TODO" data-href="#TODO" class="navbar-menu__link">Hledání</a>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div v-if="show || isLgScreenSize" class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0">
+                                    {% if user %}
+                                        <div class="flex items-center space-x-4">
+                                            <span class="head-heavy-2xs">{{ user.get_username }}</span>
+                                            <div class="avatar avatar--2xs">
+                                                <img
+                                                    src="https://randomuser.me/api/portraits/women/83.jpg"
+                                                    alt="Tvůj profilový obrázek"
+                                                >
+                                            </div>
+                                            <form action="{% url "oidc_logout" %}" method="POST">
+                                                {% csrf_token %}
+                                                <button
+                                                    class="text-grey-200 hover:text-white"
+                                                    type="submit"
+                                                ><i class="ico--log-out"></i></button>
+                                            </form>
+                                        </div>
+                                    {% else %}
+                                        <a
+                                            class="btn btn--white btn--hoveractive cursor-pointer"
+                                            href="{% url "oidc:login" %}"
+                                        >
+                                            <div class="btn__body">Přihlásit se</div>
+                                        </a>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    </ui-navbar>
+                </ui-app>
+            </nav>
+        </header>
+        <main>
+            {% block content %}{% endblock %}
+        </main>
+        <script
+            src="https://styleguide.pirati.cz/2.11.x/js/main.bundle.js"
+        ></script>
+    </body>
+</html>
--- a/static_src/base.js
+++ b/static_src/base.js
+import Vue from "vue/dist/vue.esm.browser.min";
+window["Vue"] = Vue;