Single product page by alirezawdx · Pull Request #22 · TechNullogy/Simple-Shop

alirezawdx · 2023-06-22T17:38:09Z

No description provided.

netlify · 2023-06-22T17:38:20Z

✅ Deploy Preview for simple-shop-technullogy ready!

Name	Link
🔨 Latest commit	`cc30da7`
🔍 Latest deploy log	https://app.netlify.com/sites/simple-shop-technullogy/deploys/6520146f9d0f940008324b41
😎 Deploy Preview	https://deploy-preview-22--simple-shop-technullogy.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

AmirHosseinKarimi · 2023-07-24T12:46:10Z

They should be buttons
The border should be implemented by CSS not image
Plus and minus icon can be image (SVG)
They SHOULD NOT BE ABSOLUTE! Use flex instead.

Browser metadata

Path:      /src/pages/single-product.html
Browser:   Firefox 116.0 on Linux x86_64
Viewport:  2560 x 1283 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

AmirHosseinKarimi · 2023-07-24T12:50:48Z

Use the correct color same as the design.

Browser metadata

Path:      /src/pages/single-product.html
Browser:   Firefox 116.0 on Linux x86_64
Viewport:  2560 x 1283 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

AmirHosseinKarimi · 2023-07-24T12:52:36Z

According to the design, Bullets should be square, not circular.

Browser metadata

Path:      /src/pages/single-product.html
Browser:   Firefox 116.0 on Linux x86_64
Viewport:  2560 x 1283 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

AmirHosseinKarimi · 2023-07-24T12:54:03Z

Thumbnails height is not same as the design.

Browser metadata

Path:      /src/pages/single-product.html
Browser:   Firefox 116.0 on Linux x86_64
Viewport:  2560 x 1283 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

AmirHosseinKarimi · 2023-07-24T12:55:56Z

The gap between items is not same as design
Set min-width to items

Browser metadata

Path:      /src/pages/single-product.html
Browser:   Firefox 116.0 on Linux x86_64
Viewport:  2560 x 1283 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

AmirHosseinKarimi · 2023-07-24T12:58:01Z

Its the dot (.) in design. Not the virgule (،). But use the comma (,)

Browser metadata

Path:      /src/pages/single-product.html
Browser:   Firefox 116.0 on Linux x86_64
Viewport:  2560 x 1283 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

AmirHosseinKarimi · 2023-07-24T13:12:08Z

Its semi-bold in design.

Browser metadata

Path:      /src/pages/single-product.html
Browser:   Firefox 116.0 on Linux x86_64
Viewport:  2560 x 1283 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

AmirHosseinKarimi · 2023-07-24T13:12:45Z

Tabs should be clickable. Like as button.

Browser metadata

Path:      /src/pages/single-product.html
Browser:   Firefox 116.0 on Linux x86_64
Viewport:  2560 x 1283 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

AmirHosseinKarimi · 2023-07-24T13:13:28Z

Its bold in the design.

Browser metadata

Path:      /src/pages/single-product.html
Browser:   Firefox 116.0 on Linux x86_64
Viewport:  2560 x 1283 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

AmirHosseinKarimi · 2023-07-24T13:15:22Z

Fix bullets size & space same as design.

Browser metadata

Path:      /src/pages/single-product.html
Browser:   Firefox 116.0 on Linux x86_64
Viewport:  2560 x 1283 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

AmirHosseinKarimi · 2023-07-24T13:16:15Z

Products should be linked to their pages.

Browser metadata

Path:      /src/pages/single-product.html
Browser:   Firefox 116.0 on Linux x86_64
Viewport:  2560 x 1283 @1x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

AmirHosseinKarimi

Good job @alirezawdx

I just reviewed your PR and it's awesome. Please take a look at the comments that I placed and apply them. Then request a review.

AmirHosseinKarimi · 2023-07-24T13:26:54Z

src/pages/single-product.html

    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+
