[openstreetmap/openstreetmap-website] Refactor profile page and create a dashboard (#3297)

[Tom Hughes]

The really annoying bit is the behaviour of the separator bars when it wraps, but it seems that is really hard to avoid... With a bit of effort I did manage to get this:

![image](https://user-images.githubusercontent.com/147741/130320857-14dcbf3f-b121-4aff-8aba-92ee435381b3.png)

That is based on https://stackoverflow.com/a/31732902/805631 and uses this modified CSS for the secondary menu:

```css
ul.secondary-actions {
  font-style: normal;
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
  &.pager {
    display: inline-block;
    margin-right: 60px;
  }
  > li {
    display: inline;
    list-style: none;
    white-space: nowrap;
    &::before {
      content: " "
    }
    &::after {
      content: " ";
      whote-space: normal;
      word-spacing: 1em;
      background-image: linear-gradient(
        to right,
        transparent 0 calc(50% - 0.5px),
        $grey 0 calc(50% + 0.5px),
        transparent 0
      );
    }
    &:first-child {
      border-left: 0;
      padding-left: 0;
    }
    &:last-child {
      margin-right: 0px;
    }
  }
}
```

There's a nasty catch though, which is that you've have any whitespace before the `</li>` in the HTML so the view has to be modified in a nasty way - if you do have whitespace then it collapses with the whitespace in the `::after` and you don't get the background image :-(

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/3297#issuecomment-903105641
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20210821/dd205b9f/attachment.htm>