Skip to content

Commit bb0f47d

Browse files
lu0713lu0713
committed
finished sidebar and top nav. about to format the cards
1 parent 659819a commit bb0f47d

9 files changed

Lines changed: 241 additions & 24 deletions

File tree

‎app/assets/clean-sprout.gif‎

41.6 KB
Loading

‎app/assets/growing-bean-1.gif‎

9.08 KB
Loading

‎app/assets/growing-bean-2.gif‎

14.6 KB
Loading

‎app/assets/growing-bean-3.gif‎

31.2 KB
Loading

‎app/components/Occupied.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ import AddModal from '../modals/AddModal';
77
import Applications from './Applications';
88
import MoreVertIcon from '@material-ui/icons/MoreVert';
99
import ListIcon from '@material-ui/icons/List';
10+
import SearchIcon from '@material-ui/icons/Search';
11+
import DashboardIcon from '@material-ui/icons/Dashboard';
12+
import NotificationsIcon from '@material-ui/icons/Notifications';
13+
import PersonIcon from '@material-ui/icons/Person';
1014
import '../stylesheets/Occupied.scss';
1115
import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
1216

@@ -49,7 +53,6 @@ const Occupied: React.FC = () => {
4953
return (
5054
<div>
5155
<div className="sidebarArea">
52-
5356
</div>
5457
<div className="dashboardArea">
5558
<header className="mainHeader">
@@ -58,7 +61,18 @@ const Occupied: React.FC = () => {
5861
<span><p id="dashboard">Dashboard</p></span>
5962
</section>
6063
<section className="header" id="rightHeader">
61-
Search Magnifying Glass DashBoard Alerts Profile
64+
<form className="form">
65+
<label className="inputContainer">
66+
<input className="form" id="textInput" value={`Search`} type="text" name="search" />
67+
<hr />
68+
</label>
69+
<button className="form" id="submitBtn" type="submit">
70+
<SearchIcon className="icon" id="searchIcon"/>
71+
</button>
72+
</form>
73+
<DashboardIcon className="sideIcon" id="dashboardIcon"/>
74+
<NotificationsIcon className="sideIcon" id="notificationsIcon"/>
75+
<PersonIcon className="sideIcon" id="personIcon"/>
6276
</section>
6377
</header>
6478
<Modal open={open} onClose={() => setOpen(false)}>

‎app/containers/SidebarContainer.tsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,18 @@ const SidebarContainer: React.FC = (): JSX.Element => (
2020
<div className="sidebar-container" id="mySidebar">
2121
<div className="sidebar">
2222
<div className="firstRow">
23-
2423
<span><img alt="C" id="C" src={'../assets/C.svg'} /></span>
25-
24+
<span><img alt="Chronos" id="logo" src={'../assets/logo.svg'} /></span>
2625
</div>
26+
2727
<hr className="line" id="firstLine"></hr>
28-
28+
2929
<div className="secondRow">
30+
<span><img alt="Doya" className="sprout" id="sprout0" src={'../assets/clean-sprout.gif'}></img></span>
31+
<span><img alt="Doya" className="sprout" id="sprout1" src={'../assets/growing-bean-1.gif'}></img></span>
32+
<span><img alt="Doya" className="sprout" id="sprout2" src={'../assets/growing-bean-2.gif'}></img></span>
33+
<span><img alt="Doya" className="sprout" id="sprout3" src={'../assets/growing-bean-3.gif'}></img></span>
34+
<span><img alt="Doya" className="sprout" id="sprout4" src={'../assets/clean-sprout.gif'}></img></span>
3035
</div>
3136

3237
<hr className="line" id="secondLine"></hr>

‎app/stylesheets/Occupied.scss‎

Lines changed: 117 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,49 +9,157 @@
99
}
1010

1111
.header {
12-
margin-top: 10px;
12+
margin-top: $logoPositionTop - 18px;
13+
font-size: $headerFontSize;
14+
color: $header;
1315
}
1416

1517
#leftHeader {
1618
display: flex;
1719
justify-content: center;
1820
align-items: center;
21+
margin-left: $logoPositionLeft - 30px;
1922
}
2023

2124
#rightHeader {
2225
display: flex;
2326
justify-content: center;
2427
align-items: center;
28+
margin: 0;
29+
margin-top: 20px;
2530
}
2631

2732
#dashboard {
28-
font-size: 18px;
33+
margin-left: $logoPositionLeft - 34px;
2934
}
3035

