Skip to content

Commit 9a87876

Browse files
Steven-NagieSteven-Nagie
committed
Kata_list page complete for phase 2/MVP.
1 parent 2effa7c commit 9a87876

12 files changed

Lines changed: 273 additions & 53 deletions

File tree

‎src/assets/imgs/bell_icon.png‎

927 Bytes
Loading

‎src/assets/imgs/check_icon.png‎

672 Bytes
Loading

‎src/assets/imgs/dropdown_icon.png‎

628 Bytes
Loading

‎src/assets/imgs/flag_icon.png‎

519 Bytes
Loading

‎src/assets/imgs/stairs_icon.png‎

230 Bytes
Loading

‎src/assets/imgs/star_icon.png‎

964 Bytes
Loading

‎src/assets/imgs/tag_icon.png‎

777 Bytes
Loading

‎src/assets/scss/styles.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,14 @@ a {
6868
font-weight: 400;
6969
}
7070

71+
.font15-reg {
72+
font-size: 15px;
73+
line-height: 21px;
74+
font-family: $font;
75+
color: #efefef;
76+
font-weight: 400;
77+
}
78+
7179
.font14-reg {
7280
color: white;
7381
font-family: $font;
@@ -76,6 +84,14 @@ a {
7684
font-weight: 400;
7785
}
7886

87+
.searchBar-font {
88+
color: #efefef;
89+
font-size: 14px;
90+
line-height: 16px;
91+
font-weight: 400;
92+
font-family: $font;
93+
}
94+
7995
.font14-bold {
8096
color: white;
8197
font-family: $font;
@@ -131,6 +147,14 @@ a {
131147
font-weight: 400;
132148
}
133149

150+
.font10-reg-gray {
151+
color: $grey-color;
152+
font-family: $font;
153+
font-size: 10px;
154+
font-weight: 400;
155+
line-height: 20px;
156+
}
157+
134158
/**************SIDE MENU**************/
135159
.view {
136160
display:flex;

‎src/components/kata_list/kata_left.scss‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
/************ KATA_LEFT ***********/
2+
3+
/******** VARIABLES *********/
4+
$sidebar-color: #222222;
5+
$main-background: #303133;
6+
$container1: #262729;
7+
$container2: #2B2C2E;
8+
$container3: #3C3C3C;
9+
$container4: #1D1D1F;
10+
$blueContainer: #363749;
11+
$button1: #1E1F21;
12+
$selectedButton: #444547;
13+
$searchBarHighlighted: #131414;
14+
15+
$font: 'Lato', sans-serif;
16+
17+
$yellow-color: #ECB613;
18+
$blue-color: #6795DE;
19+
$orange-color: #CF4B32;
20+
$clone-wars-color: rgb(217, 217, 217);
21+
$grey-color: #C0C0C0;
22+
23+
/************* KATA_LEFT CSS *********/
24+
.kata-list-left {
25+
width: 25vw;
26+
background-color: $container1;
27+
margin-right: 15px;
28+
display: flex;
29+
flex-direction: column;
30+
align-items: center;
31+
padding: 10px;
32+
}
33+
34+
.kata-left-div {
35+
border-bottom: 1px solid $selectedButton;
36+
padding: 15px;
37+
margin-vertical: 5px;
38+
}
39+
40+
#kata-search {
41+
width: calc(25vw * .85);
42+
height: 40px;
43+
background-color: $sidebar-color;
44+
border: none;
45+
padding: 10px;
46+
color: white;
47+
}
48+
49+
::-webkit-input-placeholder {
50+
font-family: 'Lato', sans-serif;
51+
color: $grey-color;
52+
font-size: 14px;
53+
line-height: 16px;
54+
font-weight: 400;
55+
margin-left: 20px;
56+
}
57+
::-moz-placeholder {
58+
font-family: 'Lato', sans-serif;
59+
color: $grey-color;
60+
font-size: 14px;
61+
line-height: 16px;
62+
font-weight: 400;
63+
margin-left: 20px;
64+
}
65+
::-ms-input-placeholder {
66+
font-family: 'Lato', sans-serif;
67+
color: $grey-color;
68+
font-size: 14px;
69+
line-height: 16px;
70+
font-weight: 400;
71+
margin-left: 20px;
72+
}
73+
74+
#kata-search:focus {
75+
background-color: $searchBarHighlighted;
76+
}
77+
78+
.kata-sort {
79+
display: flex;
80+
flex-direction: column;
81+
}
82+
83+
.kata-sort-div {
84+
display: flex;
85+
flex-direction: row;
86+
width: calc(25vw * .85);
87+
justify-content: space-between;
88+
align-items: center;
89+
margin-bottom: 15px;
90+
}
91+
92+
.kata-sort-dropdown {
93+
background-color: $sidebar-color;
94+
color: #efefef;
95+
border: none;
96+
height: 35px;
97+
width: 175px;
98+
-webkit-appearance: none;
99+
-moz-appearance: none;
100+
padding-left: 5px;
101+
}
102+
103+
.sort-box {
104+
background-image: url("../assets/imgs/dropdown_icon.png");
105+
background-repeat: no-repeat;
106+
background-size: 15px 15px;
107+
background-position: 5% 50%;
108+
display: flex;
109+
padding-left: 30px;
110+
}
111+
112+
#kata-sort-difficulty {
113+
width: calc(25vw * .85);
114+
}
115+
116+
.assorted-difficulty-icons {
117+
// width: calc(25vw * .75);
118+
padding: 30px;
119+
align-self: flex-start;
120+
}
121+
122+
.difficulty-top {
123+
margin-bottom: 5px;
124+
}
125+
126+
.kata-sort-tags {
127+
width: calc(25vw * .85);
128+
padding-vertical: 20px;
129+
}
130+
131+
.tags-header {
132+
align-self: flex-start;
133+
margin-top: 10px;
134+
margin-bottom: 10px;
135+
}
136+
137+
.tag {
138+
align-self: center;
139+
margin-bottom: 5px;
140+
}
141+
142+
.tag:hover {
143+
color: $blue-color;
144+
-webkit-user-select: none;
145+
cursor: pointer;
146+
margin-bottom: 5px;
147+
}

