mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-12 23:36:00 +00:00
refactor(frontend): update tailwind and daisyui (#34)
* removed daiyui from config * updated to tailwind4 and daisyui 5 * changed embedded mode handling * tailwind config * fix linting
This commit is contained in:
Anton Tranelis
GitHub
parent
638630404f
commit
0b3b615dec
3678
package-lock.json
generated
3678
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -12,6 +12,7 @@
|
||||
"dependencies": {
|
||||
"@directus/sdk": "^17.0.2",
|
||||
"@heroicons/react": "^2.1.1",
|
||||
"@tailwindcss/vite": "^4.0.15",
|
||||
"@types/geojson": "^7946.0.10",
|
||||
"axios": "^1.6.5",
|
||||
"date-fns": "^3.3.1",
|
||||
@ -19,7 +20,7 @@
|
||||
"react-dom": "^18.2.0",
|
||||
"react-rnd": "^10.4.1",
|
||||
"react-router-dom": "^6.23.0",
|
||||
"utopia-ui": "^3.0.78"
|
||||
"utopia-ui": "^3.0.81"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
|
||||
@ -28,8 +29,7 @@
|
||||
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
||||
"@typescript-eslint/parser": "^5.62.0",
|
||||
"@vitejs/plugin-react": "^4.0.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"daisyui": "^4.12.23",
|
||||
"daisyui": "^5.0.6",
|
||||
"eslint": "^8.24.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-config-standard": "^17.1.0",
|
||||
@ -46,7 +46,7 @@
|
||||
"eslint-plugin-security": "^3.0.1",
|
||||
"eslint-plugin-yml": "^1.14.0",
|
||||
"postcss": "^8.4.30",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"tailwindcss": "^4.0.15",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^6.2.0",
|
||||
"vite-plugin-pwa": "^0.21.1"
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
}
|
||||
|
||||
#app-content {
|
||||
height: calc(100dvh - 64px);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fadeable-div {
|
||||
|
||||
@ -64,6 +64,14 @@ function App() {
|
||||
const [layerPageRoutes, setLayerPageRoutes] = useState<any>()
|
||||
const [loading, setLoading] = useState<boolean>(true)
|
||||
|
||||
const [embedded, setEmbedded] = useState<boolean>(true)
|
||||
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams(location.search)
|
||||
const embedded = params.get('embedded')
|
||||
embedded !== 'true' && setEmbedded(false)
|
||||
}, [location])
|
||||
|
||||
useEffect(() => {
|
||||
setPermissionsApiInstance(new permissionsApi())
|
||||
setMapApiInstance(new mapApi(window.location.origin))
|
||||
@ -134,6 +142,7 @@ function App() {
|
||||
<AppShell
|
||||
assetsApi={new assetsApi('https://api.utopia-lab.org/assets/')}
|
||||
appName={map.name}
|
||||
embedded={embedded}
|
||||
>
|
||||
<Permissions
|
||||
api={permissionsApiInstance}
|
||||
|
||||
@ -35,7 +35,7 @@ export function Welcome1({ clickAction1, map }: ChapterProps) {
|
||||
</p>
|
||||
<p className='py-1'>Create your personal profile and place it on the map.</p>
|
||||
<div className='grid'>
|
||||
<label className='btn place-self-end mt-4' onClick={() => clickAction1!()}>
|
||||
<label className='btn btn-primary place-self-end mt-4' onClick={() => clickAction1!()}>
|
||||
Close
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import 'tailwindcss';
|
||||
@plugin "daisyui" {
|
||||
themes: light --default, dark --prefersdark, valentine, retro, aqua, cyberpunk, caramellatte, abyss, silk;
|
||||
}
|
||||
|
||||
@theme {
|
||||
--animate-fade: fadeOut 1s ease-in-out;
|
||||
}
|
||||
|
||||
@ -80,7 +80,7 @@ export const Calendar = () => {
|
||||
className={`cursor-pointer flex items-center justify-center font-semibold h-8 w-8 rounded-full hover:text-white ${
|
||||
isSameMonth(day, today) ? 'text-current' : 'text-gray-500'
|
||||
} ${!isToday(day) && 'hover:bg-primary-content'} ${
|
||||
isToday(day) && 'bg-primary !text-white'
|
||||
isToday(day) && 'bg-primary text-white!'
|
||||
}`}
|
||||
>
|
||||
{format(day, 'd')}
|
||||
|
||||
@ -70,7 +70,7 @@ export const Landingpage = () => {
|
||||
|
||||
return (
|
||||
<MapOverlayPage
|
||||
className={`!rounded-none overflow-y-auto !p-0 fadeable-div flex-none ${isLandingpageVisible ? '' : 'div-hidden'}`}
|
||||
className={`rounded-none! overflow-y-auto p-0! fadeable-div flex-none ${isLandingpageVisible ? '' : 'div-hidden'}`}
|
||||
card={false}
|
||||
>
|
||||
<div className='hero min-h-full text-base'>
|
||||
@ -81,7 +81,7 @@ export const Landingpage = () => {
|
||||
>
|
||||
<div className='min-h-[calc(100vh-60px)] flex flex-row items-center justify-center '>
|
||||
<div
|
||||
className={`max-w-md text-center bg-black p-8 m-8 bg-opacity-50 text-white backdrop-blur-sm rounded-xl movable-div ${isBoxVisible ? '' : 'move-out-left'}`}
|
||||
className={`max-w-md text-center bg-black p-8 m-8 bg-opacity-50 text-white backdrop-blur-xs rounded-xl movable-div ${isBoxVisible ? '' : 'move-out-left'}`}
|
||||
>
|
||||
<h1 className='text-5xl font-bold'>Utopia Game</h1>
|
||||
<p className='py-6'>
|
||||
@ -90,7 +90,7 @@ export const Landingpage = () => {
|
||||
erkunden, Fähigkeiten zu entwickeln und die Welt um sie herum zu gestalten. Bist
|
||||
du bereit, Teil dieser Revolution zu werden?{' '}
|
||||
</p>
|
||||
<div className='btn !text-white btn-primary' onClick={startGame}>
|
||||
<div className='btn text-white! btn-primary' onClick={startGame}>
|
||||
Play ▶
|
||||
</div>
|
||||
</div>
|
||||
@ -112,7 +112,7 @@ export const Landingpage = () => {
|
||||
<ul className='my-8 grid gap-y-8 gap-x-12 sm:grid-cols-2 lg:grid-cols-3'>
|
||||
{features?.map((item, idx) => (
|
||||
<li key={idx} className='space-y-3'>
|
||||
<div className='w-12tw-card tw-card-body h-12 mx-auto !bg-transparent text-indigo-600 rounded-full flex items-center justify-center text-5xl'>
|
||||
<div className='w-12tw-card tw-card-body h-12 mx-auto bg-transparent! text-indigo-600 rounded-full flex items-center justify-center text-5xl'>
|
||||
{item.symbol}
|
||||
</div>
|
||||
<h4 className='text-lg font-semibold'>{item.heading}</h4>
|
||||
@ -123,7 +123,7 @@ export const Landingpage = () => {
|
||||
</section>
|
||||
|
||||
<section className='py-14 min-h-[40em] p-8 flex h-full items-center justify-center mb-28'>
|
||||
<div className='max-w-screen-xl mx-auto text-center'>
|
||||
<div className='max-w-(--breakpoint-xl) mx-auto text-center'>
|
||||
<div className='max-w-xl mx-auto'>
|
||||
<h3 className='text-3xl font-semibold sm:text-4xl'>Meet our team</h3>
|
||||
<p className='mt-3'>
|
||||
|
||||
@ -69,78 +69,80 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
|
||||
useEffect(() => {}, [apis])
|
||||
|
||||
return (
|
||||
<UtopiaMap
|
||||
geo={map.geo}
|
||||
zoom={map.zoom || 5}
|
||||
center={map.center ? [map.center?.coordinates[1], map.center?.coordinates[0]] : [50.6, 9.5]}
|
||||
height='100%'
|
||||
width='100%'
|
||||
showFilterControl={map.show_filter_control}
|
||||
showLayerControl={map.show_layer_control}
|
||||
showGratitudeControl={map.show_gratitude_control}
|
||||
donationWidget={map.donation_widget}
|
||||
>
|
||||
{layers &&
|
||||
apis &&
|
||||
layers.map((layer) => (
|
||||
<Layer
|
||||
id={layer.id}
|
||||
key={layer.id}
|
||||
name={layer.name}
|
||||
menuIcon={'https://api.utopia-lab.org/assets/' + layer.menuIcon}
|
||||
menuText={layer.menuText}
|
||||
menuColor={layer.menuColor}
|
||||
markerIcon={layer.markerIcon}
|
||||
markerShape={layer.markerShape}
|
||||
userProfileLayer={layer.userProfileLayer}
|
||||
markerDefaultColor={layer.menuColor}
|
||||
markerDefaultColor2={
|
||||
layer.markerDefaultColor2 ? layer.markerDefaultColor2 : 'RGBA(35, 31, 32, 0.2)'
|
||||
}
|
||||
itemType={layer.itemType}
|
||||
customEditLink='/edit-item'
|
||||
customEditParameter='id'
|
||||
public_edit_items={layer.public_edit_items}
|
||||
listed={layer.listed}
|
||||
api={apis.find((api) => api.id === layer.id)?.api}
|
||||
>
|
||||
<ItemView>
|
||||
{layer.itemType.show_start_end && <StartEndView></StartEndView>}
|
||||
{layer.itemType.show_profile_button && (
|
||||
<PopupButton url={'/item'} parameterField={'id'} text={'Profile'} />
|
||||
)}
|
||||
{layer.itemType.show_text && <TextView truncate></TextView>}
|
||||
</ItemView>
|
||||
<ItemForm>
|
||||
{layer.itemType.show_name_input && (
|
||||
<PopupTextInput dataField='name' placeholder='Name'></PopupTextInput>
|
||||
)}
|
||||
{layer.itemType.show_start_end_input && <PopupStartEndInput></PopupStartEndInput>}
|
||||
{layer.itemType.show_text_input && (
|
||||
<div className='mt-4'>
|
||||
<PopupTextAreaInput
|
||||
dataField='text'
|
||||
placeholder={'Text ...'}
|
||||
style='tw-h-40'
|
||||
></PopupTextAreaInput>
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
// layer.public_edit_items && <PopupCheckboxInput dataField={'public_edit'} label={'public edit'}/>
|
||||
<>
|
||||
<UtopiaMap
|
||||
geo={map.geo}
|
||||
zoom={map.zoom || 5}
|
||||
center={map.center ? [map.center?.coordinates[1], map.center?.coordinates[0]] : [50.6, 9.5]}
|
||||
height='100%'
|
||||
width='100%'
|
||||
showFilterControl={map.show_filter_control}
|
||||
showLayerControl={map.show_layer_control}
|
||||
showGratitudeControl={map.show_gratitude_control}
|
||||
donationWidget={map.donation_widget}
|
||||
>
|
||||
{layers &&
|
||||
apis &&
|
||||
layers.map((layer) => (
|
||||
<Layer
|
||||
id={layer.id}
|
||||
key={layer.id}
|
||||
name={layer.name}
|
||||
menuIcon={'https://api.utopia-lab.org/assets/' + layer.menuIcon}
|
||||
menuText={layer.menuText}
|
||||
menuColor={layer.menuColor}
|
||||
markerIcon={layer.markerIcon}
|
||||
markerShape={layer.markerShape}
|
||||
userProfileLayer={layer.userProfileLayer}
|
||||
markerDefaultColor={layer.menuColor}
|
||||
markerDefaultColor2={
|
||||
layer.markerDefaultColor2 ? layer.markerDefaultColor2 : 'RGBA(35, 31, 32, 0.2)'
|
||||
}
|
||||
{layer.itemType.custom_text && (
|
||||
<div className='flex justify-center'>
|
||||
<p>{layer.itemType.custom_text}</p>
|
||||
</div>
|
||||
)}
|
||||
{layer.item_presets &&
|
||||
Object.entries(layer.item_presets).map((ip: any) => (
|
||||
<input key={ip[0]} type='hidden' id={ip[0]} name={ip[0]} value={ip[1]} />
|
||||
))}
|
||||
</ItemForm>
|
||||
</Layer>
|
||||
))}
|
||||
</UtopiaMap>
|
||||
itemType={layer.itemType}
|
||||
customEditLink='/edit-item'
|
||||
customEditParameter='id'
|
||||
public_edit_items={layer.public_edit_items}
|
||||
listed={layer.listed}
|
||||
api={apis.find((api) => api.id === layer.id)?.api}
|
||||
>
|
||||
<ItemView>
|
||||
{layer.itemType.show_start_end && <StartEndView></StartEndView>}
|
||||
{layer.itemType.show_profile_button && (
|
||||
<PopupButton url={'/item'} parameterField={'id'} text={'Profile'} />
|
||||
)}
|
||||
{layer.itemType.show_text && <TextView truncate></TextView>}
|
||||
</ItemView>
|
||||
<ItemForm>
|
||||
{layer.itemType.show_name_input && (
|
||||
<PopupTextInput dataField='name' placeholder='Name'></PopupTextInput>
|
||||
)}
|
||||
{layer.itemType.show_start_end_input && <PopupStartEndInput></PopupStartEndInput>}
|
||||
{layer.itemType.show_text_input && (
|
||||
<div className='mt-4'>
|
||||
<PopupTextAreaInput
|
||||
dataField='text'
|
||||
placeholder={'Text ...'}
|
||||
style='tw-h-40'
|
||||
></PopupTextAreaInput>
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
// layer.public_edit_items && <PopupCheckboxInput dataField={'public_edit'} label={'public edit'}/>
|
||||
}
|
||||
{layer.itemType.custom_text && (
|
||||
<div className='flex justify-center'>
|
||||
<p>{layer.itemType.custom_text}</p>
|
||||
</div>
|
||||
)}
|
||||
{layer.item_presets &&
|
||||
Object.entries(layer.item_presets).map((ip: any) => (
|
||||
<input key={ip[0]} type='hidden' id={ip[0]} name={ip[0]} value={ip[1]} />
|
||||
))}
|
||||
</ItemForm>
|
||||
</Layer>
|
||||
))}
|
||||
</UtopiaMap>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -9,8 +9,4 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [import('daisyui')],
|
||||
daisyui: {
|
||||
themes: ['light', 'dark', 'cupcake', 'retro', 'cyberpunk', 'aqua'],
|
||||
},
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
// vite.config.js
|
||||
import { VitePWA } from 'vite-plugin-pwa'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
@ -10,7 +9,8 @@ export default defineConfig({
|
||||
port: 5174
|
||||
},
|
||||
plugins: [
|
||||
react()
|
||||
react(),
|
||||
tailwindcss(),
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user