Merge pull request #55 from YouROK/card-small-version

Card small version

web/src/components/Torrent/index.jsx

@@ -22,6 +22,7 @@ import {
   TorrentCardDescriptionContent,
   TorrentCardDescriptionLabel,
   TorrentCardPoster,
+  TorrentCardDetails,
 } from './style'
 
 export default function Torrent({ torrent }) {
@@ -66,17 +67,12 @@ export default function Torrent({ torrent }) {
             }}
           >
             <DataUsageIcon />
-            Cache
+            <span>Cache</span>
           </StyledButton>
 
           <StyledButton onClick={() => dropTorrent(torrentLocalComponentValue)}>
             <CloseIcon />
-            Drop
+            <span>Drop</span>
-          </StyledButton>
-
-          <StyledButton onClick={() => deleteTorrent(torrentLocalComponentValue)}>
-            <DeleteIcon />
-            Delete
           </StyledButton>
 
           <StyledButton
@@ -86,28 +82,43 @@ export default function Torrent({ torrent }) {
             }}
           >
             <HeightIcon />
-            Details
+            <span>Details</span>
+          </StyledButton>
+
+          <StyledButton onClick={() => deleteTorrent(torrentLocalComponentValue)}>
+            <DeleteIcon />
+            <span>Delete</span>
           </StyledButton>
         </TorrentCardButtons>
 
         <TorrentCardDescription>
-          <TorrentCardDescriptionLabel>Name</TorrentCardDescriptionLabel>
+          <span>
-          <TorrentCardDescriptionContent>{title || name}</TorrentCardDescriptionContent>
+            <TorrentCardDescriptionLabel>Name</TorrentCardDescriptionLabel>
+            <TorrentCardDescriptionContent isTitle>{title || name}</TorrentCardDescriptionContent>
+          </span>
 
-          <TorrentCardDescriptionLabel>Size</TorrentCardDescriptionLabel>
+          <TorrentCardDetails>
-          <TorrentCardDescriptionContent>
+            <span>
-            {torrent_size > 0 && humanizeSize(torrent_size)}
+              <TorrentCardDescriptionLabel>Size</TorrentCardDescriptionLabel>
-          </TorrentCardDescriptionContent>
+              <TorrentCardDescriptionContent>
+                {torrent_size > 0 && humanizeSize(torrent_size)}
+              </TorrentCardDescriptionContent>
+            </span>
 
-          <TorrentCardDescriptionLabel>Download speed</TorrentCardDescriptionLabel>
+            <span>
-          <TorrentCardDescriptionContent>
+              <TorrentCardDescriptionLabel>Speed</TorrentCardDescriptionLabel>
-            {download_speed > 0 ? humanizeSize(download_speed) : '---'}
+              <TorrentCardDescriptionContent>
-          </TorrentCardDescriptionContent>
+                {download_speed > 0 ? humanizeSize(download_speed) : '---'}
+              </TorrentCardDescriptionContent>
+            </span>
 
-          <TorrentCardDescriptionLabel>Peers</TorrentCardDescriptionLabel>
+            <span>
-          <TorrentCardDescriptionContent>
+              <TorrentCardDescriptionLabel>Peers</TorrentCardDescriptionLabel>
-            {getPeerString(torrentLocalComponentValue) || '---'}
+              <TorrentCardDescriptionContent>
-          </TorrentCardDescriptionContent>
+                {getPeerString(torrentLocalComponentValue) || '---'}
+              </TorrentCardDescriptionContent>
+            </span>
+          </TorrentCardDetails>
         </TorrentCardDescription>
       </TorrentCard>
 

web/src/components/Torrent/style.js

@@ -13,6 +13,14 @@ export const TorrentCard = styled.div`
   padding: 10px;
   background: #3fb57a;
   box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
+
+  @media (max-width: 600px), (max-height: 500px) {
+    grid-template-areas:
+      'poster description'
+      'buttons buttons';
+    grid-template-columns: 25% 1fr;
+    grid-template-rows: 100px min-content;
+  }
 `
 
 export const TorrentCardPoster = styled.div`
@@ -39,11 +47,21 @@ export const TorrentCardPoster = styled.div`
             transform: translateY(-3px);
           }
         `};
+
+  @media (max-width: 600px), (max-height: 500px) {
+    svg {
+      width: 50%;
+    }
+  }
 `
 export const TorrentCardButtons = styled.div`
   grid-area: buttons;
   display: grid;
   gap: 5px;
+
+  @media (max-width: 600px), (max-height: 500px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
 `
 export const TorrentCardDescription = styled.div`
   grid-area: description;
@@ -51,6 +69,12 @@ export const TorrentCardDescription = styled.div`
   border-radius: 5px;
   padding: 5px;
   word-break: break-word;
+
+  @media (max-width: 600px), (max-height: 500px) {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
 `
 
 export const TorrentCardDescriptionLabel = styled.div`
@@ -64,6 +88,23 @@ export const TorrentCardDescriptionLabel = styled.div`
 export const TorrentCardDescriptionContent = styled.div`
   margin-left: 5px;
   margin-bottom: 10px;
+
+  @media (max-width: 600px), (max-height: 500px) {
+    font-size: 11px;
+    margin-bottom: 3px;
+    margin-left: 0;
+
+    ${({ isTitle }) =>
+      isTitle &&
+      css`
+        overflow: auto;
+        height: 45px;
+      `}
+  }
+
+  @media (max-width: 410px) {
+    height: 100%;
+  }
 `
 
 export const StyledButton = styled.button`
@@ -84,15 +125,40 @@ export const StyledButton = styled.button`
     margin-right: 10px;
   }
 
-  @media (max-width: 600px) {
+  @media (max-width: 600px), (max-height: 500px) {
-    font-size: 0.7rem;
+    padding: 5px 0;
+    font-size: 0.8rem;
+    justify-content: center;
+
+    span {
+      display: none;
+    }
+
+    svg {
+      width: 20px;
+    }
 
     > :first-child {
-      margin-right: 15px;
+      margin-right: 0;
     }
   }
 
+  @media (max-width: 500px) {
+    font-size: 0.7rem;
+  }
+
   :hover {
     background: #2a7e54;
   }
 `
+
+export const TorrentCardDetails = styled.div`
+  @media (max-width: 600px), (max-height: 500px) {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  @media (max-width: 410px) {
+    display: none;
+  }
+`

web/src/components/TorrentList.jsx

@@ -7,8 +7,17 @@ import Torrent from './Torrent'
 
 const TorrentListWrapper = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
+  grid-template-columns: repeat(auto-fit, 350px);
   gap: 30px;
+
+  @media (max-width: 600px), (max-height: 500px) {
+    gap: 10px;
+    grid-template-columns: repeat(auto-fit, 310px);
+  }
+
+  @media (max-width: 410px) {
+    grid-template-columns: minmax(min-content, 290px);
+  }
 `
 
 export default function TorrentList() {