From 5b31aa120b99c0079758108b03824e3741bd6529 Mon Sep 17 00:00:00 2001
From: Michael Danielczok <michael@pcsg.de>
Date: Tue, 11 Feb 2025 15:54:32 +0100
Subject: [PATCH] fix: update template to be compatible with the
quiqqer/frontend-users version 2.4.0
Related: quiqqer/template-cologne#117
---
bin/css/buttons.css | 9 +-
bin/css/frontend-users.css | 176 +++---------------
bin/css/style.css | 1 +
bin/css/variables.css | 3 +
.../QUI/FrontendUsers/Controls/Profile.html | 145 ++++++++-------
5 files changed, 106 insertions(+), 228 deletions(-)
diff --git a/bin/css/buttons.css b/bin/css/buttons.css
index a3bf5c8..714138a 100644
--- a/bin/css/buttons.css
+++ b/bin/css/buttons.css
@@ -28,16 +28,11 @@ a.qui-button,
float: none; /* qui-button reset */
}
-button > .fa,
-.btn > .fa {
+button > .fa:not(:only-child),
+.btn > .fa:not(:only-child) {
margin-right: .75rem;
}
-button.loading > .fa,
-.btn.loading > .fa {
- margin-right: 0;
-}
-
/*****************************/
/* button primary & standard */
/*****************************/
diff --git a/bin/css/frontend-users.css b/bin/css/frontend-users.css
index 56bc8b6..927cbb3 100644
--- a/bin/css/frontend-users.css
+++ b/bin/css/frontend-users.css
@@ -11,7 +11,7 @@
/* simple user info */
/********************/
.quiqqer-fupc-userinfo {
- border: 1px solid #ddd;
+ border: var(--_qui-cologne-theme-border-width) solid var(--_qui-cologne-theme-border-color);
border-radius: 5px;
margin-bottom: 1em;
background: #fff;
@@ -21,67 +21,33 @@
background: url("../images/brushed_alu.png");
}
-.quiqqer-frontendUsers-profile-container {
- display: flex;
- margin-bottom: 2rem;
- margin-top: 2rem;
-}
-
-.quiqqer-frontendUsers-controls-profile .quiqqer-frontendUsers-controls-profile-categories {
- padding-right: 20px;
-}
-
-.quiqqer-frontendUsers-controls-profile .quiqqer-frontendUsers-controls-profile-categoryContent {
- padding-left: 20px;
-}
-
-@media (max-width: 768px) {
- .quiqqer-frontendUsers-controls-profile .quiqqer-frontendUsers-controls-profile-categories {
- padding: 0;
- width: 100%;
- }
-
- .quiqqer-frontendUsers-controls-profile .quiqqer-frontendUsers-controls-profile-categoryContent {
- padding-left: 0;
- }
+/***********/
+/* Profile */
+/***********/
+.quiqqer-frontendUsers-controls-profile {
+ --qui-frontend-users-profile__radius: 0;
+ --qui-frontend-users-profile__sidebar-width: 360px;
+ --qui-frontend-users-profile__content-maxWidth: 700px;
+ --qui-frontend-users-profile__sidebar-nav-item-outline--hover: none;
+ --qui-frontend-users-profile__sidebar-nav-item-bg-color--hover: transparent;
}
/*****************/
/* category menu */
/*****************/
.quiqqer-fupc-category {
- margin-bottom: 2em;
-}
-
-.quiqqer-fupc-category:last-child {
- margin-bottom: 0;
+ /*margin-bottom: 2em;*/
}
.quiqqer-fupc-category-header {
line-height: 30px;
}
-.quiqqer-fupc-category .quiqqer-fupc-category-header {
- border-bottom: 1px solid #ddd;
- cursor: pointer;
- font-size: 1.5em;
- line-height: 30px;
-}
-
-.quiqqer-fu-profile-categories-category-items {
- clear: both;
- float: left;
- width: 100%;
-}
-
.quiqqer-fupc-category-items-item {
- border: 1px solid #ddd;
- border-bottom: none;
+ border-top: var(--_qui-cologne-theme-border-width) solid var(--_qui-cologne-theme-border-color);
+ border-left: var(--_qui-cologne-theme-border-width) solid var(--_qui-cologne-theme-border-color);
+ border-right: var(--_qui-cologne-theme-border-width) solid var(--_qui-cologne-theme-border-color);
clear: both;
- color: #333;
- display: flex;
- float: left;
- line-height: 40px;
overflow: hidden;
padding: 5px 0;
position: relative;
@@ -89,26 +55,13 @@
width: 100%;
}
-.quiqqer-fupc-category.quiqqer-fupc-category--open .quiqqer-fupc-category-header {
- border-bottom: none !important;
-}
-
-.quiqqer-fupc-category--open .quiqqer-fupc-category-items-item {
- background: #fff;
-}
-
-.quiqqer-fupc-category .quiqqer-fu-profile-categories-category-items .quiqqer-fupc-category-items-item--active,
-.quiqqer-fupc-category .quiqqer-fu-profile-categories-category-items .quiqqer-fupc-category-items-item:hover {
- background: #fff;
-}
-
-.quiqqer-fupc-category--open .quiqqer-fupc-category-items-item:last-child {
- border-bottom: 1px solid #ddd;
+.quiqqer-fupc-category-items-item:last-child {
+ border-bottom: var(--_qui-cologne-theme-border-width) solid var(--_qui-cologne-theme-border-color);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
-.quiqqer-fupc-category--open .quiqqer-fupc-category-items-item:first-child {
+.quiqqer-fupc-category-items-item:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
@@ -122,42 +75,19 @@
width: 0;
}
-.quiqqer-fu-profile-categories-category-items .quiqqer-fupc-category-items-item--active,
-.quiqqer-fu-profile-categories-category-items .quiqqer-fupc-category-items-item:hover {
- background: none;
-}
-
-.quiqqer-fu-profile-categories-category-items .quiqqer-fupc-category-items-item--active:before,
-.quiqqer-fu-profile-categories-category-items .quiqqer-fupc-category-items-item:hover:before {
+.quiqqer-fupc-category-items-item[data-active]:before,
+.quiqqer-fupc-category-items-item:is(:hover, :focus):before {
width: 4px;
}
.quiqqer-fupc-category-items-item .fa {
line-height: 40px;
+ width: 40px;
}
/***********/
/* address */
/***********/
-.quiqqer-frontend-users-address header,
-.quiqqer-frontendUsers-userdata-section header {
- padding: 20px 0;
-}
-
-.quiqqer-frontend-users-address header h2,
-.quiqqer-frontendUsers-userdata-section header h2 {
- padding-bottom: 0;
-}
-
-.quiqqer-frontend-users-address-edit .qui-select,
-.quiqqer-frontend-users-address-edit .qui-select .drop-icon {
- height: 40px;
-}
-
-.quiqqer-frontend-users-address-edit .qui-select .text {
- line-height: 40px;
-}
-
.quiqqer-frontendUsers-userdata-invoiceaddress {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
float: left;
@@ -172,72 +102,10 @@
margin-right: 10px;
}
-.quiqqer-frontend-users-address-list-entry {
- border: 1px solid #ddd;
- background: #fff;
-}
-
-.quiqqer-frontendUsers-controls-profile-categoryContent .quiqqer-frontend-users-address-list-entry-buttons button {
- width: inherit;
- margin-bottom: 0;
-}
-
-.cologne-main .quiqqer-frontendUsers-userdata-address h2,
-.cologne-main .quiqqer-frontendUsers-userdata-invoiceaddress h2,
-.cologne-main .quiqqer-frontendUsers-userdata-invoiceaddress header,
-.cologne-main .quiqqer-frontendUsers-controls-profile-changepassword h2,
-.cologne-main .quiqqer-frontendUsers-controls-profile-deleteaccount h2 {
- margin-top: 0;
- padding-top: 0;
-}
-
-@media (max-width: 768px) {
- .quiqqer-frontendUsers-controls-profile-categories-mobile {
- margin-bottom: 2em;
- }
-
- .quiqqer-frontend-users-address-list .quiqqer-frontend-users-address-list-entry {
- width: 100%;
- }
-
- .quiqqer-frontend-users-address-list .quiqqer-frontend-users-address-list-entry:nth-child(even) {
- margin-left: 0;
- }
-
- .quiqqer-frontend-users-address-list .quiqqer-frontend-users-address-list-entry:nth-child(odd) {
- margin-right: 0;
- }
-}
-
-/* email */
-.quiqqer-frontendUsers-userdata-address-additional .quiqqer-frontendUsers-userdata-email input {
- float: left;
- width: calc(100% - 70px);
- margin-right: 10px;
-}
-
-.quiqqer-frontendUsers-userdata-email .quiqqer-frontendUsers-userdata-email-edit {
- line-height: 40px;
- border-width: 1px;
- border-radius: 0.25rem;
-}
-
-@media screen and (max-width: 767px) {
- .cologne-main .quiqqer-frontendUsers-controls-profile-control label {
- margin-bottom: 10px;
- }
-}
-
-/**********/
-/* Avatar */
-/**********/
-.quiqqer-frontendUsers-userAvatar-gravatar {
- margin: 1.5rem 0;
-}
-
/******************/
/* profile orders */
/******************/
+/* hide top pagination */
.quiqqer-order-profile-orders .quiqqer-order-profile-orders-pagination:first-child {
display: none;
}
@@ -252,7 +120,7 @@
:where(.loginAndRegister) .quiqqer-fu-login-container {
background: #f8f8f8;
- border: 1px solid #ddd;
+ border: var(--_qui-cologne-theme-border-width) solid var(--_qui-cologne-theme-border-color);
max-width: 400px;
position: relative;
width: 100%;
diff --git a/bin/css/style.css b/bin/css/style.css
index 408b667..4bcf1f4 100644
--- a/bin/css/style.css
+++ b/bin/css/style.css
@@ -928,6 +928,7 @@ a.toTop:before {
.cologne-main {
margin-top: 1rem;
+ margin-bottom: 1rem;
width: 100%;
}
diff --git a/bin/css/variables.css b/bin/css/variables.css
index 434620f..4dc456a 100644
--- a/bin/css/variables.css
+++ b/bin/css/variables.css
@@ -19,6 +19,9 @@
--_qui-cologne-header-height: 100px;
+ --_qui-cologne-theme-border-color: var(--qui-cologne-theme-border-color, #ddd);
+ --_qui-cologne-theme-border-width: var(--qui-cologne-theme-border-width, 1px);
+
/* ecoyn / ecommerce */
--_qui-order-basket-articles-image-width: var(--qui-order-basket-articles-image-width, 100px);
--_qui-order-basket-articles-image-height: var(--qui-order-basket-articles-image-height, 100px);
diff --git a/quiqqer/frontend-users/src/QUI/FrontendUsers/Controls/Profile.html b/quiqqer/frontend-users/src/QUI/FrontendUsers/Controls/Profile.html
index 171be08..97ec342 100644
--- a/quiqqer/frontend-users/src/QUI/FrontendUsers/Controls/Profile.html
+++ b/quiqqer/frontend-users/src/QUI/FrontendUsers/Controls/Profile.html
@@ -1,76 +1,87 @@
{if !$Category}
-<p>
- {locale group="quiqqer/frontend-users" var="profile.no_categories_available"}
-</p>
+ <div class="quiqqer-frontendUsers-controls-profile__noCategoriesInfo">
+ <p>
+ {locale group="quiqqer/frontend-users" var="profile.no_categories_available"}
+ </p>
+ </div>
{else}
+ <div class="quiqqer-frontendUsers-controls-profile__sidebar">
+ {if $this->getAttribute('menu')}
+ <div class="quiqqer-frontendUsers-controls-profile-categories">
-{if $this->getAttribute('menu')}
-<div class="quiqqer-frontendUsers-controls-profile-categories">
-
- <div class="quiqqer-fupc-userinfo">
- {control control="QUI\TemplateCologne\Controls\SimpleUserInfo" assign=SimpleUserInfo}
- {$SimpleUserInfo->create()}
- </div>
+ <div class="quiqqer-fupc-userinfo">
+ {control control="QUI\TemplateCologne\Controls\SimpleUserInfo" assign=SimpleUserInfo}
+ {$SimpleUserInfo->create()}
+ </div>
- {foreach $categories as $category}
- <div class="quiqqer-fupc-category quiqqer-fupc-category--open"
- data-category="{$category.name}"
- >
- <div class="quiqqer-fupc-category-header">
- {$category.title}
- </div>
- <div class="quiqqer-fu-profile-categories-category-items">
- {foreach $category.items as $setting}
+ {foreach $categories as $category}
+ <div class="quiqqer-fupc-category"
+ data-category="{$category.name}"
+ data-name="nav-category"
+ data-open="1"
+ >
+ <div class="quiqqer-fupc-category-header" data-name="header">
+ <span class="quiqqer-fupc-category-header__text">{$category.title}</span>
+ <span class="fa-solid fa-angle-right quiqqer-fupc-category-header__icon" data-name="opener"></span>
+ </div>
+ <div class="quiqqer-fu-profile-categories-category-items">
+ {foreach $category.items as $setting}
+ {assign var=active value=false}
+ {if $currentCategory == $category.name && $currentSetting == $setting.name}
+ {assign var=active value=true}
+ {/if}
+ <a href="{$Site->getUrlRewritten()}/{$category.name}/{$setting.name}"
+ class="quiqqer-fupc-category-items-item"
+ {if $active}data-active{/if}
+ data-name="nav-category-item"
+ data-setting="{$setting.name}"
+ >
+ {if $setting.icon}
+ <span class="fa-fw quiqqer-fupc-category-items-item-icon {$setting.icon}"></span>
+ {/if}
+ <span>{$setting.title}</span>
+ </a>
+ {/foreach}
+ </div>
+ </div>
+ {/foreach}
+ </div>
+ {/if}
- {assign var=active value=""}
- {if $currentCategory == $category.name && $currentSetting == $setting.name}
- {assign var=active value=" quiqqer-fupc-category-items-item--active"}
- {/if}
- <a href="{$Site->getUrlRewritten()}/{$category.name}/{$setting.name}"
- class="quiqqer-fupc-category-items-item{$active}"
- data-setting="{$setting.name}"
- >
- {if $setting.icon}
- <span class="quiqqer-fupc-category-items-item-icon {$setting.icon}"></span>
- {/if}
- <span>{$setting.title}</span>
- </a>
- {/foreach}
- </div>
+ {* mobile categories *}
+ <form action="" method="post" class="quiqqer-frontendUsers-controls-profile-categories-mobile">
+ <label class="quiqqer-frontendUsers-controls-profile-categories-mobile-label">
+ <select name="profile-categories-mobile">
+ {foreach $categories as $category}
+ <optgroup label="{$category.title}">
+ {foreach $category.items as $setting}
+ {assign var=active value=""}
+ {if $currentCategory == $category.name && $currentSetting == $setting.name}
+ {assign var=active value="selected"}
+ {/if}
+ <option value="{$category.name}:{$setting.name}" {$active}>
+ {$setting.title}
+ </option>
+ {/foreach}
+ </optgroup>
+ {/foreach}
+ </select>
+ </label>
+ </form>
</div>
- {/foreach}
-</div>
-{/if}
-
-<form action="" method="post">
- <label class="quiqqer-frontendUsers-controls-profile-categories-mobile">
- <select name="profile-categories">
- {foreach $categories as $category}
- <optgroup label="{$category.title}">
- {foreach $category.items as $setting}
- {assign var=active value=""}
- {if $currentCategory== $category.name}
- {assign var=active value=" selected"}
- {/if}
- <option value="{$category.name}:{$setting.name}"{$active}>
- {$setting.title}
- </option>
- {/foreach}
- </optgroup>
- {/foreach}
- </select>
- </label>
-</form>
-<form class="quiqqer-frontendUsers-controls-profile-categoryContent"
- method="post"
- action=""
- data-category="{$currentCategory}"
- data-setting="{$currentSetting}"
->
- <div class="quiqqer-frontendUsers-controls-profile-categoryContentAnimation">
- {$Category->create()}
- <input type="hidden" name="profile-save" value="1">
+ <div class="quiqqer-frontendUsers-controls-profile__content">
+ <form class="quiqqer-frontendUsers-controls-profile-categoryContent"
+ data-name="form"
+ method="post"
+ action=""
+ data-category="{$currentCategory}"
+ data-setting="{$currentSetting}"
+ >
+ <div class="quiqqer-frontendUsers-controls-profile-categoryContentAnimation" data-name="content-animated">
+ {$Category->create()}
+ <input type="hidden" name="profile-save" value="1">
+ </div>
+ </form>
</div>
-</form>
{/if}
\ No newline at end of file
--
GitLab