From 37801f497bc3c28f4945f57761bbef5057437b30 Mon Sep 17 00:00:00 2001
From: Collin Barrett <collinbarrett@users.noreply.github.com>
Date: Mon, 26 Mar 2018 17:20:04 -0500
Subject: [PATCH] upgrade to bootstrap 4

---
 .../ClientApp/components/Home.tsx             |  8 +-
 .../ClientApp/components/Layout.tsx           |  2 +-
 .../ClientApp/components/ListDetails.tsx      | 80 ++++++++++---------
 src/FilterLists.Web/ClientApp/css/site.css    | 22 -----
 src/FilterLists.Web/npm-shrinkwrap.json       | 17 ++--
 src/FilterLists.Web/package.json              |  3 +-
 6 files changed, 59 insertions(+), 73 deletions(-)

diff --git a/src/FilterLists.Web/ClientApp/components/Home.tsx b/src/FilterLists.Web/ClientApp/components/Home.tsx
index cb4527bfc..1090a184a 100644
--- a/src/FilterLists.Web/ClientApp/components/Home.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Home.tsx
@@ -66,8 +66,8 @@ export class Home extends React.Component<RouteComponentProps<{}>, IFilterListsS
                            Cell: (cell: any) => <div>{cell.value.map((e: any) => e.iso6391).join(", ")}</div>,
                            style: { whiteSpace: "inherit" },
                            width: 60,
-                           headerClassName: "hidden-xs",
-                           className: "hidden-xs"
+                           headerClassName: "d-none d-sm-block",
+                           className: "d-none d-sm-block"
                        },
                        {
                            Header: "Details",
@@ -90,8 +90,8 @@ export class Home extends React.Component<RouteComponentProps<{}>, IFilterListsS
                            Cell: (cell: any) => <SubscribeUrl url={cell.value} name={cell.row.name}/>,
                            style: { textAlign: "center" },
                            width: 100,
-                           headerClassName: "hidden-xs",
-                           className: "hidden-xs"
+                           headerClassName: "d-none d-sm-block",
+                           className: "d-none d-sm-block"
                        }
                    ]}
                    SubComponent={(row: any) => {
diff --git a/src/FilterLists.Web/ClientApp/components/Layout.tsx b/src/FilterLists.Web/ClientApp/components/Layout.tsx
index bc4f9a335..0bf74cf7e 100644
--- a/src/FilterLists.Web/ClientApp/components/Layout.tsx
+++ b/src/FilterLists.Web/ClientApp/components/Layout.tsx
@@ -18,7 +18,7 @@ export class Layout extends React.Component<ILayoutProps, {}> {
                        </p>
                    </div>
                    <div className="row">
-                       <div>
+                       <div className="w-100">
                            { this.props.children }
                        </div>
                    </div>
diff --git a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
index 51271e346..c62539e90 100644
--- a/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
+++ b/src/FilterLists.Web/ClientApp/components/ListDetails.tsx
@@ -33,33 +33,37 @@ export default class ListDetails extends React.Component<any, any> {
 }
 
 function FilterListDetails(props: any) {
-    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}/>
-               <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}/>
+    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>
+                   <Maintainers maintainers={props.details.maintainers}/>
                </div>
-               <Maintainers maintainers={props.details.maintainers}/>
            </div>;
 }
 
 function Description(props: any) {
     return props.description
         ? (props.url
-            ? <blockquote cite={props.url}>{props.description}</blockquote>
-            : <p>{props.description}</p>)
+            ? <h3 className="card-subtitle">
+                  <blockquote cite={props.url}>{props.description}</blockquote>
+              </h3>
+            : <h3 className="card-subtitle">{props.description}</h3>)
         : null;
 }
 
