-
Notifications
You must be signed in to change notification settings - Fork 0
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.
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
Login page #214
base: develop
Are you sure you want to change the base?
Login page #214
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good progress overall 🚀, besides responsiveness and the color issue in tailwind which you are working on, the scaling looks weird on a display with lower vertical resolution (which is the first image in this case, and the case with my laptop 😄 ) maybe the login should scale down accordingly to make the experience more consistent
![](https://private-user-images.githubusercontent.com/24589619/253037248-1f8bb6cd-8580-4d75-9ba0-b049d1cb8200.jpeg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ3ODA2MzAsIm5iZiI6MTcyNDc4MDMzMCwicGF0aCI6Ii8yNDU4OTYxOS8yNTMwMzcyNDgtMWY4YmI2Y2QtODU4MC00ZDc1LTliYTAtYjA0OWQxY2I4MjAwLmpwZWc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyN1QxNzM4NTBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xOWMwY2QyNzZlMmMyZjE3ZmQ2YzQwM2NkYWQxMjA3NGIwNzI0Y2M0YjY0ZWY0NGMwY2EwODVmZDFiZTEzNzQzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.Ibh-y6NL1uqh3jt2FjNAl18iphVipOnQGCRq_iWW-2E)
![](https://private-user-images.githubusercontent.com/24589619/253037318-9a487bb9-7513-4e35-866b-e970a0b59af2.jpeg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ3ODA2MzAsIm5iZiI6MTcyNDc4MDMzMCwicGF0aCI6Ii8yNDU4OTYxOS8yNTMwMzczMTgtOWE0ODdiYjktNzUxMy00ZTM1LTg2NmItZTk3MGEwYjU5YWYyLmpwZWc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyN1QxNzM4NTBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jZWEzMWYyODEwZDIwODY3MWUyN2M3ODg4NTlkNzY1M2EyZGUwNzk5NGUyNTUzNDcxNzVlODUxOWFmYjRlODFiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.EP0mt7r9uouazD103Gel8rDqCAtXk2Uz5fIk8Pt5NdI)
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #214 +/- ##
==========================================
- Coverage 1.01% 0.86% -0.15%
==========================================
Files 49 51 +2
Lines 1584 1857 +273
Branches 51 53 +2
==========================================
Hits 16 16
- Misses 1521 1792 +271
- Partials 47 49 +2 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good job making this work on all desktops 🥳 but I have some concerns about the colors that we talked about in the retrospective
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
src/lib/component/Icon.svelte
Outdated
@@ -13,5 +13,5 @@ | |||
<Icon {src} {color} {size} /> | |||
</a> | |||
{:else} | |||
<Icon {src} {color} {size} /> | |||
<Icon {src} {size} color="currentcolor" className={$$props.color} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do you use $$props.color
? Isn't simply color
the same? Maybe I'm missing something here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd also appreciate an explanation about className, it just reminds me of react xd
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do you use
$$props.color
? Isn't simplycolor
the same? Maybe I'm missing something here
Yup! Will change it. Also thinking of instead of this line simply adding a className
property, for when the color trying to be used is not recognized by the color
property (eg. custom names, different opacity notation). This way the color wouldn't have to be something like fill-rose-950
and could actually just be a hex or color xd. What do you think?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@MRita443 I think className
is specific to the Icon
library we use. I prefer to use $$props.class
and map it to className
in Icon.svelte
, so we have the same syntax for every component. But I'm willing to hear more opinions
</script> | ||
|
||
<div class="grid"> | ||
<input {type} {...$$restProps} class="col-start-1 col-end-3 row-start-1 {$$props.class}" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I didn't know restProps, what it the goal here? I searched a little bit and it doesn't seem to be recommended sveltejs/svelte#8249
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
My goal here was to make the component reusable in different scenarios, but maintain the same icon placement. For that I had to have these specific classes, but still wanted to allow for more customization, hence the $$props.class
. The $$restProps
was to collect all the other attributes like names, placeholders, values etc. I decided to use this because inputs have lots of possible attributes, but I guess I could try to make the most common ones into optional properties maybe?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After searching a bit more about restProps, I believe this implementation is appropriate. Svelte has since updates the docs on this:
$$props references all props that are passed to a component, including ones that are not declared with export. Using $$props will not perform as well as references to a specific prop because changes to any prop will cause Svelte to recheck all usages of $$props. But it can be useful in some cases – for example, when you don't know at compile time what props might be passed to a component.
<Widget {...$$props} />
$$restProps contains only the props which are not declared with export. It can be used to pass down other unknown attributes to an element in a component. It shares the same performance characteristics compared to specific property access as $$props.
<input {...$$restProps} />
This means that specific prop access could be slower (such as $$props.class). I found an alternative but I don't find it visually appealing. Let me know what you think:
export {_class as class};
let _class = "";
<input {type} {...$$restProps} class="{_class}" />
Also, it'd be nice to have this in storybook too |
I tried replicating this placing small icons on top of the input but I couldn't. Could you maybe inspect the page and share the code, or let me know the extension name? |
bfc24da
to
5e7548f
Compare
src/routes/login/page.stories.ts
Outdated
export default { | ||
title: 'Pages/Login', | ||
component: Page, | ||
parameters: { | ||
layout: 'fullscreen', | ||
backgrounds: { default: 'clear' } | ||
}, | ||
decorators: [() => Layout, () => LayoutDecorator] | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It'd be nice to test the visibility input
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Closes #140
Initial implementation of member login page
Screenshots
Review checklist