Uploaded image for project: 'OptaPlanner'
  1. OptaPlanner
  2. PLANNER-1100

Employee Rostering Scroll Shadow

XMLWordPrintable

    • NEW
    • NEW

      Sarah writes:
      You can see the scroll-shadow effect that I mentioned this morning here (scroll the left box): https://cdn.rawgit.com/srambach/BxMS-frontend/master/case-activities.html

      This is accomplished using some box-shadows on the background and using `background-attachment: local` as described here: http://lea.verou.me/2012/04/background-attachment-local/

      The relevant bits of code are in:
      https://github.com/srambach/BxMS-frontend/blob/master/case-activities.html
      and the .kie-scrolbox class in
      https://github.com/srambach/BxMS-frontend/blob/master/less/case-overview-template.less

      // scrollbox adds a shadow indicating if there is more content above/below the current position
.kie-scrollbox {
  //IMPORTANT: can change to overflow-y: auto to see how the scroll shadows work. JS will have to manually set the scroll of the list
  overflow-y: hidden;
  max-height: 15em;
  background: /* Shadow covers */ linear-gradient(@color-pf-white, rgba(255, 255, 255, 0)) 100% 0, //top
  linear-gradient(rgba(255, 255, 255, 0), @color-pf-white) 0 100%, //bottom
    /* Shadows */ linear-gradient(@color-pf-black-150, rgba(255, 255, 255, 0)),
  linear-gradient(rgba(255, 255, 255, 0), @color-pf-black-150) 0 100%;
  background-repeat: no-repeat;
  background-color: @color-pf-white;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
  border-bottom: 1px solid @color-pf-black-300;
}

      I'm not 100% sure the best way to use this in this particular case, but I was throwing it out there as a possibility and example of an indicator of the existence of things that have been scrolled off the page.

            cchianel Christopher Chianelli
            mstevens1_jira Matthew Stevens (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved: