@e-fellows/website-2022

Benutzer-Bühne 

<div id="user-stage-19697-85780" class="user-stage user-stage--blue">
    <div class="user-stage__inner">
        <div class="user-stage__user">

            <img class="user-stage__user-image" src="https://bildermangel.de/92x92/fe7c09/130f26.webp?text=User" width="92" height="92" alt="" role="presentation">

            <div class="user-stage__user-headline">
                <h1 class="headline"><span class="headline__text">Willkommen zurück, Emine!</span></h1>
            </div>
        </div>

        <ul class="user-stage__menu" role="list">
            <li class="user-stage__menu-item">
                <a class="icon-button" href="#">
                    <span class="icon-button__icon">
                        <svg class="icon icon--profile" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#profile"></use>
                        </svg> </span>

                    <span class="icon-button__text u-underline">Bearbeite dein Profil</span>

                </a>

            </li>
            <li class="user-stage__menu-item">
                <a class="icon-button" href="#">
                    <span class="icon-button__icon">
                        <svg class="icon icon--bookmark-outline" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#bookmark-outline"></use>
                        </svg> </span>

                    <span class="icon-button__text u-underline">Merkliste</span>

                    <span class="icon-button__count">
                        <span class="u-hidden-visually">(</span>34<span class="u-hidden-visually">)</span>
                    </span>
                </a>

            </li>
            <li class="user-stage__menu-item">
                <button class="icon-button" type="button" data-overlay="user-stage-19697-85780-overlay-3">
                    <span class="icon-button__icon">
                        <svg class="icon icon--filter" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#filter"></use>
                        </svg> </span>

                    <span class="icon-button__text u-underline">Deine Filter</span>

                </button>

                <div id="user-stage-19697-85780-overlay-3" class="overlay overlay--slim" hidden aria-labelledby="user-stage-19697-85780-overlay-3-headline" data-destroy-after-close="false" data-redirect-after-close="false">
                    <div class="overlay__backdrop"></div>

                    <div class="overlay__overlay u-inverted" role="document">
                        <div class="overlay__bar">

                            <button class="overlay__close" type="button" title="Schließen">
                                <svg class="icon icon--cross" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#cross"></use>
                                </svg> </button>
                        </div>

                        <div class="overlay__content">
                            <div class="overlay__headline">
                                <h2 id="user-stage-19697-85780-overlay-3-headline" class="headline headline--2"><span class="headline__text">Deine Filter</span></h2>
                            </div>

                            <div class="overlay__blocks">
                                <div class="overlay__block">
                                    <div id="user-stage-19697-85780-overlay-3-content" class="personal-filters">
                                        <div class="personal-filters__alert">
                                            <div class="icon-with-text">
                                                <svg class="icon icon--info-alt icon-with-text__icon" viewBox="0 0 200 200" aria-hidden="true">
                                                    <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#info-alt"></use>
                                                </svg>
                                                <div class="icon-with-text__text">
                                                    <p class="paragraph">Diese Angaben übernehmen wir aus Deinem CV um Dir Inhalte anzuzeigen, die zu Dir passen.
                                                    </p>
                                                </div>
                                            </div>
                                        </div>

                                        <dl class="personal-filters__filters">
                                            <div class="personal-filters__filter">
                                                <dt class="personal-filters__filter-label">Studienfach:</dt>

                                                <dd class="personal-filters__filter-value">Jura</dd>
                                            </div>
                                            <div class="personal-filters__filter">
                                                <dt class="personal-filters__filter-label">Studienphase:</dt>

                                                <dd class="personal-filters__filter-value">LL.M.</dd>
                                            </div>
                                            <div class="personal-filters__filter">
                                                <dt class="personal-filters__filter-label">Studienende:</dt>

                                                <dd class="personal-filters__filter-value">09 / 2023</dd>
                                            </div>
                                            <div class="personal-filters__filter">
                                                <dt class="personal-filters__filter-label">Geschlecht:</dt>

                                                <dd class="personal-filters__filter-value">männlich</dd>
                                            </div>
                                            <div class="personal-filters__filter">
                                                <dt class="personal-filters__filter-label">Mitgliedsstatus:</dt>

                                                <dd class="personal-filters__filter-value">Mitglied</dd>
                                            </div>
                                            <div class="personal-filters__filter">
                                                <dt class="personal-filters__filter-label">Auf Jobsuche:</dt>

                                                <dd class="personal-filters__filter-value">Ja</dd>
                                            </div>
                                            <div class="personal-filters__filter">
                                                <dt class="personal-filters__filter-label">Suche Masterplatz:</dt>

                                                <dd class="personal-filters__filter-value">Ja</dd>
                                            </div>
                                        </dl>

                                        <div class="personal-filters__text"><a class="link link--internal" href="#"><span class="link__text u-underline">Bearbeite Deinen CV</span></a> um diese Angaben zu ändern.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </li>
            <li class="user-stage__menu-item">
                <a class="icon-button" href="#">
                    <span class="icon-button__icon">
                        <svg class="icon icon--community" viewBox="0 0 200 200" aria-hidden="true">
                            <use xlink:href="/assets/icons/icons.3bafb6df0d.svg#community"></use>
                        </svg> </span>

                    <span class="icon-button__text u-underline">Direkt zur Community</span>

                </a>

            </li>
        </ul>
    </div>
</div>
 
{% set level = level ??? 1 %}
{% set id = id ??? html_id('user-stage') -%}

