From d5a1c2509815c2faf6223dd17f1abc71f7508ba8 Mon Sep 17 00:00:00 2001
From: LeafYeeXYZ <leafyeexyz@outlook.com>
Date: Sun, 14 Apr 2024 21:13:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E7=9A=84=E5=93=8D=E5=BA=94=E5=BC=8F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Images.jsx | 20 +++++++++-----------
 src/styles/Images.css     | 32 ++++++++++++++++----------------
 2 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/components/Images.jsx b/src/components/Images.jsx
index 5948a50..31be223 100644
--- a/src/components/Images.jsx
+++ b/src/components/Images.jsx
@@ -97,20 +97,18 @@ function Images({ images, setImages, zhMode, dialogAction }) {
           <img src={imgurl} className='image-loading image-item' /> :
           <img src={image.url} className='image-item' />
         }
-        <div className='image-funcs'>
         { 
           image.type === 'loading' ||
-          <a href={image.url} className='image-marker' onClick={handleStar}>{ image.star === 'stared' ? <StarFilled /> : <StarOutlined /> }</a>
+          <div className='image-funcs'>
+            <div className='image-funcs-left'>
+              <a href={image.url} className='image-marker' onClick={handleStar}>{ image.star === 'stared' ? <StarFilled /> : <StarOutlined /> }</a>
+            </div>
+            <div className='image-funcs-right'>
+              <a href={image.url} download className='image-downloader'><DownloadOutlined /></a>
+              <a href={image.url} className='image-deleter' onClick={handleDelete}><DeleteOutlined /></a>
+            </div>
+          </div>
         }
-        { 
-          image.type === 'loading' ||
-          <a href={image.url} download className='image-downloader'><DownloadOutlined /></a>
-        }
-        { 
-          image.type === 'loading' ||
-          <a href={image.url} className='image-deleter' onClick={handleDelete}><DeleteOutlined /></a>
-        }
-        </div>
       </SwiperSlide>
     )
   })
diff --git a/src/styles/Images.css b/src/styles/Images.css
index 79315fd..3760ea0 100644
--- a/src/styles/Images.css
+++ b/src/styles/Images.css
@@ -51,13 +51,22 @@
   top: 0;
   right: 0;
   width: 100%;
-  padding: 0.65rem 0.6rem;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  & .image-funcs-left {
+    padding: 0.65rem 0.6rem;
+    display: flex;
+    justify-content: flex-start;
+  }
+  & .image-funcs-right {
+    padding: 0.65rem 0.6rem;
+    display: flex;
+    justify-content: flex-end;
+  }
   
   & .image-downloader,
   & .image-deleter,
   & .image-marker {
-    vertical-align: middle;
-    float: right;
     margin-left: 0.6rem;
     padding: 0.5rem 1rem;
     border-radius: 3rem;
@@ -73,7 +82,6 @@
     }
   }
   & .image-marker {
-    float: left;
     margin-left: 0;
     transition: all 0.3s ease;
     &::after {
@@ -111,18 +119,10 @@
 }
 
 @media screen and (max-width: 512px) {
-  .image-funcs {
-    padding: 0.35rem 0.3rem;
-    transform: scale(0.85) translateX(7.5%);
+  .image-funcs-left {
+    transform: scale(0.85) translate(-7.5%, -7.5%);
   }
-  .image-downloader,
-  .image-deleter {
-    margin-left: 0.3rem;
-  }  
-  .image-marker {
-    transform: translateX(-106%);
-    &:hover {
-      transform: translateX(-64%);
-    }
+  .image-funcs-right {
+    transform: scale(0.85) translate(7.5%, -7.5%);
   }
 }
\ No newline at end of file