Predix

Notifications
There are no new notifications.

Login Component

pxh-login — signed-in demo | signed-out demo

Overview

The basic markup for the signed-out state of pxh-login looks like this:

<div class="pxh-login pxh-login--narrow@md">
  <a href="#" class="pxh-login__link">
    <div class="pxh-login__avatar">
      <i class="fa fa-user pxh-login__avatar-icon"></i>
    </div>
    <div class="pxh-login__name pxh-login__name--narrow@md">
      Log In
    </div>
  </a>
</div>

The basic markup for the signed-in state of pxh-login looks like this:

<div class="pxh-login pxh-login--narrow@md">
  <a href="#" class="pxh-login__link">
    <div class="pxh-login__avatar">
      <img src="img/avatar.jpg" class="pxh-login__avatar-image">
    </div>
    <div class="pxh-login__name pxh-login__name--narrow@md">
      Xiying Wang
    </div>
    <div class="pxh-login__caret pxh-login__caret--narrow@md">
      <i class="fa fa-angle-up pxh-login__caret-icon"></i>
    </div>
  </a>
  <div class="pxh-login-menu">
    <ul class="pxh-login-menu__list">
      <li class="pxh-login-menu__item">
        <a class="pxh-login-menu__link" href="#">My Profile</a>
      </li>
      <li class="pxh-login-menu__item">
        <a class="pxh-login-menu__link" href="#">Help</a>
      </li>
      <li class="pxh-login-menu__divider"></li>
      <li class="pxh-login-menu__item">
        <a class="pxh-login-menu__link" href="/logout">Log Out</a>
      </li>
    </ul>
  </div>
  <div class="pxh-login__settings pxh-login__settings--narrow@md">
    <a class="pxh-login__settings-link" href="#"><i class="fa fa-cog"></i></a>
  </div>
</div>

Javascript:

When the user clicks .pxh-drawer-toggle__link or .pxh-view-header-drawer-toggle__link

  • Find .pxh-login__name and toggle the class pxh-login__name--narrow@md on it
  • Find .pxh-login__caret and toggle the class pxh-login__caret--narrow@md on it
  • Find .pxh-login__settings and toggle the class pxh-login__settings--narrow@md on it

Sass:

// From the @md (tablet) breakpoint and wider,
// display pxh-login__name in its narrow state.
// Remove this class to display the drawer in its wide state.
@include mq($from: md) {
  .pxh-login__name--narrow\@md {
    display: none;
  }
}

// From the @md (tablet) breakpoint and wider,
// display pxh-login__caret in its narrow state.
// Remove this class to display the drawer in its wide state.
@include mq($from: md) {
  .pxh-login__caret--narrow\@md {
    display: none;
  }
}

// From the @md (tablet) breakpoint and wider,
// display pxh-login__settings in its narrow state.
// Remove this class to display the drawer in its wide state.
@include mq($from: md) {
  .pxh-login__settings--narrow\@md {
    display: none;
  }
}