EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve theming of buttons and product detail page for site ser

Browse Source
This commit is contained in:
Björn Fromme
2022-06-07 15:58:54 +02:00
parent 48b6f1a9db
commit 2a8bfe10fc
3 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+2 -1
View File
@@ -26,7 +26,7 @@
&--active, &--active,
&--secondary { &--secondary {
@apply bg-ep-primary; @apply bg-ep-secondary;
@apply sbw:bg-sbw-primary; @apply sbw:bg-sbw-primary;
@apply snz:bg-snz-primary; @apply snz:bg-snz-primary;
@apply uch:bg-uch-primary; @apply uch:bg-uch-primary;
@@ -40,6 +40,7 @@
&--dark { &--dark {
@apply bg-ep-primary-dark; @apply bg-ep-primary-dark;
@apply ser:bg-ser-primary; @apply ser:bg-ser-primary;
@apply ser:hover:bg-ser-secondary ser:group-hover:bg-ser-secondary;
} }
&--light { &--light {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tooltips.scss
+2 -2
View File
@@ -1,7 +1,7 @@
@import "~cooltipz-css/src/cooltipz"; @import "~cooltipz-css/src/cooltipz";
:root { :root {
--cooltipz-bg-color: theme('colors.ep.secondary'); --cooltipz-bg-color: theme('colors.gray.700');
--cooltipz-border-color: theme('colors.ep.secondary'); --cooltipz-border-color: theme('colors.gray.700');
--cooltipz-text-color: theme('colors.white'); --cooltipz-text-color: theme('colors.white');
} }
public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
+9 -9
View File
@@ -49,7 +49,7 @@
<f:if condition="{bookable} && {row.available} && {row.showBookingButton}"> <f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
<f:then> <f:then>
<button type="button" <button type="button"
class="text-left text-ep-primary-light text-sm md:text-base" class="text-left text-ep-primary-light ser:text-ser-primary text-sm md:text-base"
data-action="product-details#loadPrices" data-action="product-details#loadPrices"
data-date-uid="{row.dateUid}"> data-date-uid="{row.dateUid}">
{row.dateStart} - {row.dateEnd} {row.dateStart} - {row.dateEnd}
@@ -93,7 +93,7 @@
</span> </span>
</f:if> </f:if>
<button type="button" <button type="button"
class="text-ep-primary-light col-span-2 text-sm md:text-base text-left leading-none whitespace-nowrap p-1" class="text-ep-primary-light ser:text-ser-primary col-span-2 text-sm md:text-base text-left leading-none whitespace-nowrap p-1"
data-action="pricetable#openModal" data-action="pricetable#openModal"
data-type="services" data-type="services"
data-uid="{row.dateUid}" data-uid="{row.dateUid}"
@@ -121,7 +121,7 @@
<f:if condition="{row.showBookingButton}"> <f:if condition="{row.showBookingButton}">
<f:then> <f:then>
<button type="button" <button type="button"
class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light', else: 'text-gray-300')}" class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light ser:text-ser-primary', else: 'text-gray-300')}"
data-action="product-details#loadPrices" data-action="product-details#loadPrices"
data-date-uid="{row.dateUid}"> data-date-uid="{row.dateUid}">
<svg class="w-6 h-6 hidden md:block"> <svg class="w-6 h-6 hidden md:block">
@@ -135,7 +135,7 @@
<f:else> <f:else>
<a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}" <a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
title="Reisen-Alert" title="Reisen-Alert"
class="flex space-x-1 items-center text-ep-primary-light"> class="flex space-x-1 items-center text-ep-primary-light ser:text-ser-primary">
<svg class="w-6 h-6 hidden md:block"> <svg class="w-6 h-6 hidden md:block">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg> </svg>
@@ -156,7 +156,7 @@
<li class="py-2"> <li class="py-2">
<button type="button" <button type="button"
data-action="pricetable#toggleSurcharge" data-action="pricetable#toggleSurcharge"
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light"> class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary">
<svg class="w-6 h-6"> <svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg> </svg>
@@ -172,7 +172,7 @@
<li class="py-2"> <li class="py-2">
<button type="button" <button type="button"
data-action="pricetable#toggleDiscount" data-action="pricetable#toggleDiscount"
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light"> class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary">
<svg class="w-6 h-6"> <svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg> </svg>
@@ -187,7 +187,7 @@
<f:if condition="{dates -> f:count()} > 5"> <f:if condition="{dates -> f:count()} > 5">
<li class="py-2"> <li class="py-2">
<button type="button" <button type="button"
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light" class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary"
data-action="pricetable#toggleRows"> data-action="pricetable#toggleRows">
<svg class="w-6 h-6"> <svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-plus-circle" <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-plus-circle"
@@ -203,7 +203,7 @@
<li class="py-2"> <li class="py-2">
<a href="{altProductLink}" <a href="{altProductLink}"
title="{altLabel}" title="{altLabel}"
class="flex items-center space-x-1 focus:outline-none text-ep-primary-light"> class="flex items-center space-x-1 focus:outline-none text-ep-primary-light ser:text-ser-primary">
<svg class="w-6 h-6"> <svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-circle-right"></use>
</svg> </svg>
@@ -223,7 +223,7 @@
<div class="absolute inset-0 w-full h-full bg-overlay-black z-25" <div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
data-action="click->modal#close"></div> data-action="click->modal#close"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4"> <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
<div class="shadow flex items-center justify-between p-4 bg-ep-primary-light text-white rounded-t"> <div class="shadow flex items-center justify-between p-4 bg-ep-primary-light ser:bg-ser-primary text-white rounded-t">
<span class="text-xl font-bold"> <span class="text-xl font-bold">
Inklusivleistungen {hotel.name} Inklusivleistungen {hotel.name}
</span> </span>