silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Update tailwindcss

This commit is contained in:
philipp lang 2022-02-10 02:18:57 +01:00
parent 61b0b8708c
commit 14b0aefb81
16 changed files with 1086 additions and 858 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1602
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
package.json
View File

@ -2,17 +2,19 @@
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"development": "npx mix build",
"watch": "npx mix watch",
"hot": "npx mix watch --hot",
"prod": "npx mix build --production",
"production": "npm run prod",
"img": "rm -R public/img && cd resources/img/svg && svg-sprite -s --symbol-dest=sprite *.svg && mv sprite/svg/sprite.symbol.svg ../sprite.svg && rm -R sprite && cd ../../../ && cp -R resources/img public/img"
},
"devDependencies": {
"autoprefixer": "^10.4.2",
"laravel-mix": "^6.0.1",
"lodash": "^4.17.21",
"postcss": "^8.4.6",
"tailwindcss": "^3.0.19",
"vue": "^2.6.12",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12"
@ -26,7 +28,6 @@
"postcss-import": "^14.0.1",
"query-string": "^7.0.0",
"socket.io-client": "^4.0.1",
"tailwindcss": "^2.1.1",
"v-tooltip": "^2.1.3",
"wnumb": "^1.2.0"
}

2
phpstan.neon
View File

@ -5,6 +5,8 @@ parameters:
paths:
- app
- tests
- database
# The level 8 is the highest level
level: 5

21
resources/css/app.css vendored
View File

@ -1,12 +1,15 @@
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "base";
@import "switch";
@import "layout";
@import "buttons";
@import "table";
@import "sidebar";
@import "bool";
@import "form";
@import "tooltip";
@layer components {
@import "base";
@import "switch";
@import "layout";
@import "buttons";
@import "table";
@import "sidebar";
@import "bool";
@import "form";
@import "tooltip";
}

8
resources/css/base.css vendored
View File

@ -38,14 +38,6 @@
@apply flex flex-col;
}
.toolbar-title {
@apply font-bold text-gray-700 text-lg;
}
.subtitle {
@apply text-xl font-semibold mt-6 font-thin uppercase text-gray-600;
}
.mainnav > div > a {
@apply py-2;
}

2
resources/css/form.css vendored
View File

@ -135,7 +135,7 @@
input[type="checkbox"] {
@apply invisible absolute;
& + span {
@apply rounded transition-colors duration-300 relative cursor-pointer flex flex-grow h-full;
@apply rounded transition-colors duration-300 relative cursor-pointer flex grow h-full;
span {
@apply absolute flex items-center justify-center;
}

2
resources/js/components/FSwitch.vue
View File

@ -6,7 +6,7 @@
}">{{ label }}</span>
<div class="relative inner-field mt-1" :class="`h-field-${fieldSize}`">
<input :id="id" type="checkbox" v-model="v" :disabled="disabled" class="invisible absolute" />
<span class="relative cursor-pointer flex flex-grow display" :class="{'bg-switch': v === true, 'bg-gray-700': v === false}">
<span class="relative cursor-pointer flex grow display" :class="{'bg-switch': v === true, 'bg-gray-700': v === false}">
<span><sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === null}" src="check"></sprite></span>
<span><sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === null}" src="close"></sprite></span>
<var class="absolute overlay bg-gray-400 rounded top-0"></var>

16
resources/js/components/Notification.vue
View File

