Skip to content

Process header and menu design explorations #4230

@furilo

Description

@furilo

Here are some explorations about changes in process header and menu, in order to make the menu more visible and improve the phases indicator/CTA. Comments:

  1. Hero style: we'd transition to a hero style, taking ideas from our initial proposal. The main reason is that this way we can have a more visible menu. Visually maybe its more appealling. We gain a little bit of vertical space. This hero version would allow to create different design footprints for different sections easily. For example for conferences we'd have a taller header without almost any other change.
  2. Help system: I propose a system so that the user can close a help banner; if they do it, they will be able to open it again with a small widget in the same position. I think it'd work well as it's not intrusive at all and it fits with this new design.
  3. New white phase box vs. new process intro blocks: if we decide to end up implementing the process intro blocks (System help / Process intro #4136) maybe they are a little bit similar/redundant with the new Phase Box in the header. I'd think first on the header, and if we like it, think about the Intro Blocks.
  4. I've included a test when viewed in a super-wide screen. I think it'd work well.
  5. This changes only affect the header, so implementation is clean.
  6. I open a new issue to discuss what to do when items in the menu don't fit in a single line.

A. New header on process home

header test 2 - standard content

B. New header on proposals

header test 2 - proposals

C. New header with Intro Blocks

header test 2

D. New header on super-wide screen

header test 2 - proposals wide screen

E. New header with short help

header test 2 - help

F. New header with long help

header test 2 - help big

G. New header with help on proposals

header test 2 - proposals help

Related with #4136 #3973

cc @decidim/product @decidim/lot-core

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions