Skip to content

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

Detail Pages & Subpage Header

parent 2bd87870
Hide whitespace changes
Inline Side-by-side
Showing with 143 additions and 83 deletions
templates/_singles/home.twig
View file @ 86dd2dd6
{% extends "index" %}
{% block navigation %}
{{ include('components/navigation.twig', { 'nav': craft.entries.section('nav').all() }) }}
{{ include('components/navigation.twig', { 'nav': craft.entries.section('nav').all() }) }}
{% endblock %}
{% block content %}
{% for element in entry.elements.all() %}
{{ include('components/element.twig', { 'element': element }) }}
{% endfor %}
{% endblock %}
\ No newline at end of file
{% for element in entry.elements.all() %}
{{ include('components/element.twig', { 'element': element }) }}
{% endfor %}
{% 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" %}
{% block navigation %}
{{ include('components/navigationSubpage.twig') }}
{{ include('components/navigationSubpage.twig') }}
{% endblock %}
{% block content %}
{% for element in entry.elements.all() %}
{{ include('components/element.twig', { 'element': element }) }}
{% endfor %}
{% endblock %}
\ No newline at end of file
<div class="subpage-mt">
{% for element in entry.elements.all() %}
{{ include('components/element.twig', { 'element': element }) }}
{% endfor %}
</div>
{% endblock %}
templates/components/footer.twig
View file @ 86dd2dd6
<footer>
<div class="container">
<div class="logos">
<img src="{{ craft.app.sites.primarySite.baseUrl }}/assets/logo2.png" alt="logo">
<img class="img-small" src="{{ craft.app.sites.primarySite.baseUrl }}/assets/Wienholding_Logo.svg" alt="Wienholding_Logo">
<img class="img-small" src="{{ craft.app.sites.primarySite.baseUrl }}/assets/WKO_logo.svg" alt="Wirtschaftskammer_Österreich_logo">
</div>
<div class="container">
<div class="logos">
<img src="{{ craft.app.sites.primarySite.baseUrl }}/assets/logo2.png" alt="logo">
<img class="img-small" src="{{ craft.app.sites.primarySite.baseUrl }}/assets/Wienholding_Logo.svg" alt="Wienholding_Logo">
<img class="img-small" src="{{ craft.app.sites.primarySite.baseUrl }}/assets/WKO_logo.svg" alt="Wirtschaftskammer_Österreich_logo">
</div>
<div class="footer-details">
<p>{{ companyInfo.address }}{{ companyInfo.companyRegisterNumber }}</p>
<a href="impressum">Impressum</a>
</div>
</div>
</footer>
\ No newline at end of file
<div class="footer-details">
<p>{{ companyInfo.address }}{{ companyInfo.companyRegisterNumber }}</p>
<a href="{{ craft.app.sites.primarySite.baseUrl }}impressum">Impressum</a>
</div>
</div>
</footer>
templates/components/navigationSubpage.twig
View file @ 86dd2dd6
<header id="myHeader">
<div class="header-content">
<a id="logo" href="/"><img src="{{ craft.app.sites.primarySite.baseUrl }}/{{ companyInfo.logo.one().url }}" alt="VED"></a>
<img id="hamburgermenu" src="{{ craft.app.sites.primarySite.baseUrl }}/assets/list.svg" alt="menu">
</div>
</header>
\ No newline at end of file
<div class="header-content">
<a id="logo" href="/"><img src="{{ companyInfo.logo.one().url }}" alt="VED"></a>
</div>
</header>
templates/index.twig
View file @ 86dd2dd6
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite | VED</title>
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
{% css "/assets/css/style.css" %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Startseite | VED</title>
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
{% css "/assets/css/style.css" %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
</head>
<body>
{% block navigation %} {% endblock %}
<main>
<div class="container">
{% block content %}{% endblock %}
</div>
</main>
{{ include('components/footer.twig') }}
<body>
{% block navigation %}{% endblock %}
<main>
<div class="container"> {% block content %}{% endblock %}
</div>
</main>
{{ 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" %}
</body>
{% js "@web/assets/js/menu.js" %}
{% block scripts %}{% endblock %}
</body>
</html>
\ No newline at end of file
</html>
templates/news/_entry.twig
View file @ 86dd2dd6
{% extends "index" %}
{% block navigation %}
{{ include('components/navigationSubpage.twig') }}
{% endblock %}
{% block content %}
{{entry.title}}
{% endblock %}
\ No newline at end of file
<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 %}
templates/projects/_entry.twig
View file @ 86dd2dd6
{% extends "index" %}
{% block navigation %}
{{ include('components/navigationSubpage.twig') }}
{% endblock %}
{% block content %}
{{entry.title}}
{% endblock %}
\ No newline at end of file
<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 %}
templates/projects/index.twig
View file @ 86dd2dd6
{% extends "index" %}
{% block navigation %}
{{ include('components/navigationSubpage.twig') }}
{% endblock %}
{% block content %}
<div class="news maxWidthLimit">
{% for newsElement in craft.entries.section('projects').all() %}
<div class="subpage-mt">
<div class="news maxWidthLimit">
{% for newsElement in craft.entries.section('projects').all() %}
{% set image = newsElement.images.one() %}
<a href="{{newsElement.url}}" class="news-item">
<div class="news-thumbnail">
<img src="{{ craft.app.sites.primarySite.baseUrl }}/{{image.url}}" alt="{{image.title}}">
</div>
<div class="news-details">
<h3 class="news-heading component_headline">{{newsElement.title}}</h3>
<p class="news-teaser">
{{ newsElement.shortDescription|length > 100 ? newsElement.shortDescription|slice(0, 100) ~ '...'
{% set image = newsElement.images.one() %}
<a href="{{newsElement.url}}" class="news-item">
<div class="news-thumbnail">
<img src="{{image.url}}" alt="{{image.title}}">
</div>
<div class="news-details">
<h3 class="news-heading">{{newsElement.title}}</h3>
<p class="news-teaser">
{{ newsElement.shortDescription|length > 100 ? newsElement.shortDescription|slice(0, 100) ~ '...'
:newsElement.shortDescription }}
</p>
</div>
</a>
</p>
</div>
</a>
{% endfor %}
</div>
{% endblock %}
\ No newline at end of file
{% endfor %}
</div>
</div>
{% endblock %}
web/assets/css/style.css
View file @ 86dd2dd6
......@@ -340,6 +340,17 @@ section h2 {
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 {
height: auto;
width: 100%;
......@@ -534,6 +545,11 @@ footer img {
background: red;
}
.subpage-mt {
margin-top: 160px;
margin-bottom: 100px;
}
.mt32 {
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", () => {
menu.style.display = "flex";
document.body.style.overflow = "hidden"
})
document.getElementById("hamburgermenu").addEventListener("click", () => {
menu.style.display = "flex";
document.body.style.overflow = "hidden"
})
document.getElementById("close").addEventListener("click", () => {
menu.style.display = "none";
document.body.style.overflow = "auto"
})
document.querySelectorAll('.menu-item').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.getElementById("close").addEventListener("click", () => {
menu.style.display = "none";
document.body.style.overflow = "auto"
})
document.querySelectorAll('.menu-item').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
menu.style.display = "none";
document.body.style.overflow = "auto"
});
});
});
}
// When the user scrolls the page, execute 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