Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Created January 12, 2020 23:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/2f1a3def0bd90add7c4f883723bbf5f1 to your computer and use it in GitHub Desktop.
Save CodeMyUI/2f1a3def0bd90add7c4f883723bbf5f1 to your computer and use it in GitHub Desktop.
Download ZIP
Simple folder prototype
Raw
index.html
<button class="back">
<i class="mdi mdi-arrow-left"></i>
</button>
<div class="stage">
<div class="folder-wrap level-current scrolling">
<div class="tile folder">
<i class="mdi mdi-folder"></i>
<h3>Folder name</h3>
<p>Something something</p>
</div><!-- .tile.folder -->
<div class="tile folder">
<i class="mdi mdi-folder"></i>
<h3>Folder name</h3>
<p>Something something</p>
</div><!-- .tile.folder -->
<div class="tile folder">
<i class="mdi mdi-folder"></i>
<h3>Folder name</h3>
<p>Something something</p>
</div><!-- .tile.folder -->
<div class="tile folder">
<i class="mdi mdi-folder"></i>
<h3>Folder name</h3>
<p>Something something</p>
</div><!-- .tile.folder -->
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
</div><!-- .folder-wrap -->
<div class="folder-wrap level-down">
<div class="tile folder">
<i class="mdi mdi-folder"></i>
<h3>Folder name</h3>
<p>Something something</p>
</div><!-- .tile.folder -->
<div class="tile folder">
<i class="mdi mdi-folder"></i>
<h3>Folder name</h3>
<p>Something something</p>
</div><!-- .tile.folder -->
<div class="tile folder">
<i class="mdi mdi-folder"></i>
<h3>Folder name</h3>
<p>Something something</p>
</div><!-- .tile.folder -->
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
</div><!-- .folder-wrap -->
<div class="folder-wrap">
<div class="tile folder">
<i class="mdi mdi-folder"></i>
<h3>Folder name</h3>
<p>Something something</p>
</div><!-- .tile.folder -->
<div class="tile folder">
<i class="mdi mdi-folder"></i>
<h3>Folder name</h3>
<p>Something something</p>
</div><!-- .tile.folder -->
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
</div><!-- .folder-wrap -->
<div class="folder-wrap">
<div class="tile folder">
<i class="mdi mdi-folder"></i>
<h3>Folder name</h3>
<p>Something something</p>
</div><!-- .tile.folder -->
<div class="tile folder">
<i class="mdi mdi-folder"></i>
<h3>Folder name</h3>
<p>Something something</p>
</div><!-- .tile.folder -->
<div class="tile folder">
<i class="mdi mdi-folder"></i>
<h3>Folder name</h3>
<p>Something something</p>
</div><!-- .tile.folder -->
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
</div><!-- .folder-wrap -->
<div class="folder-wrap">
<div class="tile folder">
<i class="mdi mdi-folder"></i>
<h3>Folder name</h3>
<p>Something something</p>
</div><!-- .tile.folder -->
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
</div><!-- .folder-wrap -->
<div class="folder-wrap">
<div class="tile form">
<i class="mdi mdi-file-document"></i>
<h3>Form name</h3>
<p>Something something</p>
</div><!-- .tile.form -->
</div><!-- .folder-wrap -->
</div><!-- .stage -->
Raw
script.js
$( document ).ready(function() {
// Folder on click
$('.folder').on( "click", function() {
console.log( "Drill down" );
$('.level-up').removeClass('level-up');
$('.level-current').addClass('level-up');
$('.level-current').removeClass('level-current');
$('.level-down').addClass('level-current');
$('.level-down').removeClass('level-down').next().addClass('level-down');
});
// Back on Click
$('.back').on( "click", function() {
if(
$('.level-current').is(':first-child')){
console.log( "Current is top" );
}
else {
console.log( "Drill back up" );
$('.level-down').removeClass('level-down')
$('.level-current').addClass('level-down');
$('.level-current').removeClass('level-current');
$('.level-up').addClass('level-current');
$('.level-up').removeClass('level-up').prev().addClass('level-up');
}
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Raw
style.css
*{box-sizing:border-box;}
body{
font-family:source sans pro;
}
h3{
font-weight:400;
font-size:16px;
}
p{
font-size:12px;
color:#888;
}
.stage{
max-width:80%;margin:60px 10%;
position:relative;
}
.folder-wrap{
display: flex;
flex-wrap:wrap;
}
.folder-wrap::before{
content:'Folder name';
display: block;
position: absolute;
top:-40px;
}
.folder-wrap:first-child::before{
content:'Home (top of file structure)';
display: block;
position: absolute;
top:-40px;
}
.tile{
border-radius: 3px;
width: calc(20% - 17px);
margin-bottom: 23px;
text-align: center;
border: 1px solid #eeeeee;
transition: 0.2s all cubic-bezier(0.4, 0.0, 0.2, 1);
position: relative;
padding: 35px 16px 25px;
margin-right: 17px;
cursor: pointer;
}
.tile:hover{
box-shadow: 0px 7px 5px -6px rgba(0, 0, 0, 0.12);
}
.tile i{
color: #00A8FF;
height: 55px;
margin-bottom: 20px;
font-size: 55px;
display: block;
line-height: 54px;
cursor: pointer;
}
.tile i.mdi-file-document{
color:#8fd9ff;
}
.back{
font-size: 26px;
border-radius: 50px;
background: #00a8ff;
border: 0;
color: white;
width: 60px;
height: 60px;
margin: 20px 20px 0;
outline:none;
cursor:pointer;
}
/* Transitioning */
.folder-wrap{
position: absolute;
width: 100%;
transition: .365s all cubic-bezier(.4,0,.2,1);
pointer-events: none;
opacity: 0;
top: 0;
}
.folder-wrap.level-up{
transform: scale(1.2);
}
.folder-wrap.level-current{
transform: scale(1);
pointer-events:all;
opacity:1;
position:relative;
height: auto;
overflow: visible;
}
.folder-wrap.level-down{
transform: scale(0.8);
}
Raw
styles
<link href="https://cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment