Skip to content

Commit 747053c

Browse files
author
Jon Myrick
authored
Merge pull request CodewarsClone#51 from CodewarsClone/Wed21.2
Wed21.2
2 parents ee3a968 + e4e6b95 commit 747053c

5 files changed

Lines changed: 87 additions & 62 deletions

File tree

‎gulpfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,4 +69,5 @@ gulp.task('watch', function () {
6969
return gulp.watch([paths.jsSource, paths.cssFiles, paths.scssFiles], ['clean']);
7070
});
7171

72+
7273
gulp.task('default', ['clean', 'watch']);

‎src/components/directive.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,17 @@ angular.module('app').directive('animateDir', function () {
1313
$('.side-menu-container').on('mouseleave', function () {
1414
console.log("it's all gone");
1515
$('.side-menu-container').css('width', '0px');
16-
})
17-
$('.top-menu').on('mouseenter', function(){
18-
console.log('You have entered the twilight zone');
19-
})
16+
});
17+
$('.top-menu').on('mouseenter', function () {
18+
console.log('You have entered the twilight zone');
19+
});
20+
21+
$('.solutions-icon').on('mouseclick', function () {
22+
console.log("This is working");
23+
});
24+
25+
26+
2027
})
2128
}
2229
}

‎src/components/training/animateDir.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
angular.module('app').directive('trainingAnimateDir', function () {
2+
return {
3+
scope: {
4+
trainingAnimate: "="
5+
},
6+
restrict: 'EA',
7+
link: function (scope, elems, attrs) {
8+
$(document).ready(function () {
9+
$('.solutions-icon').on('mouseclick', function () {
10+
console.log("This is working");
11+
});
12+
})
13+
}
14+
}
15+
});

‎src/components/training/training.html‎

Lines changed: 45 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,84 @@
11
<section class="training-main">
2-
32
<div class="training-body">
4-
5-
<div class="training-top">
6-
3+
<div class="training-top" ng-style='allGone'>
74
<div class="kata-name-container">
8-
95
<div class="kata-name-container-top">
106
<img src="./assets/imgs/5_kyu_icon.png" alt="Difficulty" id="difficulty-icon">
117
<h3 class="font16-reg" id="kata-name">
128
Name of Kata
139
</h3>
1410
</div>
15-
16-
1711
<div class="kata-stats">
1812
<p>Here's where stats go</p>
1913
<p>Here's where stats go</p>
2014
<p>Here's where stats go</p>
2115
</div>
22-
23-
</div> <!--End kata-name-container div-->
24-
16+
</div>
17+
<!--End kata-name-container div-->
2518
<div class="selection-div">
26-
<select class="language-select-dropdown select-dropdown" ng-init="selectedLanguage = languages[0]" ng-model="selectedLanguage" ng-options="x for x in languages">
19+
<select class="language-select-dropdown select-dropdown" ng-init="selectedLanguage = languages[0]" ng-model="selectedLanguage"
20+
ng-options="x for x in languages">
2721

2822
</select>
29-
<select class="language-version-select-dropdown select-dropdown" ng-init="selectedVersion = versions[0]" ng-model="selectedVersion" ng-options="x for x in versions">
23+
<select class="language-version-select-dropdown select-dropdown" ng-init="selectedVersion = versions[0]" ng-model="selectedVersion"
24+
ng-options="x for x in versions">
3025

