Improved the styling of sending the image in the chat!

Now single images are sent differently
iPythonezta · Jun 25, 2024 · 6651f64 · 6651f64
1 parent 710eab9
commit 6651f64
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 27 deletions.
diff --git a/frontend/src/Components/Chat.js b/frontend/src/Components/Chat.js
@@ -482,38 +482,61 @@ const handleSendMessage = () => {
                         {data?.message}
                       </p>
                       {data.images?.length > 0 && (
-                        <MDBRow className="mt-3" style={{width:'50%'}}>
-                          {data.images.slice(0, 3).map((image, index) => (
-                            <MDBCol md="5" className="" key={index} style={{ display:'flex',justifyContent:'center', backgroundColor:'#3b71ca', padding:'3px', paddingLeft:'5px'}}>
-                              <div className="position-relative" onClick={() => handleImageClick(index, data.images)}>
-                                <img
-                                  src={"http://127.0.0.1:8000" + image.image}
-                                  alt={`Image ${index + 1}`}
-                                  className="uploaded-image-preview img-fluid img-responsive"
-                                  style={{ height: '200px', width: '200px', cursor: 'pointer', padding:'3px' ,backgroundColor:'#3b71ca' }}
-                                />
-                              </div>
-                            </MDBCol>
-                          ))}
-                          {data.images.length > 3 && (
-                            <MDBCol md="5" className="" style={{display:'flex', justifyContent:'center', backgroundColor:'#3b71ca', padding:'3px',paddingRight:'5px'}}>
-                              <div className="position-relative" onClick={() => handleImageClick(3, data.images)}>
+                        <div className="image-grid-wrapper">
+                          {data.images.length >= 5 ? (
+                            <MDBRow className="mt-3" style={{ width: '60%', borderRadius: '30px', margin: '10px' }}>
+                              {data.images.slice(0, 3).map((image, index) => (
+                                <MDBCol md="5" className="" key={index} style={{ display: 'flex', justifyContent: 'flex-end', marginRight: '-15px', paddingTop: '5px', backgroundColor: '#3b71ca', borderRadius: index === 0 ? "10px 0px 0px 0px" : index === 1 ? "0px 10px 0px 0px" : "0px 0px 0px 10px", paddingBottom: index === 2 ? "5px" : "" }}>
+                                  <div className="position-relative" onClick={() => handleImageClick(index, data.images)}>
+                                    <img
+                                      src={"http://127.0.0.1:8000" + image.image}
+                                      alt={`Image ${index + 1}`}
+                                      className="uploaded-image-preview img-fluid img-responsive"
+                                      style={{ height: '200px', width: '200px', cursor: 'pointer', borderRadius: '10px', padding: '3px', backgroundColor: '#3b71ca' }}
+                                    />
+                                    <div className="overlay"></div>
+                                  </div>
+                                </MDBCol>
+                              ))}
+                              {data.images.length > 3 && (
+                                <MDBCol md="5" className="" style={{ display: 'flex', justifyContent: 'center', paddingTop: '5px', backgroundColor: '#3b71ca', borderRadius: '0px 0px 10px 0px' }}>
+                                  <div className="position-relative" onClick={() => handleImageClick(3, data.images)} style={{}}>
+                                    <img
+                                      src={"http://127.0.0.1:8000" + data.images[3].image}
+                                      alt="Image 4"
+                                      className="uploaded-image-preview img-fluid img-responsive"
+                                      style={{ height: '200px', width: '200px', background: 'transparent', cursor: 'pointer', padding: '3px', borderRadius: '10px' }}
+                                    />
+                                    {data.images.length > 4 && (
+                                      <div className="overlay img-fluid">
+                                        +{data.images.length - 4}
+                                      </div>
+                                    )}
+                                  </div>
+                                </MDBCol>
+                              )}
+                            </MDBRow>
+                          ) : (
+                            <MDBRow style={{margin:'10px'}}>  
+                              <MDBCol md="3" className="" style={{ display: 'flex', justifyContent: 'center',  backgroundColor: '#3b71ca', borderRadius: '10px' }}>
+
+                              <div className="position-relative single-image-container" style={{margin:'5px'}} onClick={() => handleImageClick(0, data.images)} >
                                 <img
-                                  src={"http://127.0.0.1:8000" + data.images[3].image}
-                                  alt="Image 4"
+                                  src={"http://127.0.0.1:8000" + data.images[0].image}
+                                  alt="Single Image"
                                   className="uploaded-image-preview img-fluid img-responsive"
-                                  style={{ height: '200px', width: '200px', cursor: 'pointer', padding:'3px',backgroundColor:'#3b71ca' }}
+                                  style={{ height: '200px', width: '400px', cursor: 'pointer', borderRadius: '10px', padding: '3px', backgroundColor: '#3b71ca' }}
                                 />
-                                {data.images.length > 4 && (
-                                  <div className="overlay">
-                                    +{data.images.length - 4}
-                                  </div>
-                                )}
+                              {data.images.length !== 1 && <div className="overlay img-fluid" style={{width:'200px'}}>
+                                  {data.images.length-1}+
+                                </div>}
                               </div>
-                            </MDBCol>
+                              </MDBCol>
+                            </MDBRow>
                           )}
-                        </MDBRow>
+                        </div>
                       )}
+
                     </MDBCardBody>
 
                     {dropdownMessageId === data?.id && (

diff --git a/frontend/src/Components/chat.css b/frontend/src/Components/chat.css
@@ -59,5 +59,23 @@
     align-items: center;
     font-size: 1.5em;
     cursor: pointer;
+    border-radius: 10px;
+    height: 200px;
 }
-
+
+.overlay-secondary {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.2);
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5em;
+    cursor: pointer;
+    border-radius: 10px;
+    height: 200px;
+}