Skip to content

Commit 7697401

Browse files
carlosjorgercarlosjorger
committed
🐞 fix: styles on examples
1 parent 1a774da commit 7697401

File tree

3 files changed

+125
-78
lines changed

3 files changed

+125
-78
lines changed

‎docs/src/components/examples/pages/single-vertical-list-component.astro‎

Lines changed: 102 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -16,102 +16,144 @@ const i18n = getI18N({ currentLocale });
1616
1717
const verticalList=`
1818
<script setup lang="ts">
19-
import { ref } from "vue";
19+
import { ref, watchEffect } from "vue";
2020
import { useDragAndDrop } from "fluid-dnd/vue";
21-
import type { Pokemon } from "./Pokemon";
21+
import type { Pokemon } from "../Pokemon";
2222
import PokemonComponent from "./PokemonComponent.vue";
2323
import { fetchPokemons } from "@/server/pokemonServer";
24+
import touchDelaySilder from "./touchDelaySilder.vue";
25+
import { isMobileDevice } from "@/utils/mobile.ts";
2426
2527
const pokemons = ref([] as Pokemon[]);
2628
pokemons.value = await fetchPokemons(3);
27-
const [ parent ] = useDragAndDrop(pokemons,{
28-
draggingClass: "dragging-pokemon"
29+
const delay = ref(150);
30+
let parent = ref<HTMLElement | undefined>();
31+
32+
watchEffect(() => {
33+
const dragAndDrop = useDragAndDrop(pokemons, {
34+
draggingClass: "dragging-pokemon",
35+
delayBeforeTouchMoveEvent: delay.value
36+
});
37+
parent = dragAndDrop[0];
2938
});
3039
</script>
3140
<template>
32-
<div class="flex max-sm:justify-center items-start">
33-
<div
34-
ref="parent"
35-
class="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block"
36-
>
37-
<PokemonComponent
38-
v-for="(pokemon, index) in pokemons"
39-
:key="pokemon.name"
40-
:index="index"
41-
:pokemon="pokemon"
42-
/>
43-
</div>
44-
</div>
41+
<div class="flex-col gap-4">
42+
<div class="flex max-sm:justify-center items-start">
43+
<div
44+
ref="parent"
45+
class="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block"
46+
>
47+
<PokemonComponent
48+
v-for="(pokemon, index) in pokemons"
49+
:key="pokemon.name"
50+
:index="index"
51+
:pokemon="pokemon"
52+
/>
53+
</div>
54+
</div>
55+
<touchDelaySilder v-if="isMobileDevice()" v-model="delay" />
56+
</div>
4557
</template>
4658
`
4759
const verticalListSvelteCode=`
4860
<script lang="ts">
4961
import { useDragAndDrop } from "fluid-dnd/svelte";
50-
import type { Pokemon } from "./Pokemon";
62+
import type { Pokemon } from "../Pokemon";
5163
import PokemonComponent from "./PokemonComponent.svelte";
5264
import { fetchPokemons } from "@/server/pokemonServer";
65+
import TouchDelaySilder from "./touchDelaySilder.svelte";
66+
import { isMobileDevice } from "@/utils/mobile.ts";
5367
68+
let delay = $state(150);
5469
let pokemons = $state([] as Pokemon[]);
70+
let parent: HTMLElement;
5571
fetchPokemons(3).then((newPokemons) => {
5672
pokemons.push(...newPokemons);
5773
});
58-
const [ parent ] = useDragAndDrop(pokemons, {
59-
draggingClass: "dragging-pokemon",
60-
});
61-
</script>
74+
const changeDelay = (newDelay:number) => {
75+
delay = newDelay;
76+
if (parent) {
77+
dragAndDropAction(parent);
78+
}
79+
}
80+
const [ dragAndDropAction ] = $derived(useDragAndDrop(pokemons, {
81+
draggingClass: "dragging-pokemon",
82+
delayBeforeTouchMoveEvent: delay
83+
}));
84+
85+
</script>
86+
<div class="flex-col gap-4">
6287
<div class="flex max-sm:justify-center items-start">
6388
<div
64-
use:parent
89+
bind:this={parent}
90+
use:dragAndDropAction
6591
class="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block"
6692
>
67-
{#each pokemons as pokemon, index (pokemon.name)}
68-
<PokemonComponent
69-
index={index}
70-
pokemon={pokemon}
71-
/>
72-
{/each}
93+
{#each pokemons as pokemon, index (pokemon.name)}
94+
<PokemonComponent
95+
index={index}
96+
pokemon={pokemon}
97+
/>
98+
{/each}
7399
</div>
74100
</div>
101+
{#if isMobileDevice()}
102+
<TouchDelaySilder {changeDelay} />
103+
{/if}
104+
</div>
75105
`
76106
const verticalListReact = `
77107
import { useDragAndDrop } from "fluid-dnd/react";
78108
import type { Pokemon } from "../Pokemon";
79109
import { fetchPokemons } from "@/server/pokemonServer";
80110
import { PokemonComponent } from "./PokemonComponent";
81-
import { useEffect } from "react";
111+
import { useEffect, useState } from "react";
112+
import { TouchDelaySilder } from "./TouchDelaySilder.tsx";
113+
import { isMobileDevice } from "@/utils/mobile.ts";
82114
83115
export const SingleVerticalListOfPokemons: React.FC = () => {
84-
const [ parent, listOfPokemons, setPokemons ] = useDragAndDrop<Pokemon, HTMLDivElement>([], {
85-
draggingClass: "dragging-pokemon",
86-
});
87-
useEffect(() => {
88-
const fetchPokemonse = async () => {
89-
const newPokemons = await fetchPokemons(3);
90-
setPokemons(newPokemons);
91-
}
92-
fetchPokemonse();
93-
}, [])
116+
const [delay, setDelay] = useState(150);
117+
const [isMobile, setIsMobile] = useState(false);
118+
const [parent, listOfPokemons, setPokemons] = useDragAndDrop<Pokemon, HTMLDivElement>([], {
119+
draggingClass: "dragging-pokemon",
120+
delayBeforeTouchMoveEvent: delay
121+
});
94122
95-
return (
96-
<div className="flex max-sm:justify-center items-start">
97-
<div
98-
ref={parent}
99-
className="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block"
100-
>
101-
{
102-
listOfPokemons.map((pokemon, index) => (
103-
<PokemonComponent
104-
key={pokemon.name}
105-
className="min-w-44 max-sm:min-w-32"
106-
index={index}
107-
pokemon={pokemon}
108-
/>
109-
))
110-
}
111-
</div>
112-
</div>
113-
)
114-
}
123+
useEffect(() => {
124+
const fetchPokemonse = async () => {
125+
const newPokemons = await fetchPokemons(3);
126+
setPokemons(newPokemons);
127+
};
128+
fetchPokemonse();
129+
}, []);
130+
131+
useEffect(() => {
132+
setIsMobile(isMobileDevice());
133+
}, []);
134+
return (
135+
<div className="flex-col gap-4">
136+
<div className="flex max-sm:justify-center items-start">
137+
<div
138+
ref={parent}
139+
className="bg-gray-200/60 border-solid border-black/40 rounded-2xl w-60 border-4 p-4 block"
140+
>
141+
{listOfPokemons.map((pokemon, index) => (
142+
<PokemonComponent key={pokemon.name} index={index} pokemon={pokemon} />
143+
))}
144+
</div>
145+
</div>
146+
{isMobile && (
147+
<TouchDelaySilder
148+
value={delay}
149+
changeDelay={(newDelay) => {
150+
setDelay(newDelay);
151+
}}
152+
/>
153+
)}
154+
</div>
155+
);
156+
};
115157
`
116158
const fileName = 'SingleVerticalListOfPokemons';
117159
---

