Skip to content

Commit e132b08

Browse files
author
Jon Myrick
authored
Merge pull request CodewarsClone#117 from CodewarsClone/MenuEtc
Finished with solution voting and styling
2 parents 67b49dd + 8ebaec1 commit e132b08

6 files changed

Lines changed: 65 additions & 54 deletions

File tree

‎controllers/kataCtrl.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ module.exports = {
5050
getUserKatas: (req, res, next) => {
5151
db.read.user_katas([req.params.userid], (err, katas) => {
5252
if (err) return next(err);
53+
console.log(katas);
5354
return res.status(200).json(katas);
5455
})
5556
},

‎db/read/user_katas.sql‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
SELECT script, kyu, description, name, katas.id, s.id, katas.creator FROM katas
1+
SELECT script, kyu, description, name, katas.id, s.id as solution_id, katas.creator FROM katas
22
JOIN solutions s ON katas.id = s.kata_id
33
WHERE s.user_id = $1;

‎db/start/katas.sql‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ VALUES (1, 2, 'function generateRange(min, max, step){\n let arr = [];\n for (
3232

3333
(1, 8, 'function kebabize(str) {\n str = str.split('''').map((letter) => {\n if (!isNaN(parseInt(letter))) {\n return '''';\n } else if (letter === letter.toUpperCase()) {\n return ''-'' + letter.toLowerCase();\n } else {\n return letter;\n }\n }).join('''');\n if (str.charAt(0) === ''-'') {\n str = str.slice(1);\n }\n return str;\n} '),
3434
(1, 1, 'var a = 1'),
35-
(1,1, 'let a = 1'),
35+
(1, 1, 'let a = 1'),
3636
(1, 8, 'function kebabize(str) {\n return str.replace(/[^a-z]/ig, '').replace(/^[A-Z]/, c => c.toLowerCase()).replace(/[A-Z]/g, c => `-${c.toLowerCase()}`);\n}')
3737
;
3838

‎src/components/home/homeCtrl.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ angular.module('app').controller('homeCtrl', function($scope, $state, mainServic
4141
$scope.getUserKatas = (userid) => {
4242
mainService.getUserKatas(userid).then(response => {
4343
$scope.userKatas = response.data;
44+
console.log($scope.userKatas);
4445
})
4546
}
4647

‎src/components/solutions/solutions.html‎

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,58 @@
11
<section class="solutions" ng-init="init()">
2-
3-
<!-- THIS IS IN HERE FROM WHEN I THOUGHT THE SOLUTIONS PAGE WOULD BE SPECIFIC TO THE USER. -->
4-
<!-- <div class="solutions-upper-div any-solutions-div">
5-
<div class="solutions-upper-left">
6-
<img id="solutions-profile-pic" src="{{user.picture_url}}" alt="Here's where your face should be">
7-
</div>
8-
<div class="solutions-upper-main">
9-
<div class="solutions-upper-upper">
10-
<img id="solutions-rank-icon" src="./assets/imgs/6_kyu_icon.png" alt="Rank: 6_kyu">
11-
<h2 class="font20-reg">{{user.username}}</h2>
12-
<p class="font14-lit-gray">Honor</p>
13-
</div>
14-
<div class="solutions-upper-mid">
15-
<p class="font14-reg-efefef">Tons of info goes here</p>
16-
</div>
17-
<div class="solutions-upper-bottom">
18-
<button>View Profile Badges</button>
19-
</div>
20-
</div>
21-
</div> END SOLUTIONS UPPER DIV-->
22-
23-
<div class="solutions-main any-solutions-div">
24-
<div class="solutions-main-head">
25-
<img class="difficulty-icon" src="./assets/imgs/{{kataById.kyu}}_kyu_icon.png" alt="{{kataById.kyu}}_kyu">
26-
<p class="font17-reg">{{kataById.name}}</p>
27-
</div>
28-
<div class="all-solutions" ng-repeat="solution in kataSolutions track by $index">
29-
<div class="solution-username">
30-
<img class="solution-creator-icon" src="./assets/imgs/creator_icon.png" alt="user">
31-
<p class="font15-reg">{{solution.username}}</p>
32-
</div>
33-
<div class="solutions-page-solutions-div">
2+
3+
<!-- THIS IS IN HERE FROM WHEN I THOUGHT THE SOLUTIONS PAGE WOULD BE SPECIFIC TO THE USER. -->
4+
<!-- <div class="solutions-upper-div any-solutions-div">
5+
<div class="solutions-upper-left">
6+
<img id="solutions-profile-pic" src="{{user.picture_url}}" alt="Here's where your face should be">
7+
</div>
8+
<div class="solutions-upper-main">
9+
<div class="solutions-upper-upper">
10+
<img id="solutions-rank-icon" src="./assets/imgs/6_kyu_icon.png" alt="Rank: 6_kyu">
11+
<h2 class="font20-reg">{{user.username}}</h2>
12+
<p class="font14-lit-gray">Honor</p>
13+
</div>
14+
<div class="solutions-upper-mid">
15+
<p class="font14-reg-efefef">Tons of info goes here</p>
16+
</div>
17+
<div class="solutions-upper-bottom">
18+
<button>View Profile Badges</button>
19+
</div>
20+
</div>
21+
</div> END SOLUTIONS UPPER DIV-->
22+
23+
<div class="solutions-main any-solutions-div">
24+
<div class="solutions-main-head">
25+
<img class="difficulty-icon" src="./assets/imgs/{{kataById.kyu}}_kyu_icon.png" alt="{{kataById.kyu}}_kyu">
26+
<p class="font17-reg">{{kataById.name}}</p>
27+
</div>
28+
<div class="all-solutions" ng-repeat="solution in kataSolutions track by $index">
29+
<div class="solution-username">
30+
<img class="solution-creator-icon" src="./assets/imgs/creator_icon.png" alt="user">
31+
<p class="font15-reg">{{solution.username}}</p>
32+
</div>
33+
<div class="solutions-page-solutions-div">
3434
<textarea class="solution-text" id="{{$index}}" codemirror-directive>
3535
</textarea>
36-
</div>
37-
<div class="solutions-vote-buttons-div">
38-
<div class="solution-satisfaction-div">
39-
<img class="solution-stats-icon .font14-reg-gray" src="./assets/imgs/satisfaction_icon.png" />
40-
<p class="solution-stats-info">Considered best practice by {{solution.satisfaction}}% of {{solution.votes}} votes</p>
41-
</div>
42-
<button class="vote-button" ng-click="voteSolution(solution.id, true)">
43-
<i class="fa fa-thumbs-up" style="color: #efefef; margin: 0 10px 0 5px;" aria-hidden="true"></i>
44-
<p class="font14-reg-efefef" style="margin: 0 5px 0 0">Best Practice</p>
45-
</button>
46-
<button class="vote-button" ng-click="voteSolution(solution.id, false)">
47-
<i class="fa fa-thumbs-down" style="color: #efefef; margin: 0 10px 0 5px;" aria-hidden="true"></i>
48-
<p class="font14-reg-efefef" style="margin: 0 5px 0 0">No Good</p>
49-
</button>
50-
</div>
51-
<hr class="solutions-bottom-border-hr">
52-
</div>
53-
</div> <!--END SOLUTIONS MAIN-->
36+
</div>
37+
<div class="solutions-vote-buttons-div">
38+
<div class="solution-satisfaction-div">
39+
<img class="solution-stats-icon .font14-reg-gray" src="./assets/imgs/satisfaction_icon.png"/>
40+
<p class="solution-stats-info">Considered best practice by {{solution.satisfaction}}% of {{solution.votes}} votes</p>
41+
</div>
42+
<div class="solution-button-wrapper">
43+
<button class="vote-button" ng-click="voteSolution(solution.id, true)">
44+
<i class="fa fa-thumbs-up" style="color: #efefef; margin: 0 10px 0 5px;" aria-hidden="true"></i>
45+
<p class="font14-reg-efefef" style="margin: 0 5px 0 0">Best Practice</p>
46+
</button>
47+
<button class="vote-button" ng-click="voteSolution(solution.id, false)">
48+
<i class="fa fa-thumbs-down" style="color: #efefef; margin: 0 10px 0 5px;" aria-hidden="true"></i>
49+
<p class="font14-reg-efefef" style="margin: 0 5px 0 0">No Good</p>
50+
</button>
51+
</div>
52+
</div>
53+
<hr class="solutions-bottom-border-hr">
54+
</div>
55+
</div> <!--END SOLUTIONS MAIN-->
5456

5557

5658
</section>

‎src/components/solutions/solutions.scss‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,16 +114,21 @@ $green-color: #5F8120;
114114
.solutions-vote-buttons-div {
115115
display: flex;
116116
align-items: center;
117+
justify-content: space-between;
117118
flex-wrap: wrap;
118119
margin-top: 5px;
119120
margin-left: -10px;
120121
}
121122

123+
.solution-button-wrapper {
124+
display: flex;
125+
}
126+
122127
.solution-satisfaction-div {
123128
margin-left: 1vw;
124129
display: flex;
125-
justify-content: space-between;
126-
width: 290px;
130+
justify-content: flex-start;
131+
width: 350px;
127132
}
128133

129134
.solution-stats-icon {
@@ -133,6 +138,7 @@ $green-color: #5F8120;
133138

134139
.solution-stats-info {
135140
color: $grey-color;
141+
margin-left: 10px;
136142
}
137143

138144
.solutions-bottom-border-div {
@@ -144,3 +150,4 @@ $green-color: #5F8120;
144150
background-image: -o-linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
145151
background-image: -linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
146152
}
153+

0 commit comments

Comments
 (0)