From 5af90e6ac755ba5451f6d4db31d2e7cbfda11f8d Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Fri, 14 Jul 2023 06:59:02 +0300
Subject: [PATCH] Fixed: Improve quality and episode info output in parse
 result

---
 frontend/src/Parse/ParseResult.css      |  20 +--
 frontend/src/Parse/ParseResult.css.d.ts |   5 +-
 frontend/src/Parse/ParseResult.tsx      | 154 +++++++++++++-----------
 3 files changed, 92 insertions(+), 87 deletions(-)

diff --git a/frontend/src/Parse/ParseResult.css b/frontend/src/Parse/ParseResult.css
index d5de120fa..c49c4e3fa 100644
--- a/frontend/src/Parse/ParseResult.css
+++ b/frontend/src/Parse/ParseResult.css
@@ -1,20 +1,8 @@
-.item {
+.container {
   display: flex;
+  flex-wrap: wrap;
 }
 
-.title {
-  margin-right: 20px;
-  width: 250px;
-  text-align: right;
-  font-weight: bold;
-}
-
-.description {
-  /* composes: description from '~Components/DescriptionList/DescriptionListItemTitle.css'; */
-}
-
-@media (max-width: $breakpointSmall) {
-  .item {
-    display: block;
-  }
+.column {
+  flex: 0 0 50%;
 }
diff --git a/frontend/src/Parse/ParseResult.css.d.ts b/frontend/src/Parse/ParseResult.css.d.ts
index 13942714e..653368e06 100644
--- a/frontend/src/Parse/ParseResult.css.d.ts
+++ b/frontend/src/Parse/ParseResult.css.d.ts
@@ -1,9 +1,8 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
-  'description': string;
-  'item': string;
-  'title': string;
+  'column': string;
+  'container': string;
 }
 export const cssExports: CssExports;
 export default cssExports;
diff --git a/frontend/src/Parse/ParseResult.tsx b/frontend/src/Parse/ParseResult.tsx
index 575b8467f..c0a335e2f 100644
--- a/frontend/src/Parse/ParseResult.tsx
+++ b/frontend/src/Parse/ParseResult.tsx
@@ -5,6 +5,7 @@ import EpisodeFormats from 'Episode/EpisodeFormats';
 import SeriesTitleLink from 'Series/SeriesTitleLink';
 import translate from 'Utilities/String/translate';
 import ParseResultItem from './ParseResultItem';
+import styles from './ParseResult.css';
 
 interface ParseResultProps {
   item: ParseModel;
@@ -76,95 +77,112 @@ function ParseResult(props: ParseResultProps) {
         />
       </FieldSet>
 
-      {/* 
-      
+      {/*
+
       Year
       Secondary titles
       special episode
-      
+
       */}
 
       <FieldSet legend={translate('Episode Info')}>
-        <ParseResultItem
-          title={translate('Season Number')}
-          data={
-            seasonNumber === 0 && absoluteEpisodeNumbers.length
-              ? '-'
-              : seasonNumber
-          }
-        />
+        <div className={styles.container}>
+          <div className={styles.column}>
+            <ParseResultItem
+              title={translate('Season Number')}
+              data={
+                seasonNumber === 0 && absoluteEpisodeNumbers.length
+                  ? '-'
+                  : seasonNumber
+              }
+            />
 
-        <ParseResultItem
-          title={translate('Episode Number(s)')}
-          data={episodeNumbers.join(', ') || '-'}
-        />
+            <ParseResultItem
+              title={translate('Episode Number(s)')}
+              data={episodeNumbers.join(', ') || '-'}
+            />
 
-        <ParseResultItem
-          title={translate('Absolute Episode Number(s)')}
-          data={
-            absoluteEpisodeNumbers.length
-              ? absoluteEpisodeNumbers.join(', ')
-              : '-'
-          }
-        />
+            <ParseResultItem
+              title={translate('Absolute Episode Number(s)')}
+              data={
+                absoluteEpisodeNumbers.length
+                  ? absoluteEpisodeNumbers.join(', ')
+                  : '-'
+              }
+            />
 
-        <ParseResultItem
-          title={translate('Special')}
-          data={special ? 'True' : 'False'}
-        />
+            <ParseResultItem
+              title={translate('Daily')}
+              data={isDaily ? 'True' : 'False'}
+            />
 
-        <ParseResultItem
-          title={translate('Full Season')}
-          data={fullSeason ? 'True' : 'False'}
-        />
+            <ParseResultItem
+              title={translate('Air Date')}
+              data={airDate ?? '-'}
+            />
+          </div>
 
-        <ParseResultItem
-          title={translate('Multi-Season')}
-          data={isMultiSeason ? 'True' : 'False'}
-        />
+          <div className={styles.column}>
+            <ParseResultItem
+              title={translate('Special')}
+              data={special ? 'True' : 'False'}
+            />
 
-        <ParseResultItem
-          title={translate('Partial Season')}
-          data={isPartialSeason ? 'True' : 'False'}
-        />
+            <ParseResultItem
+              title={translate('Full Season')}
+              data={fullSeason ? 'True' : 'False'}
+            />
 
-        <ParseResultItem
-          title={translate('Daily')}
-          data={isDaily ? 'True' : 'False'}
-        />
+            <ParseResultItem
+              title={translate('Multi-Season')}
+              data={isMultiSeason ? 'True' : 'False'}
+            />
 
-        <ParseResultItem title={translate('Air Date')} data={airDate ?? '-'} />
+            <ParseResultItem
+              title={translate('Partial Season')}
+              data={isPartialSeason ? 'True' : 'False'}
+            />
+          </div>
+        </div>
       </FieldSet>
 
       <FieldSet legend={translate('Quality')}>
-        <ParseResultItem
-          title={translate('Quality')}
-          data={quality.quality.name}
-        />
+        <div className={styles.container}>
+          <div className={styles.column}>
+            <ParseResultItem
+              title={translate('Quality')}
+              data={quality.quality.name}
+            />
 
-        <ParseResultItem
-          title={translate('Version')}
-          data={quality.revision.version > 1 ? quality.revision.version : '-'}
-        />
+            <ParseResultItem
+              title={translate('Version')}
+              data={
+                quality.revision.version > 1 ? quality.revision.version : '-'
+              }
+            />
 
-        <ParseResultItem
-          title={translate('Real')}
-          data={quality.revision.real ? 'True' : '-'}
-        />
+            <ParseResultItem
+              title={translate('Real')}
+              data={quality.revision.real ? 'True' : '-'}
+            />
+          </div>
 
-        <ParseResultItem
-          title={translate('Proper')}
-          data={
-            quality.revision.version > 1 && !quality.revision.isRepack
-              ? 'True'
-              : '-'
-          }
-        />
+          <div className={styles.column}>
+            <ParseResultItem
+              title={translate('Proper')}
+              data={
+                quality.revision.version > 1 && !quality.revision.isRepack
+                  ? 'True'
+                  : '-'
+              }
+            />
 
-        <ParseResultItem
-          title={translate('Repack')}
-          data={quality.revision.isRepack ? 'True' : '-'}
-        />
+            <ParseResultItem
+              title={translate('Repack')}
+              data={quality.revision.isRepack ? 'True' : '-'}
+            />
+          </div>
+        </div>
       </FieldSet>
 
       <FieldSet legend={translate('Languages')}>