‎src/components/kata_list/kata_list.scss‎

Lines changed: 43 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ $container4: #1D1D1F;
1010
$blueContainer: #363749;
1111
$button1: #1E1F21;
1212
$selectedButton: #444547;
13+
$searchBarHighlighted: #131414;
1314

1415
$font: 'Lato', sans-serif;
1516

@@ -72,30 +73,8 @@ $grey-color: #C0C0C0;
7273
margin: 0;
7374
}
7475

75-
.kata-list-left {
76-
width: 15vw;
77-
// height: 100vh;
78-
background-color: red;
79-
margin-right: 15px;
80-
}
81-
82-
#kata-search {
83-
width: 15vw;
84-
}
85-
86-
.kata-sort {
87-
display: flex;
88-
flex-direction: column;
89-
}
90-
91-
.kata-sort-div {
92-
display: flex;
93-
flex-direction: row;
94-
95-
}
96-
9776
.kata-list-right {
98-
width: 85vw;
77+
width: 75vw;
9978
}
10079

10180
/************* INDIVIDUAL KATA DIV *********/
@@ -109,13 +88,13 @@ $grey-color: #C0C0C0;
10988

11089

11190

112-
.kata-bottom-border-hr {
113-
background-image: -webkit-linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
114-
background-image: -moz-linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
115-
background-image: -ms-linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
116-
background-image: -o-linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
117-
background-image: -linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
118-
}
91+
// .kata-bottom-border-hr {
92+
// background-image: -webkit-linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
93+
// background-image: -moz-linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
94+
// background-image: -ms-linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
95+
// background-image: -o-linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
96+
// background-image: -linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
97+
// }
11998

12099
.indv-kata-top {
121100
display: flex;
@@ -139,12 +118,44 @@ $grey-color: #C0C0C0;
139118
.kata-stats-icon {
140119
margin-top: 10px;
141120
margin-left: 5px;
142-
height: 10px;
143-
width: 10px;
121+
height: 15px;
122+
width: 15px;
144123
}
145124

146125
.kata-stats-info {
147126
color: $grey-color;
148127
margin-top: 10px;
149128
margin-left: 5px;
150129
}
130+
131+
.indv-kata-tags {
132+
margin-left: 6px;
133+
display: flex;
134+
flex-direction: row;
135+
align-items: center;
136+
}
137+
138+
#tag-icon {
139+
height: 10px;
140+
width: 10px;
141+
margin-top: 13px;
142+
}
143+
144+
.tag-tag-div {
145+
background-color: $container2;
146+
display: flex;
147+
justify-content: center;
148+
align-items: center;
149+
margin-top: 10px;
150+
margin-left: 10px;
151+
}
152+
153+
#tag-tag {
154+
margin: 0 10px;
155+
}
156+
157+
#tag-tag:hover {
158+
color: $blue-color;
159+
-webkit-user-select: none;
160+
cursor: pointer;
161+
}

0 commit comments

Comments
 (0)