From 163c99f69c8ec7d65ae7b626fcb29ead8ec4c783 Mon Sep 17 00:00:00 2001
From: "michael.daniel" <michael@pcsg.de>
Date: Thu, 5 Sep 2019 12:56:03 +0200
Subject: [PATCH] feat: FAQ package in template designed.
---
bin/css/faq.css | 115 ++++++++++++++++++++++++++++++++
bin/css/mini-basket.css | 4 --
bin/css/order.css | 20 +++---
bin/css/style.css | 2 +-
index.html | 1 +
quiqqer/faq/types/category.html | 52 +++++++++++++++
quiqqer/faq/types/list.html | 71 ++++++++++++++++++++
7 files changed, 250 insertions(+), 15 deletions(-)
create mode 100644 bin/css/faq.css
create mode 100644 quiqqer/faq/types/category.html
create mode 100644 quiqqer/faq/types/list.html
diff --git a/bin/css/faq.css b/bin/css/faq.css
new file mode 100644
index 0000000..4bb6142
--- /dev/null
+++ b/bin/css/faq.css
@@ -0,0 +1,115 @@
+/**************/
+/* FAQ - list */
+/**************/
+.cologne-faq-list .grid-children {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.cologne-faq-list .content-template-faq-list-category {
+ background: #fff;
+ border: 1px solid #ddd;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0);
+ flex-grow: 1;
+ margin: 20px;
+ min-width: 250px;
+ padding: 20px;
+ width: calc(33.333333% - 40px);
+}
+
+.cologne-faq-list-category.cologne-faq-list-category__empty {
+ border-bottom: 0;
+ border-top: 0;
+ height: 0;
+ margin-bottom: 0;
+ margin-top: 0;
+ padding-bottom: 0;
+ padding-top: 0;
+ visibility: hidden;
+}
+
+.cologne-faq-list .content-template-faq-list-category:hover {
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.cologne-faq-list-category h2:after {
+ display: none;
+}
+
+.cologne-faq-list-category.lastCategoryLevel .btn {
+ align-self: flex-end;
+ margin-top: auto;
+}
+
+/* list */
+.content-template-faq-list-category ul li:before {
+ display: none;
+}
+
+.content-template-faq-list-category ul li:hover {
+ background: none;
+}
+
+.content-template-faq-list-category ul li .fa {
+ margin-right: 0.75rem;
+ opacity: 0.75;
+}
+
+
+.content-template-faq-list-category ul li:hover .fa {
+ color: #203d58;
+ opacity: 1;
+}
+
+.cologne-faq-list ul li span {
+ display: initial;
+ margin: 0;
+}
+
+/******************/
+/* FAQ - category */
+/******************/
+.quiqqer-faq-list {
+ margin-bottom: 4rem;
+}
+
+.quiqqer-faq-list li {
+ margin-bottom: 0;
+}
+
+.quiqqer-faq-list li:hover {
+ background: none;
+}
+
+.quiqqer-faq-list li:before {
+ display: none;
+}
+
+.cologne-quiqqer-faq li a {
+ margin-left: 0;
+ padding: 5px 0;
+}
+
+.quiqqer-faq-list .fa {
+ margin-right: 0.75rem;
+ opacity: 0.75;
+}
+
+.quiqqer-faq-list li:hover .fa {
+ color: #203d58;
+ opacity: 1;
+}
+
+/* article */
+.cologne-quiqqer-faq article {
+ margin-bottom: 2rem;
+}
+
+.cologne-quiqqer-faq article header .fa {
+ color: #203d58;
+ margin-right: 1rem;
+}
+
+.cologne-quiqqer-faq .quiqqer-faq-list-linkToTop {
+ margin-top: 0;
+}
diff --git a/bin/css/mini-basket.css b/bin/css/mini-basket.css
index 3331058..6894d45 100644
--- a/bin/css/mini-basket.css
+++ b/bin/css/mini-basket.css
@@ -1,9 +1,5 @@
/** mini basket
===================================== */
-.wrapper {
- padding-top: 10em;
-}
-
.quiqqer-order-basket-small-container {
background: #ffffff;
border: 1px solid #ddd;
diff --git a/bin/css/order.css b/bin/css/order.css
index 8b03308..dc82f83 100644
--- a/bin/css/order.css
+++ b/bin/css/order.css
@@ -379,7 +379,7 @@ input.quiqqer-coupons-couponcodeinput-input:active {
padding: 10px 10px 10px 10px;
}
- .quiqqer-order-basket-articles-article + .quiqqer-order-basket-articles-article {
+ .quiqqer-order-basket-articles-article:nth-child(2n) {
background: #f8f8f8;
margin-top: 20px;
padding-top: 20px;
@@ -406,7 +406,7 @@ input.quiqqer-coupons-couponcodeinput-input:active {
.quiqqer-order-basket-end {
height: inherit;
- padding: 10px;
+ padding: 1rem;
text-align: center;
}
@@ -421,24 +421,24 @@ input.quiqqer-coupons-couponcodeinput-input:active {
margin-top: 20px !important;
}
+ .quiqqer-payment-paypal-express {
+ padding: 1rem 0;
+ }
+
.quiqqer-order-basket-end .quiqqer-coupons-couponcodeinput {
padding: 0;
text-align: left;
+ flex-direction: column;
}
.quiqqer-order-basket-end .quiqqer-coupons-couponcodeinput input {
- border-radius: 0 0 0 0.25rem !important;
width: 100%;
+ margin-bottom: 1rem;
}
.quiqqer-coupons-couponcodeinput label span {
- background: #f8f8f8;
- border-left: 1px solid #c9c8c5;
- border-radius: 0.25rem 0 0 0;
- border-top: 1px solid #c9c8c5;
- display: inline-block;
- padding: 5px;
- width: 100%
+ display: block;
+ padding: 5px 10px;
}
}
diff --git a/bin/css/style.css b/bin/css/style.css
index cf37454..6ee611a 100644
--- a/bin/css/style.css
+++ b/bin/css/style.css
@@ -1474,4 +1474,4 @@ a.font-icon .fa {
a.font-icon .fa:before {
font-size: 1rem;
-}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 58af48e..1dceb9e 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
<link rel="stylesheet" href="{$Template->getTemplateUrl('bin/css/style.css')}"/>
<link rel="stylesheet" href="{$Template->getTemplateUrl('bin/css/buttons.css')}"/>
<link rel="stylesheet" href="{$Template->getTemplateUrl('bin/css/form.css')}"/>
+ <link rel="stylesheet" href="{$Template->getTemplateUrl('bin/css/faq.css')}"/>
<link rel="stylesheet" href="{$Template->getTemplateUrl('bin/css/products.css')}"/>
<link rel="stylesheet" href="{$Template->getTemplateUrl('bin/css/frontend-users.css')}"/>
<link rel="stylesheet" href="{$Template->getTemplateUrl('bin/css/order.css')}"/>
diff --git a/quiqqer/faq/types/category.html b/quiqqer/faq/types/category.html
new file mode 100644
index 0000000..0d2fb6b
--- /dev/null
+++ b/quiqqer/faq/types/category.html
@@ -0,0 +1,52 @@
+{if $Template->getAttribute('content-body') && $Site->getAttribute('content')}
+<section class="content-body">
+ {$Site->getAttribute('content')}
+</section>
+{/if}
+
+<section itemscope itemtype="http://schema.org/ItemList"
+ class="content-template quiqqer-faq clear-fix cologne-quiqqer-faq"
+ data-qui="package/quiqqer/faq/bin/Category"
+>
+ {if count($entries)}
+ <ul class="quiqqer-faq-list">
+ {foreach $entries as $Faq}
+ <li>
+ <a href="{url site=$Site}#faq{$Faq->getId()}">
+ <span class="fa fa-file-text-o"></span>
+ {$Faq->getAttribute('title')}
+ </a>
+ </li>
+ {/foreach}
+ </ul>
+ {/if}
+
+ {foreach $entries as $Faq}
+ <article id="faq{$Faq->getId()}" class="clear-fix">
+ <header>
+ <h2><span class="fa fa-file-text"></span> {$Faq->getAttribute('title')}</h2>
+ </header>
+
+ {if $Faq->getAttribute('short')}
+ <div class="content-short">
+ {$Faq->getAttribute('short')|nl2br}
+ </div>
+ {/if}
+
+ <div class="content-body">
+ {$Faq->getAttribute('content')}
+ </div>
+
+ <a href="#top" class=" quiqqer-faq-list-linkToTop">
+ {locale group="quiqqer/faq" value="link.to.top"} <span class="fa fa-fw fa-level-up"></span>
+ </a>
+
+ </article>
+
+ {if !($Faq@last)}
+
+ {/if}
+
+ {/foreach}
+
+</section>
diff --git a/quiqqer/faq/types/list.html b/quiqqer/faq/types/list.html
new file mode 100644
index 0000000..c418dc4
--- /dev/null
+++ b/quiqqer/faq/types/list.html
@@ -0,0 +1,71 @@
+{if $Template->getAttribute('content-body') && $Site->getAttribute('content')}
+<section class="content-body">
+ {$Site->getAttribute('content')}
+</section>
+{/if}
+
+<div class="content-template content-template-faq-list cologne-faq-list">
+ <div class="grid-children-container">
+ <div class="grid-children">
+ {foreach from=$categories item=Category}
+
+ {assign var=nextCategoryLevel value=false}
+ {if $Category->getAttribute('type') == 'quiqqer/faq:types/list'}
+ {assign var=nextCategoryLevel value=true}
+ {/if}
+
+ <section class="content-template-faq-list-category cologne-faq-list-category
+ {if !$nextCategoryLevel} lastCategoryLevel{/if}"
+ itemscope itemtype="http://schema.org/ItemList"
+ >
+ <h2 class="control-color">
+ <a itemprop="mainEntityOfPage" href="{url site=$Category}">
+ <span itemprop="name">{$Category->getAttribute('title')}</span>
+ </a>
+ </h2>
+
+ <div class="content-short">
+ {$Category->getAttribute('short')}
+ </div>
+
+ {if !$nextCategoryLevel}
+ <a itemprop="url" href="{url site=$Category}" class="btn btn-link">
+ {locale group="quiqqer/faq" value="more"}
+ </a>
+ {/if}
+
+ {if $nextCategoryLevel}
+ {assign var=faqList value=$Category->getChildren()}
+ {if count($faqList)}
+ <ul itemscope itemtype="http://schema.org/ItemList">
+ {assign var=position value=1}
+ {foreach $faqList as $Faq}
+ <li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
+
+ {if $Faq->getAttribute('type') == 'quiqqer/faq:types/entry'}
+ <a itemprop="url" href="{url site=$Category}#faq{$Faq->getId()}">
+ {else}
+ <a itemprop="url" href="{url site=$Faq}">
+ {/if}
+ <span class="fa fa-file-text-o"></span>
+ <span itemprop="name">{$Faq->getAttribute('title')}</span>
+ <meta itemprop="position" content="{$position}" />
+ {assign var=position value=$position+1}
+ </a>
+ </li>
+ {/foreach}
+ </ul>
+ {/if}
+ {/if}
+
+ </section>
+ {/foreach}
+
+ {* <!-- Bad code, but necessary: flexbox equal width if there is no exactly 3 boxes per row --> *}
+ <section class="content-template-faq-list-category cologne-faq-list-category cologne-faq-list-category__empty"></section>
+ <section class="content-template-faq-list-category cologne-faq-list-category cologne-faq-list-category__empty"></section>
+ {* <!-- end bad code -->*}
+
+ </div>
+ </div>
+</div>
\ No newline at end of file
--
GitLab