@@ -101,14 +105,14 @@ function License(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-expander-link"
+              className="visible-xs btn btn-primary"
               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-expander-link"
+    return <a href={props.url} className="btn btn-primary"
               title={`View ${props.name} in its raw format.`}>
                View
            </a>;
@@ -116,7 +120,7 @@ function ViewUrl(props: any) {
 
 function HomeUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-expander-link"
+        ? <a href={props.url} className="btn btn-primary"
              title={`View the home page for ${props.name}.`}>
               Home
           </a>
@@ -125,7 +129,7 @@ function HomeUrl(props: any) {
 
 function PolicyUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-expander-link"
+        ? <a href={props.url} className="btn btn-primary"
              title={`View the policy for which rules ${props.name} includes.`}>
               Policy
           </a>
@@ -134,7 +138,7 @@ function PolicyUrl(props: any) {
 
 function DonateUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-expander-link"
+        ? <a href={props.url} className="btn btn-primary"
              title={`Donate to support ${props.name}.`}>
               Donate
           </a>
@@ -143,7 +147,7 @@ function DonateUrl(props: any) {
 
 function IssuesUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-expander-link"
+        ? <a href={props.url} className="btn btn-primary"
              title={`View the GitHub Issues for ${props.name}.`}>
               GitHub Issues
           </a>
@@ -152,7 +156,7 @@ function IssuesUrl(props: any) {
 
 function ForumUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-expander-link"
+        ? <a href={props.url} className="btn btn-primary"
              title={`View the forum for ${props.name}.`}>
               Forum
           </a>
@@ -161,7 +165,7 @@ function ForumUrl(props: any) {
 
 function ChatUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-expander-link"
+        ? <a href={props.url} className="btn btn-primary"
              title={`Enter the chat room for ${props.name}.`}>
               Chat
           </a>
@@ -170,7 +174,7 @@ function ChatUrl(props: any) {
 
 function SubmissionUrl(props: any) {
     return props.url
-        ? <a href={props.url} className="btn btn-primary btn-expander-link"
+        ? <a href={props.url} className="btn btn-primary"
              title={`Submit a new rule to be included in ${props.name}.`}>
               Submit Rule
           </a>
@@ -179,7 +183,7 @@ function SubmissionUrl(props: any) {
 
 function EmailAddress(props: any) {
     return props.email
-        ? <a href={`mailto:${props.email}`} className="btn btn-primary btn-expander-link"
+        ? <a href={`mailto:${props.email}`} className="btn btn-primary"
              title={`Email ${props.name}.`}>
               Email
           </a>
@@ -196,28 +200,26 @@ function Maintainers(props: any) {
 }
 
 function Maintainer(props: any) {
-    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">
+    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 btn-expander-link"
+                           ? <a href={props.maintainer.homeUrl} className="btn btn-primary"
                                 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 btn-expander-link"
+                                className="btn btn-primary"
                                 title={`Email ${props.maintainer.name}.`}>
                                  Email
                              </a>
                            : null}
                        {props.maintainer.twitterHandle
                            ? <a href={`https://twitter.com/${props.maintainer.twitterHandle}`}
-                                className="btn btn-primary btn-expander-link"
+                                className="btn btn-primary"
                                 title={`View the Twitter page of ${props.maintainer.name}.`}>
                                  Twitter
                              </a>
@@ -225,7 +227,7 @@ function Maintainer(props: any) {
                    </div>
                    {props.maintainer.additionalLists.length > 0
                        ? <div>
-                             <h5>More by {props.maintainer.name}</h5>
+                             <h4>More by {props.maintainer.name}</h4>
                              <ul>
                                  {props.maintainer.additionalLists.map(
                                      (list: any) => <MaintainerAdditionalList list={list} key={list.id.toString()}/>)}
diff --git a/src/FilterLists.Web/ClientApp/css/site.css b/src/FilterLists.Web/ClientApp/css/site.css
index eb76b3ee4..dd2ec0ecb 100644
--- a/src/FilterLists.Web/ClientApp/css/site.css
+++ b/src/FilterLists.Web/ClientApp/css/site.css
@@ -2,11 +2,6 @@ body, h2, h3, h4, h5, blockquote {
     font-size: 16px;
 }
 
-/* resolve react-table conflict with bootstrap responsive column hiding */
-.rt-thead, .rt-tbody {
-    min-width: 0 !important;
-}
-
 .rt-tr {
     -ms-align-items: center;
     -o-align-items: center;
@@ -16,21 +11,4 @@ body, h2, h3, h4, h5, blockquote {
 
 .list-title {
     margin: 0;
-}
-
-.panel-list-details {
-    margin-bottom: 0;
-    padding: 20px;
-}
-
-.panel-maintainer {
-    margin-bottom: 0;
-    padding: 20px;
-}
-
-.btn-expander-link {
-    -ms-border-radius: 0;
-    border-radius: 0;
-    margin: 0 auto 5px auto;
-    width: 110px;
 }
\ No newline at end of file
diff --git a/src/FilterLists.Web/npm-shrinkwrap.json b/src/FilterLists.Web/npm-shrinkwrap.json
index ff2165f90..b7fb7b818 100644
--- a/src/FilterLists.Web/npm-shrinkwrap.json
+++ b/src/FilterLists.Web/npm-shrinkwrap.json
@@ -19,7 +19,7 @@
     "@types/react": {
       "version": "16.0.41",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.0.41.tgz",
-      "integrity": "sha512-hbAKPclom+NzM/iqB9JmP7UfWl0j/xsOIzWCB8iIJ7Dq0BlY80IeulgHwod2EOYILD5hc/DJAJvMFKfczdWBsQ=="
+      "integrity": "sha1-chRnN/TUOdyVpTMV3kv7Q6yFQso="
     },
     "@types/react-dom": {
       "version": "16.0.4",
@@ -64,7 +64,7 @@
     "@types/react-table": {
       "version": "6.7.8",
       "resolved": "https://registry.npmjs.org/@types/react-table/-/react-table-6.7.8.tgz",
-      "integrity": "sha512-KTjOKCWLaQKxPhBcnrwQvneKRfIdzzPlZFVFOND+w9ISImLE1vx7i5JG5COqwUOIGAvgIeiK3YgQD9Delf1Jzg==",
+      "integrity": "sha1-aY5nLfGhV3gVMdE6+P9Jsq8is5A=",
       "requires": {
         "@types/react": "16.0.41"
       }
@@ -488,9 +488,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.3.7.tgz",
-      "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E=",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0.tgz",
+      "integrity": "sha512-gulJE5dGFo6Q61V/whS6VM4WIyrlydXfCgkE+Gxe5hjrJ8rXLLZlALq7zq2RPhOc45PSwQpJkrTnc2KgD6cvmA==",
       "dev": true
     },
     "brace-expansion": {
@@ -3357,7 +3357,7 @@
     "jquery": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
-      "integrity": "sha1-lYzinoHJeQ8xvneS311NlfxX+8o=",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
       "dev": true
     },
     "js-base64": {
@@ -4129,6 +4129,11 @@
       "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
       "dev": true
     },
+    "popper.js": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.1.tgz",
+      "integrity": "sha1-uIFeXNpvYvwgQuR2GGSfdYZuZ1M="
+    },
     "posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
diff --git a/src/FilterLists.Web/package.json b/src/FilterLists.Web/package.json
index 7e3036c6e..89ab0fc93 100644
--- a/src/FilterLists.Web/package.json
+++ b/src/FilterLists.Web/package.json
@@ -13,7 +13,7 @@
     "aspnet-webpack": "^2.0.3",
     "aspnet-webpack-react": "^3.0.0",
     "awesome-typescript-loader": "^4.0.1",
-    "bootstrap": "3.3.7",
+    "bootstrap": "^4.0.0",
     "css-loader": "^0.28.11",
     "event-source-polyfill": "0.0.12",
     "extract-text-webpack-plugin": "^3.0.2",
@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@types/react-table": "^6.7.8",
+    "popper.js": "^1.14.1",
     "react-table": "^6.8.0"
   }
 }