Merge pull request #7 from Urban-Analytics-Technology-Platform/compon…

…ents

make cards more responsive + minor tidy up

src/assets-arcana/css/main.css

@@ -3171,6 +3171,12 @@ input, select, textarea {
 					#navPanel .link.depth-0 {
 						color: #fff;
 					}
+
+                    #navPanel .link.depth-1 {
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
 
 					#navPanel .link .indent-1 {
 						display: inline-block;

src/components/Header.astro

@@ -1,7 +1,7 @@
 ---
 import "../assets-arcana/css/main.css";
 import { getCollection } from "astro:content";
-import TuringLogo from "../logo.svg"
+import TuringLogo from "../logo.svg";
 
 interface Props {
   title: string;
@@ -12,35 +12,59 @@ const { title } = Astro.props;
 const projects = await getCollection("project");
 const tier1Projects = projects.filter((project) => project.data.tier === 1);
 const tier2Projects = projects.filter((project) => project.data.tier === 2);
+
+const indexPathnames = ["/index.html", "/"];
+const tier1Pathnames = tier1Projects.map(
+  (project) => "/projects/" + project.slug,
+);
+const tier2Pathnames = tier2Projects.map(
+  (project) => "/projects/" + project.slug,
+);
 ---
 
 <div id="header">
   <!-- Logo -->
-  <div id="background" >
-    <div class='relative'>
-      <img width=150 src={TuringLogo.src} alt="Turing Logo" class="absolute" style="top:45px;left:45px"  />;
+  <div id="background">
+    <div class="relative">
+      <img
+        width="150"
+        src={TuringLogo.src}
+        alt="Turing Logo"
+        class="absolute"
+        style="top:45px;left:45px"
+      />;
       <h1><a href="/index.html" id="logo">{title}</a></h1>
     </div>
   </div>
 
   <!-- Nav -->
   <nav id="nav">
     <ul>
-      <li><a href="/index.html">Home</a></li>
-      <li>
+      <li class={indexPathnames.includes(Astro.url.pathname) ? "current" : ""}>
+        <a href="/index.html">Home</a>
+      </li>
+      <li class={tier1Pathnames.includes(Astro.url.pathname) ? "current" : ""}>
         <a href="#">Tier 1 Projects</a>
         <ul>
-          {tier1Projects.map((project)=>(
-            <li><a href={"/projects/"+project.slug}>{project.data.name}</a></li>
-          ))}
+          {
+            tier1Projects.map((project) => (
+              <li>
+                <a href={"/projects/" + project.slug}>{project.data.name}</a>
+              </li>
+            ))
+          }
         </ul>
       </li>
-      <li>
+      <li class={tier2Pathnames.includes(Astro.url.pathname) ? "current" : ""}>
         <a href="#">Tier 2 Projects</a>
         <ul>
-          {tier2Projects.map((project)=>(
-            <li><a href={"/projects/"+project.slug}>{project.data.name}</a></li>
-          ))}
+          {
+            tier2Projects.map((project) => (
+              <li>
+                <a href={"/projects/" + project.slug}>{project.data.name}</a>
+              </li>
+            ))
+          }
         </ul>
       </li>
     </ul>

src/components/ProjectCard.astro

@@ -9,18 +9,16 @@ interface Props {
 const { project } = Astro.props;
 ---
 
-<section class="col-6 col-12-narrower">
-  <div class="box post">
-    <a href={"/projects/" + project.slug} class="image left">
-      {
-        project.data.image && (
-          <img src={project.data.image.url} alt={project.data.image.alt} />
-        )
-      }
-    </a>
-    <div class="inner">
-      <h3><a href={"/projects/" + project.slug}>{project.data.name}</a></h3>
-      <p>{project.data.description}</p>
-    </div>
+<div class="box post">
+  <a href={"/projects/" + project.slug} class="image left">
+    {
+      project.data.image && (
+        <img src={project.data.image.url} alt={project.data.image.alt} />
+      )
+    }
+  </a>
+  <div class="inner">
+    <h3><a href={"/projects/" + project.slug}>{project.data.name}</a></h3>
+    <p>{project.data.description}</p>
   </div>
-</section>
+</div>

src/components/ProjectList.astro

@@ -10,19 +10,6 @@ interface Props {
 }
 
 const { title, description, projects } = Astro.props;
-
-// Group projects into rows of N each
-const N = 2;
-const nrows = Math.ceil(projects.length / N);
-// Can't use fill([]) because that fills with a pointer to the same array
-const projectRows: Array<Array<CollectionEntry<"project">>> = new Array(nrows)
-  .fill(0)
-  .map(() => []);
-
-projects.forEach((project, i) => {
-  const row = Math.floor(i / N);
-  projectRows[row].push(project);
-});
 ---
 
 <section class="wrapper style2">
@@ -36,14 +23,33 @@ projects.forEach((project, i) => {
 
 <section class="wrapper style1">
   <div class="container">
-    {
-      projectRows.map((row) => (
-        <div class="row">
-          {row.map((proj: CollectionEntry<"project">) => (
-            <ProjectCard project={proj} />
-          ))}
-        </div>
-      ))
-    }
+    <div class="project-container">
+      {projects.map((proj) => <ProjectCard project={proj} />)}
+    </div>
   </div>
 </section>
+
+<style>
+  .project-container {
+    display: grid;
+    grid-column-gap: 20px;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .theme-image {
+    width: 100%;
+    object-fit: cover;
+  }
+
+  @media screen and (max-width: 1280px) {
+    .project-container {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media screen and (max-width: 840px) {
+    .project-container {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

src/components/Themes.astro

@@ -0,0 +1,57 @@
+---
+import "../assets-arcana/css/main.css";
+
+type Theme = {
+  title: string;
+  description: string;
+  image_src: string;
+};
+
+const { themes } = Astro.props;
+---
+
+<div id="theme-container" class="gtr-200">
+  {
+    themes.map((theme: Theme) => (
+      <section class="theme-box">
+        <div class="box highlight">
+          <img
+            class="theme-image"
+            src={theme.image_src}
+            alt={"Urban Analytics: " + theme.title}
+          />
+          <h3>{theme.title}</h3>
+          <p>{theme.description}</p>
+        </div>
+      </section>
+    ))
+  }
+</div>
+
+<style>
+  /* Use id instead of class to override default theming. */
+  #theme-container {
+    display: grid;
+    grid-column-gap: 20px;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .theme-image {
+    width: 100%;
+    object-fit: cover;
+  }
+
+  /* Narrower screen: 2x2 grid */
+  @media screen and (max-width: 840px) {
+    #theme-container {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  /* Narrower screen: column */
+  @media screen and (max-width: 480px) {
+    #theme-container {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

src/layouts/Base.astro

@@ -34,10 +34,16 @@ const title = "Urban Analytics Technology Platform";
         <div class="container">
           <div class="row">
             <section class="col-3 col-6-narrower col-12-mobilep">
-              <h3>Links to Stuff</h3>
+              <h3>External Links</h3>
               <ul class="links">
-                <li><a href="https://www.turing.ac.uk/">Alan Turing Institute</a></li>
-                <li><a href="https://www.turing.ac.uk/research/research-programmes/urban-analytics">Urban Analytics Program</a></li>
+                <li>
+                  <a href="https://www.turing.ac.uk/">Alan Turing Institute</a>
+                </li>
+                <li>
+                  <a
+                    href="https://www.turing.ac.uk/research/research-programmes/urban-analytics"
+                    >Urban Analytics Program</a>
+                </li>
               </ul>
             </section>
             <section class="col-6 col-12-narrower">
@@ -87,7 +93,10 @@ const title = "Urban Analytics Technology Platform";
         <!-- Copyright -->
         <div class="copyright">
           <ul class="menu">
-            <li>© The Alan Turing Institute {(new Date()).getFullYear()}. All rights reserved.</li><li>
+            <li>
+              © The Alan Turing Institute {new Date().getFullYear()}. All
+              rights reserved.
+            </li><li>
               Design: <a href="http://html5up.net">HTML5 UP</a>
             </li>
           </ul>