Skip to content

Commit 94f11c3

Browse files
bencodezenbencodezen
committed
feature: add styles with icons for member details
1 parent 45edfdb commit 94f11c3

File tree

5 files changed

+148
-33
lines changed

5 files changed

+148
-33
lines changed

‎src/.vitepress/components/IconGlobe.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<svg
3+
width="16"
4+
height="16"
5+
viewBox="0 0 16 16"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<path
10+
d="M8.00016 1.58334C4.44183 1.58334 1.5835 4.44168 1.5835 8.00001C1.5835 11.5583 4.44183 14.4167 8.00016 14.4167C11.5585 14.4167 14.4168 11.5583 14.4168 8.00001C14.4168 4.44168 11.5585 1.58334 8.00016 1.58334ZM13.1918 7.41668H10.8585C10.7418 5.78334 10.2168 4.26668 9.2835 2.92501C11.3835 3.45001 12.9585 5.25834 13.1918 7.41668ZM6.3085 8.58334H9.75016C9.57516 10.1583 8.99183 11.675 8.0585 12.9C7.0085 11.675 6.42516 10.1583 6.3085 8.58334ZM6.3085 7.41668C6.4835 5.84168 7.06683 4.32501 8.00016 3.10001C8.99183 4.38334 9.57516 5.90001 9.69183 7.41668H6.3085ZM6.6585 2.92501C5.7835 4.26668 5.2585 5.78334 5.14183 7.41668H2.8085C3.04183 5.25834 4.61683 3.45001 6.6585 2.92501ZM2.8085 8.58334H5.14183C5.2585 10.2167 5.7835 11.7333 6.71683 13.075C4.61683 12.55 3.04183 10.7417 2.8085 8.58334ZM9.34183 13.075C10.2168 11.7333 10.7418 10.2167 10.9168 8.58334H13.2502C12.9585 10.7417 11.3835 12.55 9.34183 13.075Z"
11+
fill="#3C3C3C"
12+
fill-opacity="0.6"
13+
/>
14+
</svg>
15+
</template>

‎src/.vitepress/components/IconLink.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<svg
3+
width="16"
4+
height="16"
5+
viewBox="0 0 16 16"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<path
10+
d="M9.16689 10.3333C8.11689 10.3333 7.06689 9.86666 6.36689 8.93333C6.19189 8.69999 6.25022 8.29166 6.48356 8.11666C6.71689 7.94166 7.12522 7.99999 7.30022 8.23333C8.05856 9.28333 9.51689 9.45833 10.5669 8.69999C10.6836 8.64166 10.7419 8.58333 10.8002 8.46666L12.5502 6.71666C13.4252 5.78333 13.4252 4.32499 12.4919 3.44999C11.5586 2.57499 10.1586 2.57499 9.22522 3.44999L8.23356 4.44166C8.00022 4.67499 7.65022 4.67499 7.41689 4.44166C7.18356 4.20833 7.18356 3.85833 7.41689 3.62499L8.40856 2.63333C9.75022 1.29166 11.9086 1.29166 13.2502 2.63333C14.6502 3.97499 14.6502 6.19166 13.3086 7.59166L11.5586 9.34166C11.4419 9.45833 11.3252 9.57499 11.1502 9.69166C10.6252 10.1 9.92522 10.3333 9.16689 10.3333Z"
11+
fill="#3C3C3C"
12+
fill-opacity="0.6"
13+
/>
14+
<path
15+
d="M5.14169 14.3583C4.26669 14.3583 3.39169 14.0083 2.69169 13.3667C1.29169 12.025 1.29169 9.80832 2.63335 8.40832L4.38335 6.65832C4.50002 6.59999 4.61669 6.48332 4.73335 6.36666C5.49169 5.78332 6.42502 5.54999 7.30002 5.72499C8.23335 5.84166 9.05002 6.36666 9.57502 7.06666C9.75002 7.29999 9.69169 7.70832 9.45835 7.88332C9.22502 8.05832 8.81669 7.99999 8.64169 7.76666C8.29169 7.24166 7.70835 6.94999 7.12502 6.83332C6.48335 6.71666 5.90002 6.89166 5.37502 7.29999C5.25835 7.35832 5.20002 7.41666 5.14169 7.53332L3.39169 9.28332C2.51669 10.2167 2.51669 11.675 3.45002 12.55C4.38335 13.425 5.78335 13.425 6.71669 12.55L7.70835 11.5583C7.94169 11.325 8.29169 11.325 8.52502 11.5583C8.75835 11.7917 8.75835 12.1417 8.52502 12.375L7.53335 13.3667C6.89169 14.0667 6.01669 14.3583 5.14169 14.3583Z"
16+
fill="#3C3C3C"
17+
fill-opacity="0.6"
18+
/>
19+
</svg>
20+
</template>

