Skip to content

Commit 2278853

Browse files
author
Jon Myrick
authored
Merge pull request CodewarsClone#28 from CodewarsClone/Tuesday20.1
Ui-Views updated and children and parent views fixed;
2 parents 5595607 + bb7ce68 commit 2278853

9 files changed

Lines changed: 234 additions & 136 deletions

File tree

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎src/assets/scss/styles.scss‎

Lines changed: 134 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,39 @@ $container3: #3C3C3C;
88
$container4: #1D1D1F;
99
$blueContainer: #363749;
1010
$button1: #1E1F21;
11-
12-
$font: 'Lato', sans-serif;
11+
$font: 'Lato',
12+
sans-serif;
1313
$yellow-color: #ECB613;
1414
$blue-color: #6795DE;
1515
$orange-color: #CF4B32;
16-
$clone-wars-color: rgb(217,217,217);
16+
$clone-wars-color: rgb(217, 217, 217);
1717
$grey-color: #C0C0C0;
18-
19-
2018
// Thin 100 Italic
2119
// Light 300
2220
// Light 300 Italic
2321
// Regular 400
2422
// Regular 400 Italic
2523
// Bold 700
2624
// Bold 700 Italic
27-
2825
body {
29-
display: flex;
26+
display: flex;
27+
position: relative;
28+
background-color: $main-background;
29+
flex-direction: row;
30+
display: flex;
3031
}
3132

3233
main {
33-
background-color: $main-background;
34-
width: calc(100vw - 55px);
34+
width: calc(100vw - 55px);
35+
margin-left: 55px;
36+
// width: 100vw;
3537
}
3638

39+
a {
40+
text-decoration: none;
41+
}
42+
43+
3744
/*********FONTSFONTSFONTSFONTSFONTS*********/
3845

