Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/responsiveness #67

Merged
merged 6 commits into from
May 3, 2024
Merged

Fix/responsiveness #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e64ca54
Some UI fixes
JeroenKesteloo May 2, 2024
9811522
refactor: undo max width of body container size
JeroenKesteloo May 2, 2024
b7127cf
fix: removed unused CSS code"
JeroenKesteloo May 2, 2024
b89db74
refactor: don't display the legend and only the radar on smaller devices
JeroenKesteloo May 2, 2024
c86d88b
refactor: added feo tiles and switcher to fix responsive layout <3
JeroenKesteloo May 2, 2024
f4d2476
fix: responsiveness radar fix for Firefox
JeroenKesteloo May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 86 additions & 28 deletions docs/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down Expand Up @@ -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;
Expand All @@ -255,6 +233,7 @@ h3 {

.container-radar .radar svg > g {
transform-origin: center left;
transform: translate(402px, 402px);
}

.container-radar .legend-list {
Expand All @@ -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 {
Expand All @@ -280,6 +285,10 @@ h3 {
border-radius: 0;
}

.quadrants button span:last-child {
word-break: break-word;
}

/* BUTTONS
-------------------------------*/

Expand Down Expand Up @@ -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
Expand All @@ -391,6 +401,10 @@ button.btn-sm {
margin-bottom: 2rem;
}

.mr-0_25 {
margin-right: 0.25rem;
}

.m-0 {
margin: 0;
}
Expand Down Expand Up @@ -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);
}
29 changes: 18 additions & 11 deletions docs/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ fetch('./data.json')
};
radar_visualization(radarInput);

setRadarScale();

dataSet.forEach(function (item) {
// create button
const button = document.createElement('button');
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Binary file removed docs/fonts/open_sans/OpenSans-Bold.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed docs/fonts/open_sans/OpenSans-Light.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed docs/fonts/open_sans/OpenSans-Regular.ttf
View file
Open in desktop
Binary file not shown.
Binary file removed docs/fonts/poppins/Poppins-SemiBold.ttf
View file
Open in desktop
Binary file not shown.
56 changes: 30 additions & 26 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
Expand Down Expand Up @@ -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"
Expand Down
Loading
Loading