diff --git a/opentech/apply/funds/templates/funds/includes/status_bar.html b/opentech/apply/funds/templates/funds/includes/status_bar.html index 0aeda5e56919982cde2224802e53db6d2bcdc8ad..d99ed4c6819bdd39b36cc41f6cb3fa29f41c9bde 100644 --- a/opentech/apply/funds/templates/funds/includes/status_bar.html +++ b/opentech/apply/funds/templates/funds/includes/status_bar.html @@ -8,3 +8,10 @@ </div> {% endfor %} </div> +<div class="status-bar--mobile"> + {% for phase in workflow %} + {% if phase == status %} + <h6 class="status-bar__subheading">{{ phase.name }}</h6> + {% endif %} + {% endfor %} +</div> diff --git a/opentech/static_src/src/sass/apply/components/_status-bar.scss b/opentech/static_src/src/sass/apply/components/_status-bar.scss index da5771f5b0c3f934d9c7d5fa63370c5f21ed14d7..532c1569841e1140ba63af8baf3412c255da6949 100644 --- a/opentech/static_src/src/sass/apply/components/_status-bar.scss +++ b/opentech/static_src/src/sass/apply/components/_status-bar.scss @@ -7,6 +7,19 @@ display: flex; } + &--mobile { + @include media-query(tablet-portrait) { + display: none; + } + } + + &__subheading { + display: inline-block; + padding: 5px 10px; + margin: 10px 0 0; + background: $color--tomato; + } + &__icon { position: absolute; top: -10px;