31-
#listIcon {
36+
.icon {
3237
vertical-align: middle;
3338
text-align: center;
3439
color: $icon;
3540
background-color: $background;
36-
font-size: 34px;
37-
font-weight: 400px;
38-
margin: 10px;
39-
padding: 5px;
40-
box-sizing: border-box;
41+
box-sizing: content-box;
4142
border-radius: 50%;
4243
box-shadow: $boxshadow1;
4344
line-height: 1.42857143;
4445
white-space: nowrap;
4546
display: inline-flex;
4647
outline: 0;
47-
box-sizing: border-box;
4848
border: none;
4949
cursor: pointer;
5050
position: relative;
5151
min-height: auto;
5252
white-space: nowrap;
5353
}
5454

55+
.sideIcon {
56+
font-size: 34px;
57+
vertical-align: middle;
58+
text-align: center;
59+
color: $icon;
60+
background-color: transparent;
61+
box-sizing: content-box;
62+
border-radius: 50%;
63+
line-height: 1.42857143;
64+
white-space: nowrap;
65+
display: inline-flex;
66+
outline: 0;
67+
border: none;
68+
cursor: pointer;
69+
position: relative;
70+
min-height: auto;
71+
white-space: nowrap;
72+
margin: 5px;
73+
margin-top: 15px;
74+
padding: 5px;
75+
}
76+
77+
#dashboardIcon {
78+
margin-left: -30px;
79+
}
80+
81+
#personIcon {
82+
margin-right: 50px;
83+
}
84+
85+
#listIcon {
86+
font-size: 42px;
87+
font-weight: 400px;
88+
margin: 10px;
89+
padding: 5px;
90+
}
91+
92+
button {
93+
background-color: transparent;
94+
border: 0;
95+
outline: none;
96+
margin: 0px;
97+
padding: 0px;
98+
}
99+
100+
button:hover {
101+
background-color: transparent;
102+
}
103+
104+
#searchIcon {
105+
background-color: $background;
106+
font-size: 26px;
107+
font-weight: 400px;
108+
padding: 8px;
109+
margin: 0px;
110+
margin-left: 15px;
111+
}
112+
55113
#listIcon:hover {
56114
box-shadow: $boxshadow3;
115+
}
116+
117+
#searchIcon:hover {
118+
box-shadow: $boxshadow3;
119+
}
120+
121+
.form {
122+
height: 30px;
123+
font-weight: 100;
124+
font-size: inherit;
125+
color: inherit;
126+
display: flex;
127+
text-align: center;
128+
vertical-align: middle;
129+
justify-items: center;
130+
align-items: center;
131+
}
132+
133+
.inputContainer {
134+
position: relative;
135+
display: flex;
136+
flex-direction: column;
137+
}
138+
139+
#textInput {
140+
background-color: transparent;
141+
outline: none;
142+
border: 0;
143+
padding: 5px;
144+
// transform: translateY(-50%);
145+
transition: all 0.25s ease;
146+
pointer-events: none;
147+
text-align: left;
148+
margin-top: 5px;
149+
}
150+
151+
input:-webkit-autofill,
152+
input:-webkit-autofill:hover,
153+
input:-webkit-autofill:focus,
154+
textarea:-webkit-autofill,
155+
textarea:-webkit-autofill:hover,
156+
textarea:-webkit-autofill:focus,
157+
select:-webkit-autofill,
158+
select:-webkit-autofill:hover,
159+
select:-webkit-autofill:focus {
160+
border: 1px solid green;
161+
box-shadow: $boxshadow1;
162+
-webkit-text-fill-color: green;
163+
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
164+
transition: background-color 5000s ease-in-out 0s;
57165
}

‎app/stylesheets/SidebarContainer.scss‎

Lines changed: 89 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,39 @@
3434
opacity: 1;
3535
}
3636

37+
.sidebar-container:hover #C {
38+
opacity: 0;
39+
}
40+
3741
.sidebar-container:hover #logo {
3842
opacity: 1;
3943
}
4044

41-
.sidebar-container:hover #C {
45+
.sidebar-container:hover #sprout0 {
4246
opacity: 0;
4347
}
4448

