Fix/responsiveness (#67)

* Some UI fixes fix: made the body width bigger fix: quadrants are showing vertically sooner when screen width gets smaller fix: removed not used fonts refactor: made logo programatically * refactor: undo max width of body container size refactor: favicon smaller on page and bigger in modal fix: radar resize event now happens on initial render * fix: removed unused CSS code" * refactor: don't display the legend and only the radar on smaller devices * refactor: added feo tiles and switcher to fix responsive layout <3 * fix: responsiveness radar fix for Firefox
Finaps · May 3, 2024 · c6e06f4 · c6e06f4
1 parent 49d8979
commit c6e06f4
Show file tree

Hide file tree

Showing 8 changed files with 244 additions and 66 deletions.
diff --git a/docs/app.css b/docs/app.css
@@ -2,22 +2,6 @@
 CUSTOM CSS
 */
 
-@font-face {
-  font-family: 'Open Sans';
-  src: url('./fonts/open_sans/OpenSans-Regular.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Open Sans';
-  src: url('./fonts/open_sans/OpenSans-Bold.ttf') format('truetype');
-  font-weight: bold;
-}
-
-@font-face {
-  font-family: 'Poppins';
-  src: url('./fonts/poppins/Poppins-SemiBold.ttf') format('truetype');
-}
-
 @font-face {
   font-family: 'Reddit Mono';
   src: url('./fonts/Reddit_Mono/RedditMono-VariableFont_wght.ttf')
@@ -229,18 +213,12 @@ h3 {
 
   &.items {
     gap: 2rem;
-    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-  }
-  &.quadrants {
-    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
-    border: var(--border-width) solid var(--border-color);
+    grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
   }
 }
 
-.quadrants {
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius);
-}
+/* RADAR
+-------------------------------*/
 
 .container-radar {
   display: grid;
@@ -255,6 +233,7 @@ h3 {
 
 .container-radar .radar svg > g {
   transform-origin: center left;
+  transform: translate(402px, 402px);
 }
 
 .container-radar .legend-list {
@@ -263,9 +242,35 @@ h3 {
   grid-template-rows: 1fr 1fr;
 }
 
+@media (width < 1168px) {
+  .container-radar {
+    display: flex;
+    justify-content: center;
+    aspect-ratio: 1/1;
+  }
+  .container-radar .legend-list {
+    display: none;
+  }
+  .container-radar .radar svg > g {
+    transform-origin: revert;
+  }
+}
+
+/* QUADRANTS
+-------------------------------*/
+.quadrants {
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+}
+
 .quadrants > div {
   border-right: var(--border-width) solid var(--border-color);
-  border-bottom: var(--border-width) solid var(--border-color);
+}
+
+@media (width < 650px) {
+  .quadrants > div {
+    border-right: none;
+  }
 }
 
 .quadrants > div:last-child {
@@ -280,6 +285,10 @@ h3 {
   border-radius: 0;
 }
 
+.quadrants button span:last-child {
+  word-break: break-word;
+}
+
 /* BUTTONS
 -------------------------------*/
 
@@ -372,12 +381,13 @@ button.btn-sm {
 
 .img-circle {
   border-radius: 9999px;
-  max-width: 1.5rem;
-  max-height: 1.5rem;
+  max-width: 1rem;
+  max-height: 1rem;
 }
 
 .img-lg {
   max-width: 2.5rem;
+  max-height: 2.5rem;
 }
 
 /* UTILITIES
@@ -391,6 +401,10 @@ button.btn-sm {
   margin-bottom: 2rem;
 }
 
+.mr-0_25 {
+  margin-right: 0.25rem;
+}
+
 .m-0 {
   margin: 0;
 }
@@ -527,3 +541,47 @@ body.modal-open {
   font-size: var(--font-size-small);
   fill: var(--color-white);
 }
+
+/**
+ * A layout of X columns that switches from horizontal to vertical the moment
+ * the width of parent becomes less than a set value. 
+ *
+ * --layout-gap: set the gap between the child elements (horizontal & vertical)
+ * --layout-threshold: the min-width of a single child elements
+ * --layout-direction: sets flex-direction
+ */
+
+.switcher {
+  --switcher-layout-gap: 0;
+  --switcher-layout-threshold: 500px;
+  --switcher-layout-direction: row;
+
+  display: flex;
+  flex-direction: var(--switcher-layout-direction);
+  flex-wrap: wrap;
+  gap: var(--switcher-layout-gap);
+}
+
+.switcher > * {
+  flex-grow: 1;
+  flex-basis: calc((var(--switcher-layout-threshold) - 100%) * 999);
+}
+
+/**
+ * tile-based sytem that determines the amount of columns based on a min-width
+ * for each tile. The wrapper fills the entire available horizonal space
+ *
+ * --layout-threshold: sets the minimum width of each tile
+ * --layout-gap: set the gap between the child elements (horizontal & vertical)
+ */
+.tiles {
+  --tiles-layout-threshold: 500px;
+  --tiles-layout-gap: 2rem;
+
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(var(--tiles-layout-threshold), 100%), 1fr)
+  );
+  gap: var(--tiles-layout-gap);
+}
diff --git a/docs/app.js b/docs/app.js
@@ -21,6 +21,8 @@ fetch('./data.json')
     };
     radar_visualization(radarInput);
 
+    setRadarScale();
+
     dataSet.forEach(function (item) {
       // create button
       const button = document.createElement('button');
@@ -50,13 +52,18 @@ fetch('./data.json')
       button.appendChild(favicon);
 
       // create index + label
+      const body = document.createElement('div');
+
       const index = document.createElement('span');
-      const label = document.createElement('span');
+      index.setAttribute('class', 'text-gray mr-0_25');
       index.textContent = '#' + item.id;
-      index.setAttribute('class', 'text-gray');
+
+      const label = document.createElement('span');
       label.textContent = item.label;
-      button.appendChild(index);
-      button.appendChild(label);
+
+      body.appendChild(index);
+      body.appendChild(label);
+      button.appendChild(body);
 
       const li = document.createElement('li');
       li.appendChild(button);
@@ -100,11 +107,11 @@ function openTechDetails(index) {
   openModal('modal-details');
 }
 
-addEventListener('resize', (event) => {
+function setRadarScale() {
   const container = document.querySelector('.radar');
-  const scale = window.innerWidth > 1400 ? 1 : container.clientWidth / 804;
-  if (scale < 1) {
-    const radar = document.querySelector('#radar > g');
-    radar.setAttribute('style', `scale: ${scale};`);
-  }
-});
+  const radar = document.querySelector('#radar > g');
+  const scale = container.clientWidth > 804 ? 1 : container.clientWidth / 804;
+  radar.setAttribute('style', `scale: ${scale};`);
+}
+
+addEventListener('resize', setRadarScale);
diff --git a/docs/fonts/open_sans/OpenSans-Bold.ttf b/docs/fonts/open_sans/OpenSans-Bold.ttf
diff --git a/docs/fonts/open_sans/OpenSans-Light.ttf b/docs/fonts/open_sans/OpenSans-Light.ttf
diff --git a/docs/fonts/open_sans/OpenSans-Regular.ttf b/docs/fonts/open_sans/OpenSans-Regular.ttf
diff --git a/docs/fonts/poppins/Poppins-SemiBold.ttf b/docs/fonts/poppins/Poppins-SemiBold.ttf
diff --git a/docs/index.html b/docs/index.html
@@ -38,13 +38,15 @@ <h1 class="title">Finaps Tech Radar</h1>
         <h3 class="legend-header">
           Tools
         </h3>
-        <p class="legend-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+        <p class="legend-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+          incididunt ut labore et dolore magna aliqua. </p>
       </div>
       <div class="legend align-end">
         <h3 class="legend-header">
           Platforms
         </h3>
-        <p class="legend-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <p class="legend-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+          incididunt ut labore et dolore magna aliqua.</p>
       </div>
     </div>
 
@@ -57,99 +59,101 @@ <h3 class="legend-header">
         <h3 class="legend-header">
           Technologies
         </h3>
-        <p class="legend-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <p class="legend-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+          incididunt ut labore et dolore magna aliqua.</p>
       </div>
       <div class="legend align-end text-right">
         <h3 class="legend-header">
           Internal Software
         </h3>
-        <p class="legend-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+        <p class="legend-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+          incididunt ut labore et dolore magna aliqua.</p>
       </div>
     </div>
   </div>
 
-  <div class="d-grid items">
+  <div class="tiles | items">
     <div id="2">
       <h2>Tools</h2>
-      <div class="d-grid quadrants">
+      <div class="switcher | quadrants">
         <div>
           <div class='badge bg-accent-1 mb-1'>ADOPT</div>
-          <ul class='list' id="2-0"></ul>
+          <ul class="list mb-1" id="2-0"></ul>
         </div>
         <div>
           <div class='badge bg-accent-2 mb-1'>TRIAL</div>
-          <ul class='list' id="2-1"></ul>
+          <ul class="list mb-1" id="2-1"></ul>
         </div>
         <div>
           <div class='badge bg-accent-3 mb-1'>ASSESS</div>
-          <ul class='list' id="2-2"></ul>
+          <ul class="list mb-1" id="2-2"></ul>
         </div>
         <div>
           <div class='badge bg-accent-4 mb-1'>HOLD</div>
-          <ul class='list' id="2-3"></ul>
+          <ul class="list mb-1" id="2-3"></ul>
         </div>
       </div>
     </div>
     <div id="3">
       <h2>Technologies</h2>
-      <div class="d-grid quadrants">
+      <div class="switcher | quadrants">
         <div>
           <div class='badge bg-accent-1 mb-1'>ADOPT</div>
-          <ul class='list' id="3-0"></ul>
+          <ul class="list mb-1" id="3-0"></ul>
         </div>
         <div>
           <div class='badge bg-accent-2 mb-1'>TRIAL</div>
-          <ul class='list' id="3-1"></ul>
+          <ul class="list mb-1" id="3-1"></ul>
         </div>
         <div>
           <div class='badge bg-accent-3 mb-1'>ASSESS</div>
-          <ul class='list' id="3-2"></ul>
+          <ul class="list mb-1" id="3-2"></ul>
         </div>
         <div>
           <div class='badge bg-accent-4 mb-1'>HOLD</div>
-          <ul class='list' id="3-3"></ul>
+          <ul class="list mb-1" id="3-3"></ul>
         </div>
       </div>
     </div>
     <div id="1">
       <h2>Platforms</h2>
-      <div class="d-grid quadrants">
+      <div class="switcher | quadrants">
         <div>
           <div class='badge bg-accent-1 mb-1'>ADOPT</div>
-          <ul class='list' id="1-0"></ul>
+          <ul class="list mb-1" id="1-0"></ul>
         </div>
         <div>
           <div class='badge bg-accent-2 mb-1'>TRIAL</div>
-          <ul class='list' id="1-1"></ul>
+          <ul class="list mb-1" id="1-1"></ul>
         </div>
         <div>
           <div class='badge bg-accent-3 mb-1'>ASSESS</div>
-          <ul class='list' id="1-2"></ul>
+          <ul class="list mb-1" id="1-2"></ul>
         </div>
         <div>
           <div class='badge bg-accent-4 mb-1'>HOLD</div>
-          <ul class='list' id="1-3"></ul>
+          <ul class="list mb-1" id="1-3"></ul>
         </div>
       </div>
     </div>
     <div id="0">
       <h2>Internal Software</h2>
-      <div class="d-grid quadrants">
+      <div class="switcher | quadrants">
         <div>
           <div class='badge bg-accent-1 mb-1'>ADOPT</div>
-          <ul class='list' id="0-0"></ul>
+          <ul class="list mb-1" id="0-0"></ul>
         </div>
         <div>
           <div class='badge bg-accent-2 mb-1'>TRIAL</div>
-          <ul class='list' id="0-1"></ul>
+          <ul class="list mb-1" id="0-1"></ul>
         </div>
         <div>
           <div class='badge bg-accent-3 mb-1'>ASSESS</div>
-          <ul class='list' id="0-2"></ul>
+          <ul class="list mb-1" id="0-2"></ul>
         </div>
         <div>
           <div class='badge bg-accent-4 mb-1'>HOLD</div>
-          <ul class='list' id="0-3"></ul>
+          <ul class="list mb-1" id="0-3"></ul>
         </div>
       </div>
     </div>
@@ -211,7 +215,7 @@ <h3>How do we maintain it?</h3>
   <div class="modal-dialog">
     <div class="modal-header">
       <div class="d-flex align-center">
-        <img id="modal-fav" class="img-circle" />
+        <img id="modal-fav" class="img-circle img-lg" />
         <h3 id="modal-title" class="m-0"></h3>
       </div>
       <button type="button" onclick="closeModal()" class="btn-close" data-bs-dismiss="modal"