Mobile responsive design for complex process card - html

Question

The design is for a website built on Angular . Have been using canvas along with html . canvas is used for building the dotted and solid arrows around circle . html is used for designing circles.
HTML :
<div class="process-card-container">
<div [style.margin-left.px]="canvasDivMargin" class="myCanvasDiv">
<canvas id="myCanvas" width="2000" height="600">
Your browser does not support the HTML5 canvas tag.</canvas>
</div>
<div class="all-cards">
<div class="card-container" *ngFor="let card of data.cards;">
<div (click)='onCTAClick(card.callToActions)'
[ngClass]="{'each-process-card-without-pointer': card.callToActions == undefined, 'each-process-card' : card.callToActions !== undefined }"
[ngStyle]="card.bgStyle">
<div class="each-card-content-container">
<span class="each-card-num">{{card.cardNumber}}</span>
<span class="each-card-title">{{card.cardTitle}}</span>
</div>
</div>
</div>
</div>
</div>
SASS
.process-card-container {
margin-top: 50px;
margin-bottom: 20px;
text-align: center;
}
.myCanvasDiv{
padding-left: 0;
padding-right: 0;
margin-right: auto;
display: block;
}
.card-container {
display: inline-block;
margin-right: 16px;
margin-left: 75px;
}
.all-cards {
margin-left: -8rem;
margin-top: -553px;
}
.each-process-card {
height: 250px;
width: 250px;
border-radius: 50%;
text-align: center;
cursor: pointer;
}
.each-process-card-without-pointer {
height: 250px;
width: 250px;
border-radius: 50%;
text-align: center;
}
.each-card-content-container {
position: relative;
}
.each-card-num {
position: absolute;
color: #ffffff;
font-size: 54px;
top: 30px;
left: 110px;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
display: block;
}
.each-card-title {
font-size: 22px;
font-family: "Metropolis", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
color: white;
letter-spacing: 0.8px;
width: 120px;
position: absolute;
top: 109px;
left: 65px;
height: 20px;
}
The design works fine on one screen but it breaks on screens with other resolutions , also when zooming in /out , the arrows and circles go here and there .
TS file
import { Component, Input, OnInit } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-process-card',
templateUrl: './process-card.component.html',
styleUrls: ['./process-card.component.scss']
})
export class ProcessCardComponent implements OnInit {
constructor(public router: Router) { }
#Input()
public data;
public arrowColorArr = [];
public dia = 170;
public top_position = 180;
public left_position = 180;
public c;
public ctx;
public canvasDiv;
public canvasDivMargin = 36;
ngOnInit() {
this.arrowColorArr = this.data.cards.map((cardIn) => {
var eachBgColor = cardIn.bgStyle.background.includes("linear-gradient") ? cardIn.bgStyle.background.substring(35, 43) : cardIn.bgStyle.background;
return eachBgColor.replace(/ /g, '')
})
this.c = document.getElementById('myCanvas');
this.ctx = this.c.getContext("2d");
this.ctx.setLineDash([0.5, 15]);
this.ctx.lineWidth = 7;
this.ctx.lineCap = "round";
//1st down
this.ctx.strokeStyle = this.arrowColorArr[1];
this.ctx.beginPath();
this.ctx.arc(this.left_position, this.top_position + 4, this.dia, 0, 1 * Math.PI);
this.ctx.stroke();
//second circle up
this.ctx.strokeStyle = "#0091da";
this.ctx.strokeStyle = this.arrowColorArr[2];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 2), this.top_position, this.dia, 3.1, 2 * Math.PI);
this.ctx.stroke();
//3rd circle down
this.ctx.strokeStyle = this.arrowColorArr[3];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 4), this.top_position, this.dia, 0, 1 * Math.PI);
this.ctx.stroke();
//4th circle up
this.ctx.strokeStyle = this.arrowColorArr[2];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 6), this.top_position, this.dia, 3.15, 1.98 * Math.PI);
this.ctx.stroke();
this.ctx.lineWidth = 5;
//1st up
this.ctx.setLineDash([0, 0]);
this.ctx.strokeStyle = this.arrowColorArr[0];
this.ctx.beginPath();
this.ctx.arc(this.left_position, this.top_position, this.dia, 3.3, 1.8 * Math.PI);
this.ctx.stroke();
//2nd down
this.ctx.strokeStyle = this.arrowColorArr[1];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 2), this.top_position, this.dia, 0.5, 0.9 * Math.PI);
this.ctx.stroke();
//3rd up
this.ctx.strokeStyle = this.arrowColorArr[2];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 4), this.top_position, this.dia, 3.5, 1.8 * Math.PI);
this.ctx.stroke();
//4th down
this.ctx.strokeStyle = this.arrowColorArr[3];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 6), this.top_position, this.dia, 0.1, 0.9 * Math.PI);
this.ctx.stroke()
//arrow mark
this.ctx.strokeStyle = this.arrowColorArr[0];
this.ctx.beginPath();
this.ctx.moveTo(330, 92);
this.ctx.lineTo(327, 79);
this.ctx.lineTo(317, 89);
this.ctx.closePath();
this.ctx.stroke();
this.ctx.strokeStyle = this.arrowColorArr[1];
this.ctx.beginPath();
this.ctx.moveTo(677, 248);
this.ctx.lineTo(678, 262);
this.ctx.lineTo(667, 256);
this.ctx.closePath();
this.ctx.stroke();
this.ctx.strokeStyle = this.arrowColorArr[2];
this.ctx.beginPath();
this.ctx.moveTo(1011, 90);
this.ctx.lineTo(1007, 77);
this.ctx.lineTo(997, 87);
this.ctx.closePath();
this.ctx.stroke();
this.ctx.strokeStyle = this.arrowColorArr[3];
this.ctx.beginPath();
this.ctx.moveTo(1370, 183);
this.ctx.lineTo(1375, 193);
this.ctx.lineTo(1365, 193);
this.ctx.closePath();
this.ctx.stroke();
}
}

