D-Loc-Client

d-loc-client.markdown

D-Loc-Client

The main content page for the D-Loc-Client

A Pen by Redback on CodePen.

License.

index.jade

.app-container

  .title-bar
  .row.full-height
    .columns.side-nav
      ul.side-nav__buttons
        li.side-nav__link.side-nav__link--top 
          i.material-icons lock
          span.side-nav__link-text D-Loc
        li.side-nav__link
          i.material-icons input
          span.side-nav__link-text Log In
        li.side-nav__link
          i.material-icons settings_applications
          span.side-nav__link-text Settings
        li.side-nav__link.side-nav__link--active
          i.material-icons cloud
          span.side-nav__link-text Files
        li.side-nav__link
          i.material-icons group
          span.side-nav__link-text Sharing
      .side-nav__collapse
        i.side-nav__collapse-button.material-icons chevron_left
      .side-nav__expand
        i.side-nav__expand-button.material-icons chevron_right
        
    .columns.content
      .content__header
        ul.content__header-items
          li.content__header-item
            img(src="https://secure.gravatar.com/avatar/8eeaf5529c804aee4a56f4e2f437823d?s=90").content__header-image
            a(href="#") RedbackThomson
      .file-list
        .file-list__header
          .file-list__header-text Files
        .file-list__container
          .file-list__section
            ul.file-list__files
              li.file-list__file.file-list__file--folder.file-list__file--active Private Photographs
              li.file-list__file My Social Security Number.docx
          .file-list__section
            ul.file-list__files
              li.file-list__file.file-list__file--active Photograph 1.jpg
              li.file-list__file 2.jpg
              li.file-list__file 3.jpg
              li.file-list__file 4.jpg
              li.file-list__file 5.jpg
              li.file-list__file 6.jpg
              li.file-list__file 7.jpg
              li.file-list__file 8.jpg
            
      .small-12.columns.file-viewer
        .row
          .small-6.large-3.columns
            .file-viewer__image
              img(src="http://i.imgur.com/fbO2eDj.png")
            .file-viewer__description
              .file-viewer__name Photograph 1
              .file-viewer__info
                .file-viewer__size 64kB
                .file-viewer__type JPEG
            .download-button-group(href="#")
              .download-button__text
                | &#xE876
              .download-button.button
                | Download
                .download-button__progress

script.js

$(".side-nav__expand-button").click(function() {
  $(".side-nav").removeClass("side-nav__collapsed");
});

$(".side-nav__collapse-button").click(function() {
  $(".side-nav").addClass("side-nav__collapsed");
});

$(".side-nav__link").click(function() {
  $(".side-nav__link").removeClass("side-nav__link--active");
  $(this).addClass("side-nav__link--active");
});

$(".file-list__file").click(function() {
  $(".file-list__file").removeClass("file-list__file--active");
  $(this).addClass("file-list__file--active");
});

