Skip to content

Commit 5053ebf

Browse files
thread-koderthread-koder
authored
Merge pull request #110 from jordanopensource/fix/design-semantics-issues
Fix/design and semantics issues
2 parents 2535883 + 81940f5 commit 5053ebf

28 files changed

+241
-273
lines changed

‎assets/images/hero/jordan-commits.svg

+1-44
Loading

‎components/AreaChart.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default {
2525

2626
<style lang="postcss">
2727
.chart-section-container {
28-
@apply m-auto w-11/12 bg-white py-0 px-0 md:px-7 md:py-10;
28+
@apply bg-white py-0 md:py-10;
2929
}
3030
3131
.tooltip {

‎components/BarChart.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default {
2525

2626
<style lang="postcss">
2727
.bar-chart-section-container {
28-
@apply m-auto w-11/12 bg-white py-0 px-0 md:px-7 md:py-10;
28+
@apply bg-white py-0 md:py-10;
2929
}
3030
3131
.bar-tooltip {

‎components/Card.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
<script>
2020
export default {
21-
name: 'Card',
21+
name: 'StatCard',
2222
props: {
2323
count: { type: Number, required: true },
2424
description: { type: String, required: true },
@@ -55,7 +55,7 @@ export default {
5555
}
5656
5757
.card-container {
58-
@apply bg-white shadow my-5 mx-3 lg:w-2/4 lg:mx-5;
58+
@apply bg-white shadow my-5 lg:w-2/4;
5959
}
6060
6161
.content-container {

‎components/ChartsPeriodDropdown.vue

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<select id="period" name="period" @change="onChange">
3+
<select :id="name" :name="name" @change="onChange">
44
<option value="last_year">Last Year</option>
55
<option value="this_year">This Year</option>
66
<option value="last_month">Last Month</option>
@@ -20,6 +20,9 @@
2020
<script>
2121
export default {
2222
name: 'PeriodDropdown',
23+
props: {
24+
name: { type: String, default: 'period' },
25+
},
2326
data() {
2427
return {
2528
todayDate: new Date().toLocaleString('en-GB', {
@@ -31,21 +34,21 @@ export default {
3134
{
3235
day: 'numeric',
3336
month: 'long',
34-
}
37+
},
3538
),
3639
firstDayOfTheLastMonth: 0,
3740
lastDayOfTheLastMonth: new Date(
3841
new Date().getFullYear(),
3942
new Date().getMonth(),
40-
0
43+
0,
4144
).toLocaleString('en-GB', {
4245
day: 'numeric',
4346
month: 'long',
4447
}),
4548
endOfTheYear: new Date(
4649
new Date().getFullYear() - 1,
4750
11,
48-
31
51+
31,
4952
).toLocaleString('en-GB', {
5053
day: 'numeric',
5154
month: 'long',

‎components/Contributors.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<div class="section-container">
33
<div class="content-conatiner">
44
<div class="text-section has-border">
5-
<h1 class="hidden head-text md:block">Rank</h1>
6-
<h1 class="head-text px-0 lg:px-7">User</h1>
5+
<h3 class="hidden head-text md:block">Rank</h3>
6+
<h3 class="head-text">User</h3>
77
<div class="flex justify-end w-full">
8-
<h1 class="head-text">Total</h1>
8+
<h3 class="head-text">Total</h3>
99
</div>
1010
</div>
1111
<div>
@@ -81,11 +81,11 @@ export default {
8181
}
8282
8383
.section-container {
84-
@apply block w-11/12 mx-auto lg:mx-0 bg-gray;
84+
@apply block bg-gray;
8585
}
8686
8787
.content-conatiner {
88-
@apply mx-3 lg:mx-0 bg-white;
88+
@apply bg-white;
8989
}
9090
9191
.has-border {

‎components/FilterSection.vue

+3-4
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
isOpen ? 'filter-section has-border' : 'filter-section lg:has-border'
77
"
88
>
9-
<h1 class="filter-text">Filter</h1>
9+
<h3 class="filter-text">Filter</h3>
1010
<button
1111
:class="isOpen ? 'expand-button' : 'expand-button-collapsed'"
1212
aria-label="Expand Filter Section"
@@ -50,12 +50,11 @@ export default {
5050

5151
<style lang="postcss" scoped>
5252
.section-container {
53-
@apply block w-11/12 lg:w-1/3 mx-auto lg:mx-0 lg:mr-5 lg:bg-lightgrey;
53+
@apply block lg:w-[28%] lg:bg-lightgrey;
5454
}
5555
5656
.content-conatiner {
5757
background-color: #f4f4f5;
58-
@apply mx-3 lg:mx-0;
5958
}
6059
6160
.filter-section {
@@ -73,7 +72,7 @@ export default {
7372
}
7473
7574
.sort-section {
76-
@apply mx-6 pt-6 pb-4;
75+
@apply pt-6 pb-4;
7776
}
7877
7978
.contributions-radio {

‎components/Hero.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
<script>
1515
export default {
16-
name: 'Hero',
16+
name: 'HeroBanner',
1717
props: {
1818
title: {
1919
type: String,
@@ -33,7 +33,7 @@ export default {
3333
}
3434
3535
.banner {
36-
@apply flex flex-col mx-9 md:h-96 md:flex-row;
36+
@apply flex flex-col px-8 md:px-14 lg:px-24 md:h-96 md:flex-row;
3737
}
3838
3939
.content-container {
@@ -42,6 +42,6 @@ export default {
4242
4343
.content-header {
4444
font-family: 'IBM Mono';
45-
@apply text-4xl md:text-4xl lg:text-5xl tracking-wide font-normal md:mx-3 lg:mx-16;
45+
@apply text-4xl md:text-4xl lg:text-5xl tracking-wide font-normal;
4646
}
4747
</style>

‎components/HomePageHero.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929

3030
<script>
3131
export default {
32-
name: 'Hero',
32+
name: 'HomeHeroBanner',
3333
}
3434
</script>
3535

@@ -43,7 +43,7 @@ export default {
4343
}
4444
4545
.banner {
46-
@apply flex flex-col mx-9 h-auto md:flex-row;
46+
@apply flex flex-col px-8 md:px-14 lg:px-24 h-auto md:flex-row;
4747
}
4848
4949
.content-container {
@@ -52,15 +52,15 @@ export default {
5252
5353
.content-header {
5454
font-family: 'IBM Mono';
55-
@apply text-4xl md:text-4xl lg:text-5xl tracking-wide font-normal md:mx-3 lg:mx-16;
55+
@apply text-4xl md:text-4xl lg:text-5xl tracking-wide font-normal;
5656
}
5757
5858
.para-section {
5959
font-family: 'IBM Sans';
60-
@apply w-11/12 pt-7 text-xl lg:text-2xl font-normal md:mx-3 lg:mx-16 lg:w-9/12;
60+
@apply w-11/12 pt-7 text-xl lg:text-2xl font-normal lg:w-9/12;
6161
}
6262
6363
.section-image {
64-
@apply my-8 place-self-end w-8/12 md:w-5/12 lg:w-80 lg:mt-14 2xl:w-96 lg:mr-12;
64+
@apply my-8 place-self-end w-8/12 md:w-5/12 lg:w-80 2xl:w-96;
6565
}
6666
</style>

‎components/InputsSection.vue

+9-9
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
<SearchInput placeholder="Search Users..." @on-search="onSearch" />
55
</div>
66
<div class="sort-section">
7-
<h6 class="text-xs font-bold pb-2">Period:</h6>
8-
<div class="flex lg:flex-col gap-1">
9-
<PeriodDropdown />
7+
<label for="period" class="text-xs font-bold">Period:</label>
8+
<div class="flex lg:flex-col gap-1 pt-1">
9+
<PeriodDropdown name="period" />
1010
</div>
1111
</div>
1212
<div class="sort-section has-border">
13-
<h6 class="text-xs font-bold pb-2">Sort by:</h6>
14-
<div class="flex lg:flex-col gap-1">
13+
<span class="text-xs font-bold">Sort by:</span>
14+
<div class="flex lg:flex-col gap-1 pt-1">
1515
<RadioButton
1616
class="lg:pb-1"
1717
:input-id="`score`"
@@ -34,8 +34,8 @@
3434
</div>
3535
</div>
3636
<div class="sort-section has-border">
37-
<h6 class="text-xs font-bold pb-2">Show:</h6>
38-
<div class="flex lg:flex-col gap-1">
37+
<span class="text-xs font-bold">Show:</span>
38+
<div class="flex lg:flex-col gap-1 pt-1">
3939
<RadioButton
4040
class="lg:pb-1"
4141
:input-id="`all`"
@@ -58,8 +58,8 @@
5858
</div>
5959
</div>
6060
<div class="sort-section">
61-
<h6 class="text-xs font-bold pb-2">Count:</h6>
62-
<div class="flex lg:flex-col justify-between gap-1">
61+
<span class="text-xs font-bold">Count:</span>
62+
<div class="flex lg:flex-col gap-3 pt-1">
6363
<div class="flex">
6464
<RadioButton
6565
class="lg:pb-1"

‎components/LastUpdated.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div v-if="lastUpdated" class="flex justify-end pt-5 ml-8 mr-8 md:mr-12 lg:mr-20 2xl:mr-28 ">
2+
<div v-if="lastUpdated" class="flex justify-end pt-5">
33
<p class="opacity-50">
44
{{ lastUpdated }}
55
</p>

‎components/OrganizationCard.vue

+21-5
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,27 @@
22
<div class="flex mx-8 h-36 lg:h-48 content-center has-border pb-3">
33
<p class="rank hidden md:block">{{ rank }}.</p>
44
<div class="image-container">
5-
<img class="image" :src="imageUrl" alt="avatar" width="80" height="80" />
6-
<span class="image-filter"></span>
5+
<a :href="profileUrl" target="_blank">
6+
<img
7+
class="image"
8+
:src="imageUrl"
9+
alt="avatar"
10+
width="80"
11+
height="80" />
12+
<span class="image-filter"></span
13+
></a>
714
</div>
815

916
<div class="block w-full pl-2 lg:px-3 mt-8 lg:mt-12">
1017
<div class="flex flex-col">
11-
<h3 class="full-name">{{ name }}</h3>
12-
<div>
18+
<span class="full-name">{{ name }}</span>
19+
<div class="w-max">
1320
<a :href="profileUrl" target="_blank" class="username-container">
1421
<img
1522
class="h-5 pr-1"
1623
src="~assets/images/footer/icon-github.svg"
1724
alt="Github Account"
18-
width="auto"
25+
width="25"
1926
height="20"
2027
loading="lazy"
2128
/>
@@ -116,4 +123,13 @@ export default {
116123
.image-container {
117124
@apply self-center w-16 h-16 relative lg:w-20 lg:h-20;
118125
}
126+
127+
a {
128+
transition: all 0.3s ease 0s;
129+
}
130+
131+
a:hover {
132+
text-decoration: none;
133+
color: #00b199;
134+
}
119135
</style>

‎components/Organizations.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<div class="section-container">
33
<div class="content-conatiner">
44
<div class="text-section has-border">
5-
<h1 class="hidden head-text md:block">Rank</h1>
6-
<h1 class="head-text px-0 lg:px-7">Organization</h1>
5+
<h3 class="hidden head-text md:block">Rank</h3>
6+
<h3 class="head-text px-0 lg:px-7">Organization</h3>
77
<div class="flex justify-end w-full">
8-
<h1 class="head-text">Total</h1>
8+
<h3 class="head-text">Total</h3>
99
</div>
1010
</div>
1111
<div>
@@ -76,11 +76,11 @@ export default {
7676
}
7777
7878
.section-container {
79-
@apply block w-11/12 mx-auto lg:mx-0 bg-gray;
79+
@apply block bg-gray;
8080
}
8181
8282
.content-conatiner {
83-
@apply mx-3 lg:mx-0 bg-white;
83+
@apply bg-white;
8484
}
8585
8686
.has-border {

‎components/OrganizationsFilter.vue

+3-4
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
isOpen ? 'filter-section has-border' : 'filter-section lg:has-border'
77
"
88
>
9-
<h1 class="filter-text">Filter</h1>
9+
<h3 class="filter-text">Filter</h3>
1010
<button
1111
:class="isOpen ? 'expand-button' : 'expand-button-collapsed'"
1212
aria-label="Expand Filter Section"
@@ -50,12 +50,11 @@ export default {
5050

5151
<style lang="postcss" scoped>
5252
.section-container {
53-
@apply block w-11/12 lg:w-1/3 mx-auto lg:mx-0 lg:mr-5 lg:bg-lightgrey;
53+
@apply block lg:w-[28%] lg:bg-lightgrey;
5454
}
5555
5656
.content-conatiner {
5757
background-color: #f4f4f5;
58-
@apply mx-3 lg:mx-0;
5958
}
6059
6160
.filter-section {
@@ -73,7 +72,7 @@ export default {
7372
}
7473
7574
.sort-section {
76-
@apply mx-6 pt-6 pb-4;
75+
@apply pt-6 pb-4;
7776
}
7877
7978
.contributions-radio {

‎components/OrganizationsInput.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
@on-search="onSearch"
88
/>
99
</div>
10-
<h6 class="text-xs font-bold pb-2">Sort by:</h6>
11-
<div class="flex lg:flex-col">
10+
<span class="text-xs font-bold">Sort by:</span>
11+
<div class="flex lg:flex-col pt-1">
1212
<RadioButton
1313
class="mr-3 lg:pb-2 lg:mr-0"
1414
:input-id="`Total Stars`"

0 commit comments

Comments
 (0)