Commit 112575be authored by David Trattnig's avatar David Trattnig
Browse files

Introduce conditional headings

parent 46157806
Pipeline #1912 passed with stages
in 8 minutes and 42 seconds
......@@ -46,10 +46,8 @@
.aura-icons > div {
background-image: url(assets/aura-logo.png);
background-size: 54px;
width: 58px;
height: 52px;
margin-bottom: 8px;
background-size: 70px;
background-position: center -5px;
}
.aura-icon.cba {
background-image: url("https://cba.media/wp-content/themes/cba2020/images/cba_logo.svg");
......@@ -72,6 +70,9 @@
.card-container .aura-card h4 {
font-size: 0.9rem;
}
.heading.subtitle {
font-size: 1.2rem;
}
}
/* Extra Small Devices, Phones */
......@@ -92,6 +93,9 @@
.card-container .aura-card h4 {
font-size: 1.2rem;
}
.heading.subtitle {
font-size: 1.5rem;
}
.card-container.list .aura-card.category {
width: 400px;
}
......
......@@ -135,7 +135,7 @@
<template>
<div class="show-overview">
{#if selectedCat}
<CategoryHeading category={selectedCat} {language} {renderhtml} />
<CategoryHeading category={selectedCat} {language} {renderhtml} headingLevel={1} />
{/if}
{#if allCategories && enableCategoryDropdown}
......
......@@ -18,7 +18,7 @@
<Card class="aura-card category cat-{category.id}">
<PrimaryAction on:click={() => openLink(urlShowList + "?category=" + category.id)}>
<Content class="category-content">
<CategoryHeading {category} {renderhtml} />
<CategoryHeading {category} {renderhtml} headingLevel={2} />
</Content>
</PrimaryAction>
</Card>
......
......@@ -23,9 +23,9 @@
.aura-icons {
display: block;
float: left;
width: 32px;
height: 32px;
margin-right: 16px;
width: 64px;
height: 64px;
margin-right: 8px;
}
.aura-icons > * {
display: block;
......
<script lang="ts">
import Display from '../common/Display.svelte'
// import HeadingTag from './HeadingTag.svelte'
export let category: { [name: string]: any }
export let language: string = ''
export let headingLevel: number = 1
export let renderhtml: boolean
</script>
<style lang="scss">
h2,
h3 {
h2 {
margin: 0;
}
.aura-icons {
float: left;
margin-right: 8px;
}
</style>
<template>
......@@ -26,19 +23,30 @@
</i>
{/if}
<div class="title-wrapper">
<h2 class="title">
{category.name}
{#if language}
<span class="language-wrapper">
(<span class="language-key lang-{language}">{language}</span>)
</span>
{/if}
</h2>
<h3 class="subtitle">
{#if category.subtitle}
{category.subtitle}
{/if}
</h3>
{#if headingLevel < 2}
<h1 class="title">
{category.name}
{#if language}
<span class="language-wrapper">
(<span class="language-key lang-{language}">{language}</span>)
</span>
{/if}
</h1>
{:else}
<h2 class="title">
{category.name}
{#if language}
<span class="language-wrapper">
(<span class="language-key lang-{language}">{language}</span>)
</span>
{/if}
</h2>
{/if}
<span class="heading subtitle">
{#if category.subtitle}
{category.subtitle}
{/if}
</span>
</div>
</div>
......
Supports Markdown
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