Fixed issues for devices with screen width between 600px and 1440px

Author: nikolatechie

src/PathfindingVisualizer/PathfindingVisualizer.css

@@ -70,7 +70,7 @@ label {
     background-color: rgb(255, 76, 10);
 }
 
-@media (max-width: 1440px) {
+@media (max-width: 600px) {
     .button-container {
         display: flex;
         flex-direction: row;
@@ -87,7 +87,6 @@ label {
         border: 1px solid white;
         border-radius: 5px;
         padding: 8px;
-        float: left;
     }
 
     button {
@@ -98,6 +97,42 @@ label {
     label {
         order: 3;
         width: 30.5%;
+        font-size: 15px;
+    }
+}
+
+@media (min-width: 601px) and (max-width: 1439px) {
+    .button-container {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-evenly;
+        text-align: center;
+        padding: 8px;
+    }
+
+    #bar-title {
+        width: 80%;
+        order: 1;
+        border: 1px solid white;
+        border-radius: 5px;
+        padding: 8px;
+        letter-spacing: 2px;
+    }
+
+    button {
+        width: 20%;
+        order: 2;
+        font-size: 14px;
+    }
+
+    label {
+        order: 3;
+        width: 50%;
+        padding-top: 5px;
+        padding-bottom: 20px;
+        font-size: 17px;
     }
 }
 

src/PathfindingVisualizer/PathfindingVisualizer.jsx

@@ -41,6 +41,16 @@ export default class PathfindingVisualizer extends React.Component {
         this.setState({grid});
         calculateDimensions();
         this.dimensionReset(); // remove previous paths
+
+        // change text of BFS and DFS buttons depending on the width
+        if (window.innerWidth >= 740 && window.innerWidth < 1440) {
+            document.getElementById('bfs-button').innerText = 'Breadth-first search';
+            document.getElementById('dfs-button').innerText = 'Depth-first search';
+        }
+        else {
+            document.getElementById('bfs-button').innerText = 'BFS';
+            document.getElementById('dfs-button').innerText = 'DFS';
+        }
     }
 
     dimensionReset() {
@@ -365,8 +375,8 @@ export default class PathfindingVisualizer extends React.Component {
                     <button className='algo-buttons' disabled={this.state.animationInProgress} onClick={() => this.dijkstra()}>Dijkstra's algo</button>
                     <button className='algo-buttons' disabled={this.state.animationInProgress} onClick={() => this.aStar()}>A* Search</button>
                     <button className='algo-buttons' disabled={this.state.animationInProgress} onClick={() => this.bidirectionalSearch()}>Bidirectional Search</button>
-                    <button className='algo-buttons' disabled={this.state.animationInProgress} onClick={() => this.bfs()}>BFS</button>
-                    <button className='algo-buttons' disabled={this.state.animationInProgress} onClick={() => this.dfs()}>DFS</button>
+                    <button className='algo-buttons' id='bfs-button' disabled={this.state.animationInProgress} onClick={() => this.bfs()}>BFS</button>
+                    <button className='algo-buttons' id='dfs-button' disabled={this.state.animationInProgress} onClick={() => this.dfs()}>DFS</button>
                     <button className='additional-buttons' disabled={this.state.animationInProgress} onClick={() => this.createRandomGrid()}>CREATE RANDOM GRID</button>
                 </div>