Skip to content

Commit 60cc9ee

Browse files
pgallinopgallino
authored
Refactor: CSS Modularization and Reordering Refactor (#63)
1 parent f112083 commit 60cc9ee

File tree

11 files changed

+441
-389
lines changed

11 files changed

+441
-389
lines changed

‎src/index.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@
1212
<button id="new-button" class="new-button" title="New">New</button>
1313
<button id="save-button" class="save-button" title="Save">Save</button>
1414
<button id="load-button" class="load-button" title="Load">Load</button>
15-
<button id="pause-button" class="pause-button" title="Pause"></button>
1615
<div id="app-title">GEduNet</div>
1716
</div>
1817
<div id="bottom-screen" class="row container">
1918
<div id="left-bar" class="left-bar"></div>
2019
<div class="canvas-container">
2120
<canvas id="canvas"></canvas>
21+
<button id="pause-button" class="pause-button" title="Pause"></button>
2222
<select id="layer-select" class="dropdown-menu">
2323
<option value="application">App Layer</option>
2424
<option value="transport">Transport Layer</option>

‎src/styles/buttons.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/* buttons.css */
2+
3+
/* General button styles */
4+
.new-button,
5+
.save-button,
6+
.load-button {
7+
background-color: #007bff; /* Blue background */
8+
color: #ffffff; /* White text */
9+
border: none; /* Removes borders */
10+
padding: 8px 16px; /* Adds internal spacing */
11+
cursor: pointer; /* Changes cursor to pointer on hover */
12+
margin-right: 10px; /* Adds spacing between buttons */
13+
border-radius: 5px; /* Rounds the button corners */
14+
}
15+
16+
/* Hover effect for general buttons */
17+
.new-button:hover,
18+
.save-button:hover,
19+
.load-button:hover {
20+
background-color: #162a6d; /* Darker blue on hover */
21+
}

‎src/styles/canvas.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/* canvas-container.css */
2+
3+
/* Styles for the main canvas container */
4+
.canvas-container {
5+
flex: 1; /* Fills the remaining space in the layout */
6+
display: flex; /* Uses flexbox to organize content */
7+
position: relative; /* Positions elements relative to the container */
8+
background-color: #a09f9f; /* Light gray background for the canvas area */
9+
}
10+
11+
/* Estilo del selector compacto y minimalista */
12+
#layer-select {
13+
position: absolute; /* Permite colocarlo sobre el canvas */
14+
top: 10px; /* Separación desde el borde superior */
15+
right: 10px; /* Separación desde el borde derecho */
16+
width: 160px; /* Reduce el ancho para un diseño más compacto */
17+
height: 30px; /* Altura más proporcional */
18+
padding: 0 15px; /* Espaciado horizontal más preciso */
19+
font-size: 14px; /* Tamaño del texto ajustado */
20+
font-family: "Arial", sans-serif; /* Fuente limpia y moderna */
21+
color: #ffffff; /* Texto blanco */
22+
background-color: #333333; /* Fondo oscuro elegante */
23+
border: 1px solid #666666; /* Borde gris */
24+
border-radius: 6px; /* Bordes ligeramente redondeados */
25+
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Sombra suave */
26+
cursor: pointer; /* Cursor interactivo */
27+
transition: all 0.3s ease; /* Transiciones suaves */
28+
appearance: none; /* Oculta el estilo nativo */
29+
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNSIgdmlld0JveD0iMCAwIDEwIDUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMUw1IDRMMTAgMUgxWiIgZmlsbD0iI0NDQ0NDQyIvPjwvc3ZnPg=="); /* Flecha personalizada en gris */
30+
background-repeat: no-repeat; /* Evita repetir la flecha */
31+
background-position: right 10px center; /* Coloca la flecha a la derecha */
32+
background-size: 10px; /* Tamaño proporcional de la flecha */
33+
}
34+
35+
/* Hover en el selector */
36+
#layer-select:hover {
37+
background-color: #444444; /* Fondo ligeramente más claro */
38+
border-color: #888888; /* Gris más claro */
39+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada */
40+
}
41+
42+
/* Focus en el selector */
43+
#layer-select:focus {
44+
outline: none; /* Elimina el contorno predeterminado */
45+
box-shadow: 0 0 8px 2px rgba(136, 136, 136, 0.5); /* Resplandor gris */
46+
}
47+
48+
/* Opciones del desplegable */
49+
#layer-select option {
50+
font-size: 13px; /* Texto más compacto */
51+
color: #ffffff; /* Texto blanco */
52+
background-color: #292b2c; /* Fondo oscuro para las opciones */
53+
border: none; /* Sin bordes */
54+
padding: 5px; /* Espaciado interno ajustado */
55+
cursor: pointer; /* Interactividad */
56+
}
57+
58+
/* Hover en las opciones del desplegable */
59+
#layer-select option:hover {
60+
background-color: #444444; /* Fondo más claro en hover */
61+
color: #ffffff; /* Mantiene el texto blanco */
62+
}
63+
64+
/* Pause button styles */
65+
.pause-button {
66+
background-color: #228b22; /* Forest green background */
67+
color: #ffffff; /* White text */
68+
border: 2px solid #000000; /* Borde verde oscuro */
69+
padding: 0; /* No internal padding */
70+
cursor: pointer; /* Changes cursor to pointer on hover */
71+
width: 45px; /* Fixed width for the circular button */
72+
height: 45px; /* Fixed height for the circular button */
73+
border-radius: 50%; /* Makes the button circular */
74+
display: flex; /* Uses flexbox for centering */
75+
align-items: center; /* Vertically centers content */
76+
justify-content: center; /* Horizontally centers content */
77+
transition: background-color 0.3s ease; /* Smooth color transition */
78+
position: absolute; /* Permite colocarlo sobre el canvas */
79+
top: 10px; /* Separación desde el borde superior */
80+
left: 15px; /* Separación desde el borde derecho */
81+
}
82+
83+
/* Hover effect for pause button */
84+
.pause-button:hover {
85+
background-color: #006400; /* Darker forest green on hover */
86+
}
87+
88+
/* Icon inside the pause button */
89+
.pause-button img {
90+
width: 60%; /* Scales the icon to fit the button */
91+
height: 60%; /* Scales the icon to fit the button */
92+
}