<div {{ html_attributes({
  id: id,
  class: ['user-stage', color|default ? "user-stage--#{color}"],
}, attrs ?? {}) }}>
  <div class="user-stage__inner">
    <div class="user-stage__user">
      {% if logo|default %}
        <img {{ html_attributes(logo, {
          class: 'user-stage__user-logo',
          alt: '',
          role: 'presentation',
        }) }}>
      {% endif %}

      {% if image|default %}
        <img {{ html_attributes({
          class: 'user-stage__user-image',
          src: image,
          width: 92,
          height: 92,
          alt: '',
          role: 'presentation',
        }) }}>
      {% endif %}

      {% if headline|default %}
        <div class="user-stage__user-headline">
          {% include '@headline' with headline | merge({
            level: level,
            size: false,
          }) only %}
        </div>
      {% endif %}
    </div>

    {% if menu|default %}
      <ul class="user-stage__menu" role="list">
        {% for item in menu %}
          <li class="user-stage__menu-item">
            {% include '@icon-button' with item | merge({
              overlay: false,
              attrs: item.overlay|default ? {
                'data-overlay': "overlay-#{loop.index}" | namespaceInputId(id),
              },
            }) only %}

            {% if item.overlay|default %}
              {% include '@overlay' with item.overlay | merge({
                id: "overlay-#{loop.index}" | namespaceInputId(id),
                open: false,
                destroyAfterClose: false,
                slim: true,
              }) only %}
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
</div>
 
{
  "color": "blue",
  "image": "https://bildermangel.de/92x92/fe7c09/130f26.webp?text=User",
  "headline": {
    "text": "Willkommen zurück, Emine!"
  },
  "menu": [
    {
      "icon": "profile",
      "text": "Bearbeite dein Profil",
      "link": "#"
    },
    {
      "icon": "bookmark-outline",
      "text": "Merkliste",
      "count": 34,
      "link": "#"
    },
    {
      "icon": "filter",
      "text": "Deine Filter",
      "link": false,
      "overlay": {
        "headline": {
          "text": "Deine Filter"
        },
        "use": "@personal-filters",
        "configuration": {
          "alert": {
            "text": "<p>Diese Angaben übernehmen wir aus Deinem CV um Dir Inhalte anzuzeigen, die zu Dir passen.\n"
          },
          "filters": [
            {
              "label": "Studienfach:",
              "value": "Jura"
            },
            {
              "label": "Studienphase:",
              "value": "LL.M."
            },
            {
              "label": "Studienende:",
              "value": "09 / 2023"
            },
            {
              "label": "Geschlecht:",
              "value": "männlich"
            },
            {
              "label": "Mitgliedsstatus:",
              "value": "Mitglied"
            },
            {
              "label": "Auf Jobsuche:",
              "value": "Ja"
            },
            {
              "label": "Suche Masterplatz:",
              "value": "Ja"
            }
          ],
          "text": "<a href=\"#\">Bearbeite Deinen CV</a> um diese Angaben zu ändern.\n"
        }
      }
    },
    {
      "icon": "community",
      "text": "Direkt zur Community",
      "link": "#"
    }
  ]
}
  • Content: 
    :root {
  --user-stage-background-color: var(--color-orange-light);
  --user-stage-line-color: rgba(0, 0, 0, 0.1);

  @include use-responsive-sizing(--user-stage-padding-block, responsive-map(xs 4rem, xl 6rem));
  @include use-responsive-sizing(--user-stage-row-gap, responsive-map(xs 3rem, xl 4rem));
}

.user-stage {
  background-color: var(--user-stage-background-color);
  padding-block: var(--user-stage-padding-block);
}

.user-stage--cyan {
  --user-stage-background-color: var(--color-cyan-light);
}

.user-stage--green {
  --user-stage-background-color: var(--color-green-light);
}

.user-stage--yellow {
  --user-stage-background-color: var(--color-yellow-light);
}

.user-stage--purple {
  --user-stage-background-color: var(--color-purple-light);
}

.user-stage--blue {
  --user-stage-background-color: var(--color-blue-light);
}

.user-stage--red {
  --user-stage-background-color: var(--color-red-light);
}

.user-stage__inner {
  display: grid;
  row-gap: var(--user-stage-row-gap);

  @include use-container();
}

.user-stage__user {
  align-items: center;
  display: flex;
  gap: 2rem;
}

.user-stage__user-logo {
  flex-shrink: 0;
  max-inline-size: 20rem;
  min-inline-size: 10rem;
}

.user-stage__user-image {
  block-size: 9.2rem;
  border-radius: 50%;
  flex-shrink: 0;
  inline-size: 9.2rem;
  min-inline-size: 9.2rem;
  object-fit: cover;
  overflow: hidden;
}

.user-stage__user-headline {
  --headline-font-size: 2.2rem;
}

.user-stage__menu {
  --focus-outline-offset: 5px;

  border-block-start: 0.2rem solid var(--user-stage-line-color);
  column-gap: 3rem;
  display: flex;
  flex-direction: column;
  padding-block-start: var(--user-stage-row-gap);
  row-gap: 1.5rem;

  @include mq($from: m) {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.user-stage__menu-item {
  --icon-button-background-color-active: transparent;
  --icon-button-background-color: transparent;
  --icon-button-border-color-active: transparent;
  --icon-button-border-color: transparent;
  --icon-button-count-background-color: var(--color-midnight);
  --icon-button-count-color: var(--color-white);
  --icon-button-font-weight: var(--font-weight-regular);
  --icon-button-gap: 1.5rem;
  --icon-button-icon-color-active: var(--color-midnight);
  --icon-button-icon-color: var(--color-midnight);
  --icon-button-icon-size: 3rem;
  --icon-button-size: 3rem;
  --icon-button-underline-focus-color: var(--color-midnight);
  --icon-button-underline-height: 2px;

  display: block;
}
  • URL: /components/raw/user-stage/user-stage.scss
  • Filesystem Path: src/components/3-organisms/user-stage/user-stage.scss
  • Size: 2.5 KB

No notes defined.