Answer 1

You can get very, very close with just plain HTML and CSS! I've done this using an ordered list, border-radius and border-style, plus a tiny SVG for the pointer arrow. This has a few advantages:
##Edit - see below for a version using SVG for all the decorative elements...
Much simpler code
Uses the browser's layout and rendering engine
Semantically correct HTML and live text
Automatic step numbering
Automatic coloring based on list position
Able to resize/respond as required
Able to easily add/remove steps as required
The downside is mainly that you don't have absolute fine control over the pixel placement, spacing and style of things like the dots and lines. I think this is a pretty reasonable trade-off for the advantages, but it will depend on your situation. For me, the result looks like this:
Here's the code
.disc-list {
counter-reset: step; /* Allows us to show the step number */
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row; /* Put the discs in a row */
flex-wrap: wrap; /* Allow them to wrap around as required */
}
.disc-list li {
counter-increment: step; /* Increment the list number */
position: relative;
width: 8.5rem;
height: 8.5rem;
text-align: center;
border-radius: 50%; /* Make it a circle */
background: #888;
color: #888;
display: flex;
flex-shrink: 0; /* Don't allow the discs to squash inside the container */
flex-direction: column;
align-items: center;
justify-content: center;
margin: 1.5rem 1.25rem 1.5rem 1.5rem; /* Right margin is the normal width - the border-width */
overflow: visible;
}
/* Setup the rainbow colours on the discs
- #00AFC0
- #00A3E1
- #27579C
- #934FC0
- #C04F8E
- #C04F5D
- #C07E4F
- #C0B54F
*/
.disc-list li:nth-child(1) {
background: #00AFC0;
color: #00AFC0;
}
.disc-list li:nth-child(2) {
background: #00A3E1;
color: #00A3E1;
}
.disc-list li:nth-child(3) {
background: #27579C;
color: #27579C;
}
.disc-list li:nth-child(4) {
background: #934FC0;
color: #934FC0;
}
.disc-list li:nth-child(5) {
background: #C04F8E;
color: #C04F8E;
}
.disc-list li:nth-child(6) {
background: #C04F5D;
color: #C04F5D;
}
.disc-list li:nth-child(7) {
background: #C07E4F;
color: #C07E4F;
}
.disc-list li:nth-child(8) {
background: #C0B54F;
color: #C0B54F;
}
/* The text inside the disc */
.disc-list li span {
color: #FFF;
display: block;
font-weight: bold;
font-size: 0.8rem;
max-width: 5rem;
margin-left: auto;
margin-right: auto;
}
/* The step number */
.disc-list li span::before {
content: counter(step);
display: block;
font-size: 1.65rem;
margin-bottom: 0.1rem;
font-weight: 200;
}
/* The pointer container */
.disc-list li .pointer {
position: absolute;
right: -1.6rem;
width: 1rem;
height: 1rem;
}
/* The arrow-head itself */
.disc-list li .pointer path {
fill: none;
stroke-linejoin: round;
stroke-width: 3px;
stroke: currentcolor; /* This allows the outline to inherit the text color automatically */
}
/* Move the arrow head into position depending if it's an odd/even disc */
.disc-list li:nth-child(even) .pointer {
bottom: 20%;
transform: rotate(22.5deg);
}
.disc-list li:nth-child(odd) .pointer {
top: 20%;
transform: rotate(22.5deg);
}
.disc-list li::before,
.disc-list li::after {
content: '';
position: absolute;
border: 0.25rem solid;
left: -1.5rem; /* Same as the disc-list li margin */
right: -1.5rem;
}
/* The dotted elements */
.disc-list li:nth-child(even)::before {
border-top-style: dotted;
border-left-style: dotted;
border-radius: 50%/100% 100% 0 0;
border-bottom-color: transparent;
top: -1.5rem;
bottom: 50%;
}
.disc-list li:nth-child(odd)::before {
border-bottom-style: dotted;
border-right-style: dotted;
border-top-color: transparent;
border-radius: 50%/0 0 100% 100%;
bottom: -1.5rem;
top: 50%;
}
/* The solid line elements */
.disc-list li:nth-child(odd)::after {
transform-origin: bottom center;
transform: rotate(22.5deg);
border-width: 0.2rem;
border-style: solid;
border-color: transparent;
border-top-color: inherit;
border-left-color: inherit;
border-radius: 50%/100% 100% 0 0;
border-bottom-color: transparent;
top: -1.5rem;
bottom: 50%;
}
.disc-list li:nth-child(even)::after {
transform-origin: top center;
transform: rotate(22.5deg);
border-style: solid;
border-width: 0.2rem;
border-color: transparent;
border-bottom-color: inherit;
border-right-color: inherit;
border-radius: 50%/0 0 100% 100%;
bottom: -1.5rem;
top: 50%;
}
<ol class="disc-list">
<li>
<span>Login to Workday</span>
<svg class="pointer">
<path d="M6.25,1.25L11.25,11.25L1.25,11.25L6.25,1.25Z" />
</svg>
</li>
<li>
<span>Upload to Receipts</span>
<svg class="pointer">
<path d="M6.25,1.25L11.25,11.25L1.25,11.25L6.25,1.25Z" />
</svg>
</li>
<li>
<span>Submit Report</span>
<svg class="pointer">
<path d="M6.25,1.25L11.25,11.25L1.25,11.25L6.25,1.25Z" />
</svg>
</li>
<li>
<span>Get Reimbursed</span>
<svg class="pointer">
<path d="M6.25,1.25L11.25,11.25L1.25,11.25L6.25,1.25Z"/>
</svg>
</li>
<li>
<span>Do a Dance</span>
<svg class="pointer">
<path d="M6.25,1.25L11.25,11.25L1.25,11.25L6.25,1.25Z"/>
</svg>
</li>
<li>
<span>Make Sandwiches</span>
<svg class="pointer">
<path d="M6.25,1.25L11.25,11.25L1.25,11.25L6.25,1.25Z"/>
</svg>
</li>
<li>
<span>Take a nap</span>
<svg class="pointer">
<path d="M6.25,1.25L11.25,11.25L1.25,11.25L6.25,1.25Z"/>
</svg>
</li>
<li>
<span>Go again!</span>
<svg class="pointer">
<path d="M6.25,1.25L11.25,11.25L1.25,11.25L6.25,1.25Z"/>
</svg>
</li>
</ol>
I'm sure you can fine-tune this further, and optimise the CSS to make it neater - this should give a decent starting point, though. Feel free to ask for more detail if required!
SVG version
This version uses inline SVGs for the decorative elements, rather than border styles. This should give a more consistent result and allow you to fine tune things like the dashes. I've re-written this with SASS for brevity, which SO's code snippet doesn't support, so this is on CodePen: https://codepen.io/companionstudio/pen/BaWqBmm
This doesn't change the wrapping/scaling requirement yet, though I would highly recommend a solution based on HTML like this if you need wrapping.

