Skip to content

Commit ec67955

Browse files
ian-chuangian-chuang
committed
2 parents 7299369 + fae44b9 commit ec67955

File tree

10 files changed

+271
-70
lines changed

10 files changed

+271
-70
lines changed

‎.DS_Store‎

6 KB
Binary file not shown.

‎algorithm_visualizer/package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎algorithm_visualizer/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"react-router": "^5.2.0",
1313
"react-router-dom": "^5.2.0",
1414
"react-scripts": "^4.0.3",
15+
"react-webcam": "^5.2.4",
1516
"simplex-noise": "^2.4.0",
1617
"web-vitals": "^1.1.2"
1718
},

‎algorithm_visualizer/public/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
1111
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
1212
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
1314
<title>Algorithm Visualizer</title>
1415
</head>
1516
<body>

‎algorithm_visualizer/src/pages/GraphPage.css‎

Lines changed: 120 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,131 @@
33
text-align: center;
44
}
55

6-
.grid {
6+
.graphPage .grid {
77
border-left: 1px solid lightgrey;
88
border-top: 1px solid lightgrey;
9+
height: 100vh;
10+
width: 100%;
911
}
1012

11-
.grid-row {
13+
.graphPage .grid-row {
1214
height: 100%;
1315
}
1416

15-
input {
17+
.graphPage {
18+
display: flex;
19+
flex-wrap: nowrap;
20+
height: 100vh;
21+
overflow-x: hidden;
22+
overflow-y: hidden;
23+
}
24+
25+
.graphPage .sidebar {
26+
padding: .75rem;
27+
flex:0 0 16.5rem;
28+
}
29+
30+
.graphPage .btn-toggle {
31+
width: 100%;
32+
display: inline-flex;
33+
align-items: center;
34+
padding: .3rem .5rem;
35+
font-weight: 600;
36+
font-size: .9rem;
37+
color: white;
38+
background-color: transparent;
39+
}
40+
.graphPage .btn-toggle:hover,
41+
.graphPage .btn-toggle:focus {
42+
color: white;
43+
}
44+
45+
.graphPage .btn-toggle::before {
46+
width: 1.25rem;
47+
line-height: 0;
48+
content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
49+
transition: transform .35s ease;
50+
transform-origin: .5em 50%;
51+
}
52+
53+
.graphPage .btn-toggle[aria-expanded="true"] {
54+
color: white;
55+
}
56+
.graphPage .btn-toggle[aria-expanded="true"]::before {
57+
transform: rotate(90deg);
58+
}
59+
60+
.graphPage .btn-toggle-nav li {
61+
display: block;
62+
border-radius: .25rem;
63+
padding: .1875rem .5rem;
64+
margin-top: .125rem;
65+
padding: .3rem .3rem .3rem 2rem;
66+
font-size: .85rem;
67+
color: white;
68+
background-color: transparent;
69+
width: 100%;
70+
transition: color .15s ease-in-out,background-color .15s ease-in-out;
71+
cursor: pointer;
72+
}
73+
74+
.graphPage .btn-toggle-nav li:hover,
75+
.graphPage .btn-toggle-nav li:focus {
76+
background-color: #f8f9fa;
77+
color: black;
78+
}
79+
80+
.graphPage .scrollarea {
81+
overflow-y: auto;
82+
}
83+
84+
li > input {
1685
display: none;
17-
}
86+
}
87+
88+
.graphPage #example-weight {
89+
display: inline-block;
90+
width: 1.25rem;
91+
height: 1.25rem;
92+
}
93+
94+
.graphPage .form-range {
95+
width: 100%;
96+
display: block;
97+
}
98+
99+
.graphPage .settings-menu {
100+
padding-top: .5rem;
101+
}
102+
103+
.graphPage .settings-menu label {
104+
font-size: .85rem;
105+
}
106+
107+
.graphPage .sidebar i {
108+
margin-right: .5rem;
109+
}
110+
111+
.graphPage .camera-modal {
112+
background-color: black;
113+
border: 1px solid white
114+
}
115+
116+
.graphPage .skip-button {
117+
margin-left: 1.25rem;
118+
}
119+
120+
.graphPage #tutorial p {
121+
padding-top: 1.25rem;
122+
margin-right: 1.25rem;
123+
margin-left: 1.25rem;
124+
text-align: center;
125+
}
126+
127+
.graphPage .modal-header {
128+
text-align: center;
129+
}
130+
131+
.graphPage .modal-body img {
132+
width:100%;
133+
}

0 commit comments

Comments
 (0)