torrent cards rewritten

web/src/components/TorrentCard/style.js

@@ -4,22 +4,26 @@ export const TorrentCard = styled.div`
   border: 1px solid;
   border-radius: 5px;
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-template-rows: 175px minmax(min-content, 1fr);
-  grid-template-areas:
-    'poster buttons'
-    'description description';
+  grid-template-columns: 120px 260px 1fr;
+  grid-template-rows: 180px;
+  grid-template-areas: 'poster description buttons';
   gap: 10px;
   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) {
+  @media (max-width: 1260px), (max-height: 500px) {
     grid-template-areas:
       'poster description'
       'buttons buttons';
-    grid-template-columns: 25% 1fr;
-    grid-template-rows: 100px min-content;
+
+    grid-template-columns: 70px 1fr;
+    grid-template-rows: 110px max-content;
+  }
+
+  @media (max-width: 770px) {
+    grid-template-columns: 60px 1fr;
+    grid-template-rows: 90px max-content;
   }
 `
 
@@ -33,7 +37,9 @@ export const TorrentCardPoster = styled.div`
     isPoster
       ? css`
           img {
+            width: 100%;
             height: 100%;
+            object-fit: cover;
             border-radius: 5px;
           }
         `
@@ -41,26 +47,27 @@ export const TorrentCardPoster = styled.div`
           display: grid;
           place-items: center;
           background: #74c39c;
-          border: 1px solid;
+          border: 1px solid #337a57;
 
           svg {
             transform: translateY(-3px);
           }
         `};
 
-  @media (max-width: 600px), (max-height: 500px) {
+  @media (max-width: 1260px), (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);
+  @media (max-width: 1260px), (max-height: 500px) {
+    grid-template-columns: repeat(3, 1fr);
   }
 `
 export const TorrentCardDescription = styled.div`
@@ -68,43 +75,101 @@ export const TorrentCardDescription = styled.div`
   background: #74c39c;
   border-radius: 5px;
   padding: 5px;
-  word-break: break-word;
+  display: grid;
+  grid-template-rows: 55% 1fr;
+  gap: 10px;
 
-  @media (max-width: 600px), (max-height: 500px) {
+  @media (max-width: 770px) {
+    grid-template-rows: 60% 1fr;
+    gap: 3px;
+  }
+
+  @media (max-width: 770px) {
+    grid-template-rows: 56% 1fr;
+  }
+
+  .description-title-wrapper {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-  }
-`
-
-export const TorrentCardDescriptionLabel = styled.div`
-  text-transform: uppercase;
-  font-size: 10px;
-  font-weight: 500;
-  letter-spacing: 0.4px;
-  color: #216e47;
-`
-
-export const TorrentCardDescriptionContent = styled.div`
-  margin-left: 5px;
-  margin-bottom: 10px;
-  word-break: break-all;
-
-  @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) {
+  .description-section-name {
+    text-transform: uppercase;
     font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.4px;
+    color: #216e47;
+
+    @media (max-width: 770px) {
+      font-size: 0.4rem;
+    }
+  }
+
+  .description-torrent-title {
+    overflow: auto;
+    word-break: break-all;
+
+    @media (max-width: 770px) {
+      font-size: 0.6rem;
+    }
+
+    @media (max-width: 600px), (max-height: 500px) {
+      font-size: 11px;
+      margin-bottom: 3px;
+      margin-left: 0;
+    }
+
+    @media (max-width: 410px) {
+      font-size: 10px;
+    }
+  }
+
+  .description-statistics-wrapper {
+    display: grid;
+    grid-template-columns: 80px 80px 1fr;
+    align-self: end;
+
+    @media (max-width: 1260px), (max-height: 500px) {
+      grid-template-columns: 70px 70px 1fr;
+    }
+
+    @media (max-width: 770px) {
+      grid-template-columns: 65px 65px 1fr;
+    }
+
+    @media (max-width: 600px), (max-height: 500px) {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  .description-statistics-element-wrapper {
+  }
+
+  .description-statistics-element-value {
+    margin-left: 5px;
+    margin-bottom: 10px;
+    word-break: break-all;
+
+    @media (max-width: 1260px), (max-height: 500px) {
+      font-size: 0.7rem;
+      margin-bottom: 0;
+      margin-left: 0;
+    }
+
+    @media (max-width: 770px) {
+      font-size: 0.6rem;
+    }
+
+    @media (max-width: 600px), (max-height: 500px) {
+      font-size: 11px;
+      margin-bottom: 3px;
+      margin-left: 0;
+    }
+
+    @media (max-width: 410px) {
+      font-size: 10px;
+    }
   }
 `
 
@@ -121,41 +186,39 @@ export const StyledButton = styled.button`
   font-size: 1rem;
   font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
   letter-spacing: 0.009em;
+  padding: 10px 20px;
+
+  :hover {
+    background: #2a7e54;
+  }
 
   > :first-child {
     margin-right: 10px;
   }
 
-  @media (max-width: 600px), (max-height: 500px) {
-    padding: 5px 0;
+  @media (max-width: 1260px), (max-height: 500px) {
+    padding: 5px 10px;
     font-size: 0.8rem;
-    justify-content: center;
-
-    span {
-      display: none;
-    }
 
     svg {
       width: 20px;
     }
-
-    > :first-child {
-      margin-right: 0;
-    }
   }
 
   @media (max-width: 500px) {
     font-size: 0.7rem;
+
+    svg {
+      width: 15px;
+    }
   }
 
-  :hover {
-    background: #2a7e54;
-  }
-`
+  @media (max-width: 420px) {
+    padding: 7px 10px;
+    justify-content: center;
 
-export const TorrentCardDetails = styled.div`
-  @media (max-width: 600px), (max-height: 500px) {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    svg {
+      display: none;
+    }
   }
 `