Antti/frontend_fix #15

anttiasmala · 2024-03-03T15:01:50Z

Tein nopean "korjauksen" fronttiin. Sivusta tuli melko käyttökelvoton, jos oli liian pitkä nimi ja/tai lahja. Tämä ei ole hieno toteutus, mutta nyt sivua pitäisi olla mahdollista käyttää 😄

Edit: Vielä sen voi rikkoa, jos laittaa todella paljon merkkejä, mutta pitäisi olla silti varmempi 😄

…tter what. Works in mobile and computer version

…äläinen is a Finnish version of John Doe

… classn data, not <li> element's. This is not permanent change

…oes not break the site

vercel · 2024-03-03T15:01:55Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lahjalista	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 14, 2024 7:51pm

samuliasmala

Mielestäni pakko-rivitys kuten alin lahja kuvassa on parempi kuin scrolli. Sen saa tehtyä overflow-wrap: anywhere; css-komennolla (ei taida löytyä Tailwindistä). Kun sen lisää li elementille, niin samalla whitespace-nowrap overflow-auto luokat pitää ottaa pois.

Tässä ohje, miten toimia jos css-komento ei löydy Tailwindistä.

Lisäsin myös hieman paddingiä, reunoille, nyt mobiilissa menee aivan ruudun reunaan kiinni.

…t well if text goes to multiple rows

…lue to <li> element

…ys if text goes 'hiding'

…de site move left to right

anttiasmala · 2024-03-05T09:41:04Z

pages/_app.tsx

+  return (
+    <>
+      <Head>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, interactive-widget=resizes-visual"
+        />
+      </Head>
+      <Component {...pageProps} />
+    </>
+  );


Onko tämmöinen suotavaa? Tämä korjasi ongelman, jonka kuvasin Discordissa. En löytänyt / keksinyt tähän mitään muuta ratkaisua kuin tämän

Ilmeisesti joku näistä korjasin ongelman:

content="width=device-width, initial-scale=1.0, interactive-widget=resizes-visual"

Tiedätkö mikä oli ratkaiseva, vai tarvittiinko kaikki?

Ilmeisesti joku näistä korjasin ongelman:

content="width=device-width, initial-scale=1.0, interactive-widget=resizes-visual"

Tiedätkö mikä oli ratkaiseva, vai tarvittiinko kaikki?

width=device-width: tämä lienee turha. En ainakaan saanut toistettua mitään eroja sen kanssa tai ilman

initial-scale=1.0: tämä on melkeinpä pakollinen. Laitan kuvan 😄

interactive-widget=resizes-visual: resizes-visual pitäisi olla resizes-content. 😄 Mutta tämä näyttäisi olevan se joka korjasi ongelman. Yritin kokeilla kaikki keinot läpi, jolla saisin toistettua jonkinongelman tuota käyttäessä. En onnistunut mitään bugeja löytämään 😄

Eli TLDR, tämä on toimiva rivi:

content="initial-scale=1.0, interactive-widget=resizes-content"

Kiitos! Täytyy sanoa että en tiedä miksi interactive-widget=resizes-content korjaa ongelman, mutta hyvä kun se tekee sen. Ja tiedoksi, että sain toistettua ongelman myös omalla puhelimellani.

anttiasmala · 2024-03-05T09:41:57Z

pages/index.tsx

