From b30369e3e61afd3f2222261980d428f66e1b6e26 Mon Sep 17 00:00:00 2001
From: Collin Barrett <collinbarrett@users.noreply.github.com>
Date: Mon, 26 Mar 2018 21:21:11 -0500
Subject: [PATCH] further tidy of Maintainer cards

---
 .../ClientApp/components/ListDetails.tsx      | 68 ++++++++++---------
 src/FilterLists.Web/ClientApp/css/site.css    |  2 +-
 2 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
index be6948c11..0d5630de6 100644
--- a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
+++ b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
@@ -210,38 +210,44 @@ function Maintainers(props: any) {
 function Maintainer(props: any) {
     return <div className="card">
                <div className="card-body">
-                   <h3 className="card-title">Maintained by {props.maintainer.name}</h3>
-                   <div className="btn-group" role="group">
-                       {props.maintainer.homeUrl
-                           ? <a href={props.maintainer.homeUrl} className="btn btn-primary fl-btn-details-action"
-                                title={`View the home page of ${props.maintainer.name}.`}>
-                                 Home
-                             </a>
-                           : null}
-                       {props.maintainer.emailAddress
-                           ? <a href={`mailto:${props.maintainer.emailAddress}`}
-                                className="btn btn-primary fl-btn-details-action"
-                                title={`Email ${props.maintainer.name}.`}>
-                                 Email
-                             </a>
-                           : null}
-                       {props.maintainer.twitterHandle
-                           ? <a href={`https://twitter.com/${props.maintainer.twitterHandle}`}
-                                className="btn btn-primary fl-btn-details-action"
-                                title={`View the Twitter page of ${props.maintainer.name}.`}>
-                                 Twitter
-                             </a>
-                           : null}
+                   <h3 className="card-header">Maintained by {props.maintainer.name}</h3>
+                   <div className="container pt-1">
+                       <div className="row">
+                           <div className="col-9">
+                               {props.maintainer.additionalLists.length > 0
+                                   ? <div>
+                                         <h4>More by {props.maintainer.name}:</h4>
+                                         <ul>
+                                             {props.maintainer.additionalLists.map(
+                                                 (list: any) => <MaintainerAdditionalList list={list} key={list.id.toString()}/>)}
+                                         </ul>
+                                     </div>
+                                   : null}
+                           </div>
+                           <div className="col-3 p-0 btn-group-vertical justify-content-start d-flex align-items-end" role="group">
+                               {props.maintainer.homeUrl
+                                   ? <a href={props.maintainer.homeUrl} className="btn btn-primary fl-btn-details-action"
+                                        title={`View the home page of ${props.maintainer.name}.`}>
+                                         Home
+                                     </a>
+                                   : null}
+                               {props.maintainer.emailAddress
+                                   ? <a href={`mailto:${props.maintainer.emailAddress}`}
+                                        className="btn btn-primary fl-btn-details-action"
+                                        title={`Email ${props.maintainer.name}.`}>
+                                         Email
+                                     </a>
+                                   : null}
+                               {props.maintainer.twitterHandle
+                                   ? <a href={`https://twitter.com/${props.maintainer.twitterHandle}`}
+                                        className="btn btn-primary fl-btn-details-action"
+                                        title={`View the Twitter page of ${props.maintainer.name}.`}>
+                                         Twitter
+                                     </a>
+                                   : null}
+                           </div>
+                       </div>
                    </div>
-                   {props.maintainer.additionalLists.length > 0
-                       ? <div>
-                             <h4>More by {props.maintainer.name}</h4>
-                             <ul>
-                                 {props.maintainer.additionalLists.map(
-                                     (list: any) => <MaintainerAdditionalList list={list} key={list.id.toString()}/>)}
-                             </ul>
-                         </div>
-                       : null}
                </div>
            </div>;
 }
diff --git a/src/FilterLists.Web/ClientApp/css/site.css b/src/FilterLists.Web/ClientApp/css/site.css
index 49728e1a1..fdc0630a5 100644
--- a/src/FilterLists.Web/ClientApp/css/site.css
+++ b/src/FilterLists.Web/ClientApp/css/site.css
@@ -10,6 +10,6 @@ body, h2, h3, h4, h5, blockquote {
 }
 
 .fl-btn-details-action {
-    margin: 0 .2rem .2rem;
+    margin-bottom: .2rem;
     max-width: 90px;
 }
\ No newline at end of file