Skip to content

Commit f7a9f75

Browse files
author
Jon Myrick
authored
Merge pull request CodewarsClone#63 from CodewarsClone/Thurs22.1
Thurs22.1
2 parents ef95baa + 92c957d commit f7a9f75

15 files changed

Lines changed: 359 additions & 272 deletions

File tree

‎src/assets/imgs/asset_23.png‎

660 Bytes
Loading

‎src/assets/imgs/asset_30.png‎

964 Bytes
Loading

‎src/assets/imgs/asset_31.png‎

927 Bytes
Loading

‎src/assets/scss/styles.scss‎

Lines changed: 17 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ $blue-color: #6795DE;
1616
$orange-color: #CF4B32;
1717
$clone-wars-color: rgb(217, 217, 217);
1818
$grey-color: #C0C0C0;
19+
$green-color: #5F8120;
1920
// Thin 100 Italic
2021
// Light 300
2122
// Light 300 Italic
@@ -34,7 +35,6 @@ body {
3435
main {
3536
width: calc(100vw - 55px);
3637
margin-left: 55px;
37-
// width: 100vw;
3838
}
3939

4040
a {
@@ -44,6 +44,14 @@ a {
4444

4545
/*********FONTSFONTSFONTSFONTSFONTS*********/
4646

47+
.font40-reg {
48+
color: #efefef;
49+
font-family: $font;
50+
font-size: 40px;
51+
line-height: 28px;
52+
font-weight: 400;
53+
}
54+
4755
.font20-reg {
4856
color: #efefef;
4957
font-family: $font;
@@ -60,6 +68,13 @@ a {
6068
font-weight: 400;
6169
}
6270

71+
.font16-reg {
72+
color: white;
73+
font-family: $font;
74+
font-size: 16px;
75+
line-height: 22px;
76+
font-weight: 400;
77+
}
6378
.font16-reg {
6479
color: white;
6580
font-family: $font;
@@ -145,140 +160,4 @@ a {
145160
font-size: 12px;
146161
line-height: 12px;
147162
font-weight: 400;
148-
}
149-
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-
158-
/**************SIDE MENU**************/
159-
.view {
160-
display:flex;
161-
flex-direction: row;
162-
163-
}
164-
165-
.side-menu {
166-
background-color: $sidebar-color;
167-
height: 100%;
168-
width: 55px;
169-
padding: 5px;
170-
float: left;
171-
position: fixed;
172-
left: 0;
173-
// display:none;
174-
}
175-
176-
.side-menu-icon {
177-
width: 35px;
178-
height: 35px;
179-
margin: auto;
180-
align-content: center;
181-
}
182-
183-
.side-menu-container {
184-
background-color: $sidebar-color;
185-
height: 100vh;
186-
width: 0px;
187-
top: 0px;
188-
display: flex;
189-
overflow: hidden;
190-
transition: width 0.5s;
191-
position: fixed;
192-
left:55px;
193-
}
194-
195-
.menu-items{
196-
197-
}
198-
199-
/**************TOP MENU**************/
200-
201-
.top-menu {
202-
background-color: $sidebar-color;
203-
position: fixed;
204-
top: 0px;
205-
right: 0px;
206-
width: 150px;
207-
height: 50px;
208-
}
209-
210-
/**************MAIN AREA**************/
211-
212-
.main {
213-
height: 100vh;
214-
width: calc(100vw-55px);
215-
background-color: $main-background;
216-
display: flex;
217-
}
218-
219-
.main-div {
220-
221-
height: 100vh;
222-
width: 100%;
223-
margin: auto;
224-
float: right;
225-
// position: absolute;
226-
// right: 0;
227-
}
228-
229-
/**************LOGIN PAGE**************/
230-
231-
.middle {
232-
background-color: $container1;
233-
display: block;
234-
width: 330px;
235-
height: 85vh;
236-
margin: auto;
237-
}
238-
239-
.logo {
240-
display: block;
241-
margin: auto;
242-
border-radius: 10px;
243-
text-shadow: 5px;
244-
}
245-
246-
.logo-padding {
247-
padding: 75px 75px 10px 75px;
248-
}
249-
250-
.logo-font {
251-
color: $clone-wars-color;
252-
font-size: 35px;
253-
text-align: center;
254-
}
255-
256-
.button {
257-
background-color: $button1;
258-
width: 280px;
259-
height: 30px;
260-
border-radius: 5px;
261-
margin: auto;
262-
color: $orange-color;
263-
text-align: center;
264-
vertical-align: middle;
265-
line-height: 30px;
266-
// flex-direction: row;
267-
align-content: center;
268-
}
269-
270-
.button-icon {
271-
height: 20px;
272-
width: 20px;
273-
}
274-
275-
.center {
276-
text-align: center;
277-
color: $grey-color;
278-
}
279-
280-
.bottom-links {
281-
text-align: center;
282-
display: flex;
283-
color: white;
284-
}
163+
}

‎src/components/directive.js‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,21 @@ angular.module('app').directive('animateDir', function () {
77
link: function (scope, elems, attrs) {
88
$(document).ready(function () {
99
$('.side-menu').on('mouseenter', function () {
10-
console.log('this is working');
11-
$('.side-menu-container').css('width', '160px');
10+
$('.side-menu').css('width', '215px');
11+
setTimeout(function(){
12+
$('.menu-items').css('display','flex');
13+
},200);
1214
});
13-
$('.side-menu-container').on('mouseleave', function () {
14-
console.log("it's all gone");
15-
$('.side-menu-container').css('width', '0px');
15+
$('.side-menu').on('mouseleave', function () {
16+
$('.side-menu').css('width', '55px');
17+
$('.menu-items').css('display','none');
1618
});
1719
$('.top-menu').on('mouseenter', function () {
18-
console.log('You have entered the twilight zone');
20+
$('.top-menu').css('background-color', '#222222')
21+
});
22+
23+
$('.top-menu').on('mouseleave', function () {
24+
$('.top-menu').css('background-color', 'rgba(0,0,0,0)')
1925
});
2026

2127
$('.solutions-icon').on('mouseclick', function () {

‎src/components/login/login.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<div class='main'>
1+
<div class='login-main'>
22
<div class='middle'>
33
<div>
44
<img src='./assets/imgs/ST-R.png' class='logo logo-padding'>
5-
<p class='font16-reg logo-font logo'>clonewars</p><br><br>
5+
<p class='font40-reg logo-font logo'>clonewars</p><br><br>
66
</div>
77
<div>
88
<a href='/auth/github'>
@@ -13,7 +13,7 @@
1313
</div>
1414
</div>
1515
</a>
16-
<div class="font14-reg center">
16+
<div class="font14-lit-gray center">
1717
<br>
1818
<p><a href='https://github.com/join' class='center'>-sign up-</a></p>
1919
</div>

‎src/components/login/login.scss‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/**************LOGIN PAGE**************/
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+
19+
.login-main {
20+
height: 100vh;
21+
width: 100vw;
22+
background-color: $main-background;
23+
display: flex;
24+
25+
// margin:auto;
26+
}
27+
.middle {
28+
background-color: $container1;
29+
width: 330px;
30+
height: 85vh;
31+
margin: auto;
32+
33+
}
34+
35+
.logo {
36+
display: block;
37+
margin: auto;
38+
border-radius: 10px;
39+
text-shadow: 5px;
40+
}
41+
42+
.logo-padding {
43+
padding: 75px 75px 10px 75px;
44+
}
45+
46+
.logo-font {
47+
color: $clone-wars-color;
48+
font-size: 35px;
49+
text-align: center;
50+
}
51+
52+
.button {
53+
background-color: $button1;
54+
width: 280px;
55+
height: 30px;
56+
border-radius: 5px;
57+
margin: auto;
58+
color: $orange-color;
59+
text-align: center;
60+
vertical-align: middle;
61+
line-height: 30px;
62+
// flex-direction: row;
63+
align-content: center;
64+
}
65+
66+
.button-icon {
67+
height: 20px;
68+
width: 20px;
69+
}
70+
71+
.center {
72+
text-align: center;
73+
color: $grey-color;
74+
}
75+
76+
.bottom-links {
77+
text-align: center;
78+
display: flex;
79+
color: white;
80+
}

‎src/components/menus/menu.html‎

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
<animate-dir settings='settings'></animate-dir>
22
<div class='view'>
3-
<div class='menu'>
4-
<div class="side-menu font14-reg menu-items">
5-
<ul class='center'>
6-
<li><img src='./assets/imgs/ST-R.png' class='side-menu-icon'></li>
7-
<li><img src='./assets/imgs/arrow_icon.png' class='side-menu-icon'></li>
8-
<li><img src='./assets/imgs/kumite_icon.png' class='side-menu-icon'></li>
9-
<li><img src='./assets/imgs/blurb_icon.png' class='side-menu-icon'></li>
10-
<li><img src='./assets/imgs/ST-R.png' class='side-menu-icon'></li>
11-
</ul>
12-
</div>
13-
<div class='side-menu-container font14-reg'>
14-
<ul>
15-
<li>Home</li>
16-
<li>Kata</li>
17-
<li>Kumite</li>
18-
<li>Forum</li>
19-
<li>Docs</li>
20-
</ul>
21-
</div>
22-
<div class="top-menu">
23-
</div>
24-
<main>
25-
<ui-view class='main-div'></ui-view>
26-
</main>
3+
<div class='menu'>
4+
<div class="side-menu font16-reg">
5+
<ul>
6+
<li class='ul'>
7+
<div class='icon-div'><img src='./assets/imgs/ST-R.png' class='main-icon li'></div><span class='menu-items li'>Home</span></li><br>
8+
<li class="ul">
9+
<div class='icon-div'><img src='./assets/imgs/arrow_icon.png' class='side-menu-icon li' id='icon1'></div><span class='menu-items'>Kata</span></li><br>
10+
<li class="ul">
11+
<div class='icon-div'><img src='./assets/imgs/kumite_icon.png' class='side-menu-icon li' id='icon2'></div><span class='menu-items'>Kumite</span></li><br>
12+
<li class="ul">
13+
<div class='icon-div'><img src='./assets/imgs/blurb_icon.png' class='side-menu-icon li' id='icon3'></div><span class='menu-items'>Forum</span></li><br>
14+
<li class="ul">
15+
<div class='icon-div'><img src='./assets/imgs/asset_23.png' class='side-menu-icon li' id='icon4'></div><span class='menu-items'>Docs</span></li><br>
16+
</ul>
17+
</div>
18+
<div class="top-menu">
19+
<ul class='ul-top'>
20+
<li><div class='li65'><img src='./assets/imgs/asset_30.png' class='li65-img'></div></li>
21+
<li><div class='li65'><img src='./assets/imgs/asset_31.png'class='li65-img'></div></li>
22+
<li class='li170'><li>img</li><li>kyu</li><li>lvl</li></li>
23+
</ul>
24+
</div>
25+
<main>
26+
<ui-view class='main-div'></ui-view>
27+
</main>
2728
</div>

0 commit comments

Comments
 (0)