‎docs/src/components/examples/react/css/Pokemon.css‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
.pokemon {
2-
margin-top: 0rem !important;
3-
background-image: url("../../../../assets/pokemon-bg.svg");
4-
transition: background-color 200ms ease-in;
5-
transition: opacity 200ms ease;
2+
margin-top: 0rem !important;
3+
background-image: url("../../../../assets/pokemon-bg.svg");
4+
transition: background-color 200ms ease-in;
5+
transition: opacity 200ms ease;
66
}
77
:is([data-theme="dark"] .bulbasaur.dragging-pokemon),
88
:is([data-theme="dark"] .ivysaur.dragging-pokemon),
@@ -13,10 +13,10 @@
1313
:is([data-theme="dark"] .treecko.dragging-pokemon),
1414
:is([data-theme="dark"] .grovyle.dragging-pokemon),
1515
:is([data-theme="dark"] .sceptile.dragging-pokemon) {
16-
background-color: #5ec8a3 !important;
16+
background-color: #5ec8a3 !important;
1717
}
18-
:global(.pokemon.removed){
19-
opacity: 0;
18+
:global(.pokemon.removed) {
19+
opacity: 0;
2020
}
2121

2222
.bulbasaur.dragging-pokemon,
@@ -28,7 +28,7 @@
2828
.treecko.dragging-pokemon,
2929
.grovyle.dragging-pokemon,
3030
.sceptile.dragging-pokemon {
31-
background-color: #84efc9 !important;
31+
background-color: #84efc9 !important;
3232
}
3333

3434
:is([data-theme="dark"] .charmander.dragging-pokemon),
@@ -40,7 +40,7 @@
4040
:is([data-theme="dark"] .torchic.dragging-pokemon),
4141
:is([data-theme="dark"] .combusken.dragging-pokemon),
4242
:is([data-theme="dark"] .blaziken.dragging-pokemon) {
43-
background-color: #b45951 !important;
43+
background-color: #b45951 !important;
4444
}
4545

4646
.charmander.dragging-pokemon,
@@ -52,7 +52,7 @@
5252
.torchic.dragging-pokemon,
5353
.combusken.dragging-pokemon,
5454
.blaziken.dragging-pokemon {
55-
background-color: #ff9084 !important;
55+
background-color: #ff9084 !important;
5656
}
5757

5858
:is([data-theme="dark"] .squirtle.dragging-pokemon),
@@ -64,7 +64,7 @@
6464
:is([data-theme="dark"] .mudkip.dragging-pokemon),
6565
:is([data-theme="dark"] .marshtomp.dragging-pokemon),
6666
:is([data-theme="dark"] .swampert.dragging-pokemon) {
67-
background-color: #6dbafe !important;
67+
background-color: #6dbafe !important;
6868
}
6969

7070
.squirtle.dragging-pokemon,
@@ -76,11 +76,14 @@
7676
.mudkip.dragging-pokemon,
7777
.marshtomp.dragging-pokemon,
7878
.swampert.dragging-pokemon {
79-
background-color: #66b7fd !important;
79+
background-color: #66b7fd !important;
8080
}
81-
.pokemon-generation{
82-
transition: background-color 150ms ease-in;
81+
.pokemon-generation {
82+
transition: background-color 150ms ease-in;
83+
}
84+
.pokemon-generation.hover {
85+
background-color: rgb(236 238 242 / 0.8) !important;
86+
}
87+
.temp-child {
88+
margin-top: 0rem !important;
8389
}
84-
.pokemon-generation.hover{
85-
background-color: rgb(236 238 242 / 0.8) !important;
86-
}

‎docs/src/components/examples/svelte/SingleVerticalListOfPokemons.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,5 +45,7 @@
4545
</div>
4646

4747
<style>
48-
48+
:global(.temp-child) {
49+
margin-top: 0rem !important;
50+
}
4951
</style>

0 commit comments

Comments
 (0)