updated style of edit gallery

techtruth · Dec 24, 2023 · 6eea701 · 6eea701
1 parent 52c6ffe
commit 6eea701
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git a/webapp/webpack/src/components/ListGallery.js b/webapp/webpack/src/components/ListGallery.js
@@ -25,22 +25,26 @@ export default class listGallery extends React.Component {
 
 
   ListAllGalleries = (props) => {
-      const { galleries } = props;
-      console.log("GLLAER", galleries);
-      return <div className="listGallery">
-                 { galleries.map( (gallery, index) => (
-                   <div key={ index } className="galleryEntry" onClick={() => this.navToGallery( gallery.id )}>
-                     <img src={ gallery.imageData } />
-                     <div className="overlay">
-                       <div className="text">
-                         <span>Name: { gallery.name } </span>
-                         <span>Address: { gallery.locationAddress } </span>
-                         <span>Location: { gallery.locationName } </span>
-                       </div>
-                     </div>
-                   </div>
-                 ) ) }
+     const { galleries } = props;
+
+     return (<div className="listGallery">
+       <div className="galleryEntries">
+         {galleries.map((gallery, index) => (
+           <div key={ index } className="galleryEntry" onClick={() => this.navToGallery( gallery.id )}>
+             <img src={gallery.imageData} alt={`Gallery Entry ${index}`} />
+             <div className="overlay">
+               <div className="text">
+                 <span>Name: { gallery.name } </span>
+                 <span>Address: { gallery.locationAddress } </span>
+                 <span>Location: { gallery.locationName } </span>
+               </div>
+               <div className="buttons">
+               </div>
              </div>
+           </div>
+         ))}
+       </div>
+     </div>)
   }
 
   render() {

diff --git a/webapp/webpack/src/style.css b/webapp/webpack/src/style.css
@@ -6,7 +6,7 @@ body {
 /* List Gallery component */
   div .listGallery .galleryEntries {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(22%, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
     gap: 20px;
     margin: 20px;
   }
@@ -91,7 +91,7 @@ body {
 /* Edit Gallery component */
   div .editGallery .galleryEntries {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(22%, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(25%, 1fr));
     gap: 20px;
     margin: 20px;
   }
@@ -103,10 +103,8 @@ body {
   }
 
   div .editGallery .galleryEntry img {
-    max-width: 100%;
+    width: 100%;
     height: auto;
-    min-height: 15em;
-    min-width: 10em;
     display: block;
   }