Small GUI Update

[a-rbsn]

Hi Chiun,

I've just started using this tool and it's really convenient — one thing I noticed is that the canvas is actually knocked out of the browser window by 45px (not ideal when you're drawing to corners etc.).

I did a small update to the styling in vue so that when the menu is closed the background of the sidebar is transparent and the margin is removed (for both sides in split view):

remove margin-left: 45px; in generator.

<style lang="scss">
  a {
    color: #999;
    text-decoration: none;

    &:hover, &:active {
      color: #555;
    }

    &:active {
      color: #f07;
    }
  }

  .sidebar {
    position: absolute;
    z-index: 10;
    top: 0;
    background-color: rgba(0,0,0,0);
    width: 308px;
    height: 100%;
    text-align: left;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;

    h2 {
      margin-top: 10px;
      padding-left: 20px;
      color: #333;
    }

    ul {
      list-style: none;
      padding-left: 20px;
    }

    &.sidebar--active {
      transition: all 0.5s;
    }

    .project-link--active {
      color: #f07;
    }

    .staticBtn {
      color: #ccc;
      font-size: 15px;

      .active {
        color: #aaa;
      }
    }
  }

  .toggle {
    position: absolute;
    top: 10px;
    background-color: transparent;
    border: none;
    transition: all 1s;
    -webkit-transition: all 1s;
    z-index: 11;

    &:hover {
      cursor: pointer;
    }

    &:focus {
      outline: none;
    }

    img {
      width: 24px;
    }

    &.toggle--left {
      left: 180px;

    }

    &.toggle--right {
      right: 180px;

    }

    &.toggle--active {
      -ms-transform: rotate(144deg); /* IE 9 */
      -webkit-transform: rotate(144deg); /* Chrome, Safari, Opera */
      transform: rotate(144deg);
    }
  }

  .about {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    font-size: 14px;
    padding-left: 20px;

    p {
      margin-top: 0;
      color: #999;
    }

    .twitter {
      color: #f07;
    }
  }

  .link-split {
    display: block;
    color: #f07;
  }

  .split-view--left .sidebar {
    left: -255px;
    text-align: left;
  }

  .split-view--right .sidebar {
    right: -255px;
    text-align: right;
  }

  .split-view--left .sidebar.sidebar--active {
    background-color: #f5f5f5;
    left: 0;
  }

  .split-view--right .sidebar.sidebar--active {
    background-color: #f5f5f5;
    right: 0;
  }

  .split-view--left .sidebar h2 {
    margin-top: 10px;
    padding-left: 20px;
  }

  .split-view--right .sidebar h2 {
    margin-top: 10px;
    padding-right: 20px;
  }

  .sidebar h2 a {
    color: #333;
  }

  .split-view--left .sidebar ul {
    list-style: none;
    padding-left: 20px;
  }

  .split-view--right .sidebar ul {
    list-style: none;
    padding-right: 20px;
  }

  .split-view.split-view--left .toggle{
    left: 260px;
  }

  .split-view.split-view--right .toggle{
    right: 260px;
  }

  .split-view.split-view--right .about {
    display: none;
  }

  .single-view {
    .sidebar {
      left: -255px;
      text-align: left;

      &.sidebar--active {
        background-color: #f5f5f5;
        left: 0;
      }

      h2 {
        margin-top: 10px;
        padding-left: 20px;
      }

      ul {
        list-style: none;
        padding-left: 20px;
      }
      .toggle{
        left: 260px;
      }
    }
  }
</style>

[Simon-Claudius]

Could this be added?

[clementoriol]

Interested by this as well ! Does anyone has a working fork ?

[Simon-Claudius]

I ended up creating my own solution to manage sketches.

[clementoriol]

If anyone needs it I made a fork of p5-manager which includes @andrwrbnsn fix :

npm install -g https://github.com/clementoriol/p5-manager

[chiunhau]

A bit late to the thread. The fix is included in the latest version :)