Merge pull request #103 from wethmiranasinghe/main

News and Events and Gallery design updated
cepdnaclk · Sep 17, 2024 · 340f5eb · 340f5eb
2 parents c8a379e + 528e785
commit 340f5eb
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 19 deletions.
diff --git a/front-end/index.html b/front-end/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" />
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

diff --git a/front-end/src/Pages/Gallery.jsx b/front-end/src/Pages/Gallery.jsx
@@ -168,7 +168,7 @@ const Gallery = () => {
 
             {/* Show edit, view, and delete buttons for logged-in users */}
             {loggedInUser.isLoggedIn && (
-              <div>
+              <div className="gallery-actions">
                 {/* <button className="actionButton"><FontAwesomeIcon icon={faPen}/></button>
                 <button className="actionButton"><FontAwesomeIcon icon={faEye}/></button> */}
                 <button className="actionButton" onClick={() => onDeleteClick(item.albumID)}><FontAwesomeIcon icon={faTrash} /></button>

diff --git a/front-end/src/Pages/News.jsx b/front-end/src/Pages/News.jsx
@@ -173,8 +173,8 @@ const News = () => {
 
             {/* Show edit and delete buttons only if user is logged in */}
             {loggedInUser.isLoggedIn && (
-              <div>
-                <button className="actionButton" onClick={() => onEditClick(item)}><FontAwesomeIcon icon={faPen}/></button>
+              <div className="news-actions">
+                {/* <button className="actionButton" onClick={() => onEditClick(item)}><FontAwesomeIcon icon={faPen}/></button> */}
                 <button className="actionButton" onClick={() => onDeleteClick(item.newsID)}><FontAwesomeIcon icon={faTrash} /></button>
               </div>
             )}

diff --git a/front-end/src/components/Gallery.css b/front-end/src/components/Gallery.css
@@ -44,18 +44,17 @@
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(22, 21, 21, 0.1);
   width: 700px;
-  margin-bottom: 20px;
+  margin-bottom: 5px;
   display: flex;
   flex-direction: column;
-  margin-top: 5px;
+  margin-top: 3px;
 }
 
 /* Centering the add gallery form container */
 .add-gallery-form-container {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100vh;
 }
 
 /* Heading for the gallery add form */
@@ -130,6 +129,7 @@
 
 /* Style for individual gallery tiles */
 .gallery-tile {
+  position: relative;
   border: 1px solid #ccc;
   padding: 10px;
   box-shadow: 0 0 10px rgba(92, 67, 67, 0.1);
@@ -155,6 +155,24 @@
   margin-top: 10px;
   cursor: pointer;
 }
+
+.gallery-actions {
+  position: absolute; /* Position it relative to .news-tile */
+  bottom: 10px; /* Position it at the bottom of the tile */
+  right: 10px;  /* Align it to the right */
+}
+
+.actionButton{
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  color: #203a90;
+  transition: transform 0.2s ease;
+}
+
+.actionButton:hover {
+  transform: scale(1.1); /* Slight zoom on hover for effect */
+}
 
 /* Responsive adjustments for smaller screens */
 @media (max-width: 768px) {

diff --git a/front-end/src/components/News.css b/front-end/src/components/News.css
@@ -23,7 +23,6 @@
 
 /* Styles for the button that adds news */
 .AddNewsButton{
-  margin-top: 2px;
   padding: 10px 20px;
   font-size: 16px;
   background-color: #203a90;
@@ -39,12 +38,12 @@
 /* Styles for the add news form layout */
 .add-news-form {
   background-color: #ffffff;
-  padding: 20px;
+  padding: 10px 20px 10px 20px;
   border: 1px solid #cccccc;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(22, 21, 21, 0.1);
   width: 700px;
-  margin-bottom: 20px;
+  margin-bottom: 40px;
   display: flex;
   flex-direction: column;
   margin-top: 5px;
@@ -62,20 +61,20 @@
 /* Styles for the form title */
 .add-news-form h2 {
   font-size: 2rem;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
+  margin-top: 0;
   color: #203a90;
   font-family:'Times New Roman', Times, serif;
 }
 
 /* Styles for form groups (label + input/textarea) */
 .form-group {
-  margin-bottom: 15px;
+  margin-bottom: 10px;
 }
 
 /* Styles for the label elements */
 .form-group label {
   display: block;
-  margin-bottom: 5px;
   font-size: 1rem;
   font-weight: 600;
   font-family:'Times New Roman', Times, serif;
@@ -164,6 +163,7 @@
 }
 
 .news-tile {
+  position: relative;
     border: 1px solid #ccc;
     padding: 10px;
     box-shadow: 0 0 10px rgba(92, 67, 67, 0.1);
@@ -231,14 +231,20 @@
     text-decoration: underline;
 }
 
+.news-actions {
+  position: absolute; /* Position it relative to .news-tile */
+  bottom: 10px; /* Position it at the bottom of the tile */
+  right: 10px;  /* Align it to the right */
+}
+
 .actionButton{
-  margin-right: 5px;
-  padding:0;
-  background-color:#ffffff;
+  background-color: transparent;
   border: none;
   cursor: pointer;
-  transition: background-color 0.2s ease;
-  color: #000;
-  align-items: right;
+  color: #203a90;
+  transition: transform 0.2s ease;
 }
 
+.actionButton:hover {
+  transform: scale(1.1); /* Slight zoom on hover for effect */
+}