flp
/
WowPress-Tailwind
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Anmelde-Modal

master
Seph 2024-04-17 22:10:17 +02:00
parent 22c6a931d9
commit 02bdd79ed4
13 changed files with 200 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
javascript/script.js
View File

@ -8,3 +8,8 @@
* For esbuild documentation, please see:
* https://esbuild.github.io/
*/
import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

24
package-lock.json generated
View File

@ -4,6 +4,9 @@
"requires": true,
"packages": {
"": {
"dependencies": {
"alpinejs": "^3.13.8"
},
"devDependencies": {
"@_tw/themejson": "^0.2.0",
"@_tw/typography": "^0.5.10",
@ -792,6 +795,19 @@
"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
"dev": true
},
"node_modules/@vue/reactivity": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
"integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
"dependencies": {
"@vue/shared": "3.1.5"
}
},
"node_modules/@vue/shared": {
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
"integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
},
"node_modules/@wordpress/prettier-config": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/@wordpress/prettier-config/-/prettier-config-3.5.0.tgz",
@ -856,6 +872,14 @@
"url": "https://github.com/sponsors/epoberezkin"
}
},
"node_modules/alpinejs": {
"version": "3.13.8",
"resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.8.tgz",
"integrity": "sha512-XolbBJryCndomtaHd/KHQjQeD/L72FJxy/YhLLFD4Lr7zzGcpcbg+UgXteMR2pYg1KhRUr6V4O3GfN1zJAmRWw==",
"dependencies": {
"@vue/reactivity": "~3.1.1"
}
},
"node_modules/ansi-regex": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",

5
package.json
View File

@ -54,5 +54,8 @@
"zip": "node node_scripts/zip.js wowpress",
"bundle": "run-s production zip"
},
"prettier": "@wordpress/prettier-config"
"prettier": "@wordpress/prettier-config",
"dependencies": {
"alpinejs": "^3.13.8"
}
}

22
tailwind/custom/components/buttons.css
View File

