fix: heighten OpenCollective on mobile (#111)

* fix: heighten OpenCollective on mobile * fix: some users cannot be clicked
casbin · Nov 2, 2022 · f2c721f · f2c721f
1 parent a6bb444
commit f2c721f
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 12 deletions.
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -7,13 +7,14 @@ import styles from "./index.module.css";
 import HomepageFeatures from "../components/HomepageFeatures";
 import {UserList} from "@site/src/components/UserList";
 import Translate from "@docusaurus/Translate";
+import {useWindowSize} from "@docusaurus/theme-common";
 
 class Button extends React.Component {
   render() {
     return (
       <div>
         <a style={{marginRight: "8px", marginBottom: "8px"}} className="button" href={this.props.href} target={this.props.target} icon={this.props.icon}>
-          <embed className="icon" src = {this.props.icon} height ={"20px"} width={"20px"} />
+          <embed className="icon" src={this.props.icon} height={"20px"} width={"20px"} />
           {this.props.children}
         </a>
       </div>
@@ -84,7 +85,7 @@ function PolicyPersistence() {
             </Translate>
           </div>
           <div style={{marginInline: "auto"}}>
-            <img src="/img/store.png" alt="Policy Persistence" width="500" height= "500" />
+            <img src="/img/store.png" alt="Policy Persistence" width="500" height="500" />
           </div>
         </div>
       </div>
@@ -98,7 +99,7 @@ function PolicyEnforcement() {
       <div className="container text--center">
         <div className="row">
           <div style={{marginInline: "auto"}}>
-            <img src="/img/scale.png" alt="Policy enforcement at scale" width="500" height= "500" />
+            <img src="/img/scale.png" alt="Policy enforcement at scale" width="500" height="500" />
           </div>
           <div className="col" style={{marginBlock: "auto"}}>
             <h3><Translate>Policy enforcement at scale</Translate></h3>
@@ -130,7 +131,7 @@ function RoleManager() {
             </Translate>
           </div>
           <div style={{marginInline: "auto"}}>
-            <img src="/img/role.png" alt="Role manager" width="500" height= "500" />
+            <img src="/img/role.png" alt="Role manager" width="500" height="500" />
           </div>
         </div>
       </div>
@@ -166,6 +167,18 @@ function Showcase() {
   );
 }
 
+function OpenCollective() {
+  if (useWindowSize() === "mobile") {
+    return (
+      <iframe title="Sponsors" src="https://opencollective.com/casbin/banner.html" style={{width: "100%", height: "1100px", display: "block"}}></iframe>
+    );
+  } else {
+    return (
+      <iframe title="Sponsors" src="https://opencollective.com/casbin/banner.html" style={{width: "100%", height: "650px", display: "block"}}></iframe>
+    );
+  }
+}
+
 export default function Home() {
   return (
     <Layout
@@ -178,7 +191,7 @@ export default function Home() {
         <PolicyEnforcement />
         <RoleManager />
         <Showcase />
-        <iframe title="Sponsors" src="https://opencollective.com/casbin/banner.html" style={{width: "100%", height: "650px", display: "block"}}></iframe>
+        <OpenCollective />
       </main>
     </Layout>
   );

diff --git a/static/data/users.json b/static/data/users.json
@@ -44,7 +44,7 @@
     {
         "caption": "Alibaba",
         "image": "users/alibaba.png",
-        "infoLink": "https://github.com/dragonflyoss/Dragonfly2/search?q=casbin&type=code",
+        "infolink": "https://github.com/dragonflyoss/Dragonfly2/search?q=casbin&type=code",
         "pinned": true
     },
     {
@@ -104,25 +104,25 @@
     {
         "caption": "Honeywell",
         "image": "users/honeywell.png",
-        "infoLink": "https://www.linkedin.com/search/results/people/?keywords=casbin%20honeywell",
+        "infolink": "https://www.linkedin.com/search/results/people/?keywords=casbin%20honeywell",
         "pinned": true
     },
     {
         "caption": "HPE",
         "image": "users/hpe.jpg",
-        "infoLink": "https://www.linkedin.com/in/raghavbabu",
+        "infolink": "https://www.linkedin.com/in/raghavbabu",
         "pinned": true
     },
     {
         "caption": "Schneider Electric",
         "image": "users/se.png",
-        "infoLink": "https://www.linkedin.com/in/peterjotoole",
+        "infolink": "https://www.linkedin.com/in/peterjotoole",
         "pinned": true
     },
     {
         "caption": "SIEMENS",
         "image": "users/siemens.svg",
-        "infoLink": "https://www.linkedin.com/in/kshitij-rastogi19",
+        "infolink": "https://www.linkedin.com/in/kshitij-rastogi19",
         "pinned": true
     },
     {
@@ -158,13 +158,13 @@
     {
         "caption": "Ontario Government",
         "image": "users/ontario.jpg",
-        "infoLink": "https://www.linkedin.com/in/nihalpandit",
+        "infolink": "https://www.linkedin.com/in/nihalpandit",
         "pinned": true
     },
     {
         "caption": "Apache Pulsar",
         "image": "users/pulsar.svg",
-        "infoLink": "https://apachecon.com/acasia2021/sessions/1049.html",
+        "infolink": "https://apachecon.com/acasia2021/sessions/1049.html",
         "pinned": true
     }
 ]