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

Upgrade to tailwind 2.0

Browse Source
This commit is contained in:
Björn Fromme
2021-08-03 09:31:54 +02:00
parent 4199cfa577
commit 4f32b1700b
7 changed files with 405 additions and 806 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+385 -748
View File
File diff suppressed because it is too large Load Diff
package.json
+3 -3
View File
@@ -42,8 +42,8 @@
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.14.8",
"@symfony/webpack-encore": "^1.5.0",
"@tailwindcss/custom-forms": "^0.2.1",
"autoprefixer": "^9.4.6",
"@tailwindcss/forms": "^0.3.3",
"autoprefixer": "^10.3.1",
"core-js": "^3.15.2",
"file-loader": "^6.2.0",
"node-sass": "^4.14.1",
@@ -52,7 +52,7 @@
"sass-loader": "^9.0.3",
"sass-mq": "^3.3.2",
"smoothscroll-polyfill": "^0.4.4",
"tailwindcss": "^1.9.6",
"tailwindcss": "^2.2.7",
"tinycolor2": "^1.4.1",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.14"
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/Events.vue
+2 -2
View File
@@ -21,8 +21,8 @@
<td class="text-left align-top">{{ event.dateTravel | date }}</td>
<td class="text-left align-top">{{ event.product }}</td>
<td class="text-left align-top">{{ event.bookingNumber }}</td>
<td class="text-right align-top whitespace-no-wrap">{{ formatCurrency(event.price) }}</td>
<td class="text-right align-top whitespace-no-wrap" :class="{ 'text-red-500': hasOutstandingPayment(event) }">{{ calculateBalance(event) }}</td>
<td class="text-right align-top whitespace-nowrap">{{ formatCurrency(event.price) }}</td>
<td class="text-right align-top whitespace-nowrap" :class="{ 'text-red-500': hasOutstandingPayment(event) }">{{ calculateBalance(event) }}</td>
<td class="text-left align-top">{{ status[event.status] }}</td>
<td class="flex space-x-1">
<a :href="getDownloadUrl(event, 'confirmation')" target="_blank" class="button button--action button--small">
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_calendar.scss
+6 -6
View File
@@ -35,25 +35,25 @@
}
.label-success-danger {
background: linear-gradient(to bottom right, theme('colors.green-500') 50%, theme('colors.red-500') 50%);
background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.red.500') 50%);
}
.label-success-warning {
background: linear-gradient(to bottom right, theme('colors.green-500') 50%, theme('colors.red-500') 50%);
background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.red.500') 50%);
}
.label-danger-success {
background: linear-gradient(to bottom right, theme('colors.red-500') 50%, theme('colors.green-500') 50%);
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.green.500') 50%);
}
.label-warning-success {
background: linear-gradient(to bottom right, theme('colors.red-500') 50%, theme('colors.green-500') 50%);
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.green.500') 50%);
}
.label-danger-warning {
background: linear-gradient(to bottom right, theme('colors.red-500') 50%, theme('colors.red-500') 50%);
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.red.500') 50%);
}
.label-warning-danger {
background: linear-gradient(to bottom right, theme('colors.red-500') 50%, theme('colors.red-500') 50%);
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.red.500') 50%);
}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
+1 -1
View File
@@ -29,7 +29,7 @@
<tbody>
<f:for each="{pricetable}" as="row" iteration="iteration">
<tr class="even:bg-gray-200">
<td class="px-2 py-1 border border-gray-200 whitespace-no-wrap">
<td class="px-2 py-1 border border-gray-200 whitespace-nowrap">
{row.roomName}
<div class="lg:hidden">
<f:if condition="{row.roomAvailable}">
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+2 -2
View File
@@ -370,7 +370,7 @@
</span>
</div>
</td>
<td class="px-2 py-1 whitespace-no-wrap" x-bind:class="!row.roomAvailable && !row.isHideBookingButton && 'line-through'"
<td class="px-2 py-1 whitespace-nowrap" x-bind:class="!row.roomAvailable && !row.isHideBookingButton && 'line-through'"
x-text="calculatePrice(row.roomPrice, row.roomBusPrice, row.roomDiscount) + ' €'"></td>
<td class="px-2 py-1">
<div class="flex items-center space-x-1">
@@ -431,7 +431,7 @@
<template x-for="optionalService in section.services">
<dl class="flex items-start justify-between mb-0">
<dt class="font-normal" x-text="optionalService.label + ':'"></dt>
<dd class="whitespace-no-wrap" x-text="optionalService.price + ' €'"></dd>
<dd class="whitespace-nowrap" x-text="optionalService.price + ' €'"></dd>
</dl>
</template>
</div>
tailwind.config.js
+6 -44
View File
@@ -2,13 +2,6 @@ const plugin = require('tailwindcss/plugin')
const tinycolor = require('tinycolor2')
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
experimental: {
applyComplexClasses: true,
},
purge: {
mode: 'layers',
layers: ['components', 'utilities'],
@@ -30,42 +23,12 @@ module.exports = {
fontFamily: {
'sans': [ 'Lato', 'sans-serif' ],
},
customForms: theme => ({
default: {
'input, textarea, select, multiselect': {
paddingTop: theme('spacing.4'),
paddingBottom: theme('spacing.4'),
paddingLeft: theme('spacing.8'),
paddingRight: theme('spacing.8'),
borderColor: theme('colors.gray.500'),
borderRadius: undefined,
'&:focus': {
borderColor: undefined,
boxShadow: undefined,
},
},
'checkbox, radio': {
width: theme('spacing.6'),
height: theme('spacing.6'),
backgroundColor: theme('colors.white'),
borderColor: undefined,
'&:focus': {
borderColor: undefined,
boxShadow: undefined,
},
'&:checked': {
backgroundColor: theme('colors.ep.secondary'),
boxShadow: undefined,
},
},
},
error: {
'input, textarea, select, multiselect': {
color: theme('colors.red.500'),
borderColor: theme('colors.red.500'),
}
},
}),
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
},
extend: {
colors: {
'overlay': {
@@ -129,7 +92,6 @@ module.exports = {
require('tailwindcss-alt')({
variants: ['sbw', 'snz', 'uch'],
}),
require('@tailwindcss/custom-forms'),
require('@tailwindcss/aspect-ratio'),
plugin(function ({addVariant, e}) {
addVariant('first-type', ({modifySelectors, separator}) => {