+    <!-- Shbnam font -->
+    <link href="https://cdn.jsdelivr.net/gh/rastikerdar/shabnam-font@v[X.Y.Z]/dist/font-face.css" rel="stylesheet" type="text/css" />


Fix the font href. Place the correct version in the template section.

AmirHosseinKarimi · 2023-07-24T13:27:44Z

src/pages/single-product.html

+    <style>
+        body {
+            font-family: 'Shabnam', sans-serif;
+        }
+    </style>


It is unnecessary. Look at TailwindCSS documents to set the default font in the config.

AmirHosseinKarimi · 2023-07-24T13:30:23Z

src/pages/single-product.html

-  </head>
-  <body>
+</head>
+<body dir="rtl" class="overflow-x-hidden">


It's better to apply direction to the <HTML> tag.

It's not a good idea to prevent horizontal scroll by overflow-x-hidden. Instead, fix the issue which causes scroll.

Suggested change

<body dir="rtl" class="overflow-x-hidden">

<body>

AmirHosseinKarimi · 2023-07-24T13:38:21Z

src/pages/single-product.html

+        <ul class="flex justify-start text-[#7E8AAB] text-[17px] px-[30px] py-[39px]">
+            <li class="p-0 m-0 flex items-center">
+                صفحه اصلی
+                <img src="./../assets/images/icons/arrow-left.png" alt="Arrow Icon" class="w-[5.83px] h-[11.67px] mx-[14px]">


Do not force image width & height same time. It may break the image aspect ratio. Just set the width or height.

Do not use decimal numbers with pixel unit. Just round it up or down.

You can use the nearest TailwindCSS class if there is a small difference.

AmirHosseinKarimi · 2023-07-24T13:39:14Z

src/pages/single-product.html

+
+        <!-- navigations -->
+        <ul class="flex justify-start text-[#7E8AAB] text-[17px] px-[30px] py-[39px]">
+            <li class="p-0 m-0 flex items-center">


Remove p-0 m-0. Just apply the correct class to the parent. Check the TailwindCSS documents.

AmirHosseinKarimi · 2023-07-24T13:52:19Z

src/pages/single-product.html

+                    </li>
+                </ul>
+
+                <hr class="bg-[#DEE2EEB2] mt-[48px]">


Suggested change

<hr class="bg-[#DEE2EEB2] mt-[48px]">

<hr class="bg-[#DEE2EEB2] mt-12">

AmirHosseinKarimi · 2023-07-24T14:01:00Z

src/pages/single-product.html

+                        <button class="flex flex-row gap-2 justify-center items-center bg-white border py-3 px-4">
+                            <span class="rounded-full bg-blue-600 w-[15px] h-[15px] inline-block"></span> <span>آبی</span>
+                        </button>


Use <i> for elements like icons, bullets and etc.

Always beautify your code.

Suggested change

<button class="flex flex-row gap-2 justify-center items-center bg-white border py-3 px-4">

<span class="rounded-full bg-blue-600 w-[15px] h-[15px] inline-block"></span> <span>آبی</span>

</button>

<button class="flex flex-row gap-2 justify-center items-center bg-white border py-3 px-4">

<i class="rounded-full bg-blue-600 w-[15px] h-[15px] inline-block"></i>

<span>آبی</span>

</button>

AmirHosseinKarimi · 2023-07-24T14:02:39Z

src/pages/single-product.html

+                        <button class="flex flex-row gap-2 justify-center items-center bg-white border py-3 px-4">
+                            <span>۱۰×۱۵</span>
+                        </button>


The inner <span> element is unnecessary. You can just remove it and everything works like a charm.

Suggested change

<button class="flex flex-row gap-2 justify-center items-center bg-white border py-3 px-4">

<span>۱۰×۱۵</span>

</button>

<button class="flex flex-row gap-2 justify-center items-center bg-white border py-3 px-4">۱۰×۱۵</button>