@@ -141,18 +141,15 @@ export default function Home() {
            <Button type="submit">Lisää</Button>
          </form>
        </div>
-        <div className="mt-3 w-[20rem]">
+        <div className="mt-3 w-full sm:w-[20rem]">


Olisiko parempi antaa myös tietokoneilla width-arvon olla full?

anttiasmala · 2024-03-05T09:48:12Z

pages/_document.tsx

-      <body className="bg-gray-300">
+      <body className="bg-white">


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

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

anttiasmala · 2024-03-05T09:48:42Z

Nyt pitäisi olla kaikki korjattuna. Tosiaan frontti ei lähde sitten yhtään, sitä on tullut niin vähän katsottua, mutta pikku hiljaa hyvä tulee 😅

overflow-wrap: anywhere; Tämä oli hyvä lisä, kiitos!

samuliasmala · 2024-03-13T18:26:25Z

pages/_document.tsx

-      <body className="bg-gray-300">
+      <body className="bg-white">


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

samuliasmala · 2024-03-13T18:30:03Z

pages/index.tsx

+                  onMouseOver={(e) =>
+                    e.currentTarget.parentElement?.setAttribute(
+                      'class',
+                      'underline',
+                    )
+                  }
+                  onMouseOut={(e) =>
+                    e.currentTarget.parentElement?.removeAttribute('class')
+                  }
+                  className="m-3 ml-0 p-0 w-20 h-8 hover:text-yellow-400"


Näitä onMouseOver ja onMouseOut tarvitsee todella harvoin. Itse en muista koskaan käyttäneeni. Kun eikö tämänkin voi korvata hover:underline luokalla buttoniin?

Suggested change

onMouseOver={(e) =>

e.currentTarget.parentElement?.setAttribute(

'class',

'underline',

)

}

onMouseOut={(e) =>

e.currentTarget.parentElement?.removeAttribute('class')

}

className="m-3 ml-0 p-0 w-20 h-8 hover:text-yellow-400"

className="m-3 ml-0 p-0 w-20 h-8 hover:text-yellow-400 hover:underline"

Näitä onMouseOver ja onMouseOut tarvitsee todella harvoin. Itse en muista koskaan käyttäneeni. Kun eikö tämänkin voi korvata hover:underline luokalla buttoniin?

Tämän tarkoitus on ala- tai yliviivata lahja riippuen onko kursori Muokkaa- vai Poista-napin päällä.

Lyhykäisyydessään tämä asettaa lahjan div-wrapperille line-through- tai underline-arvon

className="m-3 ml-0 p-0 w-20 h-8 hover:text-yellow-400 hover:underline"

Tällä tavalla yritin itsekin ratkaista, mutta tämä tapa alleviivaa pelkästään tuon nappulan tekstin

Olisiko tässä kohtaa järkevin antaa tuon onMouseOver & onMouseOut -tavan olla vai kannattaako se poistaa?

Oho totta, en katsonut tarpeeksi tarkasti. Vähän innostuin selvittämään tuota että saako tehtyä pelkällä CSS:llä vai onko tuo sun tapa ainoa. Luulen että sain toimivan CSS-version joka ei tosin ollut ihan simppeli. Pushasin siitä commitin, tsekkaapa toimiiko kuten pitää.

EDIT: .hover-target:has(~ .trigger-line-through:hover) siis tarkoittaa, että CSS-sääntöä käytetään jos elementillä jolla on hover-target luokka on sibling (rinnakkainen) elementti jolla on trigger-line-through luokka ja kyseinen elementti on hover-tilassa.

Vau! Toimii loistavasti! Kiitos vielä tuosta selvennyksestä, nyt tiedän miten tarkalleen ottaen toimii! :)

samuliasmala · 2024-03-13T18:42:24Z

pages/index.tsx

@@ -141,48 +141,57 @@ 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 sm:w-[20rem]">


Yleensä on hyvä käyttää valmiita kokoja, esim. tuon sun sm:w-[20rem] voi korvata sm:max-w-xs. Mutta nyt myös isoilla näytöillä 20 rem on maksimikoko -> muuttaisin niin että isoilla näytöillä sisältöä näkyy enemmän. Itse asiassa pienillä näytöillä kokoa ei mun mielestä tarvitse rajoittaa, vaan on hyvä käyttää koko näytön tila. Eli itse laittaisin koon seuraavasti:

Suggested change

<div className="pl-8 pr-8 mt-3 w-full sm:w-[20rem]">

<div className="pl-8 pr-8 mt-3 w-full max-w-xl">

samuliasmala · 2024-03-13T18:43:27Z

pages/_app.tsx

+  return (
+    <>
+      <Head>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, interactive-widget=resizes-visual"
+        />
+      </Head>
+      <Component {...pageProps} />
+    </>
+  );


Kiitos! Täytyy sanoa että en tiedä miksi interactive-widget=resizes-content korjaa ongelman, mutta hyvä kun se tekee sen. Ja tiedoksi, että sain toistettua ongelman myös omalla puhelimellani.

samuliasmala

Valmis mergettäväksi!

anttiasmala added 10 commits March 3, 2024 13:13

Updated packages

b62d95c

Added styles so text will not go over boards when viewing by mobile

9ef7e6f

Removed h-5 style attribute. Does nothing

aa2d37e

Input fields will now stay same sized and center of the website no ma…

1129616

…tter what. Works in mobile and computer version

Changed Aku Ankka to Matti Meikäläinen to make more sense. Matti Meik…

3a35582