@ -2,7 +2,7 @@
<div class="grid gap-2 has-contents">
<transition-group name="fadeRight" tag="div">
<div v-for="(item, index) in items" :key="'i'+index"
:class="`bg-${item.type}-300 text-${item.type}-800 h-12 flex flex-col items-start justify-center shadow-2xl rounded-sm px-6`"
:class="`${colors[item.type].bg} ${colors[item.type].text} h-12 flex flex-col items-start justify-center shadow-2xl rounded-sm px-6`"
>
<div class="text-sm" v-for="message in item.messages" v-text="message"></div>
</div>
@ -12,6 +12,20 @@
<script>
export default {
data: function() {
return {
colors: {
red: {
bg: 'bg-red-300',
text: 'text-red-800'
},
green: {
bg: 'bg-green-300',
text: 'text-green-800'
}
}
};
},
computed: {
items() {
var i = [];

6
resources/js/layouts/App.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="app" class="flex font-sans flex-grow">
<div id="app" class="flex font-sans grow">
<notification class="fixed z-40 right-0 bottom-0 mb-3 mr-3"></notification>
@ -12,7 +12,7 @@
</div>
</div>
<div class="flex-grow ml-56 bg-gray-900 flex flex-col">
<div class="grow ml-56 bg-gray-900 flex flex-col">
<div class="h-16 px-6 flex justify-between items-center border-b border-gray-600">
<div class="flex">
<span class="text-xl font-semibold text-white leading-none" v-html="$page.props.title"></span>
@ -27,7 +27,7 @@
</label>
</div>
<div class="flex-grow flex flex-col">
<div class="grow flex flex-col">
<slot></slot>
</div>
</div>

2
resources/js/layouts/Full.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="app" class="bg-gray-900 font-sans flex flex-col flex-grow items-center justify-center">
<div id="app" class="bg-gray-900 font-sans flex flex-col grow items-center justify-center">
<notification class="fixed z-40 right-0 bottom-0 mb-3 mr-3"></notification>
<div class="w-96 bg-gray-800 rounded-xl overflow-hidden shadow-lg">
<slot></slot>

4
resources/js/views/home/Index.vue
View File

@ -9,13 +9,13 @@
<block title="Gruppierungs-Verteilung">
<div v-for="group in data.groups" class="flex mt-2 items-center leading-none text-gray-100">
<sprite class="w-4 h-4 mr-2" src="lilie" :class="`text-${group.slug}`"></sprite>
<span v-text="group.name" class="flex-grow"></span>
<span v-text="group.name" class="grow"></span>
<span v-text="group.count"></span>
</div>
</block>
<block title="Endende Schhnupperzeiten">
<div v-for="member in data.ending_tries" class="flex mt-2 items-center leading-none text-gray-100">
<span class="flex-grow" v-text="`${member.firstname} ${member.lastname}`"></span>
<span class="grow" v-text="`${member.firstname} ${member.lastname}`"></span>
<span class="mr-2 text-sm tex-gray-600" v-text="`${member.try_ends_at}`"></span>
<span class="text-xs tex-gray-600" v-text="`${member.try_ends_at_human}`"></span>
</div>

40
resources/js/views/member/Courses.vue
View File

@ -10,26 +10,28 @@
<button type="submit" class="btn btn-primary">Absenden</button>
</form>
<table v-else class="custom-table custom-table-light custom-table-sm text-sm flex-grow">
<thead>
<th>Baustein</th>
<th>Veranstaltung</th>
<th>Veranstalter</th>
<th>Datum</th>
<th></th>
</thead>
<div class="grow" v-else>
<table class="custom-table custom-table-light custom-table-sm text-sm grow">
<thead>
<th>Baustein</th>
<th>Veranstaltung</th>
<th>Veranstalter</th>
<th>Datum</th>
<th></th>
</thead>
<tr v-for="course, index in value.courses">
<td v-text="course.course_name"></td>
<td v-text="course.event_name"></td>
<td v-text="course.organizer"></td>
<td v-text="course.completed_at_human"></td>
<td class="flex">
<a href="#" @click.prevent="single = course; mode = 'edit'" class="inline-flex btn btn-warning btn-sm"><sprite src="pencil"></sprite></a>
<Link href="#" @click.prevent="remove(course)" class="inline-flex btn btn-danger btn-sm"><sprite src="trash"></sprite></Link>
</td>
</tr>
</table>
<tr v-for="course, index in value.courses">
<td v-text="course.course_name"></td>
<td v-text="course.event_name"></td>
<td v-text="course.organizer"></td>
<td v-text="course.completed_at_human"></td>
<td class="flex">
<a href="#" @click.prevent="single = course; mode = 'edit'" class="inline-flex btn btn-warning btn-sm"><sprite src="pencil"></sprite></a>
<Link href="#" @click.prevent="remove(course)" class="inline-flex btn btn-danger btn-sm"><sprite src="trash"></sprite></Link>
</td>
</tr>
</table>
</div>
</div>
</template>

4
resources/js/views/member/Form.vue
View File

@ -1,5 +1,5 @@
<template>
<form class="flex flex-grow relative" @submit.prevent="submit">
<form class="flex grow relative" @submit.prevent="submit">
<!-- ****************************** menu links ******************************* -->
<div class="p-6 bg-gray-700 border-r border-gray-600 flex-none w-maxc flex flex-col justify-between">
<div class="grid gap-1">
@ -12,7 +12,7 @@
</div>
<!-- ***************************** Hauptbereich ****************************** -->
<div class="flex-grow">
<div class="grow">
<div class="grid grid-cols-2 gap-3 p-4" v-if="menuTitle == 'Stammdaten'">
<f-select id="gender_id" :options="genders" v-model="inner.gender_id" label="Geschlecht"></f-select>
<f-text id="firstname" v-model="inner.firstname" label="Vorname" required></f-text>

36
resources/js/views/member/Memberships.vue
View File

@ -8,24 +8,26 @@
<button type="submit" class="btn btn-primary">Absenden</button>
</form>
<table v-else class="custom-table custom-table-light custom-table-sm text-sm flex-grow">
<thead>
<th>Tätigkeit</th>
<th>Untertätigkeit</th>
<th>Datum</th>
<th></th>
</thead>
<div class="grow" v-else>
<table class="custom-table custom-table-light custom-table-sm text-sm">
<thead>
<th>Tätigkeit</th>
<th>Untertätigkeit</th>
<th>Datum</th>
<th></th>
</thead>
<tr v-for="membership, index in value.memberships">
<td v-text="membership.activity_name"></td>
<td v-text="membership.subactivity_name"></td>
<td v-text="membership.human_date"></td>
<td class="flex">
<a href="#" @click.prevent="single = membership; mode = 'edit'" class="inline-flex btn btn-warning btn-sm"><sprite src="pencil"></sprite></a>
<Link href="#" @click.prevent="remove(membership)" class="inline-flex btn btn-danger btn-sm"><sprite src="trash"></sprite></Link>
</td>
</tr>
</table>
<tr v-for="membership, index in value.memberships">
<td v-text="membership.activity_name"></td>
<td v-text="membership.subactivity_name"></td>
<td v-text="membership.human_date"></td>
<td class="flex">
<a href="#" @click.prevent="single = membership; mode = 'edit'" class="inline-flex btn btn-warning btn-sm"><sprite src="pencil"></sprite></a>
<Link href="#" @click.prevent="remove(membership)" class="inline-flex btn btn-danger btn-sm"><sprite src="trash"></sprite></Link>
</td>
</tr>
</table>
</div>
</div>
</template>

38
resources/js/views/member/Payments.vue
View File

@ -9,25 +9,27 @@
<button type="submit" class="btn btn-primary">Absenden</button>
</form>
<table v-else class="custom-table custom-table-light custom-table-sm text-sm flex-grow">
<thead>
<th>Nr</th>
<th>Status</th>
<th>Beitrag</th>
<th></th>
</thead>
<div class="grow" v-else>
<table class="custom-table custom-table-light custom-table-sm text-sm">
<thead>
<th>Nr</th>
<th>Status</th>
<th>Beitrag</th>
<th></th>
</thead>
<tr v-for="payment, index in value.payments">
<td v-text="payment.nr"></td>
<td v-text="payment.status_name"></td>
<td v-text="payment.subscription_name"></td>
<td class="flex">
<a href="#" @click.prevent="single = payment; mode = 'edit'" class="inline-flex btn btn-warning btn-sm"><sprite src="pencil"></sprite></a>
<Link v-show="!payment.is_accepted" href="#" @click.prevent="accept(payment)" class="inline-flex btn btn-success btn-sm"><sprite src="check"></sprite></Link>
<Link href="#" @click.prevent="remove(payment)" class="inline-flex btn btn-danger btn-sm"><sprite src="trash"></sprite></Link>
</td>
</tr>
</table>
<tr v-for="payment, index in value.payments">
<td v-text="payment.nr"></td>
<td v-text="payment.status_name"></td>
<td v-text="payment.subscription_name"></td>
<td class="flex">
<a href="#" @click.prevent="single = payment; mode = 'edit'" class="inline-flex btn btn-warning btn-sm"><sprite src="pencil"></sprite></a>
<Link v-show="!payment.is_accepted" href="#" @click.prevent="accept(payment)" class="inline-flex btn btn-success btn-sm"><sprite src="check"></sprite></Link>
<Link href="#" @click.prevent="remove(payment)" class="inline-flex btn btn-danger btn-sm"><sprite src="trash"></sprite></Link>
</td>
</tr>
</table>
</div>
<div class="flex flex-col pb-6 px-6">
<a href="#" @click.prevent="openLink(link)" :class="{'disabled': link.disabled}" target="_BLANK" v-for="link in value.payment_links" class="mt-1 text-center btn btn-primary" v-text="link.label"></a>
</div>

146
tailwind.config.js vendored
View File

@ -1,129 +1,33 @@
var modules = require('js-modules/tailwind/index.js');
const { colors } = require('tailwindcss/defaultTheme');
module.exports = {
purge: {
enabled: false,
content: [
"resources/js/views/**/*.vue",
"resources/js/layouts/**/*.vue",
]
},
content: [
"resources/js/views/**/*.vue",
"resources/js/components/**/*.vue",
"resources/js/layouts/**/*.vue",
"resources/views/**/*.blade.php",
],
theme: {
extend: {
},
colors: {
woelfling: '#ff6400',
jungpfadfinder: '#2f53a7',
pfadfinder: '#00823c',
rover: '#cc1f2f',
biber: '#ffed00',
leiter: '#9d9d9c',
teal: [],
primary: {
100: 'hsl(181, 98%, 93%)',
200: 'hsl(181, 84%, 78%)',
300: 'hsl(181, 78%, 62%)',
400: 'hsl(181, 76%, 53%)',
500: 'hsl(181, 75%, 44%)',
600: 'hsl(181, 75%, 35%)',
700: 'hsl(181, 75%, 26%)', // locked
800: 'hsl(181, 86%, 16%)',
900: 'hsl(181, 94%, 10%)'
},
gray: colors.gray,
white: colors.white,
red: colors.red,
blue: {
100: colors.blue[100],
300: colors.blue[300],
500: colors.blue[500],
700: colors.blue[700],
},
yellow: {
500: colors.yellow[500],
700: colors.yellow[700],
},
green: {
100: colors.green[100],
300: colors.green[300],
800: colors.green[800],
colors: {
woelfling: '#ff6400',
jungpfadfinder: '#2f53a7',
pfadfinder: '#00823c',
rover: '#cc1f2f',
biber: '#ffed00',
leiter: '#9d9d9c',
primary: {
100: 'hsl(181, 98%, 93%)',
200: 'hsl(181, 84%, 78%)',
300: 'hsl(181, 78%, 62%)',
400: 'hsl(181, 76%, 53%)',
500: 'hsl(181, 75%, 44%)',
600: 'hsl(181, 75%, 35%)',
700: 'hsl(181, 75%, 26%)', // locked
800: 'hsl(181, 86%, 16%)',
900: 'hsl(181, 94%, 10%)'
}
}
}
},
corePlugins: {
clear: false,
float: false,
boxSizing: false,
accessibility: false,
animation: false,
backgroundPosition: false,
backgroundRepeat: false,
skew: false,
verticalAlign: false,
wordBreak: false,
ringWidth: false,
ringColor: false,
ringOffsetColor: false,
ringOffsetWidth: false,
ringOpacity: false,
ringWidth: false,
},
variants: {
alignContent: ['responsive'],
alignItems: [],
alignSelf: [],
appearance: [],
backgroundAttachment: ['responsive'],
backgroundColor: ['hover'],
backgroundPosition: [],
backgroundSize: [],
borderCollapse: [],
borderColor: [],
borderRadius: [],
borderStyle: [],
borderWidth: [],
boxShadow: ['hover'],
cursor: [],
display: ['responsive', 'group-hover'],
fill: ['responsive'],
flex: ['responsive'],
flexDirection: ['responsive'],
flexGrow: ['responsive'],
flexShrink: [],
flexWrap: ['responsive'],
fontFamily: [],
fontSize: ['responsive'],
fontSmoothing: [],
fontStyle: ['responsive'],
fontWeight: ['hover'],
height: ['responsive'],
inset: [],
justifyContent: ['responsive'],
width: ['responsive'],
zIndex: [],
gap: ['responsive'],
gridAutoFlow: ['responsive'],
gridTemplateColumns: ['responsive'],
gridColumn: ['responsive'],
gridColumnStart: ['responsive'],
gridColumnEnd: ['responsive'],
gridTemplateRows: ['responsive'],
gridRow: ['responsive'],
gridRowStart: ['responsive'],
gridRowEnd: ['responsive'],
transform: [],
transformOrigin: [],
scale: [],
rotate: [],
translate: [],
skew: [],
transitionProperty: [],
transitionTimingFunction: [],
transitionDuration: [],
},
plugins: [
modules.checkbox({}),
modules.switch({})
]
}
}