AmirHosseinKarimi · 2023-07-24T14:05:03Z

src/pages/single-product.html

+                <div class="flex justify-center items-center h-[60px] w-[60px] bg-[#F5F8FC]">
+                    <img src="../assets/images/icons/arrow-right-line.svg" alt="Arrow Icon" class="opacity-60 rotate-180">
+                </div>


It's clickable elements. So, It should be a button or defined as a button via role=button.

AmirHosseinKarimi · 2023-07-24T14:09:03Z

src/pages/single-product.html

+</body>
+</html>


Set up your IDE in a proper way. A blank like at the end of the file is a usual and default configuration. Looks like your IDE does not follow this convention.

Configure your code formatter tool (Prettier) in a proper way that follows the team/project configuration to not override other members' code without any actual change.

alirezawdx added 2 commits June 9, 2023 17:30

feat: added persian font (Shabnam) to single-product.html using cdn

3152061

feat: added ui icons and top info box to single-product.html

a6d8fa2

alirezawdx requested a review from AmirHosseinKarimi as a code owner June 22, 2023 17:38

alirezawdx added 20 commits June 23, 2023 11:31

fix: change select size buttons color

f44fcfe

feat: add container for description

acafa1c

feat: add box title to description

f1b262f

fix: replace flex col with flex wrap

adf1775

feat: add tab container to description

4f432e0

fix: fix conflict flex with block

7df38eb

feat: add tab items

4774087

feat: add description wrapper

27765d4

feat: add title for description

f0d6fa5

feat: add contents to description

e79ce33

feat: add image gallery to description

4e590a2

feat: add line after image gallery

333fdbc

feat: add details wrapper

b7df414

feat: add title to details box

e4f592a

fix: remove unnecessary mt from details wrapper

2c942b0

feat: add attributes list

4a19aae

feat: add page seperator

11629e8

fix: remove extra border bottom from attrs

06f23c0

feat: add carousel wrapper

6a7b65c

feat: add and seperate carousel head and content

e999c13

AmirHosseinKarimi requested changes Jul 24, 2023

View reviewed changes

alirezawdx added 4 commits October 6, 2023 17:26

fix: replace virgule by comma

669929f

Merge branch 'TechNullogy:main' into single-product

c5aad67

fix: change font weight to semibold

f987ed9

fix: replace div by button and fix border bottom changes on click

cc30da7

	<hr class="bg-[#DEE2EEB2] mt-[48px]">
	<hr class="bg-[#DEE2EEB2] mt-12">

		</body>
		</html> No newline at end of file

Comments

Conversation

alirezawdx commented Jun 22, 2023

Uh oh!

netlify bot commented Jun 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for simple-shop-technullogy ready!

Uh oh!

AmirHosseinKarimi commented Jul 24, 2023

Uh oh!

AmirHosseinKarimi commented Jul 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AmirHosseinKarimi commented Jul 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

AmirHosseinKarimi commented Jul 24, 2023

Uh oh!

AmirHosseinKarimi commented Jul 24, 2023

Uh oh!

AmirHosseinKarimi commented Jul 24, 2023

Uh oh!

AmirHosseinKarimi commented Jul 24, 2023

Uh oh!

AmirHosseinKarimi commented Jul 24, 2023

Uh oh!

AmirHosseinKarimi commented Jul 24, 2023

Uh oh!

AmirHosseinKarimi commented Jul 24, 2023

Uh oh!

AmirHosseinKarimi commented Jul 24, 2023

Uh oh!

AmirHosseinKarimi left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AmirHosseinKarimi Jul 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Jun 22, 2023 •

edited

Loading

AmirHosseinKarimi commented Jul 24, 2023 •

edited

Loading

AmirHosseinKarimi commented Jul 24, 2023 •

edited

Loading

AmirHosseinKarimi Jul 24, 2023 •

edited

Loading