DevelopmentCSS

The magic of CSS: New CC Agent navbar

css, en, less

As you may already noticed in last intermediate version, we are currently completely revamping the CC agent web interface for a definitely better user experience. One main goal of this work is to reduce as a maximum the size allowed for telephony service, to let most of the browser window fitting to business application of the call center agent.

As a result we opted for a most-left navbar solution that can be reduced automatically to a thin band when window is resized. So far the interface is embedded in a single page app for integration ease, but short term goal is to ship it in a Electron application so that it can be resized on demand over existing softwares.

Here is a preview of navbar behavior when container size is reduced or enlarged:

What’s the magic behind ?

There were multiple ways to achieve such navbar animation, but one seemed obvious to be used to have fluid and responsive effect without breaking existing code in multiple angular directives template : CSS3 and Less

Basically thanks to Less variables and CSS media queries we define two display aspects for the same <div> container in a less file:

1
2
@sidebar:   ~"only screen and (min-width: 70px) and (max-width: 359px)";
@main:    ~"only screen and (min-width: 360px)";

Then with a parametric Less mixin we add a transition animation helper for different browser compatibility:

1
2
3
4
5
6
7
/* Mixin */.transition (@prop: all, @time: 1s, @ease: linear) {
  -webkit-transition: @prop @time @ease;
  -moz-transition: @prop @time @ease;
  -o-transition: @prop @time @ease;
  -ms-transition: @prop @time @ease;
  transition: @prop @time @ease;
}

We also define the CSS style to apply to our <div> container in the same Less file. Note that we quickly see the big advantage of Less to keep a clean style sheet source code even if we need to handle multiple display view.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container {
  display: block;
  height: 100%;
  width: 360px;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  .transition(all, 0.3s, ease-in);

  @media @sidebar {
    width: 70px;
    overflow: hidden;
  }

Finally we set the proper CSS class in .html view.

1
2
3
4
5
<div class="container">
    <div class="header">
      ...
    </div>
</div>

And Tadaaa, you have a really nice container animation on window resize in few lines of code !

Sources are available here.

Share