alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-07-28 17:17:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create base components button, modal .. (#331)

Browse Source 
Create base components with shared styles, as start of make ui better.
For now shoul look same but underhood new copoments are used.

This should be first PR that handle this and many more comes. I am in
rush due conflict with other ppl, but should work as i tested.

Testing again and look at structure

Main goal i have global css not scope in component die loading times and
size of elements. (Modal due nature of lit and shadow dom is exception,
maybe later find better way).

Documenting the components will happen later as base components
establish their usage.
This commit is contained in:
Mittanicz
2025-03-24 10:34:27 -07:00
committed by GitHub
parent f7c6b0d585
commit 166ef92970
11 changed files with 1544 additions and 1751 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/index.html
+46 -49
View File
@@ -48,10 +48,25 @@
/* Critical styles to prevent layout shift */
.container {
display: flex;
padding: 1rem;
max-width: 540px !important;
flex-direction: column;
gap: 1rem;
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.container__row {
display: flex;
gap: 1rem;
align-items: center;
}
.container__row--equal > * {
flex: 1 1 100%;
}
.logo-glow {
fill: url(#logo-gradient);
filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
@@ -230,15 +245,12 @@
<!-- Main container with responsive padding -->
<div class="flex justify-center items-center flex-grow">
<div class="container px-4 sm:px-6 lg:px-8 py-4 sm:py-6 lg:py-8">
<div
class="flex gap-1 items-center max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto p-2 pb-4"
>
<div class="container">
<div class="container__row">
<flag-input class="w-[20%] md:w-[15%]"></flag-input>
<username-input class="w-full"></username-input>
</div>
<div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto mt-4">
<div>
<a
target="_blank"
href="https://discord.gg/k22YrnAzGp"
@@ -252,56 +264,41 @@
<span data-i18n="main.join_discord"> Join the Discord! </span>
</a>
</div>
<div class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto mt-4">
<div>
<public-lobby class="w-full"></public-lobby>
</div>
<div
class="pt-4 flex gap-4 sm:gap-6 lg:gap-8 max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto"
>
<button
<div class="container__row container__row--equal">
<o-button
id="host-lobby-button"
data-i18n="main.create_lobby"
class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300"
>
Create Lobby
</button>
<button
title="Create Lobby"
translationKey="main.create_lobby"
block
secondary
></o-button>
<o-button
id="join-private-lobby-button"
data-i18n="main.join_lobby"
class="bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300"
>
Join Lobby
</button>
title="Join Lobby"
translationKey="main.join_lobby"
block
secondary
></o-button>
</div>
<div
class="max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto mt-4 sm:mt-6 lg:mt-8"
>
<button
id="single-player"
data-i18n="main.single_player"
class="w-full bg-blue-600 hover:bg-blue-700 text-white p-3 sm:p-4 lg:p-5 font-bold text-lg sm:text-xl lg:text-2xl rounded-lg border-none cursor-pointer transition-colors duration-300"
>
Single Player
</button>
</div>
<o-button
id="single-player"
title="Single Player"
translationKey="main.single_player"
block
></o-button>
<div
class="pt-4 flex gap-4 sm:gap-6 lg:gap-8 max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto"
>
<button
id="help-button"
data-i18n="main.instructions"
class="w-25 bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md w-full border-none cursor-pointer transition-colors duration-300"
>
Instructions
</button>
</div>
<div
class="pt-4 flex gap-4 sm:gap-6 lg:gap-8 max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl mx-auto"
>
<o-button
id="help-button"
title="Instructions"
translationKey="main.instructions"
block
secondary
></o-button>
<div class="container__row">
<select
id="lang-selector"
class="text-center appearance-none w-full bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md border-none cursor-pointer transition-colors duration-300"