‎src/.vitepress/components/IconLocation.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<svg
3+
width="16"
4+
height="16"
5+
viewBox="0 0 16 16"
6+
fill="none"
7+
xmlns="http://www.w3.org/2000/svg"
8+
>
9+
<path
10+
d="M7.99984 15C7.88317 15 7.7665 14.9417 7.64984 14.8833C7.47484 14.7667 2.1665 11.15 2.1665 6.83333C2.1665 3.625 4.7915 1 7.99984 1C11.2082 1 13.8332 3.625 13.8332 6.83333C13.8332 11.15 8.52484 14.7667 8.34984 14.8833C8.23317 14.9417 8.1165 15 7.99984 15ZM7.99984 2.16667C5.43317 2.16667 3.33317 4.26667 3.33317 6.83333C3.33317 9.98333 6.8915 12.9 7.99984 13.7167C9.10817 12.9 12.6665 9.98333 12.6665 6.83333C12.6665 4.26667 10.5665 2.16667 7.99984 2.16667Z"
11+
fill="#3C3C3C"
12+
fill-opacity="0.6"
13+
/>
14+
<path
15+
d="M7.99984 9.16667C6.7165 9.16667 5.6665 8.11667 5.6665 6.83333C5.6665 5.55 6.7165 4.5 7.99984 4.5C9.28317 4.5 10.3332 5.55 10.3332 6.83333C10.3332 8.11667 9.28317 9.16667 7.99984 9.16667ZM7.99984 5.66667C7.35817 5.66667 6.83317 6.19167 6.83317 6.83333C6.83317 7.475 7.35817 8 7.99984 8C8.6415 8 9.1665 7.475 9.1665 6.83333C9.1665 6.19167 8.6415 5.66667 7.99984 5.66667Z"
16+
fill="#3C3C3C"
17+
fill-opacity="0.6"
18+
/>
19+
</svg>
20+
</template>

‎src/.vitepress/components/TeamCard.vue

