D3 Examples - Curate drop

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Curate Prototype</title>
    <script>
      (function (d) {
        var config = {
          kitId: 'exf4iwe',
          scriptTimeout: 3000
        },
        h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
      })(document);
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>
    <style>
    * { box-sizing: border-box; }
    html { height: 100%; }
    body {
      height: 100%;
      background: url(https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/10986415_1385135175133748_1773876538_n.jpg) no-repeat center / cover;
      color: #515e5f;
      font: 14px/1 "proxima-nova", "Helvetica Neue";
      -webkit-font-smoothing: antialiased;
      letter-spacing: .02em;
      margin: 0;
    }
    h1,
    h2 { margin: 0; }
    p { margin: 0; }
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    button {
      background: initial;
      border: initial;
      color: inherit;
      cursor: pointer;
      font: inherit;
      letter-spacing: inherit;
      padding: initial;
    }
    input,
    textarea {
      width: 100%;
      background: #fff;
      border: 1px solid #d3d6d7;
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
      line-height: normal;
      padding: 10px;
      resize: none;
      vertical-align: top;
    }
    input:disabled,
    textarea:disabled {
      background: #f3f4f4;
      cursor: not-allowed;
    }
    input:focus,
    textarea:focus { border-color: #11a7aa; }
    svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
    }
    :focus { outline: initial; }
    .wf-loading h1,
    .wf-loading h2,
    .wf-loading p,
    .wf-loading .button-text { visibility: hidden; }
    .wf-loading ::-webkit-input-placeholder,
    .wf-loading ::-moz-placeholder,
    .wf-loading :-ms-input-placeholder { color: transparent; }
    .curate-wrap {
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.5);
      -webkit-overflow-scrolling: touch;
      overflow-x: hidden;
      overflow-y: scroll;
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
    }
    .curate-wrap::before {
      width: 1px;
      height: 100%;
      content: "";
      display: inline-block;
      margin-right: -1px;
      vertical-align: middle;
    }
    .curate-dialog {
      background: #fff;
      width: 720px;
      display: inline-block;
      margin: 0 auto;
      position: relative;
      text-align: left;
      vertical-align: middle;
    }
    .curate-body { padding: 30px 30px 10px; }
    .curate-title {
      font-size: 22px;
      font-weight: 400;
      margin: 0 0 20px;
    }
    .curate-heading {
      color: #b0b6b7;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: .1em;
      margin-bottom: 5px;
      text-transform: uppercase;
    }
    .curate-field { margin-bottom: 20px; }
    .curate-preview {
      background: #f3f4f4;
      border-bottom: 1px solid #d3d6d7;
      font-size: 0;
      margin-bottom: 20px;
      padding: 20px;
    }
    .curate-preview::after { clear: both; content: ""; display: table; }
    .curate-preview-left {
      display: inline-block;
      margin-right: 20px;
      vertical-align: middle;
    }
    .curate-preview-right {
      width: calc(100% - 120px);
      display: inline-block;
      vertical-align: middle;
    }
    .curate-preview-title {
      max-height: 44px;
      font-size: 20px;
      font-weight: 600;
      line-height: 22px;
      margin-bottom: 5px;
      overflow: hidden;
    }
    .curate-preview-excerpt {
      max-height: 36px;
      font-size: 14px;
      line-height: 18px;
      margin-bottom: 10px;
      overflow: hidden;
    }
    .curate-preview-byline {
      color: #b0b6b7;
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .curate-triplet::after { clear: both; content: ""; display: table; }
    .curate-triplet-block {
      width: calc(100% / 3);
      float: left;
      padding-right: 30px;
    }
    .curate-couplet::after { clear: both; content: ""; display: table; }
    .curate-tags {
      width: calc(100% * 2/3);
      float: left;
      padding-right: 30px;
    }
    .curate-tags-drop {
      width: 100%;
      height: 270px;
      background: #fff;
      border: 1px solid #d3d6d7;
      box-shadow: 5px 5px 0 #f3f4f4;
      display: none;
      margin-top: -1px;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    .curate-tags-drop-items {}
    .curate-tags-drop-recent {
      background: #11a7aa;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .1em;
      line-height: 16px;
      padding: 7px 20px;
      text-transform: uppercase;
    }
    .curate-tags-drop-item {
      border-bottom: 1px solid #d3d6d7;
      cursor: pointer;
      line-height: 16px;
      padding: 12px 20px 11px;
    }
    .curate-tags-drop-item:focus,
    .curate-tags-drop-item:hover { background: #f3f4f4; }
    .curate-tags-drop-item:nth-child(4) { border-color: #11a7aa; }
    .curate-depts {
      width: calc(100% / 3);
      float: left;
      padding-right: 30px;
    }
    .curate-exit {
      width: 60px;
      height: 60px;
      color: #b0b6b7;
      padding: 20px;
      position: absolute;
      top: 0;
      right: 0;
    }
    .curate-exit:focus,
    .curate-exit:hover {
      background: #f3f4f4;
    }
    .curate-foot {
      border-top: 1px solid #d3d6d7;
      padding: 20px;
    }
    .curate-foot::after { clear: both; content: ""; display: table; }
    .curate-options {
      color: #078;
      float: left;
      line-height: 16px;
      padding: 7px 10px;
    }
    .curate-options:focus,
    .curate-options:hover { text-decoration: underline; }
    .curate-actions { float: right; }
    .curate-draft {
      min-width: 120px;
      border: 1px solid #b0b6b7;
      border-radius: 4px;
      color: #929a9b;
      line-height: 16px;
      padding: 6px 15px;
    }
    .curate-draft:focus,
    .curate-draft:hover {
      border-color: #929a9b;
      color: inherit;
    }
    .curate-submit {
      min-width: 120px;
      background: #11a7aa;
      border-radius: 4px;
      line-height: 16px;
      margin-left: 5px;
      color: #fff;
      padding: 7px 15px;
    }
    .curate-submit:focus,
    .curate-submit:hover { background: #078; }
    </style>
  </head>
  <body>
    <div class="curate-wrap" id="dialog">
      <form class="curate-dialog">
        <div class="curate-body">
          <h1 class="curate-title">Curate New Story</h1>
          <div class="curate-field">
            <input disabled placeholder="https://getbambu.com" />
          </div>
          <button class="curate-exit" type="button">
            <svg viewBox="0 0 100 100">
                <rect x="44.9" y="-15.7" transform="matrix(0.7071 0.7071 -0.7071 0.7071 50 -20.7107)" width="10.1" height="131.3" />
                <rect x="44.9" y="-15.7" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 120.7107 50)" width="10.1" height="131.3" />
            </svg>
          </button>
          <div class="curate-preview">
            <div class="curate-preview-left">
              <img class="curate-preview-image" alt="" src="https://fillmurray.com/100/100" />
            </div>
            <div class="curate-preview-right">
              <h1 class="curate-preview-title">The employee advocacy app that gets your team talking.</h1>
              <p class="curate-preview-excerpt">Bambu by Sprout Social is an advocacy platform that gives your employees a simple way to share curated content across their social networks and show your company some love.</p>
              <p class="curate-preview-byline"><time id="byline"></time> • getbambu.com</p>
            </div>
          </div>
          <div class="curate-field">
            <h2 class="curate-heading">Include note</h2>
            <textarea placeholder="Include a note to accompany this story (optional)" rows="1"></textarea>
          </div>
          <div class="curate-field">
            <h2 class="curate-heading">Default post text</h2>
            <textarea placeholder="Text will appear in the post (user can edit before sending)" rows="1"></textarea>
          </div>
          <div class="curate-triplet">
            <div class="curate-triplet-block">
              <div class="curate-field">
                <h2 class="curate-heading">Start date</h2>
                <input placeholder="Today" />
              </div>
            </div>
            <div class="curate-triplet-block">
              <div class="curate-field">
                <h2 class="curate-heading">End date</h2>
                <input id="endDate" />
              </div>
            </div>
            <div class="curate-triplet-block">
              <h2 class="curate-heading">More options</h2>
            </div>
          </div>
          <div class="curate-couplet">
            <div class="curate-tags">
              <div class="curate-field">
                <h2 class="curate-heading">Tags</h2>
                <textarea id="tags" placeholder="Add a tag" rows="1"></textarea>
                <div class="curate-tags-drop" id="drop">
                  <ul class="curate-tags-drop-items">
                    <li class="curate-tags-drop-recent">Recent tags</li>
                    <li class="curate-tags-drop-item">Business</li>
                    <li class="curate-tags-drop-item">Design</li>
                    <li class="curate-tags-drop-item">Engineering</li>
                    <li class="curate-tags-drop-item">Marketing</li>
                    <li class="curate-tags-drop-item">Recruiting</li>
                    <li class="curate-tags-drop-item">Posts with Jim</li>
                    <li class="curate-tags-drop-item">Sales</li>
                    <li class="curate-tags-drop-item">Support</li>
                    <li class="curate-tags-drop-item">This tag is 30 characters long</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="curate-depts">
              <div class="curate-field">
                <h2 class="curate-heading">Departments</h2>
              </div>
            </div>
          </div>
        </div>
        <div class="curate-foot">
          <button class="curate-options" type="button">
            <span class="button-text">Hide options</span>
          </button>
          <div class="curate-actions">
            <button class="curate-draft" type="button">
              <span class="button-text">Save as Draft</span>
            </button>
            <button class="curate-submit" type="submit">
              <span class="button-text">Add Story</span>
            </button>
          </div>
        </div>
      </form>
    </div>
    <script>
    (function (d) {
      d.getElementById('endDate').placeholder = moment().format('MMM D, YYYY');
      d.getElementById('byline').innerHTML = moment().format('MMM D');
​
      var dialog = d.getElementById('dialog');
      var tags = d.getElementById('tags');
      var drop = d.getElementById('drop');
​
      tags.onclick = function (e) { e.stopPropagation(); }
      tags.onfocus = function () {
        drop.style.display = 'block';
        Velocity(drop, 'scroll', {
          container: dialog,
          duration: 500
        });
      };
      drop.onclick = function (e) { e.stopPropagation(); }
      document.onclick = function () {
        drop.style.display = 'none';
      };
    })(document);
    </script>
  </body>
</html>
    