From d9a462c16b5117ee48094a9cd47edba9a670b5df Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Mon, 26 Mar 2018 18:51:58 -0500
Subject: [PATCH] adjust layout of detail link buttons

---
 .../ClientApp/components/Layout.tsx           |  2 +-
 .../ClientApp/components/ListDetails.tsx      | 53 +++++++++++--------
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/Layout.tsx b/src/FilterLists.Web/ClientApp/components/Layout.tsx
index 910853441..27c233c9e 100644
--- a/src/FilterLists.Web/ClientApp/components/Layout.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Layout.tsx
@@ -23,7 +23,7 @@ export class Layout extends React.Component<ILayoutProps, {}> {
                        </div>
                    </div>
                    <div className="row justify-content-center">
-                       <p className="ml-1 mr-1">A project by <a href="https://collinmbarrett.com/">Collin M. Barrett</a>. | Contribute on <a href="https://github.com/collinbarrett/FilterLists">GitHub</a>.</p>
+                       <p className="mt-2 ml-1 mr-1">By <a href="https://collinmbarrett.com/">Collin M. Barrett</a> | Contribute on <a href="https://github.com/collinbarrett/FilterLists">GitHub</a></p>
                    </div>
                </div>;
     };
diff --git a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
index 85e22060b..9ebf484d0 100644
--- a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
+++ b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
@@ -34,25 +34,34 @@ export default class ListDetails extends React.Component<any, any> {
 
 function FilterListDetails(props: any) {
     return <div className="card">
-               <div className="card-body">
-                   <Description description={props.details.description} url={props.details.descriptionSourceUrl}/>
-                   <Languages languages={props.details.languages}/>
-                   <PublishedDate date={props.details.publishedDate}/>
-                   <DiscontinuedDate date={props.details.discontinuedDate}/>
-                   <License license={props.details.license}/>
-                   <div className="btn-group" role="group">
-                       <SubscribeUrl url={props.details.viewUrl} name={props.details.name}/>
-                       <ViewUrl url={props.details.viewUrl} name={props.details.name}/>
-                       <HomeUrl url={props.details.homeUrl} name={props.details.name}/>
-                       <PolicyUrl url={props.details.policyUrl} name={props.details.name}/>
-                       <DonateUrl url={props.details.donateUrl} name={props.details.name}/>
-                       <IssuesUrl url={props.details.issuesUrl} name={props.details.name}/>
-                       <ForumUrl url={props.details.forumUrl} name={props.details.name}/>
-                       <ChatUrl url={props.details.chatUrl} name={props.details.name}/>
-                       <SubmissionUrl url={props.details.submissionUrl} name={props.details.name}/>
-                       <EmailAddress email={props.details.emailAddress} name={props.details.name}/>
+               <div className="card-body p-2">
+                   <div className="container m-0">
+                       <div className="row">
+                           <div className="col-9 p-0">
+                               <Description description={props.details.description} url={props.details
+                                   .descriptionSourceUrl}/>
+                               <Languages languages={props.details.languages}/>
+                               <PublishedDate date={props.details.publishedDate}/>
+                               <DiscontinuedDate date={props.details.discontinuedDate}/>
+                               <License license={props.details.license}/>
+                           </div>
+                           <div className="col-3 p-0 btn-group-vertical align-top">
+                               <SubscribeUrl url={props.details.viewUrl} name={props.details.name}/>
+                               <ViewUrl url={props.details.viewUrl} name={props.details.name}/>
+                               <HomeUrl url={props.details.homeUrl} name={props.details.name}/>
+                               <PolicyUrl url={props.details.policyUrl} name={props.details.name}/>
+                               <DonateUrl url={props.details.donateUrl} name={props.details.name}/>
+                               <IssuesUrl url={props.details.issuesUrl} name={props.details.name}/>
+                               <ForumUrl url={props.details.forumUrl} name={props.details.name}/>
+                               <ChatUrl url={props.details.chatUrl} name={props.details.name}/>
+                               <SubmissionUrl url={props.details.submissionUrl} name={props.details.name}/>
+                               <EmailAddress email={props.details.emailAddress} name={props.details.name}/>
+                           </div>
+                       </div>
+                       <div className="row">
+                           <Maintainers maintainers={props.details.maintainers}/>
+                       </div>
                    </div>
-                   <Maintainers maintainers={props.details.maintainers}/>
                </div>
            </div>;
 }
@@ -104,9 +113,11 @@ function License(props: any) {
 }
 
 function SubscribeUrl(props: any) {
-    return <a href={`abp:subscribe?location=${encodeURIComponent(props.url)}&amp;title=${encodeURIComponent(props.name)}`}
+    return <a href={`abp:subscribe?location=${encodeURIComponent(props.url)}&amp;title=${encodeURIComponent(props.name)
+        }`}
               className="d-block d-sm-none btn btn-primary"
-              title={ `Subscribe to ${props.name} with browser extension supporting \"abp:\" protcool (e.g. uBlock Origin, AdBlock Plus).` }>
+              title={ `Subscribe to ${props.name
+                  } with browser extension supporting \"abp:\" protcool (e.g. uBlock Origin, AdBlock Plus).` }>
                Subscribe
            </a >;
 }
@@ -149,7 +160,7 @@ function IssuesUrl(props: any) {
     return props.url
         ? <a href={props.url} className="btn btn-primary"
              title={`View the GitHub Issues for ${props.name}.`}>
-              GitHub Issues
+              GH Issues
           </a>
         : null;
 }