fixed display bugs, manually show/hide content

master
Zaahir Moolla 2015-04-07 00:09:28 +00:00
parent 50c38f8f81
commit a3b6295472
3 changed files with 11 additions and 19 deletions

View File

@ -1,16 +1,14 @@
.zci--cheat_sheets .cheatsheet__container.chomp {
max-height: none;
.zci--cheat_sheets .cheatsheet__container.compressed {
max-height: 20em;
}
.zci--cheat_sheets .cheatsheet__container .cheatsheet__section {
.zci--cheat_sheets .cheatsheet__container.compressed .cheatsheet__section,
.zci--cheat_sheets .cheatsheet__container.compressed .cheatsheet__section .g {
display: none;
}
.zci--cheat_sheets .cheatsheet__container .cheatsheet__section .g {
display: none;
}
.zci--cheat_sheets.has-chomp-expanded .cheatsheet__container .cheatsheet__section {
.zci--cheat_sheets .cheatsheet__section,
.zci--cheat_sheets .cheatsheet__section .g {
display: inline-block;
}
@ -26,10 +24,6 @@
overflow: hidden;
}
.zci--cheat_sheets .cheatsheet__container.compressed {
height: 15em;
}
.zci--cheat_sheets .cheatsheet__title {
font-weight: bold;
font-size: 1em;

View File

@ -16,16 +16,14 @@ DDH.cheat_sheets.build = function(ops) {
onShow: function() {
var $dom = $("#zci-cheat_sheets"),
$container = $dom.find(".cheatsheet__container"),
$more_btn = $dom.find("#show_more"),
$more_btn = $dom.find(".chomp--link"),
$icon = $more_btn.find(".chomp--link__icn"),
$more = $more_btn.find(".chomp--link__mr"),
$less = $more_btn.find(".chomp--link__ls");
$more_btn.click(function() {
$container.toggle("compressed");
$more.toggle();
$less.toggle();
$icon.toggleClass("expand");
$dom.toggleClass("has-chomp-expanded");
$container.toggleClass("compressed");
});
}
};

View File

@ -1,7 +1,7 @@
<h3 class="c-base__title">{{name}}</h3>
<h4 class="c-base__sub">{{description}}</h4>
<div class="gw cheatsheet__container chomp js-chomp">
<div class="gw cheatsheet__container compressed">
{{#ordered_cheatsheet sections section_order}}
<div class="g half cheatsheet__section">
@ -22,7 +22,7 @@
<div class="cheatsheet__footer">
<hr>
<a class="c-text__link c-text__link--chomp chomp--link sep--after js-chomp-link can-expand">
<a class="c-text__link c-text__link--chomp chomp--link sep--after can-expand">
<i class="chomp--link__icn"></i>
<span class="chomp--link__mr">Show More</span>
<span class="chomp--link__ls">Show Less</span>