@ -2,12 +2,13 @@
.btn{
@apply p-3 flex flex-row items-center justify-center gap-2 border;
border-color: white;
border-color: color-mix(in srgb, var(--btn-color) 80%, white);
background-color: var(--btn-color);
color: white;
color: black;
&:hover, &.current-menu-item, &.current-page-item, &.current-menu-ancestor ,&.current-menu-parent{
@apply bg-glass;
border-color: color-mix(in srgb, var(--btn-color) 80%, black);
color: var(--btn-color);
}
}
@ -30,21 +31,4 @@ nav{
.nav-btn{
@apply btn btn-outline;
}
.btn-druid{
--btn-color: var(--wp--preset--color--druid);
}
.btn-deathknight{
--btn-color: var(--wp--preset--color--deathknight);
}
.btn-shaman{
--btn-color: var(--wp--preset--color--shaman);
}
.btn-hunter{
--btn-color: var(--wp--preset--color--hunter);
}

12
tailwind/tailwind.css
View File

@ -51,6 +51,9 @@
--color-shaman: #0070DD;
--color-warlock: #8788EE;
--color-warrior: #C69B6D;
--color-deepblue: #000032;
--color-background: var(--color-deepblue);
--color-glass:color-mix(in lch, transparent 75%, var(--color-background) );
}
.p-auto{
@ -63,14 +66,14 @@
body {
background-color: unset;
--body-bg: url('https://nebelkrieger.de/wp-content/uploads/2023/05/F8lCEpyWoAAFCFS-scaled.jpg');
--body-bg: url('https://bnetcmsus-a.akamaihd.net/cms/blog_header/3i/3ITOIMA3P61U1699028715242.png');
position: relative;
z-index: -10;
@apply min-h-screen;
}
.bg-glass {
background-color: rgba(0, 0, 50, 0.4);
background-color: var(--color-glass);
backdrop-filter: blur(10px);
}
@ -97,11 +100,6 @@ body:before {
}
header#masthead {
@apply bg-glass;
}
.content-wrapper {
position: relative;

3
theme/components/class-button.php 100644
View File

@ -0,0 +1,3 @@
<?php
?>
<button class="btn btn-<?=$this->color?> w-full"><img src="<?=$this->classIcon?>" class="h-8"><?=$this->name?></button>

99
theme/components/raid-signup.php 100644
View File

@ -0,0 +1,99 @@
<?php
use WoWPress\Frontend\Icon;
use WoWPress\Frontend\ToggleButton;
?>
<div class="flex flex-row" x-data="{open : false}">
<button x-on:click="open = true" class="btn btn-<?= $character->color ?> w-full"><img src="<?= $character->classIcon ?>" class="h-8"><?= $character->name ?></button>
<div class="border border-<?= $character->color ?> flex flex-row text-slate-500 items-center justify-center p-auto border-s-0"><?= Icon::get('o-minus-circle') ?></div>
<div class="border border-<?= $character->color ?> flex flex-row text-slate-500 items-center justify-center p-auto border-s-0"><?= Icon::get('o-minus-circle') ?></div>
<template x-teleport="body">
<div x-show="open" class="fixed inset-0 px-2 z-10 overflow-hidden flex items-center justify-center">
<div x-show="open" x-on:click="open = false" x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
<!-- Modal Content -->
<div x-show="open" x-transition:enter="transition-transform ease-out duration-300" x-transition:enter-start="transform scale-75" x-transition:enter-end="transform scale-100" x-transition:leave="transition-transform ease-in duration-300" x-transition:leave-start="transform scale-100" x-transition:leave-end="transform scale-75" class="bg-glass shadow overflow-hidden max-w-md w-full sm:w-96 md:w-1/2 lg:w-2/3 xl:w-1/3 z-50">
<!-- Modal Body -->
<div class="grid grid-cols-2 gap-auto p-auto">
<button class="col-span-2 btn btn-<?= $character->color ?> w-full"><img src="<?= $character->classIcon ?>" class="h-8"><?= $character->name ?></button>
<div class="col-span-2 text-center">Anwesenheit</div>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_status',
'text' => 'Anwesend',
'color' => 'monk',
'icon_yes' => 'o-check-circle',
'checked' => true,
'row' => false,
]))->render() ?>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_status',
'text' => 'Abwesend',
'color' => 'deathknight',
'icon_yes' => 'o-x-circle',
'row' => false,
]))->render() ?>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_status',
'text' => 'Ersatzbank',
'color' => 'druid',
'icon_yes' => 'o-question-mark-circle',
'row' => false,
]))->render() ?>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_status',
'text' => 'Verspätet',
'color' => 'demonhunter',
'icon_yes' => 'o-clock',
'row' => false,
]))->render() ?>
<div class="col-span-2 text-center">Rolle</div>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_role',
'text' => 'Tank',
'color' => 'priest',
'icon_yes' => 'o-shield-exclamation',
'row' => false,
]))->render() ?>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_role',
'text' => 'Heal',
'color' => 'priest',
'icon_yes' => 'o-heart',
'row' => false,
]))->render() ?>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_role',
'text' => 'Ranged',
'color' => 'priest',
'icon_yes' => 'o-bolt',
'checked' => true,
'row' => false,
]))->render() ?>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_role',
'text' => 'Melee',
'color' => 'priest',
'icon_yes' => 'o-hand-raised',
'row' => false,
]))->render() ?>
</div>
<!-- Modal Footer -->
<div class="border-t p-auto">
<button x-on:click="open = false" class="btn btn-outline btn-monk w-full">
<?= Icon::get('o-paper-airplane') ?>
<span>Status Speichern</span>
</button>
</div>
</div>
</div>
</template>
</div>

5
theme/header.php
View File

@ -21,6 +21,11 @@
<link rel="profile" href="https://gmpg.org/xfn/11">
<script src="<?= get_template_directory_uri() ?>/plugins/alpine.min.js" defer></script>
<?php wp_head(); ?>
<style>
:root{
--color-background: var(--color-deepblue);
}
</style>
</head>
<body <?php body_class('dark'); ?>>

1
theme/pages/raids.php
View File

@ -9,6 +9,7 @@ global $month;
set_sidebar_status('top', false);
$raids = Raid::where("start", ">", "$year-$month-01 00:00:00")->get();
get_header();

