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

Jump to bottom

style(frontend): changes footer copyright text #3588

Merged
merged 18 commits into from
Nov 20, 2024
Merged

style(frontend): changes footer copyright text #3588

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
20be8ff
changes footer copyright text
BonomoAlessandro Nov 15, 2024
850e3a7
adds copyright padding on mobile view
BonomoAlessandro Nov 15, 2024
b765ff8
🤖 Updated i18n files
github-actions[bot] Nov 15, 2024
e8b4169
🤖 Apply formatting changes
github-actions[bot] Nov 15, 2024
d2581b6
makes the copyright text centered
BonomoAlessandro Nov 15, 2024
a38bd29
adds a margin on top on viewport sm
BonomoAlessandro Nov 15, 2024
22fedda
makes dfinity icon size customizable
BonomoAlessandro Nov 19, 2024
97f0b7a
fixes copyright text spacing
BonomoAlessandro Nov 19, 2024
413c4cb
reformat code
BonomoAlessandro Nov 19, 2024
779bb41
improves footer design
BonomoAlessandro Nov 19, 2024
2eb83cb
reformat code
BonomoAlessandro Nov 19, 2024
fb0b408
Merge branch 'main' into style(frontend)/changes-footer-copyright-text
BonomoAlessandro Nov 19, 2024
8e5e7a9
removes unused spaces
BonomoAlessandro Nov 19, 2024
10fb707
Merge remote-tracking branch 'origin/style(frontend)/changes-footer-c…
BonomoAlessandro Nov 19, 2024
6767d91
Merge branch 'main' into style(frontend)/changes-footer-copyright-text
BonomoAlessandro Nov 19, 2024
bf0a7b7
fixes review feedback
BonomoAlessandro Nov 19, 2024
0834cc6
replaces pl-0 and pr-0 with px-0
BonomoAlessandro Nov 19, 2024
b29c3eb
Merge branch 'main' into style(frontend)/changes-footer-copyright-text
BonomoAlessandro Nov 20, 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
43 changes: 26 additions & 17 deletions src/frontend/src/lib/components/core/Footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,35 +53,44 @@
</div>

<div
class="item pointer-events-auto flex flex-row items-center justify-end gap-2 text-sm lg:max-w-48 xl:max-w-none"
class="item pointer-events-auto pl-6 pr-6 text-sm md:pl-0 md:pr-0 lg:max-w-48"
Copy link
Contributor

Choose a reason for hiding this comment

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

px-6 md:px-6?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

yes, in the Figma we do have a padding of 24px on the left and right that missed till now. But yeah, i can replace pl-6 and pr-6 with px-6.

class:sm:max-w-none={$authNotSignedIn}
class:lg:max-w-none={$authNotSignedIn}
class:md:h-md:pr-4={$authNotSignedIn}
class:xl:max-w-none={$authNotSignedIn}
class:md:transition-all={$authSignedIn}
class:md:duration-200={$authSignedIn}
class:md:ease-in-out={$authSignedIn}
class:md:invisible={$authSignedIn}
class:1.5md:visible={$authSignedIn}
class:md:translate-x-full={$authSignedIn}
class:1.5md:translate-x-0={$authSignedIn}
class:xl:max-w-80={$authSignedIn}
Copy link
Contributor

Choose a reason for hiding this comment

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

Tbh, it's really hard to follow what's going on here. E.g. why lg:max-w-48 we set as a string above and xl:max-w-80 here? You can also move this value to the string definition and just keep class:xl:max-w-none={$authNotSignedIn}.

Also, could you please sort these values? Maybe by CSS rule, ideally with a line break between them. Just for the sake of readability.

Copy link
Collaborator Author

@BonomoAlessandro BonomoAlessandro Nov 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

I know it is hard to understand what exactly is going on...
No, i can't move xl:max-w-80 to the string definition, because this would break the behaviour of the footer on the login page.
It would look like this:
image

but it should look like this:
image

Copy link
Contributor

Choose a reason for hiding this comment

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

Just as an idea: maybe it would be easier to maintain this code if we do something like ${$authSignedIn ? 'sm:max-w-.. md:max-w:.. lg:max-w-... other-properties' : 'sm:max-w-.. md:max-w:.. lg:max-w-... other-properties'}? With this format, there will be less code, and most importantly a clear difference between 2 states.

Copy link
Collaborator Author

@BonomoAlessandro BonomoAlessandro Nov 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Personally i think it is easier to understand like it is, instead of ${$authSignedIn ? 'sm:max-w-.. md:max-w:.. lg:max-w-... other-properties' : 'sm:max-w-.. md:max-w:.. lg:max-w-... other-properties'}

