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

Move page header component

This commit is contained in:
philipp lang 2023-05-20 01:45:43 +02:00
parent a526683082
commit e26b572575
7 changed files with 29 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
resources/js/components/SidebarHeader.vue → resources/js/components/page/Header.vue
View File

@ -1,13 +1,15 @@
<template>
<div class="h-16 px-6 flex justify-between items-center border-b border-solid border-gray-500">
<div class="h-16 px-6 flex justify-between items-center border-b border-solid border-gray-600 group-[.is-bright]:border-gray-500">
<slot name="before-title"></slot>
<div class="flex items-center">
<span class="mr-1 text-xl font-semibold leading-none text-white" v-html="title"></span>
<page-title class="mr-2">{{ title }}</page-title>
<slot name="toolbar"></slot>
</div>
<div class="flex ml-4">
<a href="#" @click.prevent="$emit('close')" class="btn label btn-primary-light icon">
<div class="flex items-center ml-4">
<a href="#" v-if="$listeners.close" @click.prevent="$emit('close')" class="btn label btn-primary-light icon">
<svg-sprite class="w-3 h-3" src="close"></svg-sprite>
</a>
<slot name="right"></slot>
</div>
</div>
</template>

10
resources/js/components/page/Layout.vue
View File

@ -1,11 +1,13 @@
<template>
<div class="grow bg-gray-900 flex flex-col transition-all" :class="{'ml-56': menuStore.visible, 'ml-0': !menuStore.visible}">
<div class="h-16 px-6 flex items-center space-x-3 border-b border-gray-600">
<a href="#" @click.prevent="menuStore.toggle()" class="lg:hidden">
<div class="h-16 px-6 flex justify-between items-center border-b border-solid border-gray-600 group-[.is-bright]:border-gray-500">
<a href="#" @click.prevent="menuStore.toggle()" class="lg:hidden mr-2">
<svg-sprite src="menu" class="text-gray-100 w-5 h-5"></svg-sprite>
</a>
<span class="text-sm md:text-xl font-semibold text-white leading-none" v-html="$page.props.title"></span>
<slot name="toolbar"></slot>
<div class="flex items-center">
<page-title class="mr-2">{{ $page.props.title }}</page-title>
<slot name="toolbar"></slot>
</div>
<div class="flex grow justify-between">
<portal-target name="toolbar-left"> </portal-target>
<portal-target name="toolbar-right"> </portal-target>

7
resources/js/components/page/Title.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<span class="text-sm md:text-xl font-semibold leading-none text-white"><slot></slot></span>
</template>
<script>
export default {};
</script>

2
resources/js/components/page/ToolbarButton.vue
View File

@ -1,5 +1,5 @@
<template>
<i-link :href="href" v-on="$listeners" class="btn label mr-2" :class="colors[color]" v-tooltip="menuStore.tooltipsVisible ? $slots.default[0].text : ''">
<i-link :href="href" v-on="$listeners" class="btn label mr-2 last:mr-0" :class="colors[color]" v-tooltip="menuStore.tooltipsVisible ? $slots.default[0].text : ''">
<svg-sprite v-show="icon" class="w-3 h-3 xl:mr-2" :src="icon"></svg-sprite>
<span class="hidden xl:inline"><slot></slot></span>
</i-link>

10
resources/js/views/member/MemberCourses.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="sidebar flex flex-col">
<sidebar-header :links="indexLinks" @close="$emit('close')" title="Ausbildungen">
<div class="sidebar flex flex-col group is-bright">
<page-header :links="indexLinks" @close="$emit('close')" title="Ausbildungen">
<div class="flex" slot="toolbar">
<page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Ausbildung</page-toolbar-button>
<page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button>
</div>
</sidebar-header>
</page-header>
<form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
<f-text id="completed_at" type="date" v-model="single.completed_at" label="Datum" required></f-text>
@ -49,8 +49,6 @@
</template>
<script>
import SidebarHeader from '../../components/SidebarHeader.vue';
export default {
data: function () {
return {
@ -65,8 +63,6 @@ export default {
value: {},
},
components: {SidebarHeader},
methods: {
create() {
this.mode = 'create';

10
resources/js/views/member/MemberMemberships.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="sidebar flex flex-col">
<sidebar-header :links="links" @close="$emit('close')" title="Mitgliedschaften">
<div class="sidebar flex flex-col group is-bright">
<page-header :links="links" @close="$emit('close')" title="Mitgliedschaften">
<div class="flex" slot="toolbar">
<page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Mitgliedschaft</page-toolbar-button>
<page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button>
</div>
</sidebar-header>
</page-header>
<form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
<f-select id="group_id" name="group_id" :options="groups" v-model="single.group_id" label="Gruppierung" size="sm" required></f-select>
@ -56,8 +56,6 @@
</template>
<script>
import SidebarHeader from '../../components/SidebarHeader.vue';
export default {
data: function () {
return {
@ -67,8 +65,6 @@ export default {
};
},
components: {SidebarHeader},
computed: {
def() {
return {

10
resources/js/views/member/MemberPayments.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="sidebar flex flex-col">
<sidebar-header @close="$emit('close')" title="Zahlungen">
<div class="sidebar flex flex-col group is-bright">
<page-header @close="$emit('close')" title="Zahlungen">
<div class="flex" slot="toolbar">
<page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Zahlung</page-toolbar-button>
<page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button>
</div>
</sidebar-header>
</page-header>
<form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
<f-text id="nr" v-model="single.nr" label="Jahr" required></f-text>
@ -59,8 +59,6 @@
</template>
<script>
import SidebarHeader from '../../components/SidebarHeader.vue';
export default {
data: function () {
return {
@ -69,8 +67,6 @@ export default {
};
},
components: {SidebarHeader},
methods: {
create() {
this.mode = 'create';