Answer 2

The canvas draws OK at viewport dimensions 1920 x 1080.
This snippet (which is vanilla JS for demo purposes) draws the canvas as given in the code in the question and then scales it and its position to fit the current viewport.
let arrowColorArr = ["red", "green", "blue", "grey"];
const dia = 170;
const top_position = 180;
const left_position = 180;
function OnInit() {
// for vanilla JS demo only we need to set up the values
this.arrowColorArr = arrowColorArr;
this.dia = dia;
this.top_position = top_position;
this.left_position = left_position;
this.c = document.getElementById('myCanvas');
//ADDED - RESTORE CANVAS TO INITIAL SCALE
c.style.transform = "scale(1)";
this.ctx = this.c.getContext("2d");
this.ctx.clearRect(0, 0, 1920, 600); //ADDED
this.ctx.setLineDash([0.5, 15]);
this.ctx.lineWidth = 7;
this.ctx.lineCap = "round";
//1st down
this.ctx.strokeStyle = this.arrowColorArr[1];
this.ctx.beginPath();
this.ctx.arc(this.left_position, this.top_position + 4, this.dia, 0, 1 * Math.PI);
this.ctx.stroke();
//second circle up
this.ctx.strokeStyle = "#0091da";
this.ctx.strokeStyle = this.arrowColorArr[2];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 2), this.top_position, this.dia, 3.1, 2 * Math.PI);
this.ctx.stroke();
//3rd circle down
this.ctx.strokeStyle = this.arrowColorArr[3];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 4), this.top_position, this.dia, 0, 1 * Math.PI);
this.ctx.stroke();
//4th circle up
this.ctx.strokeStyle = this.arrowColorArr[2];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 6), this.top_position, this.dia, 3.15, 1.98 * Math.PI);
this.ctx.stroke();
this.ctx.lineWidth = 5;
//1st up
this.ctx.setLineDash([0, 0]);
this.ctx.strokeStyle = this.arrowColorArr[0];
this.ctx.beginPath();
this.ctx.arc(this.left_position, this.top_position, this.dia, 3.3, 1.8 * Math.PI);
this.ctx.stroke();
//2nd down
this.ctx.strokeStyle = this.arrowColorArr[1];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 2), this.top_position, this.dia, 0.5, 0.9 * Math.PI);
this.ctx.stroke();
//3rd up
this.ctx.strokeStyle = this.arrowColorArr[2];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 4), this.top_position, this.dia, 3.5, 1.8 * Math.PI);
this.ctx.stroke();
//4th down
this.ctx.strokeStyle = this.arrowColorArr[3];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 6), this.top_position, this.dia, 0.1, 0.9 * Math.PI);
this.ctx.stroke()
//arrow mark
this.ctx.strokeStyle = this.arrowColorArr[0];
this.ctx.beginPath();
this.ctx.moveTo(330, 92);
this.ctx.lineTo(327, 79);
this.ctx.lineTo(317, 89);
this.ctx.closePath();
this.ctx.stroke();
this.ctx.strokeStyle = this.arrowColorArr[1];
this.ctx.beginPath();
this.ctx.moveTo(677, 248);
this.ctx.lineTo(678, 262);
this.ctx.lineTo(667, 256);
this.ctx.closePath();
this.ctx.stroke();
this.ctx.strokeStyle = this.arrowColorArr[2];
this.ctx.beginPath();
this.ctx.moveTo(1011, 90);
this.ctx.lineTo(1007, 77);
this.ctx.lineTo(997, 87);
this.ctx.closePath();
this.ctx.stroke();
this.ctx.strokeStyle = this.arrowColorArr[3];
this.ctx.beginPath();
this.ctx.moveTo(1370, 183);
this.ctx.lineTo(1375, 193);
this.ctx.lineTo(1365, 193);
this.ctx.closePath();
this.ctx.stroke();
//ADDED SO CANVAS SCALES TO WINDOW WIDTH
const scale = window.innerWidth/1920;// 1920 because it draws the canvas OK at that viewport width
c.style.transform = "scale(" + scale + ")";
c.style.top = this.top_position * scale + "px";
c.style.left = this.left_position * scale + "px";
}
window.onload = OnInit;
window.onresize = OnInit;
* {
margin: 0;
padding: 0;
}
canvas {
position: relative;
transform-origin: 0 0;
}
<canvas id="myCanvas" width="1500" height="600"></canvas><!-- was 2000 wide, reduced so doesn't cause X overflow when scaled -->
With these changes inserted your canvas drawing code therefore becomes:
<canvas id="myCanvas" width="1500" height="600"></canvas><!-- was 2000 wide, reduced so doesn't cause X overflow when scaled -->
TS code:
import { Component, Input, OnInit } from '#angular/core';
import { Router } from '#angular/router';
#Component({
selector: 'app-process-card',
templateUrl: './process-card.component.html',
styleUrls: ['./process-card.component.scss']
})
export class ProcessCardComponent implements OnInit {
constructor(public router: Router) { }
#Input()
public data;
public arrowColorArr = [];
public dia = 170;
public top_position = 180;
public left_position = 180;
public c;
public ctx;
public canvasDiv;
public canvasDivMargin = 36;
ngOnInit() {
this.arrowColorArr = this.data.cards.map((cardIn) => {
var eachBgColor = cardIn.bgStyle.background.includes("linear-gradient") ? cardIn.bgStyle.background.substring(35, 43) : cardIn.bgStyle.background;
return eachBgColor.replace(/ /g, '')
})
this.c = document.getElementById('myCanvas');
//ADDED - RESTORE CANVAS TO INITIAL SCALE
c.style.transform = "scale(1)";
this.ctx = this.c.getContext("2d");
// ADDED TO CLEAR THE CANVAS EACH TIME (ON A RESIZE E.G.)
this.ctx.clearRect(0, 0, 1500, 600);
this.ctx.setLineDash([0.5, 15]);
this.ctx.lineWidth = 7;
this.ctx.lineCap = "round";
//1st down
this.ctx.strokeStyle = this.arrowColorArr[1];
this.ctx.beginPath();
this.ctx.arc(this.left_position, this.top_position + 4, this.dia, 0, 1 * Math.PI);
this.ctx.stroke();
//second circle up
this.ctx.strokeStyle = "#0091da";
this.ctx.strokeStyle = this.arrowColorArr[2];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 2), this.top_position, this.dia, 3.1, 2 * Math.PI);
this.ctx.stroke();
//3rd circle down
this.ctx.strokeStyle = this.arrowColorArr[3];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 4), this.top_position, this.dia, 0, 1 * Math.PI);
this.ctx.stroke();
//4th circle up
this.ctx.strokeStyle = this.arrowColorArr[2];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 6), this.top_position, this.dia, 3.15, 1.98 * Math.PI);
this.ctx.stroke();
this.ctx.lineWidth = 5;
//1st up
this.ctx.setLineDash([0, 0]);
this.ctx.strokeStyle = this.arrowColorArr[0];
this.ctx.beginPath();
this.ctx.arc(this.left_position, this.top_position, this.dia, 3.3, 1.8 * Math.PI);
this.ctx.stroke();
//2nd down
this.ctx.strokeStyle = this.arrowColorArr[1];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 2), this.top_position, this.dia, 0.5, 0.9 * Math.PI);
this.ctx.stroke();
//3rd up
this.ctx.strokeStyle = this.arrowColorArr[2];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 4), this.top_position, this.dia, 3.5, 1.8 * Math.PI);
this.ctx.stroke();
//4th down
this.ctx.strokeStyle = this.arrowColorArr[3];
this.ctx.beginPath();
this.ctx.arc(this.left_position + (this.dia * 6), this.top_position, this.dia, 0.1, 0.9 * Math.PI);
this.ctx.stroke()
//arrow mark
this.ctx.strokeStyle = this.arrowColorArr[0];
this.ctx.beginPath();
this.ctx.moveTo(330, 92);
this.ctx.lineTo(327, 79);
this.ctx.lineTo(317, 89);
this.ctx.closePath();
this.ctx.stroke();
this.ctx.strokeStyle = this.arrowColorArr[1];
this.ctx.beginPath();
this.ctx.moveTo(677, 248);
this.ctx.lineTo(678, 262);
this.ctx.lineTo(667, 256);
this.ctx.closePath();
this.ctx.stroke();
this.ctx.strokeStyle = this.arrowColorArr[2];
this.ctx.beginPath();
this.ctx.moveTo(1011, 90);
this.ctx.lineTo(1007, 77);
this.ctx.lineTo(997, 87);
this.ctx.closePath();
this.ctx.stroke();
this.ctx.strokeStyle = this.arrowColorArr[3];
this.ctx.beginPath();
this.ctx.moveTo(1370, 183);
this.ctx.lineTo(1375, 193);
this.ctx.lineTo(1365, 193);
this.ctx.closePath();
this.ctx.stroke();
//ADDED SO CANVAS SCALES TO WINDOW WIDTH
const scale = window.innerWidth/1920;// 1920 because it draws the canvas OK at that viewport width
c.style.transform = "scale(" + scale + ")";
c.style.top = this.top_position * scale + "px";
c.style.left = this.left_position * scale + "px";
}
}
You will similarly need to scale the size and positioning of the HTML elements. Let me know if you'd like help with this.
And remember to add whatever is needed to recalculate the canvas on a resize event.