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‎

Lines changed: 1 addition & 44 deletions
Loading

‎components/AreaChart.vue‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 2 additions & 2 deletions
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‎

Lines changed: 7 additions & 4 deletions
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‎

Lines changed: 5 additions & 5 deletions
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‎

Lines changed: 3 additions & 4 deletions
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‎

Lines changed: 3 additions & 3 deletions
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‎

Lines changed: 5 additions & 5 deletions
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‎

Lines changed: 9 additions & 9 deletions
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"

0 commit comments

Comments
 (0)