‎src/styles/global.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/* global.css */
2+
3+
/* General styles for the page: setting full width, height, and removing default margins */
4+
html,
5+
body {
6+
margin: 0; /* Removes default margins of the page */
7+
padding: 0; /* Removes default padding of the page */
8+
width: 100%; /* Makes the page take up the entire viewport width */
9+
height: 100%; /* Makes the page take up the entire viewport height */
10+
overflow: hidden; /* Prevents scrolling on the page */
11+
background-color: #f2f2f2; /* Sets a light gray background for the page */
12+
}
13+
14+
/* Custom scrollbar styles */
15+
16+
/* Scrollbar width */
17+
::-webkit-scrollbar {
18+
width: 10px; /* Sets the width of the scrollbar */
19+
}
20+
21+
/* Scrollbar track (background area) */
22+
::-webkit-scrollbar-track {
23+
background: #f1f1f1; /* Light gray background for the track */
24+
}
25+
26+
/* Scrollbar thumb (the draggable part) */
27+
::-webkit-scrollbar-thumb {
28+
background: #888; /* Medium gray color for the thumb */
29+
}
30+
31+
/* Thumb hover effect */
32+
::-webkit-scrollbar-thumb:hover {
33+
background: #555; /* Darker gray on hover */
34+
}
35+
36+
/* Main flexbox container for the layout of sidebars and canvas */
37+
.container {
38+
display: flex; /* Uses flexbox to organize child elements in a row */
39+
height: calc(
40+
100vh - 40px
41+
); /* Full viewport height minus the top bar's height (40px) */
42+
width: 100%; /* Makes the container span the entire width of the viewport */
43+
}