…äläinen is a Finnish version of John Doe

Moved Button components out from <li> parent

b922e3d

Moved a few stylers from wrapping Div to the Li element

bb9a459

Changed a few margins to make it better

420b918

Added underline when moving cursor to edit button. This changes Div's…

21a19c1

… classn data, not <li> element's. This is not permanent change

Added overflow-auto to DeletingModal.tsx so if text is very long it d…

cbb2fd8

…oes not break the site

anttiasmala requested a review from samuliasmala March 3, 2024 15:07

Added a few styling changes to make it better

dd0ebcd

samuliasmala requested changes Mar 4, 2024

View reviewed changes

anttiasmala added 6 commits March 4, 2024 21:52

Added meta element for mobile views

73267b2

Changed background color to white

b9f2910

Added a new animation opacity

3d5df4d

Changed width animation to opacity. Width animation does not work tha…

bb22f6c

…t well if text goes to multiple rows

Added w-full for mobile devices for Gift list. Added overflow-wrap va…

688b4f3

…lue to <li> element

Added a little margin to left on Gift list wrapper to make a small gap

452ba0e

vercel bot deployed to Preview March 5, 2024 09:33 View deployment

anttiasmala added 2 commits March 5, 2024 11:38

Changed resizes-visual to resizes-content to make inputs movable alwa…

ac22183

…ys if text goes 'hiding'

Changed margin-left -> padding-left to fix a minimalistic gap that ma…

c366ffa

…de site move left to right

vercel bot deployed to Preview March 5, 2024 09:40 View deployment

anttiasmala commented Mar 5, 2024

View reviewed changes

Added overflow-wrap to DeleteModal too to make gift not be scrollable

97c8ea2

anttiasmala requested a review from samuliasmala March 5, 2024 09:51

vercel bot deployed to Preview March 5, 2024 09:51 View deployment

anttiasmala added 2 commits March 13, 2024 16:11

Removed width=device-width. Didn't seem to have any impact

9147ece

Changed styling attributes to make elements being align even

02e3c25

vercel bot deployed to Preview March 13, 2024 14:16 View deployment

samuliasmala requested changes Mar 13, 2024

View reviewed changes

Changed w-[20rem] to max-w-xl in index.ts

b356dad

anttiasmala requested a review from samuliasmala March 14, 2024 18:42

vercel bot deployed to Preview March 14, 2024 18:43 View deployment

Replace js underline and line-through with css solution

ab6f09b

vercel bot deployed to Preview March 14, 2024 19:51 View deployment

samuliasmala approved these changes Mar 15, 2024

View reviewed changes

anttiasmala merged commit 0512bb9 into main Mar 17, 2024
4 of 5 checks passed

anttiasmala deleted the antti/frontend-fix branch March 17, 2024 14:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Antti/frontend_fix #15

Antti/frontend_fix #15

anttiasmala commented Mar 3, 2024 •

edited

Loading

vercel bot commented Mar 3, 2024 •

edited

Loading

samuliasmala left a comment •

edited

Loading

anttiasmala Mar 5, 2024

samuliasmala Mar 11, 2024

anttiasmala Mar 13, 2024

samuliasmala Mar 13, 2024

anttiasmala Mar 5, 2024

anttiasmala Mar 5, 2024

samuliasmala Mar 13, 2024

anttiasmala commented Mar 5, 2024

samuliasmala Mar 13, 2024

samuliasmala Mar 13, 2024

anttiasmala Mar 14, 2024

samuliasmala Mar 14, 2024 •

edited

Loading

anttiasmala Mar 15, 2024

samuliasmala Mar 13, 2024

samuliasmala Mar 13, 2024

samuliasmala left a comment

	<div className="pl-8 pr-8 mt-3 w-full sm:w-[20rem]">
	<div className="pl-8 pr-8 mt-3 w-full max-w-xl">

Antti/frontend_fix #15

Antti/frontend_fix #15

Conversation

anttiasmala commented Mar 3, 2024 • edited Loading

vercel bot commented Mar 3, 2024 • edited Loading

samuliasmala left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anttiasmala commented Mar 5, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samuliasmala Mar 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samuliasmala left a comment

Choose a reason for hiding this comment

anttiasmala commented Mar 3, 2024 •

edited

Loading

vercel bot commented Mar 3, 2024 •

edited

Loading

samuliasmala left a comment •

edited

Loading

samuliasmala Mar 14, 2024 •

edited

Loading