add showcase

srfdata · Sep 26, 2023 · 3c9a623 · 3c9a623
1 parent 9a187b7
commit 3c9a623
Show file tree

Hide file tree

Showing 5 changed files with 1,156 additions and 63 deletions.
diff --git a/package.json b/package.json
@@ -1,13 +1,14 @@
 {
   "name": "swiss-party-colors",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "A list of Swiss party colors, names and abbreviations to use in data visualizations",
   "scripts": {
     "download": "NODE_ENV=production node ./downloadGsheets.js",
     "test": "jest",
     "test:watch": "jest --watch",
     "lint": "eslint index.js",
-    "fix": "eslint --fix index.js"
+    "fix": "eslint --fix index.js",
+    "start": "web-dev-server --node-resolve --open --watch --root-dir showcase/"
   },
   "config": {
     "googleSheetFileId": "1PCD3se4Nc4ME-i391yPYyAlLdgtXoZJFoJy_6Mlf7BY"
@@ -26,9 +27,10 @@
     "color",
     "colors"
   ],
-  "author": "@angelozehr",
+  "author": "@benjazehr",
   "license": "MIT",
   "devDependencies": {
+    "@web/dev-server": "^0.3.1",
     "eslint": "^6.3.0",
     "eslint-plugin-es5": "^1.4.1",
     "gsheets": "^2.0.0",

diff --git a/showcase/index.html b/showcase/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>swiss-party-colors</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
+    <link rel="stylesheet" href="showcase.css">
+
+</head>
+<body>
+<h1>Swiss Party Colors</h1>
+<p id="meta"></p>
+<h2>Parteien im Parlament</h2>
+<div class="party-container parliament"></div>
+<h2>Restliche Parteien</h2>
+<div class="party-container others"></div>
+<script type="module" src="./showcase.js"></script>
+
+</body>
+</html>
diff --git a/showcase/showcase.css b/showcase/showcase.css
@@ -0,0 +1,62 @@
+html{
+    font-family: sans-serif;
+    padding: 36px 24px ;
+    font-size: 16px;
+}
+
+:root {
+    --primary: #757575;
+}
+
+h1{
+    margin: 6px 0 12px;
+}
+
+h3{
+    margin:0 0 3px;
+}
+
+p{
+    margin: 3px 0 12px;
+}
+
+.party-container{
+    display: grid;
+    grid-template-columns: repeat(auto-fill,minmax(100px, 1fr));
+    gap: 48px 12px;
+}
+
+.party{
+    flex-basis: 100px;
+    flex-shrink: 0;
+    flex-grow: 1;
+}
+
+.party__color-square{
+    width: 100%;
+    aspect-ratio: 1 ;
+
+    display: flex;
+
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-bottom: 3px;
+}
+
+.party__color-square--white{
+    background: #fafafa;
+}
+
+.party__color-square--black{
+    background: #050505;
+}
+
+.party__color{
+    color: #999999;
+    font-size: 0.8rem;
+}
+
+.party__names{
+    font-size: 0.8rem;
+}
diff --git a/showcase/showcase.js b/showcase/showcase.js
@@ -0,0 +1,35 @@
+import definitions from '../definitions.json' assert {type: 'json'};
+
+const createPartyEntry = (d) => {
+    const container = document.createElement('div')
+    container.setAttribute('class', 'party')
+    // farbquadrat, farbname, Parteiname, (RGB), Schrift auf Farbquadrat, Schrift auf Weiss
+    container.innerHTML = `
+        <div class="party__color-square" style="background-color: ${d.color}"></div>
+        <p class="party__color">${d.color}</p>
+        <h3 title="${d.name_de}">${d.abbr_de}</h3>    
+        <div class="party__color-square" style="background-color: ${d.color}; color: ${d.on_color}">
+            <b>${d.abbr_de}</b>
+            <span>${d.abbr_de}</span>
+        </div>
+        <div class="party__color-square party__color-square--white" style="color: ${d.on_white}">
+            <b>${d.abbr_de}</b>
+            <span>${d.on_white}</span>
+        </div>
+        <div class="party__color-square party__color-square--black" style="color: ${d.on_black}">
+            <b>${d.abbr_de}</b>
+            <span>${d.on_black}</span>
+        </div>
+`
+    return container
+}
+
+document.getElementById("meta").innerHTML = 'Zuletzt aktualisiert: ' + definitions.updated
+
+const partyContainer = document.querySelector('.party-container.parliament')
+const partyContainerOthers = document.querySelector('.party-container.others')
+
+const partiesInParliament = ['EAG', 'PDA', 'SP', 'Grüne', 'GLP', 'EVP', 'Mitte', 'FDP', 'EDU', 'SVP', 'LEGA']
+
+definitions.data.filter(d => partiesInParliament.includes(d.abbr_de)).forEach((d) => partyContainer.append(createPartyEntry(d)))
+definitions.data.filter(d => !partiesInParliament.includes(d.abbr_de)).forEach((d) => partyContainerOthers.append(createPartyEntry(d)))