From 40656539b66122b029f2d3475d8c3d0314ef50fe Mon Sep 17 00:00:00 2001
From: "Collin M. Barrett" <collinbarrett@users.noreply.github.com>
Date: Mon, 26 Mar 2018 20:17:29 -0500
Subject: [PATCH] align details buttons to right, add tooltip to Details
 buttons

---
 .../ClientApp/components/Home.tsx             | 12 ++++++---
 .../ClientApp/components/ListDetails.tsx      | 25 +++++++++----------
 src/FilterLists.Web/ClientApp/css/site.css    |  3 ++-
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index ee0b10864..5c2fb8c9b 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -74,11 +74,17 @@ export class Home extends React.Component<RouteComponentProps<{}>, IFilterListsS
                            accessor: "id",
                            sortable: false,
                            expander: true,
-                           Expander: ({ isExpanded, ...rest }) =>
+                           Expander: ({ isExpanded, row }) =>
                                <div>
                                    {isExpanded
-                                       ? <button className="btn btn-primary btn-block active">Details</button>
-                                       : <button className="btn btn-primary btn-block">Details</button>}
+                                       ? <button className="btn btn-primary btn-block active"
+                                                 title={`Collapse details about ${row.name}.`}>
+                                             Details
+                                         </button>
+                                       : <button className="btn btn-primary btn-block"
+                                                 title={`Learn more about ${row.name}.`}>
+                                             Details
+                                         </button>}
                                </div>,
                            style: { textAlign: "center" },
                            width: 100
diff --git a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
index 23096d693..ae8319c73 100644
--- a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
+++ b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
@@ -38,14 +38,13 @@ function FilterListDetails(props: any) {
                    <div className="container m-0">
                        <div className="row">
                            <div className="col-9 p-0">
-                               <Description description={props.details.description} url={props.details
-                                   .descriptionSourceUrl}/>
+                               <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 justify-content-start">
+                           <div className="col-3 p-0 btn-group-vertical justify-content-start align-end">
                                <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}/>
@@ -114,14 +113,14 @@ function License(props: any) {
 
 function SubscribeUrl(props: any) {
     return <a href={`abp:subscribe?location=${encodeURIComponent(props.url)}&amp;title=${encodeURIComponent(props.name)}`}
-              className="d-block d-sm-none btn btn-primary fl-btn-margin"
+              className="d-block d-sm-none btn btn-primary fl-btn-details-action"
               title={ `Subscribe to ${props.name} with browser extension supporting \"abp:\" protcool (e.g. uBlock Origin, AdBlock Plus).` }>
                Subscribe
            </a >;
 }
 
 function ViewUrl(props: any) {
-    return <a href={props.url} className="btn btn-primary fl-btn-margin"
+    return <a href={props.url} className="btn btn-primary fl-btn-details-action"
               title={`View ${props.name} in its raw format.`}>
                View
            </a>;
@@ -129,7 +128,7 @@ function ViewUrl(props: any) {
 
 function HomeUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary fl-btn-margin"
+        ? <a href={props.url} className="btn btn-primary fl-btn-details-action"
              title={`View the home page for ${props.name}.`}>
               Home
           </a>
@@ -138,7 +137,7 @@ function HomeUrl(props: any) {
 
 function PolicyUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary fl-btn-margin"
+        ? <a href={props.url} className="btn btn-primary fl-btn-details-action"
              title={`View the policy for which rules ${props.name} includes.`}>
               Policy
           </a>
@@ -147,7 +146,7 @@ function PolicyUrl(props: any) {
 
 function DonateUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary fl-btn-margin"
+        ? <a href={props.url} className="btn btn-primary fl-btn-details-action"
              title={`Donate to support ${props.name}.`}>
               Donate
           </a>
@@ -156,7 +155,7 @@ function DonateUrl(props: any) {
 
 function IssuesUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary fl-btn-margin"
+        ? <a href={props.url} className="btn btn-primary fl-btn-details-action"
              title={`View the GitHub Issues for ${props.name}.`}>
               GH Issues
           </a>
@@ -165,7 +164,7 @@ function IssuesUrl(props: any) {
 
 function ForumUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary fl-btn-margin"
+        ? <a href={props.url} className="btn btn-primary fl-btn-details-action"
              title={`View the forum for ${props.name}.`}>
               Forum
           </a>
@@ -174,7 +173,7 @@ function ForumUrl(props: any) {
 
 function ChatUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary fl-btn-margin"
+        ? <a href={props.url} className="btn btn-primary fl-btn-details-action"
              title={`Enter the chat room for ${props.name}.`}>
               Chat
           </a>
@@ -183,7 +182,7 @@ function ChatUrl(props: any) {
 
 function SubmissionUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary fl-btn-margin"
+        ? <a href={props.url} className="btn btn-primary fl-btn-details-action"
              title={`Submit a new rule to be included in ${props.name}.`}>
               Add Rule
           </a>
@@ -192,7 +191,7 @@ function SubmissionUrl(props: any) {
 
 function EmailAddress(props: any) {
     return props.email
-        ? <a href={`mailto:${props.email}`} className="btn btn-primary fl-btn-margin"
+        ? <a href={`mailto:${props.email}`} className="btn btn-primary fl-btn-details-action"
              title={`Email ${props.name}.`}>
               Email
           </a>
diff --git a/src/FilterLists.Web/ClientApp/css/site.css b/src/FilterLists.Web/ClientApp/css/site.css
index 9a21ebbdf..659412d69 100644
--- a/src/FilterLists.Web/ClientApp/css/site.css
+++ b/src/FilterLists.Web/ClientApp/css/site.css
@@ -9,6 +9,7 @@ body, h2, h3, h4, h5, blockquote {
     align-items: center;
 }
 
-.fl-btn-margin {
+.fl-btn-details-action {
     margin-bottom: .2rem;
+    max-width: 100px;
 }
\ No newline at end of file