image grid added ui changes & some cleanup

diablo1408 · Jan 10, 2021 · 334a366 · 334a366
1 parent 3e7d03c
commit 334a366
Show file tree

Hide file tree

Showing 228 changed files with 402 additions and 125,683 deletions.
diff --git a/controller/user/logIn.js b/controller/user/logIn.js
@@ -18,6 +18,7 @@ class LogIn{
                 if (_err) return res.status(400).json({msg : 'Authentication has failed!'});
                 else if (result) {
                     const userData = {
+                        id:user[0]._id,
                         username: user[0].username,
                         email: user[0].email,
                     };

diff --git a/frontend/public/css/custom.css b/frontend/public/css/custom.css
@@ -1,3 +1,8 @@
+body{
+
+  background-color: rgba(240, 255, 255, 0.616) !important;
+}
+
 .rowp {
     display: flex;
     flex-wrap: wrap;
@@ -23,24 +28,44 @@
     align-self: auto;
 
   }
+
+  .profile-img{
+    width: 80%;
+
+    border-radius: 50%;
+  }
   .position{
     width: 50px !important;
   }
 
   .bg-image-register{
-    background-image: url("https://images.unsplash.com/photo-1469212044023-0e55b4b9745a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1510&q=8");
+    background-image: url("https://images.unsplash.com/photo-1469212044023-0e55b4b9745a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1510&q=80");
     background-repeat: no-repeat;
-    background-size:cover;
     background-position: center center;  
-    height: 100vh;
+    /* height: 100vh; */
 
   }
   .bg-image-login{
     background-image: url("https://images.unsplash.com/photo-1592135841592-b635e8350ed8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80");
     background-repeat: no-repeat;
-    background-size:cover;
+
+    background-position: center center;  
+
+  }
+
+  .bg-image-forgorps{
+    background-image: url("https://images.unsplash.com/photo-1477948879622-5f16e220fa42?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1500&q=80");
+    background-repeat: no-repeat;
+    background-position: center center;  
+
+  }
+
+  .bg-image-profile{
+    background-image: url("https://images.unsplash.com/photo-1517495306984-f84210f9daa8?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1534&q=80");
+    background-repeat: no-repeat;
+    /* background-size:cover; */
     background-position: center center;  
-    height: 100vh;
+
 
   }
 
@@ -155,6 +180,95 @@
   .no-options {
     color: #000000;
   }
+  img {
+    max-width: 100%;
+    display: block;
+    margin: 10px;
+    box-shadow:  0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
+  }
+  figure {
+    margin: 0;
+    display: grid;
+    grid-template-rows: 1fr auto;
+    margin-bottom: 10px;
+    break-inside: avoid;
+  }
+
+  figure > img {
+    grid-row: 1 / -1;
+    grid-column: 1;
+
+  }
 
+  /* figure a {
+    color: black;
+    text-decoration: none;
+  } */
+
+
+
+  .container-mason {
+    column-count: 4;
+    column-gap: 10px;
+  }
+
+
+
 
+  .pagination-container {
+    justify-content: center;
+    display: flex;
+  }
+
+  .page-active {
+    background:#007bff !important;
+    transition: 0.2s ease-in-out;
+  }
+
+  .pagination-container > ul > li {
+    padding: 15px;
+    display: inline-block;
+    text-align: center;
+    height: 50px;
+    width: 50px;
+    border-radius: 5px;
+    margin: 0px 5px;
+    background: #42474b;
+    color: white;
+    list-style-type: none;
+    text-align: center;
+  }
+
+  .pagination-container > ul > li:hover {
+    cursor: pointer;
+  }
+
+
+
+
+
+  .delete-icon {
+    position: absolute;
+    bottom: 12px;
+    left: 16px;
+    cursor: pointer;
+    color: gray;
+
+    /* visibility: hidden; */
+  }
+
+  .container-img {
+    position: relative;
+
+  }
+   a.delete-icon :hover{
+
+   opacity: 1;
+  }
+
+
+
+
+
+
 
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+
 <html lang="en">
 
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1, ">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <title>Vision</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -4,7 +4,6 @@ import {
   Switch,
   BrowserRouter as Router,
 } from "react-router-dom";
-import "./App.css";
 
 import { Provider } from "react-redux";
 import store from "./store";

diff --git a/frontend/src/components/ImageTable/index.js b/frontend/src/components/ImageTable/index.js
@@ -1,5 +1,4 @@
 import React from "react";
-import "./style.css";
 
 export default function ImageTable({ images, currentPage, pageSize, genre }) {
   // console.log("genreimages");
@@ -13,31 +12,28 @@ export default function ImageTable({ images, currentPage, pageSize, genre }) {
   // console.log(currentImages);
 
   return (
-    <div className="col-md-12">
-      <div id="mdb-lightbox-ui"></div>
+
+
       <div class="mdb-lightbox ">
         {!!images &&
           currentImages.map((image) => {
             const coverImage = image.img_name;
-            // const coverImage = "/uploads/" + image.img_name;
+            console.log("upload_image",coverImage);
             return (
-              // <div className="col-4  " key={image._id}>
-              //   <img
-              //     src={coverImage}
-              //     className="gallery-img"
-              //     alt={"cover"}
-              //     key={image._id}
-              //   />
-              // </div>
-              <figure class="col-md-4">
+
+              <figure className="container-img" >
               <a href={coverImage} data-size="1600x1067">
                 <img src={coverImage} class="img-fluid"/>
+                <div class="delete-icon"><i class="far fa-trash-alt fa-lg"/></div>
+
               </a>
+
+
               </figure>
             );
           })}
       </div>
-      </div>
+
 
 
   );

diff --git a/frontend/src/components/ImageTable/style.css b/frontend/src/components/ImageTable/style.css
diff --git a/frontend/src/components/Pagination/index.js b/frontend/src/components/Pagination/index.js
@@ -1,6 +1,6 @@
 import React from "react";
 import _ from "lodash";
-import "./style.css";
+
 
 export default function Pagination(props) {
   const { itemsCount, pageSize, onPageChange, currentPage } = props;