I think the best solution would be to order it like you mentioned in the beginning.

Copy link
Contributor

Choose a reason for hiding this comment

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

Alright, let's keep them sorted.

class:1.5xl:max-w-none={$authSignedIn}
Copy link
Contributor

Choose a reason for hiding this comment

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

Why this one is needed? I don't see a contrary value for the 1.5xl breakpoint that you need to overwrite.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

With this command i say that if the screen is bigger than the defined size 1.5xl than there is no limitation in the width anymore.
If you are logged in it will override the max-w-80 otherwise it will override max-w-48.

>
<ExternalLink
href="https://dfinity.org"
ariaLabel={replaceOisyPlaceholders($i18n.footer.alt.dfinity)}
iconVisible={false}
>
<div class="flex flex-row items-center gap-2">
<IconDfinity />
<span
class:md:hidden={$authSignedIn}
class:xl:flex={$authSignedIn}
class:md:h-md:hidden={$authNotSignedIn}
class:1.5md:h-md:flex={$authNotSignedIn}
<div class="flex flex-col items-center pt-2 sm:flex-row sm:items-start sm:gap-2">
<span class="-mt-[0.35rem]"><IconDfinity size="30" /></span>
Copy link
Contributor

Choose a reason for hiding this comment

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

What's the reason for negative margin? To align in some custom way the icon with the text? Maybe some line-height for the text could do the job?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yes exactly, this is used to aligne the icon with the text. The line-height for the text did not work as needed so i had to use this.

<span
class:md:hidden={$authSignedIn}
class:xl:block={$authSignedIn}
class:md:h-md:hidden={$authNotSignedIn}
class:1.5md:h-md:block={$authNotSignedIn}
class="text-center md:text-left"
>
{replaceOisyPlaceholders($i18n.footer.text.incubated_with)}
<ExternalLink
href="https://dfinity.org"
ariaLabel={replaceOisyPlaceholders($i18n.footer.alt.dfinity)}
iconVisible={false}
color="blue"
>
{replaceOisyPlaceholders($i18n.footer.text.dfinity_foundation)}
</ExternalLink>
<span class="whitespace-nowrap"
>{replaceOisyPlaceholders($i18n.footer.text.copyright)}</span
>
{replaceOisyPlaceholders($i18n.footer.text.developed_with)}
</span>
</div>
</ExternalLink>
</span>
</div>
</div>
</div>
</footer>
6 changes: 5 additions & 1 deletion src/frontend/src/lib/components/icons/IconDfinity.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
<!-- source: DFINITY foundation -->
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<script lang="ts">
export let size = '40';
</script>

<svg width={size} height={size} viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M27.7133 13C26.0363 13 24.2081 13.8493 22.2758 15.522C21.3591 16.3147 20.5674 17.164 19.9737 17.8434C19.9737 17.8434 19.9737 17.8434 19.9789 17.8485V17.8434C19.9789 17.8434 20.9164 18.8522 21.9529 19.9331C22.5102 19.2794 23.3123 18.389 24.2341 17.586C25.953 16.0985 27.0727 15.7846 27.7133 15.7846C30.1249 15.7846 32.0832 17.6735 32.0832 19.9948C32.0832 22.3007 30.1197 24.1897 27.7133 24.2051C27.604 24.2051 27.4633 24.1897 27.2862 24.1536C27.9894 24.4522 28.7446 24.6684 29.4634 24.6684C33.8801 24.6684 34.7447 21.822 34.802 21.6162C34.9322 21.0963 34.9999 20.5507 34.9999 19.9897C34.9999 16.1397 31.729 13 27.7133 13Z"
fill="url(#paint0_linear_100_44667)"
Expand Down
4 changes: 3 additions & 1 deletion src/frontend/src/lib/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,9 @@
},
"footer": {
"text": {
"developed_with": "© 2024 Developed with ❤\uFE0F at DFINITY"
"incubated_with": "Incubated with ❤\uFE0F by",
"dfinity_foundation": "DFINITY Foundation",
"copyright": "© 2024"
},
"alt": {
"dfinity": "Go to DFINITY Foundation website",
Expand Down
2 changes: 1 addition & 1 deletion src/frontend/src/lib/types/i18n.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ interface I18nDapps {
}

interface I18nFooter {
text: { developed_with: string };
text: { incubated_with: string; dfinity_foundation: string; copyright: string };
alt: { dfinity: string; status: string };
}

Expand Down