Lines changed: 59 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
import { computed, defineProps } from 'vue'
33
import { VTIconGitHub, VTIconTwitter } from '@vue/theme'
44
import IconCode from './IconCode.vue'
5+
import IconGlobe from './IconGlobe.vue'
6+
import IconLink from './IconLink.vue'
7+
import IconLocation from './IconLocation.vue'
58
69
const props = defineProps({
710
profile: {
@@ -28,20 +31,18 @@ const imageAlt = computed(() => {
2831
/>
2932
<section>
3033
<h3 class="member-name">{{ profile.name }}</h3>
31-
<p>
34+
<p class="member-headline">
3235
{{ profile.title }}
3336
<span v-if="profile.company">@ {{ profile.company }}</span>
3437
</p>
3538
<div class="member-details">
36-
<div class="member-project-wrapper">
37-
<h4 v-if="profile.projectList.length > 0" class="sr-only">
38-
Projects
39-
</h4>
40-
<IconCode />
41-
<ul
42-
v-if="profile.projectList.length > 0"
43-
class="member-language-list"
44-
>
39+
<section
40+
v-if="profile.projectList.length > 0"
41+
class="member-detail-section"
42+
>
43+
<IconCode class="member-detail-icon" />
44+
<h4 class="sr-only">Projects</h4>
45+
<ul class="member-language-list">
4546
<li
4647
v-for="project in profile.projectList"
4748
:key="`${profile.name}-project-${project}`"
@@ -50,19 +51,35 @@ const imageAlt = computed(() => {
5051
<a :href="project.url">{{ project.label }}</a>
5152
</li>
5253
</ul>
53-
</div>
54-
<address>{{ profile.location.label }}</address>
55-
<h4 class="sr-only">Languages</h4>
56-
<ul class="member-language-list">
57-
<li
58-
v-for="language in profile.languageList"
59-
:key="`${profile.name}-language-${language}`"
60-
class="member-language"
61-
>
62-
{{ language }}
63-
</li>
64-
</ul>
65-
<a :href="profile.website.url">{{ profile.website.label }}</a>
54+
</section>
55+
<section v-if="profile.location.label" class="member-detail-section">
56+
<IconLocation class="member-detail-icon" />
57+
<h4 class="sr-only">Location</h4>
58+
<address class="member-location">
59+
{{ profile.location.label }}
60+
</address>
61+
</section>
62+
<section
63+
v-if="profile.languageList.length > 0"
64+
class="member-detail-section"
65+
>
66+
<IconGlobe class="member-detail-icon" />
67+
<h4 class="sr-only">Languages</h4>
68+
<ul class="member-language-list">
69+
<li
70+
v-for="language in profile.languageList"
71+
:key="`${profile.name}-language-${language}`"
72+
class="member-language"
73+
>
74+
{{ language }}
75+
</li>
76+
</ul>
77+
</section>
78+
<section v-if="profile.website.url" class="member-detail-section">
79+
<IconLink class="member-detail-icon" />
80+
<h4 class="sr-only">Website</h4>
81+
<a :href="profile.website.url">{{ profile.website.label }}</a>
82+
</section>
6683
</div>
6784
<ul class="member-social-list">
6885
<li
@@ -116,17 +133,27 @@ const imageAlt = computed(() => {
116133
117134
.member-details {
118135
display: grid;
119-
grid-row-templates: repeat(4, 1fr);
120136
grid-row-gap: 4px;
121-
margin: 20px 0;
137+
margin: 16px 0 20px;
138+
font-weight: 500;
139+
}
140+
141+
.member-detail-icon {
142+
margin-right: 10px;
143+
}
144+
145+
.member-detail-section {
146+
display: flex;
147+
align-items: center;
148+
}
149+
150+
.member-headline {
151+
margin-bottom: 0;
122152
}
123153
124154
.member-language {
125155
margin-right: 34px;
126156
}
127-
.member-language:first-child {
128-
margin-left: 10px;
129-
}
130157
131158
.member-language:first-child:before {
132159
display: none;
@@ -138,17 +165,16 @@ const imageAlt = computed(() => {
138165
display: flex;
139166
}
140167
168+
.member-location {
169+
font-style: normal;
170+
}
171+
141172
.member-profile-image {
142173
width: 80px;
143174
height: 80px;
144175
border-radius: 50%;
145176
}
146177
147-
.member-project-wrapper {
148-
display: flex;
149-
align-items: center;
150-
}
151-
152178
.member-social-icon {
153179
width: 24px;
154180
height: 24px;

‎src/.vitepress/components/TeamCardDetail.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script setup>
2+
import { defineProps } from 'vue'
3+
import IconCode from './IconCode.vue'
4+
5+
const props = defineProps({
6+
detail: {
7+
type: [Array, Object],
8+
required: true
9+
},
10+
heading: {
11+
type: String,
12+
required: true
13+
}
14+
})
15+
</script>
16+
17+
<template>
18+
<section class="member-detail-section">
19+
<IconCode />
20+
<h4>{{ props.heading }}</h4>
21+
<h4 v-if="props.detail.length > 0" class="sr-only">Projects</h4>
22+
<ul v-if="props.detail.length > 0" class="member-language-list">
23+
<li
24+
v-for="project in props.detail"
25+
:key="`project-${project.label}`"
26+
class="member-language"
27+
>
28+
<a :href="project.url">{{ project.label }}</a>
29+
</li>
30+
</ul>
31+
</section>
32+
</template>
33+
34+
<style></style>

0 commit comments

Comments
 (0)