+
{{ 'ALGORITHM.GRID_HEIGHT' | translate }}
@@ -63,11 +62,10 @@
{{ 'PATHFINDING.VISITED' | translate }}
{{ 'PATHFINDING.PATH' | translate }}
-
-
-
-
{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}
-
{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms
+
+
{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}
+
{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms
+
diff --git a/src/app/pages/algorithms/pathfinding/pathfinding.component.scss b/src/app/pages/algorithms/pathfinding/pathfinding.component.scss
deleted file mode 100644
index fa0e10c..0000000
--- a/src/app/pages/algorithms/pathfinding/pathfinding.component.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.controls {
- display: flex;
- flex-wrap: wrap;
- gap: 1rem;
- margin-bottom: 1rem;
- align-items: center;
-
- mat-button-toggle-group {
- border-radius: 4px;
- overflow: hidden;
- }
-}
-
-.grid-field {
- width: 150px;
-}
diff --git a/src/app/pages/algorithms/pathfinding/pathfinding.component.ts b/src/app/pages/algorithms/pathfinding/pathfinding.component.ts
index 6215a72..37837e1 100644
--- a/src/app/pages/algorithms/pathfinding/pathfinding.component.ts
+++ b/src/app/pages/algorithms/pathfinding/pathfinding.component.ts
@@ -43,7 +43,6 @@ interface GridPos { row: number; col: number }
Information
],
templateUrl: './pathfinding.component.html',
- styleUrls: ['./pathfinding.component.scss']
})
export class PathfindingComponent implements AfterViewInit {
private readonly pathfindingService = inject(PathfindingService);
diff --git a/src/app/pages/algorithms/sorting/sorting.component.html b/src/app/pages/algorithms/sorting/sorting.component.html
index 1a15631..504df1d 100644
--- a/src/app/pages/algorithms/sorting/sorting.component.html
+++ b/src/app/pages/algorithms/sorting/sorting.component.html
@@ -1,5 +1,4 @@
-
-
+
{{ 'SORTING.TITLE' | translate }}
@@ -40,7 +39,7 @@
-
+
{{ 'SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms
@@ -56,4 +55,3 @@
-
diff --git a/src/styles.scss b/src/styles.scss
index c01f329..fdba66c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -110,6 +110,12 @@ a {
transition:
box-shadow 200ms ease,
transform 200ms ease;
+
+ &.container {
+ width: 100%;
+ max-width: 1200px;
+ padding: 20px;
+ }
}
.mat-mdc-card::before {
@@ -239,10 +245,21 @@ a {
.controls-panel {
display: flex;
- gap: 10px;
- margin-bottom: 20px;
+ gap: 1rem;
+ margin-bottom: 1rem;
align-items: center;
flex-wrap: wrap;
+ margin-top: 10px;
+ font-size: 0.9em;
+
+ mat-button-toggle-group {
+ border-radius: 4px;
+ overflow: hidden;
+ }
+
+ mat-form-field {
+ width: 200px;
+ }
}
.grid-size {
@@ -250,6 +267,10 @@ a {
gap: 0.75rem;
align-items: center;
flex-wrap: wrap;
+
+ .grid-field {
+ width: 150px;
+ }
}
canvas {
@@ -288,3 +309,34 @@ canvas {
flex-direction: column;
margin-bottom: 1rem;
}
+
+/* Sorting Visualization */
+.sorting-visualization-area {
+ display: flex;
+ align-items: flex-end;
+ height: 300px; /* Max height for bars */
+ border-bottom: 1px solid #ccc;
+ margin-bottom: 20px;
+ gap: 1px;
+ background-color: #f0f0f0;
+
+ .sorting-bar {
+ flex-grow: 1;
+ background-color: #424242; /* Default unsorted color */
+ transition: height 0.05s ease-in-out, background-color 0.05s ease-in-out;
+ width: 10px; /* Default width, flex-grow will adjust */
+ min-width: 1px; /* Ensure bars are always visible */
+
+ &.unsorted {
+ background-color: #424242;
+ }
+
+ &.comparing {
+ background-color: #ffeb3b; /* Yellow for comparing */
+ }
+
+ &.sorted {
+ background-color: #4caf50; /* Green for sorted */
+ }
+ }
+}
\ No newline at end of file