3126
</select>
3227
</div>
33-
3428
<div class="assorted-options">
3529
<div class="view-options">Here's where view options go</div>
3630
<div class="view-options">Here's where view options go</div>
3731
<div class="view-options">Here's where view options go</div>
3832
</div>
39-
4033
</div>
41-
4234
<div class="kata">
43-
44-
<div class="instructions">
45-
<div class="instructions-head">
46-
<button class="instructions-selector font13-reg-gray" ng-click="showInstructions()">Instructions</button>
47-
<button class="instructions-selector font13-reg-gray" ng-click="showOutput()">Output</button>
35+
<!-- <div class="instructions">
36+
<div class="instructions-head">
37+
<button class="instructions-selector font13-reg-gray">Instructions</button>
38+
<button class="instructions-selector font13-reg-gray">Output</button>
39+
</div>
40+
<hr>
41+
<h2 class="font20-reg">Name of Kata</h2>
42+
<div>
43+
<p>Here's where the instructions go. We have to think about how to present code samples.</p>
44+
<div ng-repeat="test in output">
45+
<p>{{test.test}}</p>
46+
<p>{{test.result}}</p>
4847
</div>
49-
<hr>
50-
<show-output ng-hide="showOutputShow"></show-output>
51-
<show-instructions ng-hide="showInstructionsShow"></show-instructions>
48+
</div>
49+
</div> -->
50+
<div class="instructions" ng-style="instructionStyle">
51+
<div class="instructions-head">
52+
<button class="instructions-selector font13-reg-gray" ng-click="showInstructions()">Instructions</button>
53+
<button class="instructions-selector font13-reg-gray" ng-click="showOutput()">Output</button>
54+
</div>
55+
<hr>
56+
<show-output ng-hide="showOutputShow"></show-output>
57+
<show-instructions ng-hide="showInstructionsShow"></show-instructions>
5258
</div>
53-
54-
<div class="kata-right">
55-
<div>
59+
<div class="kata-right" ng-style='kataStyle'>
5660
<div class="solution-div font14-lit-gray">
57-
<p>Solution:</p>
58-
<div>
59-
<textarea name="solution" id="solution-input" ng-init="solutionInput = 'var a = 1;'"ng-model="solutionInput"></textarea>
61+
<div class="solutions-header">
62+
<p>Solution:</p>
63+
<button value='small' ng-click="kataStyle={'width':'40vw'}; instructionStyle={'width':'60vw'}; allGone={'height':'100px'}">small</button>
64+
<button value='medium' ng-click="kataStyle={'width':'60vw'}; instructionStyle={'width':'40vw'}; allGone={'height':'100px'}">medium</button>
65+
<button value='large' ng-click="kataStyle={'width':'100vw','margin':'15px'}; instructionStyle={'display':'none'}; allGone={'height':'100px'}">large</button>
66+
<button value='full-screen' ng-click="kataStyle={'width':'100vw','margin':'15px'}; instructionStyle={'display':'none'}; allGone={'display':'none'}; exampleGone={'display':'none'}">full screen</button>
67+
</div>
68+
<div ng-style="exampleGone" class='example'>
69+
<textarea name="solution" id="solution-input" ng-init="solutionInput = 'var a = 1;'" ng-model="solutionInput"></textarea>
6070
</div>
6171
</div>
62-
6372
<div class="example-tests-div font14-lit-gray">
6473
<p>Example Tests:</p>
65-
<form>
66-
<textarea name="examples" id="example-input" ng-init="examplesInput = 'Test.assertEquals(a, 1);'" id="example-tests-input" ng-model="examplesInput"></textarea>
67-
</form>
68-
<button ng-click="testExamples()" class="test-examples-button font12-reg-blue">RUN EXAMPLES</button>
69-
<button ng-click="testSuite()" class="test-suite-button font12-reg-black" style=""><i class="fa fa-caret-right fa-lg" style="margin-right: 2px" aria-hidden="true"></i>ATTEMPT</button>
70-
</div>
74+
<textarea name="examples" id="example-input" ng-init="examplesInput = 'Test.assertEquals(a, 1);'" id="example-tests-input"
75+
ng-model="examplesInput"></textarea>
76+
<div class='button-div'>
77+
<button ng-click="testExamples()" class="test-examples-button font12-reg-blue">RUN EXAMPLES</button>
78+
<button ng-click="testSuite()" class="test-suite-button font12-reg-black"><i class="fa fa-caret-right fa-lg" style="margin-right: 2px" aria-hidden="true"></i>ATTEMPT</button>
79+
</div>
7180
</div>
7281
</div>
73-
7482
</div>
75-
7683
</div>
77-
7884
</section>

‎src/components/training/training.scss‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -74,18 +74,21 @@ $grey-color: #C0C0C0;
7474
display: flex;
7575
flex-direction: column;
7676
padding-top: 2vh;
77-
height: calc(100vh - 150px);
78-
width: 50vw;
77+
height: 105vh;
78+
width: 60vw;
7979
background-color: $container1;
80-
margin: 15px 15px 15px 0px;
80+
margin: 15px 15px 15px 0;
81+
padding: 10px;
8182
}
8283

8384
.instructions {
8485
// height: calc(100vh - 150px);
85-
width: 50vw;
86+
width: 40vw;
8687
overflow: scroll;
8788
margin: 15px;
8889
background-color: $container1;
90+
padding: 10px;
91+
height: 105vh;
8992
}
9093

9194
.instructions-head {
@@ -106,22 +109,13 @@ hr {
106109
background-image: -linear-gradient(left, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
107110
}
108111

109-
#solution-input {
110-
height: 40vh;
111-
width: 40vw;
112-
}
113-
114-
#example-tests-input {
115-
height: 25vh;
116-
width: 40vw;
117-
}
118-
119112
.test-examples-button {
120113
border: 1px solid #91b2e7;
121114
border-radius: 4%;
122115
width: 113px;
123116
height: 30px;
124117
background-color: #3C3C3C;
118+
margin:15px;
125119
}
126120

127121
.test-suite-button {
@@ -130,12 +124,14 @@ hr {
130124
width: 113px;
131125
height: 30px;
132126
background-color: #91b2e7;
127+
margin:15px;
133128
}
134129

135-
.training-body {
136-
// background-color: red;
130+
.button-div {
131+
display:flex;
132+
justify-content: right;
137133
}
138134

139-
#text-input {
140-
141-
}
135+
.example-tests-div {
136+
height: 15vh;
137+
}

0 commit comments

Comments
 (0)