3946
.font20-reg {
@@ -45,35 +52,36 @@ main {
4552
}
4653

4754
.font16-reg {
48-
color:white;
49-
font-family: $font;
50-
font-size: 16px;
51-
line-height: 22px;
52-
font-weight: 400;
55+
color: white;
56+
font-family: $font;
57+
font-size: 16px;
58+
line-height: 22px;
59+
font-weight: 400;
5360
}
5461

5562
.font14-reg {
56-
color:white;
57-
font-family: $font;
58-
font-size: 14px;
59-
line-height: 22px;
60-
font-weight: 400;
63+
color: white;
64+
font-family: $font;
65+
font-size: 14px;
66+
line-height: 22px;
67+
font-weight: 400;
6168
}
6269

6370
.font14-bold {
64-
color:white;
65-
font-family: $font;
66-
font-size: 14px;
67-
line-height: 28px;
68-
font-weight: 700;
69-
position: absolute;
71+
color: white;
72+
font-family: $font;
73+
font-size: 14px;
74+
line-height: 28px;
75+
font-weight: 700;
76+
position: absolute;
7077
}
7178

7279
.font12-reg {
73-
font-family: $font;
74-
font-size: 12px;
75-
font-weight: Light;
80+
font-family: $font;
81+
font-size: 12px;
82+
font-weight: Light;
7683
}
84+
7785
.font14-reg-gray {
7886
color: #C9C9C9;
7987
font-family: $font;
@@ -98,85 +106,140 @@ main {
98106
font-weight: 400;
99107
}
100108

109+
/**************SIDE MENU**************/
110+
.view {
111+
display:flex;
112+
flex-direction: row;
113+
114+
}
115+
101116
.font12-reg-black {
102117
color: #131414;
103118
font-family: $font;
104119
font-size: 12px;
105120
line-height: 12px;
106121
font-weight: 400;
107122
}
108-
109123
.side-menu {
110-
background-color: $sidebar-color;
111-
height: 100vh;
112-
width: 55px;
124+
background-color: $sidebar-color;
125+
height: 100%;
126+
width: 55px;
127+
padding: 5px;
128+
float: left;
129+
position: fixed;
130+
left: 0;
131+
// display:none;
132+
}
133+
134+
.side-menu-icon {
135+
width: 35px;
136+
height: 35px;
137+
margin: auto;
138+
align-content: center;
139+
}
140+
141+
.side-menu-container {
142+
background-color: $sidebar-color;
143+
height: 100vh;
144+
width: 0px;
145+
top: 0px;
146+
display: flex;
147+
overflow: hidden;
148+
transition: width 0.5s;
149+
position: fixed;
150+
left:55px;
151+
}
152+
153+
.menu-items{
154+
113155
}
114156

157+
/**************TOP MENU**************/
158+
115159
.top-menu {
116-
background-color: $sidebar-color;
117-
position: absolute;
118-
top: 0px;
119-
right: 0px;
120-
width: 150px;
121-
height: 50px;
160+
background-color: $sidebar-color;
161+
position: fixed;
162+
top: 0px;
163+
right: 0px;
164+
width: 150px;
165+
height: 50px;
122166
}
123167

168+
/**************MAIN AREA**************/
169+
124170
.main {
171+
height: 100vh;
172+
width: 100vw;
173+
background-color: $main-background;
174+
display: flex;
175+
}
176+
177+
.main-div {
178+
// top: 50%;
179+
// left: 50%;
180+
// transform: translate(50%, -50%);
181+
background-color: red;
125182
height: 100vh;
126-
width: 100vw;
127-
background-color: $main-background;
128-
display:flex;
183+
width: 100%;
184+
margin: auto;
185+
float: right;
186+
// position: absolute;
187+
// right: 0;
129188
}
130189

190+
/**************LOGIN PAGE**************/
191+
131192
.middle {
132-
background-color: $container1;
133-
display: block;
134-
width: 330px;
135-
height: 85vh;
136-
margin: auto;
193+
background-color: $container1;
194+
display: block;
195+
width: 330px;
196+
height: 85vh;
197+
margin: auto;
137198
}
138199

139200
.logo {
140-
display: block;
141-
margin: auto;
142-
border-radius: 10px;
143-
text-shadow: 5px;
201+
display: block;
202+
margin: auto;
203+
border-radius: 10px;
204+
text-shadow: 5px;
144205
}
145206

146207
.logo-padding {
147-
padding: 75px 75px 10px 75px;
208+
padding: 75px 75px 10px 75px;
148209
}
149210

150211
.logo-font {
151-
color: $clone-wars-color;
152-
font-size: 35px;
153-
text-align: center;
212+
color: $clone-wars-color;
213+
font-size: 35px;
214+
text-align: center;
154215
}
155216

156217
.button {
157-
background-color: $button1;
158-
width: 280px;
159-
height: 30px;
160-
border-radius: 5px;
161-
margin: auto;
162-
color: $orange-color;
163-
text-align: center;
164-
vertical-align: middle;
165-
line-height:30px;
166-
// flex-direction: row;
167-
align-content:center;
218+
background-color: $button1;
219+
width: 280px;
220+
height: 30px;
221+
border-radius: 5px;
222+
margin: auto;
223+
color: $orange-color;
224+
text-align: center;
225+
vertical-align: middle;
226+
line-height: 30px;
227+
// flex-direction: row;
228+
align-content: center;
168229
}
169230

170231
.button-icon {
171-
height:20px;
172-
width: 20px;
232+
height: 20px;
233+
width: 20px;
173234
}
174235

175236
.center {
176-
text-align: center;
177-
color: $grey-color;
237+
text-align: center;
238+
color: $grey-color;
178239
}
179240

180-
a {
181-
text-decoration: none;
241+
.bottom-links {
242+
text-align: center;
243+
display: flex;
244+
color: white;
182245
}

‎src/components/app.js‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,47 @@ angular.module('app', ['ui.router'])
33

44
.config(function($stateProvider, $urlRouterProvider){
55
$stateProvider
6-
.state('home',{
6+
7+
//~~~~~~~~~~~~~Parent States~~~~~~~~~~~~~
8+
9+
.state('login',{
10+
url: '/login',
11+
templateUrl:'./components/login/login.html',
12+
// controller: 'loginCtrl'
13+
})
14+
.state('menu',{
715
url: '/',
16+
templateUrl:'./components/menus/menu.html',
17+
// controller: 'loginCtrl'
18+
})
19+
20+
//~~~~~~~~~~~~~Child States~~~~~~~~~~~~~
21+
22+
.state('menu.home',{
23+
url: 'home',
824
templateUrl:'./components/home/home.html',
925
controller: 'homeCtrl'
1026
})
11-
.state('kata_list',{
12-
url: '/kata_list',
27+
.state('menu.kata_list',{
28+
url: 'kata_list',
1329
templateUrl:'./components/kata_list/kata_list.html',
1430
controller: 'kata_listCtrl'
1531
})
16-
.state('login',{
17-
url: '/login',
18-
templateUrl:'./components/login/login.html',
19-
controller: 'loginCtrl'
20-
})
21-
.state('profile',{
22-
url: '/profile',
32+
.state('menu.profile',{
33+
url: 'profile',
2334
templateUrl:'./components/profile/profile.html',
2435
controller: 'profileCtrl'
2536
})
26-
.state('solutions',{
27-
url: '/solutions',
37+
.state('menu.solutions',{
38+
url: 'solutions',
2839
templateUrl:'./components/solutions/solutions.html',
29-
controller: 'solutionsCtrl'
40+
// controller: 'solutionsCtrl'
3041
})
31-
.state('training',{
32-
url: '/training',
42+
.state('menu.training',{
43+
url: 'training',
3344
templateUrl:'./components/training/training.html',
3445
controller: 'trainingCtrl'
3546
});
3647

37-
$urlRouterProvider.otherwise('/');
48+
$urlRouterProvider.otherwise('/login');
3849
});

‎src/components/directive.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,19 @@ angular.module('app').directive('animateDir', function () {
55
},
66
restrict: 'EA',
77
link: function (scope, elems, attrs) {
8-
$(document).ready(function () {})
8+
$(document).ready(function () {
9+
$('.side-menu').on('mouseenter', function () {
10+
console.log('this is working');
11+
$('.side-menu-container').css('width', '160px');
12+
});
13+
$('.side-menu-container').on('mouseleave', function () {
14+
console.log("it's all gone");
15+
$('.side-menu-container').css('width', '0px');
16+
})
17+
$('.top-menu').on('mouseenter', function(){
18+
console.log('You have entered the twilight zone');
19+
})
20+
})
921
}
1022
}
1123
});

0 commit comments

Comments
 (0)