jlukic
10 years ago
5 changed files with 148 additions and 96 deletions
@ -1,114 +1,97 @@ |
|||||
--- |
--- |
||||
layout : 'default' |
layout : 'default' |
||||
css : 'hotfix' |
css : 'hotfix' |
||||
|
|
||||
title : 'Test Page' |
title : 'Test Page' |
||||
type : 'Library' |
type : 'Library' |
||||
|
standalone : true |
||||
--- |
--- |
||||
<%- @partial('header') %> |
<%- @partial('header') %> |
||||
|
|
||||
<!-- TEST JS HERE !--> |
<!-- TEST JS HERE !--> |
||||
<script> |
<script> |
||||
$(document).ready(function() { |
$(document).ready(function() { |
||||
$('.ui.left.sidebar').sidebar({ |
|
||||
transition: 'overlay' |
|
||||
}); |
|
||||
|
|
||||
$('.ui.right.sidebar').sidebar({ |
|
||||
transition: 'push' |
|
||||
}); |
|
||||
|
|
||||
// left is opened by button |
|
||||
$('.ui.left.sidebar') |
|
||||
.sidebar('attach events', '.open.button') |
|
||||
; |
|
||||
|
|
||||
// right opens by link in left |
|
||||
$('.ui.right.wide.sidebar') |
|
||||
.sidebar('attach events', '.left.sidebar .open.item') |
|
||||
; |
|
||||
|
|
||||
// last right opens by link in wide right |
|
||||
$('.ui.right.thin.sidebar') |
|
||||
.sidebar('attach events', '.right.wide.sidebar .open.item') |
|
||||
; |
|
||||
}); |
}); |
||||
</script> |
</script> |
||||
|
|
||||
<!-- TEST CSS HERE !--> |
<!-- TEST CSS HERE !--> |
||||
<style type="text/css"> |
<style type="text/css"> |
||||
/* Force on top of other sidebar */ |
|
||||
.thin.right.sidebar { |
|
||||
z-index: 200 !important; |
|
||||
} |
|
||||
</style> |
</style> |
||||
|
|
||||
<div class="main container"> |
<div class="main container"> |
||||
<div class="ui open button">Open Left</div> |
|
||||
</div> |
</div> |
||||
|
|
||||
<div class="ui top fixed menu"> |
<div class="ui page grid"> |
||||
<div class="ui item">Fixed</div> |
<div class="one column row"> |
||||
|
<div class="column"> |
||||
|
<p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
</div> |
</div> |
||||
|
<div class="ui stackable page grid"> |
||||
|
<div class="two column row"> |
||||
<div class="ui left sidebar vertical inverted labeled icon menu"> |
<div class="column"> |
||||
<a class="open item"> |
<p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique. |
||||
<i class="home icon"></i> |
</p> |
||||
Open Right |
</div> |
||||
</a> |
<div class="column"> |
||||
<a class="item"> |
<p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique. |
||||
<i class="block layout icon"></i> |
</p> |
||||
Topics |
</div> |
||||
</a> |
</div> |
||||
<a class="item"> |
</div> |
||||
<i class="smile icon"></i> |
<div class="ui stackable two column page grid"> |
||||
Friends |
<div class="column"> |
||||
</a> |
<p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique. |
||||
<a class="item"> |
</p> |
||||
<i class="calendar icon"></i> |
</div> |
||||
History |
<div class="column"> |
||||
</a> |
<p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique. |
||||
<a class="item"> |
</p> |
||||
<i class="mail icon"></i> |
</div> |
||||
Messages |
</div> |
||||
</a> |
<div class="ui two column page grid"> |
||||
<a class="item"> |
<div class="column"> |
||||
<i class="chat icon"></i> |
<p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique. |
||||
Discussions |
</p> |
||||
</a> |
</div> |
||||
<a class="item"> |
<div class="column"> |
||||
<i class="trophy icon"></i> |
<p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique. |
||||
Achievements |
</p> |
||||
</a> |
</div> |
||||
<a class="item"> |
</div> |
||||
<i class="shop icon"></i> |
<div class="ui page grid"> |
||||
Store |
<div class="one column row"> |
||||
</a> |
<div class="column"> |
||||
<a class="item"> |
<p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique. |
||||
<i class="settings icon"></i> |
</p> |
||||
Settings |
</div> |
||||
</a> |
</div> |
||||
</div> |
</div> |
||||
|
|
||||
<div class="ui wide right sidebar vertical inverted menu"> |
<div class="ui one column page grid"> |
||||
<a class="open item"> |
<div class="column"> |
||||
<i class="right arrow icon"></i> |
<p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique. |
||||
Open Last |
</p> |
||||
</a> |
</div> |
||||
|
</div> |
||||
|
<div class="ui stackable one column page grid"> |
||||
|
<div class="column"> |
||||
|
<p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique. |
||||
|
</p> |
||||
|
</div> |
||||
|
<div class="column"> |
||||
|
<p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique. |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="ui one column page grid"> |
||||
|
<div class="column"> |
||||
|
<p>Quisque in nunc cursus, efficitur diam sed, fermentum odio. Aenean porttitor neque nec nunc pellentesque, eget tempor purus lacinia. Mauris molestie odio non felis venenatis, sit amet laoreet sem pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue augue, hendrerit quis nisi sed, feugiat euismod enim. Integer rhoncus mi non purus tincidunt, vestibulum semper ex tristique. |
||||
|
</p> |
||||
|
</div> |
||||
</div> |
</div> |
||||
|
|
||||
<div class="ui thin right red sidebar vertical inverted menu"> |
|
||||
<a class="open item"> |
|
||||
<i class="home icon"></i> |
|
||||
Wow |
|
||||
</a> |
|
||||
<a class="item"> |
|
||||
<i class="block layout icon"></i> |
|
||||
Amaze |
|
||||
</a> |
|
||||
<a class="item"> |
|
||||
<i class="calendar icon"></i> |
|
||||
Very Relaxed |
|
||||
</a> |
|
||||
</div> |
|
Loading…
Reference in new issue