From ee2c88428bf4ee7f8693a904c0ab17db19004f3d Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Sat, 25 Aug 2018 13:41:02 -0500
Subject: [PATCH] show tags in details expanders on mobile

ref #65
---
 .../ClientApp/components/Home.tsx             | 11 +-------
 .../ClientApp/components/ListDetails.tsx      | 27 +++++++++++++++++++
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index e9de267c9..ab29dfb1f 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -101,7 +101,7 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
                            Cell: (cell: any) => <div>{cell.value.map(
                                (e: any) => <span className="badge" style={{
                                    backgroundColor: `#${e.colorHex}`,
-                                   color: Home.getContrast(`${e.colorHex}`)
+                                   color: ListDetails.getContrast(`${e.colorHex}`)
                                }} title={e.description}>{e.name}</span>)}</div>,
                            width: 100,
                            headerClassName: "d-none d-lg-block",
@@ -176,15 +176,6 @@ export class Home extends React.Component<RouteComponentProps<{}>, IHomeState> {
                    }}
                    className="-striped -highlight"/>;
     }
-
-    //https://stackoverflow.com/a/11868398/2343739
-    private static getContrast(hexcolor: string) {
-        const r = parseInt(hexcolor.substr(0, 2), 16);
-        const g = parseInt(hexcolor.substr(2, 2), 16);
-        const b = parseInt(hexcolor.substr(4, 2), 16);
-        const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
-        return (yiq >= 128) ? "black" : "white";
-    }
 }
 
 interface IListDto {
diff --git a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
index ae7676024..3cc6bc95d 100644
--- a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
+++ b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
@@ -31,6 +31,15 @@ export default class ListDetails extends React.Component<any, any> {
               </div>
             : <div>Loading...</div>;
     }
+
+    //https://stackoverflow.com/a/11868398/2343739
+    public static getContrast(hexcolor: string) {
+        const r = parseInt(hexcolor.substr(0, 2), 16);
+        const g = parseInt(hexcolor.substr(2, 2), 16);
+        const b = parseInt(hexcolor.substr(4, 2), 16);
+        const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+        return (yiq >= 128) ? "black" : "white";
+    }
 }
 
 function FilterListDetails(props: any) {
@@ -51,6 +60,7 @@ function FilterListDetails(props: any) {
 
 function ListInfo(props: any) {
     return <div className="col-9">
+               <Tags tags={props.details.tags}/>
                <Description description={props.details.description} url={props.details.descriptionSourceUrl}/>
                <ul className="list-group list-group-flush">
                    <Languages languages={props.details.languages}/>
@@ -78,6 +88,16 @@ function ListUrls(props: any) {
            </div>;
 }
 
+function Tags(props: any) {
+    return props.tags.length > 0
+        ? <div className="d-block d-sm-none">{props.tags.map(
+            (tag: any) => <span className="badge" style={{
+                backgroundColor: `#${tag.colorHex}`,
+                color: ListDetails.getContrast(`${tag.colorHex}`)
+            }} title={tag.description}>{tag.name}</span>)}</div>
+        : null;
+}
+
 function Description(props: any) {
     return props.description
         ? (props.url
@@ -318,6 +338,7 @@ interface IFilterListDetailsDto {
     ruleCount: number;
     submissionUrl: string;
     syntax: IListSyntaxDto[];
+    tags: IListTagDto[];
     updatedDate: string;
     viewUrl: string;
 }
@@ -347,6 +368,12 @@ interface IListSyntaxDto {
     supportedSoftware: ISyntaxSupportedSoftwareDto[];
 }
 
+interface IListTagDto {
+    name: string;
+    colorHex: string;
+    description: string;
+}
+
 interface ISyntaxSupportedSoftwareDto {
     homeUrl: string;
     name: string;