upgrade to bootstrap 4

2026-03-11 09:04:27 +00:00 · 2018-03-26 17:20:04 -05:00 · 2018-03-26 17:20:04 -05:00 · 37801f497b
commit 37801f497b
parent 408c5c49bf
6 changed files with 59 additions and 73 deletions
--- 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) => {
--- 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>
--- 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()}/>)}
--- 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;
 }
--- 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",
--- 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"
  }
 }