‎src/styles/index.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,8 @@
1-
import "./style.css";
1+
import "./global.css";
2+
import "./top-bar.css";
3+
import "./left-bar.css";
4+
import "./canvas.css";
5+
import "./right-bar.css";
6+
import "./right-bar-buttons.css";
7+
import "./table.css";
8+
import "./buttons.css";

‎src/styles/left-bar.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/* left-bar.css */
2+
3+
/* Styles for the left sidebar */
4+
.left-bar {
5+
display: flex; /* Uses flexbox to organize content */
6+
padding-top: 10px; /* Adds space at the top to separate from the top bar */
7+
flex-direction: column; /* Stacks items (buttons) vertically */
8+
align-items: center; /* Centers buttons horizontally */
9+
flex: 0 0 100px; /* Fixed width of 100px */
10+
background-color: #f1f1f1; /* Light gray background for the sidebar */
11+
box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.2); /* Adds a shadow on the right for depth */
12+
}
13+
14+
/* Buttons inside the left sidebar */
15+
.icon-button {
16+
background-color: #ffffff; /* White background for buttons */
17+
border: none; /* Removes borders */
18+
padding: 5px; /* Adds internal spacing */
19+
margin-bottom: 10px; /* Adds space between buttons */
20+
cursor: pointer; /* Changes the cursor to a pointer on hover */
21+
border-radius: 5px; /* Rounds the button corners */
22+
width: 70px; /* Sets button width */
23+
height: 70px; /* Sets button height */
24+
}
25+
26+
/* Hover effect for buttons */
27+
.icon-button:hover {
28+
background-color: #f0f0f0; /* Light gray background on hover */
29+
}
30+
31+
/* Images inside buttons */
32+
.icon-img {
33+
width: 90%; /* Makes the image take up 90% of the button width */
34+
height: 90%; /* Makes the image take up 90% of the button height */
35+
object-fit: contain; /* Ensures the image maintains its proportions */
36+
}

