Skip to content

Commit 32f7de6

Browse files
author
Jon Myrick
authored
Merge pull request CodewarsClone#35 from CodewarsClone/trainingFE
Training fe
2 parents 02a1009 + 5fa9dd0 commit 32f7de6

5 files changed

Lines changed: 99 additions & 19 deletions

File tree

‎src/assets/lib/seti.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
3+
Name: seti
4+
Author: Michael Kaminsky (http://github.com/mkaminsky11)
5+
6+
Original seti color scheme by Jesse Weed (https://github.com/jesseweed/seti-syntax)
7+
8+
*/
9+
10+
11+
.cm-s-seti.CodeMirror {
12+
background-color: #151718 !important;
13+
color: #CFD2D1 !important;
14+
border: none;
15+
}
16+
.cm-s-seti .CodeMirror-gutters {
17+
color: #404b53;
18+
background-color: #0E1112;
19+
border: none;
20+
}
21+
.cm-s-seti .CodeMirror-cursor { border-left: solid thin #f8f8f0; }
22+
.cm-s-seti .CodeMirror-linenumber { color: #6D8A88; }
23+
.cm-s-seti.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
24+
.cm-s-seti .CodeMirror-line::selection, .cm-s-seti .CodeMirror-line > span::selection, .cm-s-seti .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
25+
.cm-s-seti .CodeMirror-line::-moz-selection, .cm-s-seti .CodeMirror-line > span::-moz-selection, .cm-s-seti .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
26+
.cm-s-seti span.cm-comment { color: #41535b; }
27+
.cm-s-seti span.cm-string, .cm-s-seti span.cm-string-2 { color: #55b5db; }
28+
.cm-s-seti span.cm-number { color: #cd3f45; }
29+
.cm-s-seti span.cm-variable { color: #55b5db; }
30+
.cm-s-seti span.cm-variable-2 { color: #a074c4; }
31+
.cm-s-seti span.cm-def { color: #55b5db; }
32+
.cm-s-seti span.cm-keyword { color: #ff79c6; }
33+
.cm-s-seti span.cm-operator { color: #9fca56; }
34+
.cm-s-seti span.cm-keyword { color: #e6cd69; }
35+
.cm-s-seti span.cm-atom { color: #cd3f45; }
36+
.cm-s-seti span.cm-meta { color: #55b5db; }
37+
.cm-s-seti span.cm-tag { color: #55b5db; }
38+
.cm-s-seti span.cm-attribute { color: #9fca56; }
39+
.cm-s-seti span.cm-qualifier { color: #9fca56; }
40+
.cm-s-seti span.cm-property { color: #a074c4; }
41+
.cm-s-seti span.cm-variable-3 { color: #9fca56; }
42+
.cm-s-seti span.cm-builtin { color: #9fca56; }
43+
.cm-s-seti .CodeMirror-activeline-background { background: #101213; }
44+
.cm-s-seti .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }

‎src/assets/scss/styles.scss‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@ $container3: #3C3C3C;
88
$container4: #1D1D1F;
99
$blueContainer: #363749;
1010
$button1: #1E1F21;
11-
$font: 'Lato',
12-
sans-serif;
11+
12+
$font: 'Lato', sans-serif;
13+
1314
$yellow-color: #ECB613;
1415
$blue-color: #6795DE;
1516
$orange-color: #CF4B32;
@@ -79,7 +80,7 @@ a {
7980
.font12-reg {
8081
font-family: $font;
8182
font-size: 12px;
82-
font-weight: Light;
83+
font-weight: 100;
8384
}
8485

8586
.font14-reg-gray {
@@ -90,6 +91,14 @@ a {
9091
font-weight: 400;
9192
}
9293

94+
.font14-lit-gray {
95+
color: #C9C9C9;
96+
font-family: $font;
97+
font-size: 14px;
98+
line-height: 22px;
99+
font-weight: 100;
100+
}
101+
93102
.font13-reg-gray {
94103
color: #cfcfcf;
95104
font-family: $font;
@@ -175,10 +184,7 @@ flex-direction: row;
175184
}
176185

177186
.main-div {
178-
// top: 50%;
179-
// left: 50%;
180-
// transform: translate(50%, -50%);
181-
background-color: red;
187+
182188
height: 100vh;
183189
width: 100%;
184190
margin: auto;

‎src/components/training/training.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -67,23 +67,23 @@ <h2 class="font20-reg">Name of Kata</h2>
6767
</div>
6868

6969
<div class="kata-right">
70-
71-
<div class="solution-div">
70+
<div>
71+
<div class="solution-div font14-lit-gray">
7272
<p>Solution:</p>
73-
<form>
74-
Function: <textarea name="solution" cols="40" rows="5" id="solution-input" ng-init="solutionInput = 'var a = 1;'"ng-model="solutionInput"></textarea>
75-
</form>
73+
<div>
74+
<textarea name="solution" id="solution-input" ng-init="solutionInput = 'var a = 1;'"ng-model="solutionInput"></textarea>
75+
</div>
7676
</div>
7777

78-
<div class="example-tests-div">
78+
<div class="example-tests-div font14-lit-gray">
7979
<p>Example Tests:</p>
8080
<form>
81-
<textarea name="examples" cols="40" rows="5" ng-init="examplesInput = 'Test.assertEquals(a, 1);'" id="example-tests-input" ng-model="examplesInput"></textarea>
81+
<textarea name="examples" id="example-input" ng-init="examplesInput = 'Test.assertEquals(a, 1);'" id="example-tests-input" ng-model="examplesInput"></textarea>
8282
<button ng-click="testExamples(solutionInput, examplesInput)" class="test-examples-button font12-reg-blue">RUN EXAMPLES</button>
8383
<button ng-click="testSuite(solutionInput)" 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>
8484
</form>
8585
</div>
86-
86+
</div>
8787
</div>
8888

8989
</div>

‎src/components/training/training.scss‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
11
/************TRAINING PAGE STYLES*********/
2+
$sidebar-color: #222222;
3+
$main-background: #303133;
4+
$container1: #262729;
5+
$container2: #2B2C2E;
6+
$container3: #3C3C3C;
7+
$container4: #1D1D1F;
8+
$blueContainer: #363749;
9+
$button1: #1E1F21;
10+
11+
$font: 'Lato', sans-serif;
12+
13+
$yellow-color: #ECB613;
14+
$blue-color: #6795DE;
15+
$orange-color: #CF4B32;
16+
$clone-wars-color: rgb(217, 217, 217);
17+
$grey-color: #C0C0C0;
18+
219

320
// STUFF ALONG THE TOP
421
.training-top {
@@ -59,13 +76,16 @@
5976
padding-top: 2vh;
6077
height: calc(100vh - 150px);
6178
width: 50vw;
62-
background-color: blue;
79+
background-color: $container1;
80+
margin: 15px 15px 15px 0px;
6381
}
6482

6583
.instructions {
6684
// height: calc(100vh - 150px);
67-
width: 40vw;
85+
width: 50vw;
6886
overflow: scroll;
87+
margin: 15px;
88+
background-color: $container1;
6989
}
7090

7191
.instructions-head {
@@ -113,5 +133,9 @@ hr {
113133
}
114134

115135
.training-body {
116-
background-color: red;
136+
// background-color: red;
137+
}
138+
139+
#text-input {
140+
117141
}

‎src/components/training/trainingCtrl.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@ angular.module('app').controller('trainingCtrl', function($scope, $state, mainSe
77
var textarea = document.getElementById('solution-input');
88
var myCodeMirror = CodeMirror.fromTextArea(textarea, {
99
lineNumbers: true,
10-
theme: 'tomorrow-night-bright',
10+
theme: 'seti',
11+
});
12+
13+
var textarea = document.getElementById('example-input');
14+
var myCodeMirror = CodeMirror.fromTextArea(textarea, {
15+
lineNumbers: true,
16+
theme: 'seti',
1117
});
1218

1319
$scope.languages = ['JavaScript', 'Python'];

0 commit comments

Comments
 (0)