wrapper.html

{{> head}}



<div class="wrapper">

  <div style="margin:0 40px;display:flex;flex-direction:column">
  {{> dropdown}}
  </div>


  <div style="flex-basis:50%;display:flex;flex-direction:column;">
    <div style="flex-grow:1;">
      <div style="padding-left:21px;padding-bottom:21px">
    <!-- 
    {{#message}}{{^error}}
    <a href="" class="mess success" style="margin-bottom:19px">
     <span class="link">Dismiss</span>
     {{text}}
    </a>
    {{/error}}{{#error}}
    <div class="clear" style="margin-bottom:60px"></div>
    {{/error}}{{/message}}

    {{^message}}
    <div class="clear" style="margin-bottom:60px"></div>
    {{/message}}

    <div class="clear"></div>
 -->
    <div class="crumbs">

      {{#breadcrumbs}}
      
      <a href="{{url}}" class="crumb {{#last}}last{{/last}}">{{label}}</a>

      {{^last}}
      <span style="    margin: 0 -1em 0 -0.5em;
    line-height: 3;" ><svg width="11" height="9" style="transform:rotate(270deg)" viewBox="0 0 10 12" xmlns="http://www.w3.org/2000/svg"><path d="M5.998 6.244c-.255 0-.51-.098-.703-.292L1.048 1.705C.663 1.32.66.683 1.05.293 1.444-.1 2.073-.1 2.462.29L6 3.83 9.538.29c.384-.384 1.02-.388 1.412.003.393.393.39 1.023.002 1.412L6.705 5.952c-.192.192-.447.29-.702.29z" fill="rgb(153, 153, 153)"></path></svg></span>
      {{/last}}

      {{/breadcrumbs}}
      
    </div>
    
    {{#message.error}}
    <a href="" class="mess error" style="margin-bottom:19px">
     <span class="link">Dismiss</span>
     {{message.text}}
    </a>
    {{/message.error}}

    {{> yield}}
  </div>
  </div>


       <div style="color:rgb(158, 154, 152);padding:40px 20px 0 42px"><a style="margin-right:40px;color:inherit;text-decoration:none" href="/account">Your account</a>  <a style="margin-right:40px;color:inherit;text-decoration:none" href="/help">Documentation</a> <a style="color:inherit;text-decoration:none" href="/contact">Contact</a></div>

  </div>
    
  <div style="display:flex;flex-direction:column;flex-basis:50%">
  
   

    {{> folder}}

  <!--  <a href="{{blog.url}}" target="_blank" style="width: 150px;
  height: 150px;
  margin: 0 41px;
  line-height: 150px;
  border-radius: 50%;
  display: block;
  color: #fff;
  text-align: center;
  background: #000;
  text-decoration:none;
">Visit</a> -->
<!-- <div style="font-size:14px;opacity:0.3;padding:40px 20px 10px">
      13GB used
      <div style="float:right">Last sync: 12 minutes ago
    </div> -->

</div>
  <div style="flex-grow:1;flex-basis:3%">

  </div>
</div>
<div class="clear"></div>

{{#links_for_footer}}
{{{html}}}
{{/links_for_footer}}

<script type="text/javascript">

// $('input.button:not(.small)').each(function(){

//     $(this).click(function(){
//       $(this).addClass('working').val('Saving changes');
//     });
// });

var opener = document.querySelector('.dropdown .opener');
var closer = document.querySelector('.dropdown .closer');
var dropdown = document.querySelector('.dropdown');

opener.addEventListener('click', function(e){ //say this is an anchor
  
  function close (e) {

    if (dropdown.className.split(' ').indexOf('closed') === -1)
      dropdown.className += ' closed';

    document.body.removeEventListener('click', close);
  }

  if (dropdown.className.split(' ').indexOf('closed') === -1) {
    
    dropdown.className += ' closed';
    document.body.removeEventListener('click', close);

  } else {
  
    dropdown.className = dropdown.className.split('closed').join('');
    document.body.addEventListener('click', close);
  }
  
  e.preventDefault();
  e.stopPropagation();
});
</script>
</body>
</html>