From adaeb4e892ecacef074902fecc66e1fc7e4400a8 Mon Sep 17 00:00:00 2001
From: Collin Barrett <collinbarrett@users.noreply.github.com>
Date: Sat, 24 Mar 2018 11:32:25 -0500
Subject: [PATCH] misc css cleanup

---
 .../ClientApp/components/ListDetails.tsx      | 41 +++++++++++--------
 src/FilterLists.Web/ClientApp/css/site.css    | 15 +++++--
 2 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
index ec7d53526..0f9f153e8 100644
--- a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
+++ b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
@@ -33,7 +33,7 @@ export default class ListDetails extends React.Component<any, any> {
 }
 
 function FilterListDetails(props: any) {
-    return <div className="panel panel-default">
+    return <div className="panel panel-default panel-list-details">
                <Description description={props.details.description} url={props.details.descriptionSourceUrl}/>
                <Languages languages={props.details.languages}/>
                <PublishedDate date={props.details.publishedDate}/>
@@ -84,21 +84,23 @@ function DiscontinuedDate(props: any) {
 
 function SubscribeUrl(props: any) {
     return <a href={`abp:subscribe?location=${encodeURIComponent(props.url)}&amp;title=${encodeURIComponent(props.name)}`}
-              className="visible-xs btn btn-primary btn-bloc"
+              className="visible-xs btn btn-primary btn-bloc btn-expander-link"
               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 btn-block" title={`View ${props.name} in its raw format.`}>
+    return <a href={props.url} className="btn btn-primary btn-block btn-expander-link"
+        title={`View ${props.name} in its raw format.`}>
                View
            </a>;
 }
 
 function HomeUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-block" title={`View the home page for ${props.name}.`}>
+        ? <a href={props.url} className="btn btn-primary btn-block btn-expander-link"
+            title={`View the home page for ${props.name}.`}>
               Home
           </a>
         : null;
@@ -106,7 +108,7 @@ function HomeUrl(props: any) {
 
 function PolicyUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-block"
+        ? <a href={props.url} className="btn btn-primary btn-block btn-expander-link"
              title={`View the policy for which rules ${props.name} includes.`}>
               Policy
           </a>
@@ -115,7 +117,8 @@ function PolicyUrl(props: any) {
 
 function DonateUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-block" title={`Donate to support ${props.name}.`}>
+        ? <a href={props.url} className="btn btn-primary btn-block btn-expander-link"
+            title={`Donate to support ${props.name}.`}>
               Donate
           </a>
         : null;
@@ -123,7 +126,8 @@ function DonateUrl(props: any) {
 
 function IssuesUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-block" title={`View the GitHub Issues for ${props.name}.`}>
+        ? <a href={props.url} className="btn btn-primary btn-block btn-expander-link"
+            title={`View the GitHub Issues for ${props.name}.`}>
               GitHub Issues
           </a>
         : null;
@@ -131,7 +135,8 @@ function IssuesUrl(props: any) {
 
 function ForumUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-block" title={`View the forum for ${props.name}.`}>
+        ? <a href={props.url} className="btn btn-primary btn-block btn-expander-link"
+            title={`View the forum for ${props.name}.`}>
               Forum
           </a>
         : null;
@@ -139,7 +144,8 @@ function ForumUrl(props: any) {
 
 function ChatUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-block" title={`Enter the chat room for ${props.name}.`}>
+        ? <a href={props.url} className="btn btn-primary btn-block btn-expander-link"
+            title={`Enter the chat room for ${props.name}.`}>
               Chat
           </a>
         : null;
@@ -147,7 +153,7 @@ function ChatUrl(props: any) {
 
 function SubmissionUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-block"
+        ? <a href={props.url} className="btn btn-primary btn-block btn-expander-link"
              title={`Submit a new rule to be included in ${props.name}.`}>
               Submit New Rule
           </a>
@@ -156,7 +162,8 @@ function SubmissionUrl(props: any) {
 
 function EmailAddress(props: any) {
     return props.email
-        ? <a href={`mailto:${props.email}`} className="btn btn-primary btn-block" title={`Email ${props.name}.`}>
+        ? <a href={`mailto:${props.email}`} className="btn btn-primary btn-block btn-expander-link"
+            title={`Email ${props.name}.`}>
               Email
           </a>
         : null;
@@ -165,21 +172,21 @@ function EmailAddress(props: any) {
 function Maintainers(props: any) {
     return props.maintainers.length > 0
         ? <div>
-            {props.maintainers.map(
-                (maintainer: any) => <Maintainer maintainer={maintainer} key={maintainer.id.toString()}/>)}
+              {props.maintainers.map(
+                  (maintainer: any) => <Maintainer maintainer={maintainer} key={maintainer.id.toString()}/>)}
           </div>
         : null;
 }
 
 function Maintainer(props: any) {
-    return <div className="panel panel-default">
+    return <div className="panel panel-default panel-maintainer">
                <div className="panel-heading">
                    <h4 className="panel-title">Maintained by {props.maintainer.name}</h4>
                </div>
                <div className="panel-body">
                    {props.maintainer.homeUrl
                        ? <p>
-                             <a href={props.maintainer.homeUrl} className="btn btn-primary btn-block"
+                             <a href={props.maintainer.homeUrl} className="btn btn-primary btn-block btn-expander-link"
                                 title={`View the home page of ${props.maintainer.name}.`}>
                                  Home
                              </a>
@@ -188,7 +195,7 @@ function Maintainer(props: any) {
                    {props.maintainer.emailAddress
                        ? <p>
                              <a href={`mailto:${props.maintainer.emailAddress}`}
-                                className="btn btn-primary btn-block"
+                                className="btn btn-primary btn-block btn-expander-link"
                                 title={`Email ${props.maintainer.name}.`}>
                                  Email
                              </a>
@@ -197,7 +204,7 @@ function Maintainer(props: any) {
                    {props.maintainer.twitterHandle
                        ? <p>
                              <a href={`https://twitter.com/${props.maintainer.twitterHandle}`}
-                                className="btn btn-primary btn-block"
+                                className="btn btn-primary btn-block btn-expander-link"
                                 title={`View the Twitter page of ${props.maintainer.name}.`}>
                                  Twitter
                              </a>
diff --git a/src/FilterLists.Web/ClientApp/css/site.css b/src/FilterLists.Web/ClientApp/css/site.css
index be8d5ee37..472a8bf6c 100644
--- a/src/FilterLists.Web/ClientApp/css/site.css
+++ b/src/FilterLists.Web/ClientApp/css/site.css
@@ -2,15 +2,24 @@ body, h2, h3, h4, h5, blockquote {
     font-size: 16px;
 }
 
-.panel {
+.rt-tr {
+    -ms-align-items: center;
+    -o-align-items: center;
+    -webkit-align-items: center;
+    align-items: center;
+}
+
+.panel-list-details {
+    padding: 20px;
     margin-bottom: 0;
 }
 
-.panel-default {
+.panel-maintainer {
     padding: 20px;
+    margin-bottom: 0;
 }
 
-.btn-block {
+.btn-expander-link {
     margin-top: 0;
     margin-bottom: 5px;
 }
\ No newline at end of file