mattisbusycom · July 28, 2015 11:55
diff --git a/gistfile1.txt b/gistfile1.txt

 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>Codeply preview</title>
  <base target="_self">
  <meta name="description" content="A layout with fixed width sidebar on the left, and fluid width content area on the right.  The left side collapses on smaller devices such as tablets and smartphones." />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="google" value="notranslate">
  <link rel="shortcut icon" href="/img/codeply_ico.jpg">
  

  
  <!--stylesheets / link tags loaded here-->

  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" />


  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  

  

  <style type="text/css">body,html,.row-offcanvas {
  height:100%;
 }

 body {
  padding-top: 50px;
 }

 .briefcase-btn-group {
    margin-top: 8px;
    margin-right: 20px;
 }

 .navbar {
    border-bottom: 1px solid #c0c0c0;
 }

 #sidebar {
  width: inherit;
  min-width: 220px;
  max-width: 220px;
  background-color:#f5f5f5;
  float: left;
  height:100%;
  position:relative;
  overflow-y:auto;
  overflow-x:hidden;
  
  padding-top: 20px;
 }
 #main {
  height:100%;
  overflow:auto;
 }

 /*
 * off Canvas sidebar
 * --------------------------------------------------
 */
 @media screen and (max-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    width:calc(100% + 220px);
  }
    
  .row-offcanvas-left
  {
    left: -220px;
  }

  .row-offcanvas-left.active {
    left: 0;
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
  }
 }</style>

  
 </head>
 <body >
  <div class="navbar navbar-clint navbar-fixed-top">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
          
          <i class="glyphicon glyphicon-chevron-right"></i> CLINT
          
      </a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/">Browse</a></li>
        <li><a href="#manage">Manage</a></li>
        <li><a href="#control">Control</a></li>
      </ul>
      
      
    <div class="navbar-right">
        
        <!-- Large button group -->
        <div class="btn-group briefcase-btn-group pull-left">
          <button class="btn btn-default btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Briefcase 1 <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            ...
          </ul>
        </div>
        
    </div>
    
    
    </div><!--/.nav-collapse -->
    
 </div><!--/.navbar -->

 <div class="row-offcanvas row-offcanvas-left">
  <div id="sidebar" class="sidebar-offcanvas">
      <div class="col-md-12">
        <ul class="nav nav-pills nav-stacked">
          <li class="active"><a href="/browse/sites">Sites</a></li>
          <li><a href="/browse/searches">Searches</a></li>
          <li><a href="/browse/listings">Listings</a></li>
        </ul>
      </div>
  </div>
  <div id="main">
      <div class="col-md-12">
      	  <p class="visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-left"></i></button>
          </p>
          
          <h2>
              <i class="glyphicon glyphicon-certificate"></i> My Briefcases
          </h2>
          
          <div class="row">
              <div class="col-md-12">
                  <!-- content -->
                  
                            
                  <!-- // content -->
              </div>
          </div>
          
      </div>
  </div>
 </div><!--/row-offcanvas -->
  
  
  
  <script>
    // sandbox disable popups
    if (window.self !== window.top && window.name!="view1") {;
      window.alert = function(){/*disable alert*/};
      window.confirm = function(){/*disable confirm*/};
      window.prompt = function(){/*disable prompt*/};
      window.open = function(){/*disable open*/};
    }
    
    // prevent href=# click jump
    document.addEventListener("DOMContentLoaded", function() {
      var links = document.getElementsByTagName("A");
      for(var i=0; i < links.length; i++) {
        if(links[i].href.indexOf('#')!=-1) {
          links[i].addEventListener("click", function(e) {
          console.debug("prevent href=# click");
              if (this.hash) {
                if (this.hash=="#") {
                  e.preventDefault();
                  return false;
                }
                else {
                  /*
                  var el = document.getElementById(this.hash.replace(/#/, ""));
                  if (el) {
                    el.scrollIntoView(true);
                  }
                  */
                }
              }
              return false;
          })
        }
      }
    }, false);
    
  </script>
  
  <!--scripts loaded here-->
  
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  
  
  
  <script>
  $(document).ready(function() {
  $('[data-toggle=offcanvas]').click(function() {
    $('.row-offcanvas').toggleClass('active');
  });
 });
  </script>

 </body>
 </html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Codeply preview</title>
	<base target="_self">
	<meta name="description" content="A layout with fixed width sidebar on the left, and fluid width content area on the right. The left side collapses on smaller devices such as tablets and smartphones." />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="google" value="notranslate">
	<link rel="shortcut icon" href="/img/codeply_ico.jpg">



	<!--stylesheets / link tags loaded here-->

	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" />


	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />




	<style type="text/css">body,html,.row-offcanvas {
	height:100%;
	}

	body {
	padding-top: 50px;
	}

	.briefcase-btn-group {
	margin-top: 8px;
	margin-right: 20px;
	}

	.navbar {
	border-bottom: 1px solid #c0c0c0;
	}

	#sidebar {
	width: inherit;
	min-width: 220px;
	max-width: 220px;
	background-color:#f5f5f5;
	float: left;
	height:100%;
	position:relative;
	overflow-y:auto;
	overflow-x:hidden;

	padding-top: 20px;
	}
	#main {
	height:100%;
	overflow:auto;
	}

	/*
	* off Canvas sidebar
	* --------------------------------------------------
	*/
	@media screen and (max-width: 768px) {
	.row-offcanvas {
	position: relative;
	-webkit-transition: all 0.25s ease-out;
	-moz-transition: all 0.25s ease-out;
	transition: all 0.25s ease-out;
	width:calc(100% + 220px);
	}

	.row-offcanvas-left
	{
	left: -220px;
	}

	.row-offcanvas-left.active {
	left: 0;
	}

	.sidebar-offcanvas {
	position: absolute;
	top: 0;
	}
	}</style>


	</head>
	<body >
	<div class="navbar navbar-clint navbar-fixed-top">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">

	<i class="glyphicon glyphicon-chevron-right"></i> CLINT

	</a>
	</div>
	<div class="collapse navbar-collapse">
	<ul class="nav navbar-nav">
	<li class="active"><a href="/">Browse</a></li>
	<li><a href="#manage">Manage</a></li>
	<li><a href="#control">Control</a></li>
	</ul>


	<div class="navbar-right">

	<!-- Large button group -->
	<div class="btn-group briefcase-btn-group pull-left">
	<button class="btn btn-default btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Briefcase 1 <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
	...
	</ul>
	</div>

	</div>


	</div><!--/.nav-collapse -->

	</div><!--/.navbar -->

	<div class="row-offcanvas row-offcanvas-left">
	<div id="sidebar" class="sidebar-offcanvas">
	<div class="col-md-12">
	<ul class="nav nav-pills nav-stacked">
	<li class="active"><a href="/browse/sites">Sites</a></li>
	<li><a href="/browse/searches">Searches</a></li>
	<li><a href="/browse/listings">Listings</a></li>
	</ul>
	</div>
	</div>
	<div id="main">
	<div class="col-md-12">
	<p class="visible-xs">
	<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-left"></i></button>
	</p>

	<h2>
	<i class="glyphicon glyphicon-certificate"></i> My Briefcases
	</h2>

	<div class="row">
	<div class="col-md-12">
	<!-- content -->


	<!-- // content -->
	</div>
	</div>

	</div>
	</div>
	</div><!--/row-offcanvas -->



	<script>
	// sandbox disable popups
	if (window.self !== window.top && window.name!="view1") {;
	window.alert = function(){/disable alert/};
	window.confirm = function(){/disable confirm/};
	window.prompt = function(){/disable prompt/};
	window.open = function(){/disable open/};
	}

	// prevent href=# click jump
	document.addEventListener("DOMContentLoaded", function() {
	var links = document.getElementsByTagName("A");
	for(var i=0; i < links.length; i++) {
	if(links[i].href.indexOf('#')!=-1) {
	links[i].addEventListener("click", function(e) {
	console.debug("prevent href=# click");
	if (this.hash) {
	if (this.hash=="#") {
	e.preventDefault();
	return false;
	}
	else {
	/*
	var el = document.getElementById(this.hash.replace(/#/, ""));
	if (el) {
	el.scrollIntoView(true);
	}
	*/
	}
	}
	return false;
	})
	}
	}
	}, false);

	</script>

	<!--scripts loaded here-->

	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>



	<script>
	$(document).ready(function() {
	$('[data-toggle=offcanvas]').click(function() {
	$('.row-offcanvas').toggleClass('active');
	});
	});
	</script>

	</body>
	</html>