Skip to content

Commit bd2f8c6

Browse files
SterlingChinSterlingChin
committed
menu items set 1
1 parent 747053c commit bd2f8c6

11 files changed

Lines changed: 293 additions & 157 deletions

File tree

src/assets/imgs/Asset 23.png renamed to src/assets/imgs/asset_23.png

File renamed without changes.

‎src/assets/scss/styles.scss‎

Lines changed: 116 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,13 @@ a {
4343

4444

4545
/*********FONTSFONTSFONTSFONTSFONTS*********/
46+
.font40-reg {
47+
color: #efefef;
48+
font-family: $font;
49+
font-size: 40px;
50+
line-height: 28px;
51+
font-weight: 400;
52+
}
4653

4754
.font20-reg {
4855
color: #efefef;
@@ -131,58 +138,6 @@ a {
131138
font-weight: 400;
132139
}
133140

134-
/**************SIDE MENU**************/
135-
.view {
136-
display:flex;
137-
flex-direction: row;
138-
139-
}
140-
141-
.side-menu {
142-
background-color: $sidebar-color;
143-
height: 100%;
144-
width: 55px;
145-
padding: 5px;
146-
float: left;
147-
position: fixed;
148-
left: 0;
149-
// display:none;
150-
}
151-
152-
.side-menu-icon {
153-
width: 35px;
154-
height: 35px;
155-
margin: auto;
156-
align-content: center;
157-
}
158-
159-
.side-menu-container {
160-
background-color: $sidebar-color;
161-
height: 100vh;
162-
width: 0px;
163-
top: 0px;
164-
display: flex;
165-
overflow: hidden;
166-
transition: width 0.5s;
167-
position: fixed;
168-
left:55px;
169-
}
170-
171-
.menu-items{
172-
173-
}
174-
175-
/**************TOP MENU**************/
176-
177-
.top-menu {
178-
background-color: $sidebar-color;
179-
position: fixed;
180-
top: 0px;
181-
right: 0px;
182-
width: 150px;
183-
height: 50px;
184-
}
185-
186141
/**************MAIN AREA**************/
187142

188143
.main {
@@ -193,68 +148,119 @@ flex-direction: row;
193148
}
194149

195150
.main-div {
196-
197151
height: 100vh;
198152
width: 100%;
199153
margin: auto;
200154
float: right;
201155
// position: absolute;
202156
// right: 0;
203157
}
204-
205-
/**************LOGIN PAGE**************/
206-
207-
.middle {
208-
background-color: $container1;
209-
display: block;
210-
width: 330px;
211-
height: 85vh;
212-
margin: auto;
213-
}
214-
215-
.logo {
216-
display: block;
217-
margin: auto;
218-
border-radius: 10px;
219-
text-shadow: 5px;
220-
}
221-
222-
.logo-padding {
223-
padding: 75px 75px 10px 75px;
224-
}
225-
226-
.logo-font {
227-
color: $clone-wars-color;
228-
font-size: 35px;
229-
text-align: center;
230-
}
231-
232-
.button {
233-
background-color: $button1;
234-
width: 280px;
235-
height: 30px;
236-
border-radius: 5px;
237-
margin: auto;
238-
color: $orange-color;
239-
text-align: center;
240-
vertical-align: middle;
241-
line-height: 30px;
242-
// flex-direction: row;
243-
align-content: center;
244-
}
245-
246-
.button-icon {
247-
height: 20px;
248-
width: 20px;
249-
}
250-
251-
.center {
252-
text-align: center;
253-
color: $grey-color;
254-
}
255-
256-
.bottom-links {
257-
text-align: center;
258-
display: flex;
259-
color: white;
260-
}
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+
211+
// /**************LOGIN PAGE**************/
212+
213+
// .middle {
214+
// background-color: $container1;
215+
// display: block;
216+
// width: 330px;
217+
// height: 85vh;
218+
// margin: auto;
219+
// }
220+
221+
// .logo {
222+
// display: block;
223+
// margin: auto;
224+
// border-radius: 10px;
225+
// text-shadow: 5px;
226+
// }
227+
228+
// .logo-padding {
229+
// padding: 75px 75px 10px 75px;
230+
// }
231+
232+
// .logo-font {
233+
// color: $clone-wars-color;
234+
// font-size: 35px;
235+
// text-align: center;
236+
// }
237+
238+
// .button {
239+
// background-color: $button1;
240+
// width: 280px;
241+
// height: 30px;
242+
// border-radius: 5px;
243+
// margin: auto;
244+
// color: $orange-color;
245+
// text-align: center;
246+
// vertical-align: middle;
247+
// line-height: 30px;
248+
// // flex-direction: row;
249+
// align-content: center;
250+
// }
251+
252+
// .button-icon {
253+
// height: 20px;
254+
// width: 20px;
255+
// }
256+
257+
// .center {
258+
// text-align: center;
259+
// color: $grey-color;
260+
// }
261+
262+
// .bottom-links {
263+
// text-align: center;
264+
// display: flex;
265+
// color: white;
266+
// }

‎src/components/directive.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,14 @@ angular.module('app').directive('animateDir', function () {
88
$(document).ready(function () {
99
$('.side-menu').on('mouseenter', function () {
1010
console.log('this is working');
11-
$('.side-menu-container').css('width', '160px');
11+
// $('.side-menu-container').css('width', '160px');
12+
$('.side-menu').css('width', '215px');
13+
$('.menu-items').css('display','flex');
1214
});
13-
$('.side-menu-container').on('mouseleave', function () {
15+
$('.side-menu').on('mouseleave', function () {
1416
console.log("it's all gone");
15-
$('.side-menu-container').css('width', '0px');
17+
$('.side-menu').css('width', '55px');
18+
$('.menu-items').css('display','none');
1619
});
1720
$('.top-menu').on('mouseenter', function () {
1821
console.log('You have entered the twilight zone');

‎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+
}

0 commit comments

Comments
 (0)