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

[WIP]: Refactor team page #94

Closed
wants to merge 18 commits into from
Closed

[WIP]: Refactor team page #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
0004bc3
fix: delete cypress dep, cause error in package downloading
rennavittorio Sep 4, 2023
1996780
enh: add new team member and refactor img folder name and team-member…
rennavittorio Sep 4, 2023
725994a
fix: delete router-link from whole card
rennavittorio Sep 4, 2023
6151da8
enh(TeamPage): add MemberCard and SocialIcons component
rennavittorio Sep 4, 2023
0ae6958
chore: refactor script positioning and delete old comments
rennavittorio Sep 5, 2023
c88b29f
refactor(team-member): refactor using component and p
rennavittorio Sep 5, 2023
d948b0f
feat: create reusable heading component for page title
rennavittorio Sep 8, 2023
f7a5150
refactor: refactor team page with unocss and heading
rennavittorio Sep 8, 2023
3be1717
fix: fix h1, align to convention
rennavittorio Sep 10, 2023
4605522
refactor: refactor components style with unocss
rennavittorio Sep 10, 2023
17f2167
refactor: refactor team-member page with unocss
rennavittorio Sep 11, 2023
b173c39
fix(package): add cypress dependency (align to project)
rennavittorio Sep 20, 2023
666e2cc
fix(img): rename folder into team-members
rennavittorio Sep 20, 2023
bb20108
fix(img): rename members team img (align to project)
rennavittorio Sep 20, 2023
c165a85
chore(config): add brand color to unocss config
rennavittorio Sep 20, 2023
bd94805
fix(components): align unocss classes to project, manage light-dark m…
rennavittorio Sep 20, 2023
13a889d
fix(components): align array type to project standard
rennavittorio Sep 20, 2023
ed76e4b
fix(views): align unocss classes and position to project standard
rennavittorio Sep 20, 2023
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
35 changes: 22 additions & 13 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 public/img/_dev/Angy.jpg → public/img/team-members/angela-busato.jpg
View file
Open in desktop
File renamed without changes
0 public/img/_dev/Danersound.jpg → public/img/team-members/daner-sound.jpg
View file
Open in desktop
File renamed without changes
0 public/img/_dev/davideimola.jpg → public/img/team-members/davide-imola.jpg
View file
Open in desktop
File renamed without changes
0 public/img/_dev/gabrielepuliti.png → public/img/team-members/gabriele-puliti.png
View file
Open in desktop
File renamed without changes
0 public/img/_dev/lorenzopieri.png → public/img/team-members/lorenzo-pieri.png
View file
Open in desktop
File renamed without changes
0 public/img/_dev/mikilombardi.jpeg → public/img/team-members/miki-lombardi.jpeg
View file
Open in desktop
File renamed without changes
0 public/img/_dev/nicpuppa.png → public/img/team-members/nic-puppa.png
View file
Open in desktop
File renamed without changes
Binary file added public/img/team-members/profile-ph.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 46 additions & 0 deletions src/components/MemberCard.vue
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

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

There's some confusion on how the UnoCSS rules are declared and utilized in this PR: for example, we have rules like: px-15px, py-5px, w-128px,mx-2em, text-1rem utilized in this component which mix all the possible types of units that we can utilize in CSS. This plays against the flexibility of UnoCSS and their already baked in values in rem units.

  • w-128px shouldn't be utilized like this, because you could've already declared it like w-32 which if you multiply 32 * 4 = 128 it will give you your desired result! You can also check this specific documentation of TailwindCSS width which allows you to see how all this type of frameworks have an approach of 4 point grid in their design.

  • py-5px should be avoided because it doesn't fit into the 4pt grid, you could easily use py-1 to obtain 4px.

  • px-15px should be avoided as well, you could utilize px-4 which would equal to 16px and and by doing that avoiding to use px on an UnoCSS rule.

  • mx-2em the use of em is discouraged as it doesn't fit well with the 4pt grid. You should stick to rem values.

  • text-1rem could also be rewritten as text-base. See explicit font size documentation of Tailwind here. Even with the documentation read, you shouldn't be applying this rule because the global font value is already 16px (which equals to 1rem) check it out on your own App.vue file!

You can check out this recent component that has been updated to utilize UnoCSS so you can see how there's no need to implement all different types of unit values on the utility rules if we already stand by a system =]

Copy link
Contributor Author

Choose a reason for hiding this comment

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

fix(components): align unocss classes to project, manage light-dark m…
fixed
(also big thanks for all the docs linked! <3 )

Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import SocialIcons from './SocialIcons.vue'

defineProps<{
member: string
}>()

const socials = ['github', 'linkedin', 'twitter', 'website']

const { t } = useI18n()
</script>

<template>
<div
class="overflow-hidden p-8 font-sans rounded bg-light-bg-secondary dark:bg-dark-bg-secondary"
data-test="team-card"
:data-test-member-name="`team-member-${member}`"
>
<div class="relative z-0 flex h-auto items-center justify-center rounded-full my-auto text-center">
<div
:data-test="`team-member-${member}-index-photo`"
class="block w-32 h-32 rounded-full bg-center bg-cover"
:style="`background-image: url( ${$t(`team.${member}.image`)} );`"
/>
</div>
<div class="relative z-1 flex flex-col items-center justify-center gap-1">
<h2
class="text-6 font-700 text-text-primary"
:data-test="`team-member-${member}-name`"
>
{{ $t(`team.${member}.name`) }}
</h2>

<SocialIcons :member="member" :socials="socials" />

<router-link
class="font-700 w-fit px-4 py-1 border-1 border-solid border-transparent rounded-full bg-light-bg-primary text-light-text-primary dark:bg-dark-bg-primary dark:text-dark-text-primary hover:bg-dark-bg-primary hover:text-dark-text-primary dark:hover:bg-light-bg-primary dark:hover:text-light-text-primary "
:data-test="`team-member-${member}-page-link`"
:to="{ name: 'TeamMember', params: { member } }"
>
{{ t('redirect.profile') }}
</router-link>
</div>
</div>
</template>
25 changes: 25 additions & 0 deletions src/components/SocialIcons.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<script setup lang="ts">
defineProps<{
member: string
socials: string[]
}>()
</script>

<template>
<div class="w-fit">
<div v-for="social in socials" :key="social" class="inline-block">
<a
v-if="$t(`team.${member}.${social}_url`).length > 1"
class="inline-block m-0.2em group"
:data-test="`team-member-${member}-${social}`"
:href="$t(`team.${member}.${social}${social !== 'website' ? '_url' : ''}`)" target="_blank"
>
<i :class="[`text-1.2em ${social !== 'website' ? `fab fa-${social}` : 'fa fa-cloud'} group-hover:text-#2e3440`]" />
</a>
</div>
</div>
</template>

<style scoped lang="scss">

</style>
Loading