Skip to content

Commit 339699d

Browse files
Steven-NagieSteven-Nagie
committed
Fully function mvp home page.
1 parent b3fb781 commit 339699d

8 files changed

Lines changed: 141 additions & 24 deletions

File tree

‎src/assets/imgs/allies_icon.png‎

2.07 KB
Loading

‎src/assets/imgs/js_icon_blue.png‎

963 Bytes
Loading

‎src/assets/scss/styles.scss‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,14 @@ a {
7676
font-weight: 700;
7777
}
7878

79-
.font16-reg {
80-
color: white;
79+
.font16-reg-efefef {
80+
color: #efefef;
8181
font-family: $font;
8282
font-size: 16px;
8383
line-height: 22px;
8484
font-weight: 400;
8585
}
86+
8687
.font16-reg {
8788
color: white;
8889
font-family: $font;
@@ -124,20 +125,23 @@ a {
124125
position: absolute;
125126
}
126127

127-
.font12-reg {
128+
.font14-reg-gray {
129+
color: #C9C9C9;
128130
font-family: $font;
129-
font-size: 12px;
130-
font-weight: 100;
131+
font-size: 14px;
132+
line-height: 22px;
133+
font-weight: 400;
131134
}
132135

133-
.font14-reg-gray {
134-
color: #C9C9C9;
136+
.font14-reg-efefef {
137+
color: #efefef;
135138
font-family: $font;
136139
font-size: 14px;
137140
line-height: 22px;
138141
font-weight: 400;
139142
}
140143

144+
141145
.font14-lit-gray {
142146
color: #C9C9C9;
143147
font-family: $font;
@@ -154,6 +158,12 @@ a {
154158
font-weight: 400;
155159
}
156160

161+
.font12-reg {
162+
font-family: $font;
163+
font-size: 12px;
164+
font-weight: 100;
165+
}
166+
157167
.font12-reg-blue {
158168
color: #91b2e7;
159169
font-family: $font;
@@ -168,4 +178,4 @@ a {
168178
font-size: 12px;
169179
line-height: 12px;
170180
font-weight: 400;
171-
}
181+
}

‎src/components/home/home.html‎

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,33 +8,60 @@ <h3 id="your-next-challenge">Your Next Challenge...</h3>
88
<select class="home-dropdown" ng-init="selectedProgress = progressOptions[0]" ng-model="selectedProgress" ng-options="x for x in progressOptions"></select>
99
</div>
1010
<div class="challenge-buttons-div">
11-
<a ui-sref="training/{{randomKata.id}}"><button id="train-button" class="home-button" href="#/training/{{randomKata.id}}">Train</button></a>
11+
<a href="/#/training/{{randomKata.id}}"><button id="train-button" class="home-button">Train</button></a>
1212
<button id="skip-button" class="home-button" ng-click="getRandomKata(mainService.user.id)">Skip</button>
1313
</div>
1414
</div>
1515

1616
<div class="challenge-details">
17-
<h1>Kata name</h1>
18-
<p>more details about kata</p>
19-
<button ui-sref="training">Go to next page</button>
17+
<div class="challenge-details-top">
18+
<img id="difficulty-icon" src="./assets/imgs/{{randomKata.kyu}}_kyu_icon.png" alt="{{randomKata.kyu}}kyu">
19+
<h1 class="font16-reg">{{randomKata.name}}</h1>
20+
</div>
21+
<div class="random-kata-description-div">
22+
<p class="font14-reg-gray" id="random-kata-description">{{randomKata.description}}</p>
23+
</div>
24+
<div class="taggg-tag-div">
25+
<p class="font10-reg-gray" id="taggg-tag">Here's where tags go</p>
26+
</div>
2027
</div>
2128
</div> <!--END OF HOME-UP -->
2229

2330
<div class="ads">
2431
<p>codewars red logo</p>
25-
<div>
26-
<h6>Upgrade To Clonewars Red!</h6>
27-
<p>Support Clonewars and get some fancy upgrades like Pro Stats, Head-to-head comparisons, No ads, Stream Output and more.</p>
28-
<a href="https://www.codewars.com/subscribe"><button>Learn About Red</button></a>
32+
<div class="adsss-right">
33+
<h6 class="font16-reg-efefef">Upgrade To Clonewars Red!</h6>
34+
<p class="font14-reg-efefef">Support Clonewars and get some fancy upgrades like Pro Stats, Head-to-head comparisons, No ads, Stream Output and more.</p>
35+
<a href="https://www.codewars.com/subscribe" target="_blank"><button id="learn-about-red">Learn About Red</button></a>
2936
</div>
3037
</div> <!--END OF ADS-->
3138

3239
<div class="allies">
33-
40+
<div style="display:flex; align-items: center;">
41+
<img class="allies-icon" src="./assets/imgs/allies_icon.png" alt="alliesIcon">
42+
<p class="font16-bold">Allies</p>
43+
</div>
44+
<p class="font14-reg">You are automatically given an allegiance with anyone who is in the same clan as you. You can also become allies with other warriors by following each other or inviting new warriors to join.</p>
45+
<div class="list-of-allies">
46+
<table class="allies-list-header">
47+
<tr>
48+
<th>Position</th>
49+
<th>User</th>
50+
<th>Clan</th>
51+
<th>Honor</th>
52+
</tr>
53+
<tr ng-repeat="user in users">
54+
<p>{{user.position}}</p>
55+
<p>{{user.name}}</p>
56+
<p>{{user.clan}}</p>
57+
<p>{{user.honor}}</p>
58+
</tr>
59+
</table>
60+
</div>
3461
</div> <!--END OF ALLIES-->
3562

3663
<div class="discourse">
37-
64+
<p>Wow, what intelligent discourse.</p>
3865
</div> <!--END OF DISCOURSE-->
3966

4067

‎src/components/home/home.scss‎

Lines changed: 78 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,64 @@ $grey-color: #C0C0C0;
8585
height: 35vh;
8686
width: 40vw;
8787
background-color: $container3;
88+
padding-bottom: 10px;
8889
}
8990

91+
.challenge-details-top {
92+
display: flex;
93+
align-items: center;
94+
margin: 10px;
95+
}
96+
97+
.random-kata-description-div {
98+
overflow: scroll;
99+
width: 40vw;
100+
height: calc(25vh - 22px);
101+
padding: 10px;
102+
}
103+
104+
::-webkit-scrollbar {
105+
width: 15px;
106+
}
107+
108+
::-webkit-scrollbar-track {
109+
display: none;
110+
}
111+
112+
::-webkit-scrollbar-thumb {
113+
background-color: $sidebar-color;
114+
border-radius: 30%;
115+
}
116+
117+
::-webkit-scrollbar-corner {
118+
display: none;
119+
}
120+
121+
#random-kata-description {
122+
color: #efefef;
123+
}
124+
125+
.taggg-tag-div {
126+
background-color: $container2;
127+
display: inline-block;
128+
justify-content: center;
129+
align-items: center;
130+
margin-top: 10px;
131+
margin-left: 10px;
132+
}
133+
134+
#taggg-tag {
135+
margin: 0 10px;
136+
color: #c9c9c9;
137+
}
138+
139+
#taggg-tag:hover {
140+
color: $blue-color;
141+
-webkit-user-select: none;
142+
cursor: pointer;
143+
}
144+
145+
/***********ADS**********/
90146
.ads {
91147
height: 20vh;
92148
width: 60vw;
@@ -96,10 +152,28 @@ $grey-color: #C0C0C0;
96152
align-items: center;
97153
}
98154

99-
.ads-right {
100-
// background-color: red;
101-
// display: flex;
102-
// flex-direction: column;
155+
.adsss-right {
156+
display: flex;
157+
flex-direction: column;
158+
}
159+
160+
#learn-about-red {
161+
color: $orange-color;
162+
border: 1px solid $orange-color;
163+
background-color: rgba(0,0,0,0);
164+
border-radius: 5%;
103165
}
104166

105167
/**********ALLIES ***********/
168+
.allies {
169+
width: 60vw;
170+
//For whatever reason, having this height throws off the main page both height and width.
171+
// height: 75vh;
172+
background-color: $container3;
173+
}
174+
175+
.allies-icon {
176+
height: 15px;
177+
width: 15px;
178+
margin-horizontal: 10px;
179+
}

‎src/components/home/homeCtrl.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ angular.module('app').controller('homeCtrl', function($scope, $state, mainServic
88
$scope.getUser = () => {
99
mainService.getUser().then(response => {
1010
console.log(response.data);
11-
mainService.user = mainService.rankCalculator(response.data);
11+
mainService.user = mainService.rankCalculator(response.data[0]);
1212
$scope.getRandomKata(mainService.user.id);
1313
})
1414
}

‎src/components/kata_list/kata_list.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,12 @@ $grey-color: #C0C0C0;
122122
width: 15px;
123123
}
124124

125+
#language-icon {
126+
height: 30px;
127+
width: 30px;
128+
margin-right: 15px;
129+
}
130+
125131
.kata-stats-info {
126132
color: $grey-color;
127133
margin-top: 10px;

‎src/components/kata_list/library.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ <h3 class="font17-reg">
8383
</div>
8484

8585
<div class="individual-kata-languages">
86-
<img id="difficulty-icon" src="./assets/imgs/6_kyu_icon.png" alt="">
86+
<img id="language-icon" src="./assets/imgs/js_icon_blue.png" alt="">
8787
</div>
8888

8989
<!-- Created this div with the hope of creating the perfect linear gradient, fading border as on the codewars site. -->

0 commit comments

Comments
 (0)