150
theme/pages/single_raid.php
View File

@ -2,6 +2,7 @@
use WoWPress\Frontend\Icon;
use WoWPress\Frontend\ToggleButton;
use WoWPress\Models\Character;
use WoWPress\Models\Raid;
@ -28,143 +29,72 @@ get_header();
<main id="main">
<div class="flex flex-col lg:flex-row gap-auto">
<div class="bg-glass shadow p-auto w-full lg:w-1/5 order-2 lg:order-1">
<div class="grid text-center gap-1">
<div class="bg-<?= $raid->color ?> text-black text-2xl "><?= format_date($raid->start, "EEEE") ?></div>
<div class="border border-<?= $raid->color ?>">
<div class="text-3xl p-auto "><?= format_date($raid->start, "dd. MMMM") ?></div>
</div>
<div class="border border-<?= $raid->color ?> p-2">Start: <?= format_date($raid->start, "HH:mm") ?></div>
<div class="border border-<?= $raid->color ?> p-2">Ende: <?= format_date($raid->end, "HH:mm") ?></div>
<?php if ($raid->difficulty) : ?>
<div class="border border-<?= $raid->color ?> p-2"><?= $raid->difficulty ?></div>
<?php endif; ?>
<h3 class="text-xl font-bold text-center">Bosse</h3>
<div class="grid gap-auto">
<button class="btn btn-outline btn-alliance">Alle</button>
<button class="btn btn-outline btn-priest">Fahrs'tuhl der Raidzerstörer</button>
<button class="btn btn-outline btn-priest">Hogger</button>
<button class="btn btn-outline btn-priest">Sylvanas linker Zeh</button>
<button class="btn btn-outline btn-priest">RC Loot Council (Endboss)</button>
</div>
</div>
<div class="w-full flex flex-col gap-auto order-3 lg:order-2">
<div class="bg-glass shadow p-auto">
<h3 class="text-xl font-bold">Informationen:</h3>
</div>
<div class="flex flex-col lg:flex-row gap-auto">
<div class="bg-glass shadow p-auto flex flex-col gap-auto">
<h3 class="text-xl font-bold text-center">Bosse</h3>
<div class="grid gap-auto">
<button class="btn btn-outline btn-alliance">Alle</button>
<button class="btn btn-outline btn-priest">Fahrs'tuhl der Raidzerstörer</button>
<button class="btn btn-outline btn-priest">Hogger</button>
<button class="btn btn-outline btn-priest">Sylvanas linker Zeh</button>
<button class="btn btn-outline btn-priest">RC Loot Council (Endboss)</button>
<div class="bg-glass shadow p-auto w-full lg:w-1/5">
<div class="grid text-center gap-1">
<div class="bg-<?= $raid->color ?> text-black text-2xl "><?= format_date($raid->start, "EEEE") ?></div>
<div class="border border-<?= $raid->color ?>">
<div class="text-3xl p-auto "><?= format_date($raid->start, "dd. MMMM") ?></div>
</div>
<div class="border border-<?= $raid->color ?> p-2">Start: <?= format_date($raid->start, "HH:mm") ?></div>
<div class="border border-<?= $raid->color ?> p-2">Ende: <?= format_date($raid->end, "HH:mm") ?></div>
<?php if ($raid->difficulty) : ?>
<div class="border border-<?= $raid->color ?> p-2"><?= $raid->difficulty ?></div>
<?php endif; ?>
</div>
</div>
<div class="bg-glass shadow p-auto w-full">
<h3 class="text-xl font-bold">Informationen:</h3>
</div>
</div>
<div class="flex flex-col lg:flex-row gap-auto">
<div class="w-full grid grid-cols-1 lg:grid-cols-4 gap-auto">
<div class="bg-glass shadow p-auto flex flex-col gap-auto">
<h3 class="text-xl font-bold text-center">Tank</h3>
<button class="btn btn-outline btn-deathknight">Zauron</button>
<button class="btn btn-outline btn-paladin">Moodyblues</button>
</div>
<div class="bg-glass shadow p-auto flex flex-col gap-auto">
<h3 class="text-xl font-bold text-center">Heal</h3>
<button class="btn btn-outline btn-monk">Pandacetamol</button>
<?= $raid->showSignup(Character::whereName('Pandacetamol')->first()) ?>
</div>
<div class="bg-glass shadow p-auto flex flex-col gap-auto">
<h3 class="text-xl font-bold text-center">Range</h3>
<button class="btn btn-outline btn-hunter">Bleihagel</button>
<?= $raid->showSignup(Character::whereName('Bleihagel')->first()) ?>
</div>
<div class="bg-glass shadow p-auto flex flex-col gap-auto">
<h3 class="text-xl font-bold text-center">Melee</h3>
<button class="btn btn-outline btn-shaman">Yorndar</button>
<?= $raid->showSignup(Character::whereName('Moodyblues')->first()) ?>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-auto w-full lg:w-1/5 order-1 lg:order-3">
<div class="bg-glass shadow p-auto flex flex-col gap-auto">
<h3 class="text-xl font-bold text-center">Status</h3>
<div class="text-center text-monk flex flex-row gap-auto justify-center p-auto border border-monk">
<?= Icon::get('c-check') ?>
<span>Angemeldet</span>
<div class="bg-glass shadow p-auto">
<div class="flex flex-col gap-auto">
<h3 class="text-xl font-bold text-center">Status</h3>
<?= $raid->showSignup(Character::first()) ?>
</div>
</div>
<div class="bg-glass shadow p-auto flex flex-col gap-auto">
<h3 class="text-xl font-bold text-center">Status ändern</h3>
<div class="grid grid-cols-2 gap-auto">
<div class="col-span-2 text-center">Anwesenheit</div>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_status',
'text' => 'Anwesend',
'color' => 'monk',
'icon_yes' => 'o-check-circle',
'row' => false,
]))->render() ?>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_status',
'text' => 'Abwesend',
'color' => 'deathknight',
'icon_yes' => 'o-x-circle',
'row' => false,
]))->render() ?>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_status',
'text' => 'Ersatzbank',
'color' => 'druid',
'icon_yes' => 'o-question-mark-circle',
'row' => false,
]))->render() ?>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_status',
'text' => 'Verspätet',
'color' => 'demonhunter',
'icon_yes' => 'o-clock',
'row' => false,
]))->render() ?>
<div class="col-span-2 text-center">Rolle</div>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_role',
'text' => 'Tank',
'color' => 'priest',
'icon_yes' => 'o-shield-exclamation',
'row' => false,
]))->render() ?>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_role',
'text' => 'Heal',
'color' => 'priest',
'icon_yes' => 'o-heart',
'row' => false,
]))->render() ?>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_role',
'text' => 'Ranged',
'color' => 'priest',
'icon_yes' => 'o-bolt',
'row' => false,
]))->render() ?>
<?= (new ToggleButton([
'type' => 'radio',
'name' => 'raid_role',
'text' => 'Melee',
'color' => 'priest',
'icon_yes' => 'o-hand-raised',
'row' => false,
]))->render() ?>
</div>
<button class="btn btn-outline btn-monk">
<?=Icon::get('o-paper-airplane')?>
<span>Status Speichern</span>
</button>
</div>
</div>
</div>
<div class="w-full order-4 bg-glass shadow p-auto flex flex-col gap-auto">
@ -177,7 +107,7 @@ get_header();
<button class="btn btn-outline btn-shaman">Nokin</button>
</div>
</div>
</div>
</main>
</section>
<?php

3
theme/template-parts/layout/header-content.php
View File

@ -10,7 +10,8 @@
?>
<header id="masthead">
<header id="masthead" class="bg-glass">
<div>
<?php

5
theme/wowpress/Models/Character.php
View File

@ -114,4 +114,9 @@ class Character extends Model
}
}
public function getClassButtonAttribute(){
require(get_template_directory()."/components/class-button.php");
}
}

4
theme/wowpress/Models/Raid.php
View File

@ -67,4 +67,8 @@ class Raid extends Model
return false;
}
public function showSignup(Character $character){
require(get_template_directory()."/components/raid-signup.php");
}
}