Commit 5293b7a8 authored by David Trattnig's avatar David Trattnig
Browse files

Extend category presentation

parent 28a7d105
......@@ -5,8 +5,7 @@
export let api: string = 'https://prog-info.o94.at/api.php'
export let endpointCategories: string = 'categories'
export let categoriesToDisplay: [] // Display all categories
export let displayDescription: boolean = true
export let categoriesToDisplay: [] // Default: Display all categories
/* Nested props */
export let urlShowList: string
export let renderhtml: boolean = false // Attention: to avoid XSS attack vectors use with trusted API sources only
......@@ -44,11 +43,9 @@
/* SMUI components need to be selected via global namespace */
* :global(.aura-card.category) {
min-width: 400px;
min-height: 400px;
* :global(.aura-card.category) {
width: 400px;
height: 400px;
height: 300px;
margin: 4px;
float: left;
}
......@@ -60,7 +57,7 @@
<div class="card-container list">
{#if categories}
{#each categories as category}
<CategoryCard {category} {urlShowList} {displayDescription} {renderhtml} />
<CategoryCard {category} {urlShowList} {renderhtml} />
{/each}
{:else}
<div class="loading">
......
......@@ -3,6 +3,7 @@
import Select, { Option } from '@smui/select'
import { fetchApi } from './common/Common.svelte'
import ShowCardMedium from './cards/ShowCardMedium.svelte'
import CategoryHeading from './elements/CategoryHeading.svelte'
export let api = 'https://prog-info.o94.at/api.php'
export let endpointShow = 'shows'
......@@ -114,6 +115,7 @@
</script>
<style lang="scss">
/* SMUI components need to be selected via global namespace */
* :global(.aura-card.show) {
......@@ -125,11 +127,9 @@
* :global(.show-content) {
padding: 1rem;
}
* :global(.title) {
margin: 0;
}
* :global(.short-description) {
margin: 0;
color: #888;
......@@ -137,34 +137,9 @@
</style>
<template>
<div class="show-list">
<h1 class="list-title">
{#if selectedCat}
<span class="category-wrapper">
<span class="category-prefix" />
<span class="category-title">
{selectedCat.name}
{#if selectedCat.subtitle}&nbsp;|&nbsp;{selectedCat.subtitle}{/if}
</span>
{#if selectedCat.id}
<i class="aura-icons">
<div class="icon-category-{selectedCat.id}" />
</i>
{/if}
</span>
{/if}
{#if language}
<span class="language-wrapper">
(<span class="language-key lang-{language}">{language}</span>)
</span>
{/if}
</h1>
<div class="show-overview">
{#if selectedCat}
<p class="category-description cat-{selectedCat.id}">
{selectedCat.description}
</p>
<CategoryHeading category={selectedCat} {language} />
{/if}
{#if allCategories && enableCategoryDropdown}
......
<script lang="ts">
import Card, { Content, PrimaryAction } from '@smui/card'
import { openLink } from '../common/Common.svelte'
import Display from '../common/Display.svelte'
import CategoryTitle from '../elements/CategoryTitle.svelte'
import CategoryHeading from '../elements/CategoryHeading.svelte'
export let category: any
export let urlShowList: string
export let displayDescription: boolean
export let renderhtml: boolean // Attention: to avoid XSS attack vectors use with trusted API sources only
</script>
......@@ -20,13 +18,7 @@
<Card class="aura-card category cat-{category.id}">
<PrimaryAction on:click={() => openLink(urlShowList + "?category=" + category.id)}>
<Content class="category-content">
<CategoryTitle {category} />
{#if displayDescription && category.description}
<p class="description">
<Display value={category.description} {renderhtml} renderLinks={true} />
</p>
{/if}
<CategoryHeading {category} {renderhtml} />
</Content>
</PrimaryAction>
</Card>
......
<script lang="ts">
import Display from '../common/Display.svelte'
export let category: { [name: string]: any }
export let language: string = ''
export let renderhtml: boolean
</script>
<style lang="scss">
h2,
h3 {
margin: 0;
}
.aura-icons {
float: left;
margin-right: 8px;
}
</style>
<template>
<div class="category-info">
<div class="heading">
{#if category.id}
<i class="aura-icons">
<div class="icon-category-{category.id}" />
</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>
</div>
</div>
<p class="description cat-{category.id}">
<Display value={category.description} {renderhtml} renderLinks={true} />
</p>
</div>
</template>
<script lang="ts">
export let category: { [name: string]: any }
</script>
<style lang="scss">
h2, h3 {
margin: 0;
}
</style>
<template>
<div class="category-title-wrapper">
{#if category.id}
<i class="aura-icons">
<div class="icon-category-{category.id}" />
</i>
{/if}
<div class="heading">
<h2 class="title">{category.name}</h2>
<h3 class="subtitle">
{#if category.subtitle}
<span class="delimiter"></span>
{category.subtitle}
{/if}
</h3>
</div>
</div>
</template>
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