49+
.sidebar-container:hover #sprout1 {
50+
opacity: 1;
51+
}
52+
53+
.sidebar-container:hover #sprout2 {
54+
opacity: 1;
55+
}
56+
57+
.sidebar-container:hover #sprout3 {
58+
opacity: 1;
59+
}
60+
61+
.sidebar-container:hover #sprout4 {
62+
opacity: 1;
63+
}
64+
65+
#sprout1:active, #sprout2:active, #sprout3:active, #sprout4:active {
66+
background-image: url('../assets/background.png');
67+
background-size: contain;
68+
}
69+
4570
.firstRow {
4671
margin: 30px;
4772
display: flex;
@@ -53,25 +78,26 @@
5378

5479
#C {
5580
position: absolute;
56-
left: 50px;
57-
top: 40px;
81+
left: $logoPositionLeft;
82+
top: $logoPositionTop;
5883
opacity: 1;
59-
height: 25px;
60-
transition: 100ms;
84+
height: $logoSize;
85+
transition: $logoTransition;
6186
}
6287

6388
#logo {
6489
position: absolute;
65-
left: 47px;
66-
top: 40px;
67-
height: 25px;
90+
left: $logoPositionLeft - 3px;
91+
top: $logoPositionTop;
92+
height: $logoSize;
6893
opacity: 0;
69-
transition: 100ms;
94+
transition: $logoTransition;
7095
z-index: 2;
7196
}
7297

7398
.line {
7499
color: white;
100+
opacity: .65;
75101
width: 78%;
76102
margin-right: 5px;
77103
&:hover {
@@ -85,8 +111,61 @@
85111
margin-top: 50px;
86112
}
87113

114+
.sprout {
115+
height: $sproutSize;
116+
width: $sproutSize;
117+
// background-color: $background;
118+
background-color: transparent;
119+
border-radius: 50%;
120+
margin: 30px 0px;;
121+
background-size: scale-down;
122+
&:hover {
123+
background-color: $hover;
124+
opacity: 0.85;
125+
animation: none;
126+
}
127+
}
128+
129+
#sprout0 {
130+
position: absolute;
131+
left: $logoPositionLeft + $originalSproutLeftOffset;
132+
top: $logoPositionTop + $sproutTopOffset;
133+
}
134+
135+
#sprout1 {
136+
position: absolute;
137+
left: $logoPositionLeft + $sproutLeftOffset + $sproutLeftOffsetIncrement * 0;
138+
top: $logoPositionTop + $sproutTopOffset;
139+
opacity: 0;
140+
transition: $logoTransition;
141+
}
142+
143+
#sprout2 {
144+
position: absolute;
145+
left: $logoPositionLeft + $sproutLeftOffset + $sproutLeftOffsetIncrement * 1;
146+
top: $logoPositionTop + $sproutTopOffset;
147+
opacity: 0;
148+
transition: $logoTransition;
149+
}
150+
151+
#sprout3 {
152+
position: absolute;
153+
left: $logoPositionLeft + $sproutLeftOffset + $sproutLeftOffsetIncrement * 2;
154+
top: $logoPositionTop + $sproutTopOffset;
155+
opacity: 0;
156+
transition: $logoTransition;
157+
}
158+
159+
#sprout4 {
160+
position: absolute;
161+
left: $logoPositionLeft + $sproutLeftOffset + $sproutLeftOffsetIncrement * 3;
162+
top: $logoPositionTop + $sproutTopOffset;
163+
opacity: 0;
164+
transition: $logoTransition;
165+
}
166+
88167
#secondLine {
89-
margin-top: 50px;
168+
margin-top: 100px;
90169
}
91170

92171
.sidebar {

‎app/stylesheets/constants.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,23 @@ $navy: #161b2d;
33
$background: #fff;
44
$grey: #eeeeee;
55
$icon: #999999;
6+
$header: #888888;
67
$hover: rgba(255,255,255, 0.1);
78
$red: rgb(170, 1, 1);
89
$boxshadow: 2px 2px 6px rgb(187, 187, 187);
910
$boxshadow1: 0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12);
1011
$boxshadow2: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
1112
$boxshadow3: 0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12);
13+
$logoPositionLeft: 55px;
14+
$logoPositionTop: 40px;
15+
$logoSize: 25px;
16+
$logoTransition: 100ms;
17+
$sproutSize: 50px;
18+
$originalSproutLeftOffset: -12px;
19+
$sproutLeftOffset: -26px;
20+
$sproutTopOffset: 67px;
21+
$sproutLeftOffsetIncrement: 64px;
22+
$headerFontSize: 18px;
1223

1324
@mixin centerWithFlex($justify: center, $direction: row, $align: center) {
1425
display: flex;

0 commit comments

Comments
 (0)