$(".download-button").click(function() {
  var downloadButton = $(this);
  var buttonGroup = downloadButton.parent();
  downloadButton.addClass("download-button__activated");
  
  var progress = $(".download-button__progress", this);
  progress.show();
  progress.animate({
    width: '100px'
  }, 2000, function() {   
    var text = $(".download-button__text", buttonGroup);
    text.animate({
      opacity: 1
    }, 200);
    
    setTimeout(function() {
      progress.hide();
      progress.css('width', '0px');
      text.css('opacity', 0);
      downloadButton.removeClass("download-button__activated");
    }, 3000);
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700';

$border-radius: 5px;

$light-main: #4f4f4f;
$dark-main: #3a3a3a;
$accent-color: #7E52B7;
$content-background: #e5e5e5;

$white: #f5f5f5;
$side-nav-bg: $light-main;
$header-bar-bg: $dark-main;
$body-highlight-bg: #f7f7f7;

@function top-shadow($depth) {
  $primary-offset: nth(1.5 3 10 14 19, $depth) * 1px;
  $blur: nth(1.5 3 10 14 19, $depth) * 4px;
  $color: rgba(black, nth(.12 .16 .19 .25 .30, $depth));

  @return 0 $primary-offset $blur $color;
}

@function bottom-shadow($depth) {
  $primary-offset: nth(1.5 3 6 10 15, $depth) * 1px;
  $blur: nth(1 3 3 5 6, $depth) * 4px;
  $color: rgba(black, nth(.24 .23 .23 .22 .22, $depth));

  @return 0 $primary-offset $blur $color;
}

@function light-gradient($start-color: #fff, $amount: 10%, $angle: -35deg) {
  @return linear-gradient($angle, $start-color, lighten($start-color, $amount));
}

.material-icons {
  vertical-align: middle !important;
}

body {
  background-color: #FAFAFA;
}

.app-container {
  position: absolute;
  height: 768px;
  width: 1024px;
  top: calc(50% - 384px);
  left: calc(50% - 512px);
  border-radius: $border-radius;
  background-color: #EEE;
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
}

::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-trackbar {
  opacity: 0;
}
 
::-webkit-scrollbar-thumb {
    border-radius: $border-radius;
    background: light-gradient($light-main, 2%);
}

.title-bar {
  position: absolute;
  z-index: 50;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.1);
  height: 10px;
  width: 100%;
  border-radius: $border-radius $border-radius 0 0;
  -webkit-app-region: drag;
}

.full-height {
  height: 100%;
}

.side-nav {
  position: relative;
  z-index: 0;
  padding: 0;
  flex: 0 0 ((2/12) * 100%);
  max-width: (2/12) * 100%;
  background: light-gradient($side-nav-bg, 10%);
  height: 100%;
  border-radius: $border-radius 0 0 $border-radius;
  transition: max-width 200ms linear;
  
  &__buttons {
    list-style: none;
    padding: 0;
    margin-left: 0;
  }
  
  &__link {
    color: $white;
    font-size: 0.9em;
    padding: 15px 0 15px 28px;
    user-select: none;
    cursor: pointer;
    background-clip: border-box;
    border-left: 3px solid transparent;
    transition: all 200ms linear;
    white-space: nowrap;
    overflow: hidden;
    
    &:hover, &--active {
      background: light-gradient($header-bar-bg);
      border-left: $accent-color 3px solid;
      box-shadow: bottom-shadow(1), top-shadow(1);
    }
    
    &-text {
      
    }
    
    i {
      margin-right: 10px;
      text-shadow: bottom-shadow(1), top-shadow(1);
    }
    
    &--top {
      border-radius: $border-radius 0 0 0;
      padding: 30px 0 15px 31px;
      background: light-gradient($header-bar-bg);
      box-shadow: bottom-shadow(1), top-shadow(1);
      border-left: none;
      
      &:hover {
        border-left: none;
        background: light-gradient(darken($header-bar-bg, 5%));
      }
    }
  }
  
  &__collapsed {
    flex: 0 0 ((1/2) * 100%);
    max-width: (1/12) * 100%;
    
    .side-nav__link-text {
      display: none;
    }
    
    .side-nav__expand {
      display: block;
    }
    
    .side-nav__collapse {
      display: none;
    }
  }
  
  &__expand {
    display: none;
  }
  
  &__expand, &__collapse {
    position: absolute;
    bottom: 15px;
    width: 100%;
    text-align: center;
    color: $white;
    
    &-button {
      cursor: pointer;
      border-radius: 50%;
      
      &:hover {
        background: light-gradient($header-bar-bg, 5%);
      }
    }
  }
}

.content {
  background: light-gradient($content-background, 10%);
  box-shadow: bottom-shadow(3), top-shadow(3);
  height: 100%;
  padding: 0;
  
  &__header {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 70px;
    background: light-gradient($accent-color, 5%);
    box-shadow: bottom-shadow(1), top-shadow(1);
    
    &-items {
      float: right;
      list-style: none;
      height: 100%;
      margin-bottom: 0;
    }
    
    &-image {
      max-height: 40px;
      margin-right: 15px;
      margin-bottom: 3px;
      border-radius: 100%;
    }
    
    &-item {
      display: inline;
      color: $white;
      line-height: 5.0em;
      margin-right: 20px;
      
      a {
        color: $white;
      }
      
      &--icon {
        i {
          margin-left: 10px;
        }
      }
    }
  }
}

.file-list {
  width: 100%;
  height: 200px;
  background: light-gradient($body-highlight-bg, 5%);
  box-shadow: bottom-shadow(1), top-shadow(1);
  color: $light-main;
  
  &__header {
    height: 50px;
    border-bottom: 1px solid transparentize($accent-color, 0.8);
  }
  
  &__header-text {
    user-select: none;
    color: $accent-color;
    cursor: default;
    padding: 10px 15px;
    font-size: 1.3em;
  }
  
  &__container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: calc(100% - 50px);
    width: 100%;
  }
  
  &__section {
    position: relative;
    z-index: 1;
    flex: 1;
    height: 100%;
    
    &:not(:last-child) {
      border-right: 1px solid transparentize($accent-color, 0.8);
    }
  }
  
  &__files {
    margin: 0;
    height: 100%;
    list-style: none;
    position: relative;
    overflow-y: auto;
  }
  
  &__file {
    padding: 3px 10px;
    font-size: 0.8em;
    width: 100%;
    background: light-gradient($white, 1%, 0deg);
    cursor: pointer;
    user-select: none;
    
    &:hover, &--active {
      background: light-gradient(darken($white, 5%), 1%, 0deg);
    }
    
    &--folder {
      &:after {
        position: absolute;
        right: 10px;
        font-family: "Material Icons"; 
        content: "\E5C8";
        color: $dark-main;
      } 
    }
  }
}

.file-viewer {
  margin: 15px 15px 0;
  background: light-gradient($body-highlight-bg);
  border-radius: $border-radius;
  box-shadow: bottom-shadow(1), top-shadow(1);
  padding: 15px;
  
  &__image {
    max-width: 125px;
    text-align: center;
    margin: 0 auto;
    padding: 10px 0;
    border-bottom: 1px solid transparentize($accent-color, 0.8);
  }
  
  &__description {
    max-width: 125px;
    text-align: center;
    margin: 0 auto 10px;
    padding: 10px 0;
    border-bottom: 1px solid transparentize($accent-color, 0.8);
  }
  
  &__name {
    color: $accent-color;
  }
  
  &__info {
    font-size: 0.8em;
  }
  
  &__size {
    display: inline;
    padding-right: 10px;
  }
  
  &__type {
    display: inline;
    padding-left: 10px;
  }
}

.download-button-group {
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 40px;
}

.download-button {
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 12px;
  border-radius: 5px;
  transform-origin: bottom;
  transition: color 100ms linear;
  cursor: pointer;
  background: light-gradient($accent-color, 20%);
  
  &:hover {
    background: light-gradient(darken($accent-color, 10%), 20%);
  }
 
  &__activated {
    color: transparent;
    background: lighten(desaturate($accent-color, 30%), 25%);
    animation: download 500ms linear forwards;
    pointer-events: none;

    &:hover, &:focus {
      color: transparent;
      outline: none;
    }
  }
  
  &__text {
    font-family: "Material Icons";
    font-size: 2.0em;
    line-height: 40px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: $accent-color;
    pointer-events: none;
    text-align: center;
    opacity: 0;
  }
  
  &__progress {
    position: absolute;
    top: 0;
    left: -1px;
    display: none;
    width: 0;
    height: 100%;
    display: block;
    border-radius: 5px;
    background-color: $accent-color;
    content: "";
  }
}

@keyframes download {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.2);
  }
}

styles

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation-flex.min.css" rel="stylesheet" />