Skip to content

Commit

Permalink
Restyle the status bar (HyphaApp#3672)
Browse files Browse the repository at this point in the history 
Fixes HyphaApp#3669

Make the status bar work with different fonts, viewports etc. and always
align.
  • Loading branch information
@frjo
frjo committed Jan 11, 2024
1 parent d3786c8 commit bfa90ac
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 142 deletions.
8 changes: 4 additions & 4 deletions hypha/apply/funds/templates/funds/includes/status_bar.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% load statusbar_tags %}
<div class="status-bar {{ class }}">
<div class="status-bar my-6 {{ class }}">
{% for phase in phases %}
{% ifchanged phase.step %}
{% status_display current_phase phase public as display_text %}
Expand All @@ -14,12 +14,12 @@
{% endifchanged %}
{% endfor %}
</div>
<div class="status-bar--mobile">
<h6 class="status-bar__subheading">
<div class="status-bar--mobile my-2">
<div class="status-bar__subheading status-bar__text">
{% if public %}
{{ current_phase.public_name }}
{% else %}
{{ current_phase }}
{% endif %}
</h6>
</div>
</div>
6 changes: 1 addition & 5 deletions hypha/apply/funds/templates/funds/includes/status_bar_item.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,5 @@
{% elif is_complete %}
status-bar__item--is-complete
{% endif %}">
<span class="status-bar__tooltip"
data-title="{{ label }}" aria-label="{{ label }}"></span>
<svg class="status-bar__icon">
<use xlink:href="#tick-alt"></use>
</svg>
<div class="status-bar__tooltip status-bar__text" style="--tooltip-chars:{{ label|length }}ch;">{{ label }}</div>
</div>
220 changes: 87 additions & 133 deletions hypha/static_src/src/sass/apply/components/_status-bar.scss
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
// stylelint-disable selector-class-pattern