‎src/styles/right-bar-buttons.css‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
/* right-bar-buttons.css */
2+
3+
/* Style for buttons in the right bar */
4+
.right-bar-button {
5+
background-color: #007bff;
6+
border: none;
7+
color: white;
8+
padding: 6px 12px;
9+
text-align: center;
10+
text-decoration: none;
11+
display: block; /* Change to block to occupy full width */
12+
font-size: 14px;
13+
margin: 5px 0; /* Adjust margin for spacing between buttons */
14+
cursor: pointer;
15+
border-radius: 4px;
16+
width: 100%; /* Occupies 100% of the right-bar width */
17+
box-sizing: border-box; /* Includes padding in the total width */
18+
transition:
19+
background-color 0.3s ease,
20+
transform 0.2s ease;
21+
}
22+
23+
/* Hover effect for right sidebar buttons */
24+
.right-bar-button:hover {
25+
background-color: #162a6d; /* Darker blue on hover */
26+
transform: scale(1.02); /* Slight enlargement on hover */
27+
}
28+
29+
/* Selected button style */
30+
.right-bar-button.selected-button {
31+
background-color: #162a6d; /* Darker blue background */
32+
color: white; /* White text */
33+
}
34+
35+
/* Delete button in the right sidebar */
36+
.right-bar-delete-button {
37+
background-color: #f44336; /* Red background for delete button */
38+
}
39+
40+
.right-bar-delete-button:hover {
41+
background-color: #d32f2f; /* Darker red on hover */
42+
}
43+
44+
/* Container for packet options */
45+
.packet-options-container {
46+
display: flex;
47+
flex-direction: column;
48+
gap: 8px; /* Reduce gap */
49+
width: 100%;
50+
margin-top: 8px; /* Reduce top margin */
51+
}
52+
53+
/* Style for labels in the right bar */
54+
.right-bar-label {
55+
font-weight: bold;
56+
margin-bottom: 2px; /* Reduce bottom margin */
57+
font-size: 12px; /* Reduce font size */
58+
color: #333333;
59+
}
60+
61+
/* Style for dropdowns (selectors) */
62+
.right-bar-select {
63+
width: 100%;
64+
padding: 6px; /* Reduce padding */
65+
font-size: 14px; /* Reduce font size */
66+
border-radius: 4px;
67+
border: 1px solid #cccccc;
68+
background-color: #f1f1f1;
69+
cursor: pointer;
70+
}
71+
72+
.right-bar-select:focus {
73+
outline: none;
74+
border-color: #007bff;
75+
box-shadow: 0 0 4px rgba(0, 123, 255, 0.4); /* Slightly reduce shadow */
76+
}
77+
78+
/* Optional: Style to make the entire dropdown area compact */
79+
.dropdown-container {
80+
margin-bottom: 8px; /* Reduce bottom margin */
81+
}
82+
83+
/* Style for buttons in the right bar*/
84+
.right-bar-toggle-button {
85+
background-color: #007bff;
86+
border: none;
87+
color: white;
88+
padding: 6px 12px;
89+
text-align: center; /* Center text horizontally */
90+
text-decoration: none;
91+
display: flex; /* Use flexbox to organize text and arrow */
92+
justify-content: center; /* Center content horizontally */
93+
align-items: center; /* Center content vertically */
94+
font-size: 14px;
95+
margin: 5px 0; /* Adjust margin between buttons */
96+
cursor: pointer;
97+
border-radius: 4px; /* Rounded borders */
98+
width: 100%;
99+
box-sizing: border-box; /* Include padding on all length */
100+
transition:
101+
background-color 0.3s ease,
102+
transform 0.2s ease;
103+
position: relative; /* To position internal elements like the arrow */
104+
}
105+
106+
/* Hover effect for toggle buttons */
107+
.right-bar-toggle-button:hover {
108+
background-color: #162a6d;
109+
transform: scale(1.02); /* Slight enlargement on hover */
110+
}
111+
112+
/* Arrow icon on toggle buttons */
113+
.right-bar-toggle-button::after {
114+
content: ""; /* Adds an empty content box for the icon */
115+
display: inline-block; /* Ensures it's displayed properly */
116+
position: absolute; /* Positions the arrow relative to the button */
117+
right: 12px; /* Positions it 12px from the right edge */
118+
width: 0;
119+
height: 0;
120+
border-left: 6px solid transparent; /* Transparent left side of the triangle */
121+
border-right: 6px solid transparent; /* Transparent right side of the triangle */
122+
border-top: 6px solid white; /* White triangle */
123+
transition: transform 0.3s ease; /* Smooth rotation on toggle */
124+
}
125+
126+
/* Rotated arrow for open state */
127+
.right-bar-toggle-button.open::after {
128+
transform: rotate(180deg); /* Rotates the arrow upward */
129+
}

‎src/styles/right-bar.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* right-bar.css */
2+
3+
/* Styles for the right sidebar */
4+
.right-bar {
5+
flex: 0 0 300px; /* Fixed width of 300px */
6+
background-color: #f1f1f1; /* Light gray background for the sidebar */
7+
box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.2); /* Adds a shadow on the left for depth */
8+
padding: 20px; /* Adds internal spacing */
9+
overflow-y: auto; /* Enables vertical scrolling if content overflows */
10+
max-height: calc(
11+
100vh - 40px
12+
); /* Ensures the sidebar fits within the viewport */
13+
}
14+
15+
/* Title inside the right sidebar */
16+
.right-bar h2 {
17+
text-align: center; /* Centers the title horizontally */
18+
margin: 0; /* Removes default margins */
19+
padding-bottom: 15px; /* Adds space below the title */
20+
font-size: 22px; /* Sets the font size */
21+
font-weight: bold; /* Makes the title text bold */
22+
color: #333333; /* Dark gray color for the title */
23+
}
24+
25+
/* Style for the information content in the right bar */
26+
.info-content {
27+
font-size: 15px; /* Adjust font size */
28+
font-weight: bold; /* Makes the text thicker */
29+
color: #333333; /* Dark gray text color */
30+
}

0 commit comments

Comments
 (0)