Spaces:

yjernite
/

mlsoc

Running

App Files Files Community

Yacine Jernite commited on Oct 14

Commit

b1f7a7d

•

1 Parent(s): d513711

imporove overview linking

Browse files

Files changed (3) hide show

index.html +0 -43
scripts/main.js +15 -4
styles/style.css +54 -0

index.html CHANGED Viewed

@@ -7,49 +7,6 @@
     <link rel="stylesheet" href="styles/style.css" />
     <title>Machine Learning and Society @ 🤗 </title>
-    <style>
-      /* Add CSS styles here */
-      #vignettes {
-          display: flex;
-      }
-      #itemSidebar {
-          flex: 0 0 20%;
-          max-width: 20%;
-          border: 1px solid rgb(43, 145, 44);
-          padding-left: 5px;
-          margin-right: 5px;
-        }
-        #itemGallery {
-            flex: 1;
-            border: 1px solid rgb(43, 145, 44);
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
-            grid-auto-flow: row; /* This ensures items fill out columns before moving to the next row */
-        }
-        .item {
-          border: 1px solid rgb(43, 145, 44);
-          background-size: cover;
-          background-position: center;
-          height: 200px;
-          position: relative;
-          margin: 5px;
-        }
-        .item h3 {
-            position: absolute;
-            padding: 5px;
-            text-align: center;
-        }
-        .item p {
-            position: absolute;
-            bottom: 0;
-            background-color: #cbf5e1;
-            margin: 0;
-            padding: 5px;
-            text-align: center;
-        }
-  </style>
   </head>
   <body>

     <link rel="stylesheet" href="styles/style.css" />
     <title>Machine Learning and Society @ 🤗 </title>
   </head>
   <body>

scripts/main.js CHANGED Viewed

@@ -2,21 +2,21 @@
 const items = [
     {
         title: 'EvalEval Workshop',
-        tags: ['privacy', 'bias', 'environment', 'measures', 'society'],
         image: 'images/hf-logo.png',
         link: 'projects.html#Evaluation',
         description: 'The EvalEval workshop is organized by our collaborative Social Impact Evaluation project.'
     },
     {
         title: 'Legal Hackathons',
-        tags: ['regulation', 'education', 'finance', 'health', 'privacy', 'labor', 'society'],
         image: 'images/hf-logo.png',
         link: 'projects.html#Legal',
         description: 'The Legal Hackathons produce reports analyzing existing and proposed regulation.'
     },
     {
         title: 'AI Energy Scores',
-        tags: ['environment', 'measures', 'society'],
         image: 'images/hf-logo.png',
         link: 'projects.html#Energy',
         description: 'This project works toward standardized reporting of energy costs of AI systems.'
@@ -36,6 +36,8 @@ const uniqueTags = [...new Set(items.flatMap(item => item.tags))];
 uniqueTags.forEach(tag => {
     const li = document.createElement('li');
     li.textContent = tag;
     li.addEventListener('click', () => displayItemsByTag(tag));
     tagList.appendChild(li);
 });
@@ -55,12 +57,21 @@ function displayItemsByTag(selectedTag) {
         itemDiv.id = `item-${itemCount}`;
         itemDiv.style.backgroundImage = `url(${item.image})`;
         itemDiv.innerHTML = `
-            <h3>${item.title}</h3>
             <p>${item.description}</p>
         `;
         itemContainer.appendChild(itemDiv);
     });
     const showing = document.getElementById('sidebarShowing');
     showing.textContent = `Showing projects relevant to: ${selectedTag}`
 }

 const items = [
     {
         title: 'EvalEval Workshop',
+        tags: ['privacy', 'bias', 'environment', 'measuring', 'society'],
         image: 'images/hf-logo.png',
         link: 'projects.html#Evaluation',
         description: 'The EvalEval workshop is organized by our collaborative Social Impact Evaluation project.'
     },
     {
         title: 'Legal Hackathons',
+        tags: ['regulation', 'education', 'privacy', 'labor', 'society'],
         image: 'images/hf-logo.png',
         link: 'projects.html#Legal',
         description: 'The Legal Hackathons produce reports analyzing existing and proposed regulation.'
     },
     {
         title: 'AI Energy Scores',
+        tags: ['environment', 'measuring', 'society'],
         image: 'images/hf-logo.png',
         link: 'projects.html#Energy',
         description: 'This project works toward standardized reporting of energy costs of AI systems.'
 uniqueTags.forEach(tag => {
     const li = document.createElement('li');
     li.textContent = tag;
+    li.className = 'tagListItem'
+    li.id = `li-${tag}`
     li.addEventListener('click', () => displayItemsByTag(tag));
     tagList.appendChild(li);
 });
         itemDiv.id = `item-${itemCount}`;
         itemDiv.style.backgroundImage = `url(${item.image})`;
         itemDiv.innerHTML = `
+            <h3><a href="${item.link}">${item.title}</a></h3>
             <p>${item.description}</p>
         `;
         itemContainer.appendChild(itemDiv);
     });
+    const allTagListItems = document.getElementsByClassName('tagListItem')
+    for (const tli of allTagListItems) {
+        if (tli.id === `li-${selectedTag}`) {
+            tli.style.backgroundColor  = "#cbf5e1";
+        } else {
+            tli.style.backgroundColor = "White";
+        }
+    }
     const showing = document.getElementById('sidebarShowing');
     showing.textContent = `Showing projects relevant to: ${selectedTag}`
 }

styles/style.css CHANGED Viewed

@@ -144,6 +144,60 @@ footer {
   margin-top: 10px;
 }
 /* Previous css */
 /*
 html {

   margin-top: 10px;
 }
+/* || Overview Gallery  */
+#vignettes {
+  display: flex;
+}
+#itemSidebar {
+  flex: 0 0 20%;
+  max-width: 20%;
+  border: 1px solid rgb(43, 145, 44);
+  padding-left: 5px;
+  margin-right: 5px;
+}
+#tagList {
+  padding: 5px;
+  list-style-type: none;
+}
+.tagListItem{
+  background-color: white;
+  border: 1px solid rgb(43, 145, 44);
+  padding: 2px;
+  margin: 2px;
+}
+#itemGallery {
+    flex: 1;
+    border: 1px solid rgb(43, 145, 44);
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
+    grid-auto-flow: row; /* This ensures items fill out columns before moving to the next row */
+}
+.item {
+  border: 1px solid rgb(43, 145, 44);
+  background-size: cover;
+  background-position: center;
+  height: 200px;
+  position: relative;
+  margin: 5px;
+}
+.item h3 {
+    position: absolute;
+    padding: 5px;
+    text-align: center;
+}
+.item p {
+    position: absolute;
+    bottom: 0;
+    background-color: #cbf5e1;
+    margin: 0;
+    padding: 5px;
+    text-align: center;
+}
 /* Previous css */
 /*
 html {