I attempted to format the photographs on the side panel that appears when a user clicks a map square so that they look more like the design on Figma. Originally, miniature versions of every photograph from the map square were used which did not use up all of the space of the panel, as shown below.
The changes I made are as follows:
Standardized the sizes of the photos by adding a pale green background of fixed dimensions (larger than before to use up the entire space of the side panel) to each photo.
Reduced the number of columns permanently to two so that a user can more clearly examine the pictures (originally, the number of columns depended on the size of a user's window).
Reduced the number of photos displayed by slicing the input to MapSquareContent (originally, every photo was displayed, which meant that a user would need to do significant scrolling to reach the end of the page).
This is what the panel looks like after my changes:
I could not finish coding all of the changes that I was trying to make. In particular, I did not get to finish adding a photographer caption to each photo. In the code, I created a new method called getPhotoGridForMapSquare() with the intent of modifying the code from getPhotoGrid() to put a div around each photo so that a caption could be added. Currently, the getPhotoGridForMapSquare() method is identical to getPhotoGrid().
I attempted to format the photographs on the side panel that appears when a user clicks a map square so that they look more like the design on Figma. Originally, miniature versions of every photograph from the map square were used which did not use up all of the space of the panel, as shown below.
The changes I made are as follows:
This is what the panel looks like after my changes:
I could not finish coding all of the changes that I was trying to make. In particular, I did not get to finish adding a photographer caption to each photo. In the code, I created a new method called getPhotoGridForMapSquare() with the intent of modifying the code from getPhotoGrid() to put a div around each photo so that a caption could be added. Currently, the getPhotoGridForMapSquare() method is identical to getPhotoGrid().