Merge pull request #18 from ieeeucsd/jil-dev

update project space section and involve box

src/public/assets/css/styles.css

@@ -179,7 +179,7 @@ a:hover {
     background-color: var(--main);
     background-blend-mode: overlay;
     background-image: url("../img/backgrounds/ps.webp");
-    height: 40em;
+    height: 43em;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -192,17 +192,33 @@ a:hover {
     color: var(--accent);
 }
 
+.project-space img {
+    height: 3em;
+}
+
+.ps-links {
+    margin-bottom: 1em;
+    margin-top: 1em;
+    display: flex;
+    column-gap: 4em;
+    text-align: center;
+}
+
+.ps-links span {
+    display: block;
+    margin-top: 0.5em;
+}
+
+.ps-links img {
+    fill: color(--accent);
+}
+
 .ps-title {
     font-size: 3em;
     color: white;
     margin-bottom: 1em;
 }
 
-.visit-us {
-    font-size: 2em;
-    margin-bottom: 2em;
-}
-
 .ex-link {
     color: var(--accent);
     font-size: 2em;
@@ -232,17 +248,36 @@ a:hover {
     margin: 1em;
 }
 
+.involve-img {
+    display: inline-block;
+    margin: 20px;
+    overflow: hidden;
+    border-radius: 0.2em;
+}
+
+.involve-card img {
+    display: block;
+    transition: transform 0.4s;
+    width: 20em;
+    border-radius: 0.2em;
+}
+
+.involve-card:hover img {
+    transform: scale(1.1);
+    transform-origin: 50% 50%;
+}
+
 .involve-title {
     font-size: 3em;
     color: var(--main);
     margin-bottom: 0.5em;
 }
 
-.involve-card > img {
+/* .involve-card > img {
     width: 20em;
     margin-bottom: 1em;
     border-radius: 0.2em;
-}
+} */
 
 .links {
     font-size: 1.5em;

src/public/assets/img/calendar_accent.svg

@@ -0,0 +1,3 @@
+<svg width="75" height="59" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M436 160H12c-6.6 0-12-5.4-12-12v-36c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48v36c0 6.6-5.4 12-12 12zM12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm116 204c0-6.6-5.4-12-12-12H76c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12H76c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm128 128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm128 128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40z" fill="#ffcd00"/>
+</svg>

src/public/assets/img/calendar_white.svg

@@ -0,0 +1,3 @@
+<svg width="75" height="59" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M436 160H12c-6.6 0-12-5.4-12-12v-36c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48v36c0 6.6-5.4 12-12 12zM12 192h424c6.6 0 12 5.4 12 12v260c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V204c0-6.6 5.4-12 12-12zm116 204c0-6.6-5.4-12-12-12H76c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12H76c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm128 128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm128 128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40zm0-128c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12v-40z" fill="white"/>
+</svg>

src/public/assets/img/location_accent.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="50" height="50" viewBox="0 0 686.000000 980.000000" preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,980.000000) scale(0.100000,-0.100000)" fill="#ffcd00" stroke="none">
+<path d="M3165 9789 c-1198 -112 -2212 -925 -2580 -2069 -229 -712 -174 -1510 149 -2185 57 -119 236 -412 830 -1363 416 -666 759 -1218 762 -1227 4 -8 1 -15 -5 -15 -6 0 -77 -9 -159 -21 -666 -93 -1240 -295 -1645 -579 -112 -78 -298 -261 -356 -350 -108 -167 -151 -304 -151 -490 0 -147 24 -252 89 -385 274 -560 1193 -947 2536 -1069 1128 -103 2353 22 3135 321 577 219 923 509 1042 873 39 121 50 309 25 432 -86 412 -466 750 -1109 984 -210 76 -564 172 -579 157 -4 -5 -123 -192 -263 -418 -176 -281 -252 -411 -244 -416 7 -3 54 -14 103 -23 417 -79 911 -259 1108 -404 l61 -45 -41 -36 c-127 -113 -434 -244 -785 -336 -789 -206 -1864 -248 -2783 -109 -563 85 -1081 258 -1306 436 l-53 41 40 35 c158 137 597 304 1054 401 227 48 734 119 765 107 6 -2 148 -227 315 -500 167 -273 306 -496 309 -496 3 0 597 981 1319 2180 838 1391 1337 2229 1378 2314 100 209 186 466 233 701 76 376 74 793 -4 1181 -90 445 -309 908 -602 1273 -106 132 -346 369 -473 467 -445 344 -917 544 -1461 619 -138 19 -516 27 -654 14z m567 -1402 c473 -124 811 -463 935 -935 34 -130 43 -372 19 -509 -94 -539 -517 -962 -1049 -1048 -319 -52 -646 21 -922 204 -93 61 -248 212 -317 308 -276 384 -315 890 -103 1316 121 242 343 459 590 577 192 91 338 121 575 116 148 -3 190 -7 272 -29z"/>
+</g>
+</svg>

src/public/assets/img/location_white.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="50" height="50" viewBox="0 0 686.000000 980.000000" preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,980.000000) scale(0.100000,-0.100000)" fill="white" stroke="none">
+<path d="M3165 9789 c-1198 -112 -2212 -925 -2580 -2069 -229 -712 -174 -1510 149 -2185 57 -119 236 -412 830 -1363 416 -666 759 -1218 762 -1227 4 -8 1 -15 -5 -15 -6 0 -77 -9 -159 -21 -666 -93 -1240 -295 -1645 -579 -112 -78 -298 -261 -356 -350 -108 -167 -151 -304 -151 -490 0 -147 24 -252 89 -385 274 -560 1193 -947 2536 -1069 1128 -103 2353 22 3135 321 577 219 923 509 1042 873 39 121 50 309 25 432 -86 412 -466 750 -1109 984 -210 76 -564 172 -579 157 -4 -5 -123 -192 -263 -418 -176 -281 -252 -411 -244 -416 7 -3 54 -14 103 -23 417 -79 911 -259 1108 -404 l61 -45 -41 -36 c-127 -113 -434 -244 -785 -336 -789 -206 -1864 -248 -2783 -109 -563 85 -1081 258 -1306 436 l-53 41 40 35 c158 137 597 304 1054 401 227 48 734 119 765 107 6 -2 148 -227 315 -500 167 -273 306 -496 309 -496 3 0 597 981 1319 2180 838 1391 1337 2229 1378 2314 100 209 186 466 233 701 76 376 74 793 -4 1181 -90 445 -309 908 -602 1273 -106 132 -346 369 -473 467 -445 344 -917 544 -1461 619 -138 19 -516 27 -654 14z m567 -1402 c473 -124 811 -463 935 -935 34 -130 43 -372 19 -509 -94 -539 -517 -962 -1049 -1048 -319 -52 -646 21 -922 204 -93 61 -248 212 -317 308 -276 384 -315 890 -103 1316 121 242 343 459 590 577 192 91 338 121 575 116 148 -3 190 -7 272 -29z"/>
+</g>
+</svg>

src/public/components/InvolveBox.tsx

@@ -14,19 +14,33 @@ export default class InvolveBox extends Component<InvolveBoxProps> {
     }
 
     public render() {
+        if (this.props.boxTitle) {
+            return (
+                <a
+                    href={"/" + this.props.boxTitle.toLowerCase()}
+                    className="involve-card"
+                >
+                    <div className="involve-title">{this.props.boxTitle}</div>
+                    <div className="involve-img">
+                        <img src={this.props.image}></img>
+                    </div>
+                    <div className="involve-description">
+                        {this.props.description}
+                    </div>
+                </a>
+            );
+        } else {
             return (
                 <div className="involve-card">
-                <a
+                    <div className="involve-title">{this.props.boxTitle}</div>
-                    className="involve-title"
+                    <div className="involve-img">
-                    href={"/" + this.props.boxTitle.toLowerCase()}
-                >
-                    {this.props.boxTitle}
-                </a>
                         <img src={this.props.image}></img>
+                    </div>
                     <div className="involve-description">
                         {this.props.description}
                     </div>
                 </div>
             );
         }
+    }
 }

src/public/events.tsx

@@ -23,6 +23,7 @@ class Main extends React.Component {
                     backgrounds={["/assets/img/backgrounds/fa21social.webp"]}
                 ></Splash>
 
+                <div id="events-cal">
                     <DefaultSection title="Events">
                         <iframe
                             src="https://calendar.google.com/calendar/embed?src=666sh64sku5n29qv2a2f4598jc%40group.calendar.google.com&ctz=America%2FLos_Angeles"
@@ -30,7 +31,8 @@ class Main extends React.Component {
                             scrolling="no"
                         ></iframe>
                     </DefaultSection>
-
+                </div>
+                <div id="oa-cal">
                     <DefaultSection title="Open Access Hours">
                         <iframe
                             src="https://calendar.google.com/calendar/embed?src=c_gr3iim9ae4dv9784qkf8meb40c%40group.calendar.google.com&ctz=America%2FLos_Angeles"
@@ -38,6 +40,7 @@ class Main extends React.Component {
                             scrolling="no"
                         ></iframe>
                     </DefaultSection>
+                </div>
 
                 <div id="contact-us">
                     <DefaultSection

src/public/index.tsx

@@ -45,14 +45,18 @@ class Main extends React.Component {
                         is an open-access, collaborative space where students
                         can do homework or get access to basic electronic tools
                         such as soldering stations, breadboard components, and
-                        Arduino and Raspberry PI parts!
+                        Arduino and Raspberry PI parts! Come visit at EBU1-4710!
                     </p>
-                    <a
+                    <div className="ps-links">
-                        className="visit-us"
+                        <a href="/events#oa-cal">
-                        href="https://www.google.com/maps/@32.8817126,-117.2350998,59m/"
+                            <img src="/assets/img/calendar_accent.svg"></img>
-                    >
+                            <span>Open Hours</span>
-                        Come visit at EBU1-4710!
                         </a>
+                        <a href="https://www.google.com/maps/@32.8817126,-117.2350998,59m/">
+                            <img src="/assets/img/location_accent.svg"></img>
+                            <span>Directions</span>
+                        </a>
+                    </div>
                 </div>
                 <DefaultSection
                     className={"involved"}

tsconfig.json

@@ -5,7 +5,8 @@
         "module": "commonjs",
         "target": "es6",
         "jsx": "react",
-        "esModuleInterop": true
+        "esModuleInterop": true,
+        "skipLibCheck": true
     },
     "include": ["./src/util"]
 }