RevelaNetwork/Revelav3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add input expand animation and fix Japanese header on mobile

Browse source
This commit is contained in:
rift 2023-12-15 17:17:52 -06:00
parent 83d85a037e
commit 8a26062442
2 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Header.tsx
View file

@ -23,7 +23,7 @@ export function Header() {
src="/logo.png" src="/logo.png"
className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]" className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"
></img> ></img>
<h1 className="font-roboto text-4xl font-bold text-navbar-text-color"> <h1 className="font-roboto text-2xl font-bold text-navbar-text-color md:text-4xl">
{t("header.title")} {t("header.title")}
</h1> </h1>
</div> </div>

12
src/pages/Home.tsx
View file

@ -10,16 +10,18 @@ export function Home() {
<HeaderRoute> <HeaderRoute>
<div class="flex h-full items-center justify-center"> <div class="flex h-full items-center justify-center">
<input <input
onFocus={(e) => { onFocus={() => {
setIsFocused(true); setIsFocused(true);
}} }}
onBlur={(e) => { onBlur={() => {
setIsFocused(false); setIsFocused(false);
}} }}
type="text" type="text"
class="font-roboto h-14 w-80 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none" className={`font-roboto h-14 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none ${
placeholder={isFocused ? "" : t("home.placeholder")} isFocused ? "w-full md:w-3/12" : "w-full md:w-80"
></input> } transition-all duration-300`}
placeholder={isFocused ? "" : t('home.placeholder')}
/>
</div> </div>
</HeaderRoute> </HeaderRoute>
); );