.status-bar {
--bar: 3px;
--dot: 20px;
--triangle: 5px;
--tooltip-padding: 10px;
--tooltip-max-width: 12ch;
--tooltip-margin-top: 17px;

$root: &;
display: none;
padding: 30px 10px 80px;
margin-right: 16px;

@include media-query(tablet-portrait) {
display: flex;
Expand All @@ -17,6 +22,7 @@
}

&--small {
--tooltip-max-width: 10ch;
width: 100%;
max-width: 750px;
margin-right: 30px;
Expand All @@ -26,189 +32,137 @@
&__subheading {
display: inline-block;
padding: 5px 10px;
margin: 10px 0 0;
color: $color--white;
background-color: $color--tomato;
}

&__icon {
position: absolute;
top: -10px;
left: 0;
z-index: 30;
display: none;
width: 20px;
height: 20px;

.status-bar__item--is-current &,
.status-bar__item--is-complete & {
display: block;

.status-bar--small & {
display: block;
border-radius: 50%;
box-shadow: 0 1px 9px 0 $color--black-50;
}
}

.status-bar__item:first-of-type & {
left: -10px;
}
&__text {
font-size: map-get($font-sizes, milli);
font-weight: $weight--bold;
}

&__item {
position: relative;
flex: 1;
height: 3px;
background: $color--mid-grey;
position: relative;
padding-block-start: var(--tooltip-margin-top);

// The bar for each item.
border-block-start: var(--bar) solid $color--mid-grey;

// every items dot
// The dot for each item.
&::before {
display: flex;
place-items: center;
position: absolute;
top: -10px;
left: 0;
width: 20px;
height: 20px;
top: calc(-1 * var(--dot) / 2);
left: calc(-1 * var(--dot) / 2);
width: var(--dot);
height: var(--dot);
background: $color--dark-grey;
border: 5px solid $color--mid-grey;
border: calc(var(--dot) / 4) solid $color--mid-grey;
border-radius: 50%;
content: "";

.status-bar--small & {
#{$root}--small & {
background: $color--white;
}
}

// last items dont have a dot
&:last-of-type {
flex: 0;
height: 0;
&--is-current {
&::before {
background: $color--white;
border-color: $color--tomato;
}

&.status-bar__item--is-complete {
&::after {
display: none;
}
// Fill the bar all the way on accepted/declined.
&:last-of-type {
border-color: $color--primary;
}
}

&:first-of-type {
&--is-complete {
border-color: $color--primary;

&::before {
left: -10px;
font-size: map-get($font-sizes, milli);
font-weight: $weight--bold;
color: $color--white;
background: $color--primary;
border-color: $color--primary;
content: "✓";

#{$root}--small & {
background: $color--primary;
}
}
}

&--is-current {
&:first-of-type {
&::before {
position: absolute;
top: -10px;
right: -20px;
z-index: 10;
width: 20px;
height: 20px;
background: $color--white;
border: 5px solid $color--error;
border-radius: 50%;
content: "";
left: 0;
}
}

&--is-complete {
background: $color--primary;
&:nth-last-of-type(2) {
flex: 0;
}

&:last-of-type {
&::after {
background: $color--primary;
}
}
&:last-of-type {
flex: 0;

&::before {
background: $color--primary;
border-color: $color--primary;

.status-bar--small & {
background: $color--primary;
}
left: auto;
right: 0;
}
}
}

&__tooltip {
// tooltip hover area - not visibile
position: absolute;
top: -10px;
z-index: 100;
width: 20px;
height: 20px;
border-radius: 50%;
opacity: 1;
transition: opacity $transition;

.status-bar__item:first-of-type & {
left: -10px;
--tooltip-width: min(var(--tooltip-max-width), var(--tooltip-chars));
width: var(--tooltip-width);
margin-inline-start: calc(-1 * var(--tooltip-width) / 2 - 5px);
text-align: center;
padding-block: var(--tooltip-padding);
color: $color--mid-grey;

#{$root}__item--is-complete & {
color: $color--primary;
}

.status-bar__item--is-current & {
opacity: 1;
#{$root}__item--is-current & {
width: calc(var(--tooltip-width) + var(--tooltip-padding));
position: relative;
color: $color--white;
background-color: $color--tomato;
padding-inline: var(--tooltip-padding);
}

&::before {
.status-bar__item--is-current & {
@include triangle(top, $color--error, 5px);
#{$root}__item--is-current & {
@include triangle(top, $color--tomato, 5px);
position: absolute;
bottom: -10px;
left: 5px;
}
}

// tooltip contents
&::after {
position: absolute;
top: 30px;
left: -25px;
text-align: center;
display: block;
padding: 5px 10px;
font-size: 12px;
font-weight: $weight--bold;
background-color: $color--error;
content: attr(data-title);

// prevent first tooltip hitting viewport edge
.status-bar__item:first-of-type & {
left: 0;

@include media-query(desktop) {
left: -25px;
}
top: calc(-1 * var(--triangle) - 2px);
left: calc(50% - var(--triangle));
}

// prevent last tooltip hitting viewport edge
.status-bar__item:last-of-type & {
left: -45px;

@include media-query(tablet-portrait) {
left: -60px;
}

@include media-query(desktop-medium) {
left: -35px;
}
#{$root}__item--is-current:first-of-type & {
left: var(--triangle);
}

.status-bar__item & {
background-color: inherit;
color: $color--mid-grey;
#{$root}__item--is-current:last-of-type & {
left: initial;
right: var(--triangle);
}
}

.status-bar__item--is-complete & {
background-color: inherit;
color: $color--primary;
}
#{$root}__item:first-of-type & {
margin-inline-start: initial;
text-align: start;
}

.status-bar__item--is-current & {
background-color: $color--tomato;
color: $color--white;
}
#{$root}__item:last-of-type & {
margin-inline-start: initial;
text-align: end;
}
}
}

0 comments on commit bfa90ac

Please sign in to comment.