mirror/php-typemill
1
0
Fork 0
mirror of https://github.com/typemill/typemill.git synced 2025-08-04 05:07:44 +02:00
Code Issues Releases Wiki Activity

Add accordeon to theme configs and folgerlist to cyanine landingpageInfo

Browse Source
This commit is contained in:
trendschau
2024-06-13 21:16:26 +02:00
parent 93544d1f29
commit 23d3d8a0d8
6 changed files with 109 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
system/typemill/Models/Extension.php
View File

@@ -87,11 +87,17 @@ class Extension
$themeSettings = $this->storage->getYaml('themesFolder', $themeName, $themeName . '.yaml');
# add standard-textarea for custom css
$themeSettings['forms']['fields']['customcss'] = [
'type' => 'codearea',
'label' => Translations::translate('Custom CSS'),
'class' => 'codearea',
'description' => Translations::translate('You can overwrite the theme-css with your own css here.')
$themeSettings['forms']['fields']['fieldsetcss'] = [
'type' => 'fieldset',
'legend' => Translations::translate('Custom CSS'),
'fields' => [
'customcss' => [
'type' => 'codearea',
'label' => Translations::translate('Add your individual CSS'),
'class' => 'codearea',
'description' => Translations::translate('You can overwrite the theme-css with your own css here.')
]
]
];
$themeSettings['preview'] = '/themes/' . $themeName . '/' . $themeName . '.png';

15
system/typemill/author/css/custom.css
View File

@@ -57,8 +57,21 @@
opacity: 0;
}
.accordion-enter-active, .accordion-leave-active {
transition: max-height 0.5s ease, padding 0.5s ease;
overflow: hidden;
}
.editableinput {
.accordion-enter, .accordion-leave-to {
max-height: 0;
padding: 0;
}
.accordion-content {
overflow: hidden;
}
.editableinput {
border: none;
outline: none;
background-color: transparent;

51
system/typemill/author/css/output.css
View File

@@ -718,18 +718,6 @@ video {
top: 2.5rem;
}
.left-1 {
left: 0.25rem;
}
.right-1 {
right: 0.25rem;
}
.bottom-1 {
bottom: 0.25rem;
}
.z-10 {
z-index: 10;
}
@@ -746,6 +734,10 @@ video {
float: right;
}
.float-left {
float: left;
}
.m-0 {
margin: 0px;
}
@@ -898,14 +890,14 @@ video {
margin-top: 1rem;
}
.mt-7 {
margin-top: 1.75rem;
}
.mt-auto {
margin-top: auto;
}
.mt-7 {
margin-top: 1.75rem;
}
.block {
display: block;
}
@@ -982,10 +974,6 @@ video {
height: 12rem;
}
.h-64 {
height: 16rem;
}
.h-40 {
height: 10rem;
}
@@ -1130,10 +1118,6 @@ video {
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.border-collapse {
border-collapse: collapse;
}
@@ -1412,6 +1396,16 @@ video {
border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
}
.border-t-black {
--tw-border-opacity: 1;
border-top-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.border-b-black {
--tw-border-opacity: 1;
border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
}
.bg-teal-600 {
--tw-bg-opacity: 1;
background-color: rgb(13 148 136 / var(--tw-bg-opacity));
@@ -1480,6 +1474,11 @@ video {
background-color: rgb(234 179 8 / var(--tw-bg-opacity));
}
.bg-stone-300 {
--tw-bg-opacity: 1;
background-color: rgb(214 211 209 / var(--tw-bg-opacity));
}
.bg-opacity-90 {
--tw-bg-opacity: 0.9;
}
@@ -2356,10 +2355,6 @@ video {
width: 25%;
}
.lg\:w-full {
width: 100%;
}
.lg\:flex-row {
flex-direction: row;
}

50
system/typemill/author/js/vue-themes.js
View File

@@ -86,17 +86,21 @@ const app = Vue.createApp({
</fieldset>
</div>
<div v-for="(fieldDefinition, fieldname) in theme.forms.fields">
<fieldset class="flex flex-wrap justify-between border-2 border-stone-200 p-4 my-8" v-if="fieldDefinition.type == 'fieldset'">
<legend class="text-lg font-medium">{{ fieldDefinition.legend }}</legend>
<component v-for="(subfieldDefinition, subfieldname) in fieldDefinition.fields"
:key="subfieldname"
:is="selectComponent(subfieldDefinition.type)"
:errors="errors"
:name="subfieldname"
:userroles="userroles"
:value="formData[themename][subfieldname]"
v-bind="subfieldDefinition">
</component>
<fieldset class="flex flex-wrap justify-between border-2 border-stone-200 p-4 my-8" v-if="fieldDefinition.type == 'fieldset'" :class="{ 'open': isOpen(fieldname) }">
<legend @click="toggleAccordion(fieldname)" class="float-left w-full py-2 text-lg font-medium cursor-pointer">{{ fieldDefinition.legend }} <span class="mt-2 float-right h-0 w-0 border-x-8 border-x-transparent" :class="isOpen(fieldname) ? 'border-b-8 border-b-black' : 'border-t-8 border-t-black'"></span></legend>
<transition name="accordion">
<div v-if="isOpen(fieldname)" class="w-full accordion-content">
<component v-for="(subfieldDefinition, subfieldname) in fieldDefinition.fields"
:key="subfieldname"
:is="selectComponent(subfieldDefinition.type)"
:errors="errors"
:name="subfieldname"
:userroles="userroles"
:value="formData[themename][subfieldname]"
v-bind="subfieldDefinition">
</component>
</div>
</transition>
</fieldset>
<component v-else
:key="fieldname"
@@ -119,19 +123,6 @@ const app = Vue.createApp({
</form>
</li>
</ul>
<div class="my-5 text-center">
<modal v-if="showModal" @close="showModal = false">
<template #header>
<h3>{{ $filters.translate('License required') }}</h3>
</template>
<template #body>
<p>{{ $filters.translate(modalMessage) }}</p>
</template>
<template #button>
<a :href="getLinkToLicense()" class="focus:outline-none px-4 p-3 mr-3 text-white bg-teal-500 hover:bg-teal-700 transition duration-100">{{ $filters.translate('Check your license') }}</a>
</template>
</modal>
</div>
</div>
</Transition>`,
data() {
@@ -151,7 +142,8 @@ const app = Vue.createApp({
versions: false,
userroles: false,
showModal: false,
modalMessage: 'default',
modalMessage: 'default',
accordionState: {},
}
},
components: {
@@ -429,6 +421,12 @@ const app = Vue.createApp({
this.errors = {};
this.message = '';
this.messageClass = '';
}
},
toggleAccordion: function(fieldname){
this.accordionState[fieldname] = !this.accordionState[fieldname];
},
isOpen: function(fieldname){
return !!this.accordionState[fieldname];
}
},
})

9
themes/cyanine/cyanine.yaml
View File

@@ -483,6 +483,12 @@ forms:
infoMarkdown:
type: textarea
label: Use Markdown
infoFolder:
type: text
label: List entries from folder
placeholder: /folder
description: Add a path to a folder from which you want to list entries
css: 'lg:w-full'
landingpageTeaser:
type: fieldset
@@ -894,6 +900,9 @@ metatabs:
options:
standard: 'Standard'
landingpage: 'Landingpage'
shorttitle:
type: text
label: Enter a shorttitle for the landingpageInfo section
fieldsetfolder:
fields:
glossary:

30
themes/cyanine/home/landingpageInfo.twig
View File

@@ -1,9 +1,35 @@
<section id="landingpageinfo" class="landingpageinfo w-100 dib tc bl br bb">
<section id="landingpageinfo" class="landingpageinfo w-100 pv6 dib tc bl br bb">
<div class="f5 f4-ns mw7 pv6 ph3 fw3 lh-copy center">
<div class="f5 f4-ns mw7 ph3 fw3 lh-copy center">
{{ markdown(settings.themes.cyanine.infoMarkdown) }}
</div>
{% if settings.themes.cyanine.infoFolder %}
<div class="mw8 pv2 center">
{% set pagelist = getPageList(navigation, settings.themes.cyanine.infoFolder, base_url) %}
<ul class="flex-l flex-wrap justify-between pa0">
{% for element in pagelist.folderContent %}
{% set page = getPageMeta(settings, element) %}
<li class="ba b--light-gray pa2 pa3-ns db list tl w-100 w-30-l mh0 mv2 mh2-l flex flex-column flex-grow">
<h3>{{ page.meta.shorttitle }}</h3>
<p class="f5 lh-copy flex-grow">{{ page.meta.description }}</p>
<a class="db link w-100 mv2 pa3 bg-near-black dim tc" href="{{ element.urlAbs }}">{{ page.meta.shorttitle }}</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</section>