Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Antti/frontend_fix #15

Merged
merged 24 commits into from
Mar 17, 2024
Merged

Antti/frontend_fix #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
b62d95c
Updated packages
anttiasmala Mar 3, 2024
9ef7e6f
Added styles so text will not go over boards when viewing by mobile
anttiasmala Mar 3, 2024
aa2d37e
Removed h-5 style attribute. Does nothing
anttiasmala Mar 3, 2024
1129616
Input fields will now stay same sized and center of the website no ma…
anttiasmala Mar 3, 2024
3a35582
Changed Aku Ankka to Matti Meikäläinen to make more sense. Matti Meik…
anttiasmala Mar 3, 2024
b922e3d
Moved Button components out from <li> parent
anttiasmala Mar 3, 2024
bb9a459
Moved a few stylers from wrapping Div to the Li element
anttiasmala Mar 3, 2024
420b918
Changed a few margins to make it better
anttiasmala Mar 3, 2024
21a19c1
Added underline when moving cursor to edit button. This changes Div's…
anttiasmala Mar 3, 2024
cbb2fd8
Added overflow-auto to DeletingModal.tsx so if text is very long it d…
anttiasmala Mar 3, 2024
dd0ebcd
Added a few styling changes to make it better
anttiasmala Mar 3, 2024
73267b2
Added meta element for mobile views
anttiasmala Mar 4, 2024
b9f2910
Changed background color to white
anttiasmala Mar 4, 2024
3d5df4d
Added a new animation opacity
anttiasmala Mar 5, 2024
bb22f6c
Changed width animation to opacity. Width animation does not work tha…
anttiasmala Mar 5, 2024
688b4f3
Added w-full for mobile devices for Gift list. Added overflow-wrap va…
anttiasmala Mar 5, 2024
452ba0e
Added a little margin to left on Gift list wrapper to make a small gap
anttiasmala Mar 5, 2024
ac22183
Changed resizes-visual to resizes-content to make inputs movable alwa…
anttiasmala Mar 5, 2024
c366ffa
Changed margin-left -> padding-left to fix a minimalistic gap that ma…
anttiasmala Mar 5, 2024
97c8ea2
Added overflow-wrap to DeleteModal too to make gift not be scrollable
anttiasmala Mar 5, 2024
9147ece
Removed width=device-width. Didn't seem to have any impact
anttiasmala Mar 13, 2024
02e3c25
Changed styling attributes to make elements being align even
anttiasmala Mar 13, 2024
b356dad
Changed w-[20rem] to max-w-xl in index.ts
anttiasmala Mar 14, 2024
ab6f09b
Replace js underline and line-through with css solution
samuliasmala Mar 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/DeleteModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function DeleteModal({
<TitleText className="row-start-1 row-end-1 ps-5 font-bold">
Deleting:
</TitleText>
<p className="row-start-2 row-end-2 ps-5 pt-5 text-lg w-full h-full font-bold">
<p className="row-start-2 row-end-2 ps-5 pt-5 text-lg w-full h-full font-bold [overflow-wrap:anywhere]">
{gift.receiver} - {gift.gift}
</p>
<Button className="border border-yellow-500 mt-3 p-0 row-start-3 row-end-3 col-start-1 col-end-1 w-[66px] h-[66px]">
Expand Down
406 changes: 198 additions & 208 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 12 additions & 1 deletion pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,17 @@
import '~/styles/globals.css';
import type { AppProps } from 'next/app';
import Head from 'next/head';

export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
return (
<>
<Head>
<meta
name="viewport"
content="initial-scale=1.0, interactive-widget=resizes-content"
/>
</Head>
<Component {...pageProps} />
</>
);
}
2 changes: 1 addition & 1 deletion pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default function Document() {
return (
<Html lang="fi">
<Head />
<body className="bg-gray-300">
<body className="bg-white">
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Olisiko tämän hyvä olla erivärinen kuin "tavallinen" taustaväri?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Annetaan olla näin kun teit nyt. Ulla tekee pian designiin visuaalisia parannuksia, niin muokataan tätä sitten tarvittaessa.

<Main />
<NextScript />
</body>
Expand Down
68 changes: 31 additions & 37 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,8 +106,8 @@ export default function Home() {

return (
<main className={`bg-white w-full max-w-full h-screen ${inter.className}`}>
<div className="justify-center grid h-5">
<div className="mt-5">
<div className="justify-center grid">
<div className="mt-5 pl-8 pr-8">
<form onSubmit={(e) => void handleSubmit(e)}>
<TitleText>Lahjalistaidea</TitleText>
<div className="pt-4 grid">
Expand All @@ -116,7 +116,7 @@ export default function Home() {
onChange={(event) => setNewReceiver(event.target.value)}
autoComplete="off"
type="text"
placeholder="Aku Ankka"
placeholder="Matti Meikäläinen"
name="receiver"
value={newReceiver}
/>
Expand All @@ -141,48 +141,42 @@ export default function Home() {
<Button type="submit">Lisää</Button>
</form>
</div>
<div className="mt-3">
<div className="pl-8 pr-8 mt-3 w-full max-w-xl">
<TitleText>Lahjaideat</TitleText>
<div>
{giftData.map((giftItem) => (
<div
key={`${giftItem.uuid}_divbutton`}
className="animate-width whitespace-nowrap overflow-hidden"
className="animate-opacity"
>
<li key={giftItem.uuid}>
<li
key={giftItem.uuid}
className="[overflow-wrap:anywhere] hover-target"
>
{giftItem.receiver} - {giftItem.gift}
<Button
onMouseOver={(e) =>
e.currentTarget.parentElement?.setAttribute(
'class',
'line-through',
)
}
onMouseOut={(e) =>
e.currentTarget.parentElement?.removeAttribute('class')
}
key={`${giftItem.uuid}_deletebutton`}
className="ms-5 p-0 w-16 h-8 hover:text-red-600 pointer-events-auto"
onClick={() => {
setDeleteModalGiftData(giftItem);
setIsDeleteModalOpen(true);
}}
type="button"
>
Poista
</Button>
<Button
key={`${giftItem.uuid}_editbutton`}
className="ms-3 p-0 w-20 h-8 hover:text-yellow-400"
onClick={() => {
setEditModalGiftData(giftItem);
setIsEditModalOpen(true);
}}
type="button"
>
Muokkaa
</Button>
</li>
<Button
key={`${giftItem.uuid}_deletebutton`}
className="m-3 p-0 w-16 h-8 hover:text-red-600 pointer-events-auto trigger-line-through"
onClick={() => {
setDeleteModalGiftData(giftItem);
setIsDeleteModalOpen(true);
}}
type="button"
>
Poista
</Button>
<Button
key={`${giftItem.uuid}_editbutton`}
className="m-3 ml-0 p-0 w-20 h-8 hover:text-yellow-400 trigger-underline"
onClick={() => {
setEditModalGiftData(giftItem);
setIsEditModalOpen(true);
}}
type="button"
>
Muokkaa
</Button>
</div>
))}
{isEditModalOpen && editModalGiftData && (
Expand Down
8 changes: 8 additions & 0 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

.hover-target:has(~ .trigger-line-through:hover) {
@apply line-through;
}

.hover-target:has(~ .trigger-underline:hover) {
@apply underline;
}
9 changes: 9 additions & 0 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,12 +59,21 @@ const config: Config = {
backgroundColor: 'blue',
},
},
opacity: {
'0%': {
opacity: '0',
},
'100%': {
opacity: '1',
},
},
},
animation: {
highlight: 'highlight 1200ms ease-in-out',
rainbowBackGroundColor: 'rainbowBackGroundColor 1000ms',
background: 'background 1200ms ease-in-out',
width: 'width 1200ms',
opacity: 'opacity 800ms',
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
Expand Down
Loading