From 7d137d53db29ea4e0f462bc52985a75bd3b0980f Mon Sep 17 00:00:00 2001
From: Collin Barrett <collinbarrett@users.noreply.github.com>
Date: Sat, 17 Feb 2018 10:49:37 -0600
Subject: [PATCH] more modal work

---
 .../ClientApp/components/ListDetailsModal.tsx | 58 +++++++++++++------
 1 file changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx b/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx
index 9f84a8c93..277f75bc9 100644
--- a/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx
+++ b/src/FilterLists.Web/ClientApp/components/ListDetailsModal.tsx
@@ -49,8 +49,10 @@ function FilterListDetails(props: any) {
                <Description description={props.details.description} url={props.details.descriptionSourceUrl}/>
                <PublishedDate date={props.details.publishedDate}/>
                <DiscontinuedDate date={props.details.discontinuedDate}/>
-               <ViewUrl url={props.details.viewUrl}/>
-               <SubscribeUrl url={props.details.viewUrl} name={props.details.name}/>
+               <SubscribeUrl url={props.details.viewUrl} name={props.details.name} />
+               <ViewUrl url={props.details.viewUrl} />
+               <HomeUrl url={props.details.homeUrl} />
+               <DonateUrl url={props.details.donateUrl} />
            </div>;
 }
 
@@ -58,6 +60,18 @@ function Name(props: any) {
     return <h1>{props.name}</h1>;
 }
 
+function Description(props: any) {
+    if (props.description) {
+        if (props.url) {
+            return <p><blockquote cite={props.url}>{props.description}</blockquote></p>;
+        } else {
+            return <p>{props.description}</p>;
+        }
+    } else {
+        return null;
+    }
+}
+
 function PublishedDate(props: any) {
     if (props.date) {
         return <p>Published: {props.date}</p>;
@@ -74,16 +88,12 @@ function DiscontinuedDate(props: any) {
     }
 }
 
-function Description(props: any) {
-    if (props.description) {
-        if (props.url) {
-            return <p>{props.description}</p>;
-        } else {
-            return <p>{props.description}</p>;
-        }
-    } else {
-        return null;
-    }
+function SubscribeUrl(props: any) {
+    return <a href={`abp:subscribe?location=${encodeURIComponent(props.url)}&amp;title=${encodeURIComponent(props.name)}`}
+              className="btn btn-primary btn-block"
+              title={"Subscribe to list with browser extension supporting \"abp:\" protcool (e.g. uBlock Origin, AdBlock Plus)."}>
+               Subscribe
+           </a>;
 }
 
 function ViewUrl(props: any) {
@@ -92,12 +102,24 @@ function ViewUrl(props: any) {
            </a>;
 }
 
-function SubscribeUrl(props: any) {
-    return <a href={`abp:subscribe?location=${encodeURIComponent(props.url)}&amp;title=${encodeURIComponent(props.name)}`}
-              className="btn btn-primary btn-block"
-              title={"Subscribe to list with browser extension supporting \"abp:\" protcool (e.g. uBlock Origin, AdBlock Plus)."}>
-               Subscribe
-           </a>;
+function HomeUrl(props: any) {
+    if (props.url) {
+        return <a href={props.url} className="btn btn-primary btn-block" title={"View the project's home page."}>
+                   Home
+               </a>;
+    } else {
+        return null;
+    }
+}
+
+function DonateUrl(props: any) {
+    if (props.url) {
+        return <a href={props.url} className="btn btn-info btn-block" title={"Donate to support the list."}>
+                   Donate
+               </a>;
+    } else {
+        return null;
+    }
 }
 
 interface IFilterListDetailsDto {