Skip to content

V
ved
Commit 86dd2dd6 authored by Michael Apfelthaler's avatar Michael Apfelthaler
Browse files
Options

Detail Pages & Subpage Header

parent 2bd87870
Show whitespace changes
Inline Side-by-side
Showing with 143 additions and 83 deletions
templates/_singles/home.twig
View file @ 86dd2dd6
{% extends "index" %} {% extends "index" %}
{% block navigation %} {% block navigation %}
{{ include('components/navigation.twig', { 'nav': craft.entries.section('nav').all() }) }} {{ include('components/navigation.twig', { 'nav': craft.entries.section('nav').all() }) }}
{% endblock %} {% endblock %}
{% block content %} {% block content %}
...@@ -9,3 +9,7 @@ ...@@ -9,3 +9,7 @@
{{ include('components/element.twig', { 'element': element }) }} {{ include('components/element.twig', { 'element': element }) }}
{% endfor %} {% endfor %}
{% endblock %} {% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
{% endblock %}
templates/_singles/subpage.twig
View file @ 86dd2dd6
{% extends "index" %} {% extends "index" %}
{% block navigation %} {% block navigation %}
{{ include('components/navigationSubpage.twig') }} {{ include('components/navigationSubpage.twig') }}
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="subpage-mt">
{% for element in entry.elements.all() %} {% for element in entry.elements.all() %}
{{ include('components/element.twig', { 'element': element }) }} {{ include('components/element.twig', { 'element': element }) }}
{% endfor %} {% endfor %}
</div>
{% endblock %} {% endblock %}
templates/components/footer.twig
View file @ 86dd2dd6
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<div class="footer-details"> <div class="footer-details">
<p>{{ companyInfo.address }}{{ companyInfo.companyRegisterNumber }}</p> <p>{{ companyInfo.address }}{{ companyInfo.companyRegisterNumber }}</p>
<a href="impressum">Impressum</a> <a href="{{ craft.app.sites.primarySite.baseUrl }}impressum">Impressum</a>
</div> </div>
</div> </div>
</footer> </footer>
templates/components/navigationSubpage.twig
View file @ 86dd2dd6
<header id="myHeader"> <header id="myHeader">
<div class="header-content"> <div class="header-content">
<a id="logo" href="/"><img src="{{ craft.app.sites.primarySite.baseUrl }}/{{ companyInfo.logo.one().url }}" alt="VED"></a> <a id="logo" href="/"><img src="{{ companyInfo.logo.one().url }}" alt="VED"></a>
<img id="hamburgermenu" src="{{ craft.app.sites.primarySite.baseUrl }}/assets/list.svg" alt="menu">
</div> </div>
</header> </header>
templates/index.twig
View file @ 86dd2dd6
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite | VED</title> <title>Startseite | VED</title>
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico"> <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
{% css "/assets/css/style.css" %} {% css "/assets/css/style.css" %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
</head> </head>
<body> <body>
{% block navigation %} {% endblock %} {% block navigation %}{% endblock %}
<main> <main>
<div class="container"> <div class="container"> {% block content %}{% endblock %}
{% block content %}{% endblock %}
</div> </div>
</main> </main>
{{ include('components/footer.twig') }} {{ include('components/footer.twig') }}
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
{% js "@web/assets/js/menu.js" %} {% js "@web/assets/js/menu.js" %}
</body> {% block scripts %}{% endblock %}
</body>
</html> </html>
\ No newline at end of file
templates/news/_entry.twig
View file @ 86dd2dd6
{% extends "index" %} {% extends "index" %}
{% block navigation %}
{{ include('components/navigationSubpage.twig') }}
{% endblock %}
{% block content %} {% block content %}
{{entry.title}} <div class="subpage-mt">
<div class="component component__text">
<div class="maxWidthLimit">
<h1>{{entry.title}}</h1>
<div class="grid grid-6040 mt32">
<div>
<p>{{ entry.shortDescription }}</p>
</div>
<img src="{{entry.images.one().url}}" alt="">
</div>
<div class="mt32">{{entry.richText}}</div>
</div>
</div>
</div>
{% endblock %} {% endblock %}
templates/projects/_entry.twig
View file @ 86dd2dd6
{% extends "index" %} {% extends "index" %}
{% block navigation %}
{{ include('components/navigationSubpage.twig') }}
{% endblock %}
{% block content %} {% block content %}
{{entry.title}} <div class="subpage-mt">
<div class="component component__text">
<div class="maxWidthLimit">
<h1>{{entry.title}}</h1>
<div class="grid grid-6040 mt32">
<div>
<p>{{ entry.shortDescription }}</p>
</div>
<img src="{{entry.images.one().url}}" alt="">
</div>
<div class="mt32">{{entry.richText}}</div>
</div>
</div>
</div>
{% endblock %} {% endblock %}
templates/projects/index.twig
View file @ 86dd2dd6
{% extends "index" %} {% extends "index" %}
{% block navigation %}
{{ include('components/navigationSubpage.twig') }}
{% endblock %}
{% block content %} {% block content %}
<div class="news maxWidthLimit"> <div class="subpage-mt">
<div class="news maxWidthLimit">
{% for newsElement in craft.entries.section('projects').all() %} {% for newsElement in craft.entries.section('projects').all() %}
{% set image = newsElement.images.one() %} {% set image = newsElement.images.one() %}
<a href="{{newsElement.url}}" class="news-item"> <a href="{{newsElement.url}}" class="news-item">
<div class="news-thumbnail"> <div class="news-thumbnail">
<img src="{{ craft.app.sites.primarySite.baseUrl }}/{{image.url}}" alt="{{image.title}}"> <img src="{{image.url}}" alt="{{image.title}}">
</div> </div>
<div class="news-details"> <div class="news-details">
<h3 class="news-heading component_headline">{{newsElement.title}}</h3> <h3 class="news-heading">{{newsElement.title}}</h3>
<p class="news-teaser"> <p class="news-teaser">
{{ newsElement.shortDescription|length > 100 ? newsElement.shortDescription|slice(0, 100) ~ '...' {{ newsElement.shortDescription|length > 100 ? newsElement.shortDescription|slice(0, 100) ~ '...'
:newsElement.shortDescription }} :newsElement.shortDescription }}
...@@ -18,5 +22,6 @@ ...@@ -18,5 +22,6 @@
</a> </a>
{% endfor %} {% endfor %}
</div> </div>
</div>
{% endblock %} {% endblock %}
web/assets/css/style.css
View file @ 86dd2dd6
...@@ -340,6 +340,17 @@ section h2 { ...@@ -340,6 +340,17 @@ section h2 {
gap: 16px; gap: 16px;
} }
.grid-8020 {
grid-template-columns: 4fr 1fr;
gap: 16px;
}
.grid-6040 {
align-items: start;
grid-template-columns: 6fr 4fr;
gap: 16px;
}
.grid img { .grid img {
height: auto; height: auto;
width: 100%; width: 100%;
...@@ -534,6 +545,11 @@ footer img { ...@@ -534,6 +545,11 @@ footer img {
background: red; background: red;
} }
.subpage-mt {
margin-top: 160px;
margin-bottom: 100px;
}
.mt32 { .mt32 {
margin-top: 32px; margin-top: 32px;
} }
......
web/assets/js/menu.js
View file @ 86dd2dd6
var menu = document.getElementById("menu") if (document.getElementById('menu') != null) {
var menu = document.getElementById("menu")
document.getElementById("hamburgermenu").addEventListener("click", () => { document.getElementById("hamburgermenu").addEventListener("click", () => {
menu.style.display = "flex"; menu.style.display = "flex";
document.body.style.overflow = "hidden" document.body.style.overflow = "hidden"
}) })
document.getElementById("close").addEventListener("click", () => { document.getElementById("close").addEventListener("click", () => {
menu.style.display = "none"; menu.style.display = "none";
document.body.style.overflow = "auto" document.body.style.overflow = "auto"
}) })
document.querySelectorAll('.menu-item').forEach(anchor => { document.querySelectorAll('.menu-item').forEach(anchor => {
anchor.addEventListener('click', function (e) { anchor.addEventListener('click', function (e) {
e.preventDefault(); e.preventDefault();
menu.style.display = "none"; menu.style.display = "none";
document.body.style.overflow = "auto" document.body.style.overflow = "auto"
}); });
}); });
}
// When the user scrolls the page, execute myFunction // When the user scrolls the page, execute myFunction
window.onscroll = function () { myFunction() }; window.onscroll = function () { myFunction() };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment