haskell/stackage-server
1
0
Fork 0
mirror of https://github.com/commercialhaskell/stackage-server.git synced 2026-02-08 09:07:27 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Make markdown areas collapse if larger than 300px

Browse Source 
@snoyberg Not sure what the ideal height will be but this does what I
had in mind for the collapsing.
This commit is contained in:
Chris Done 2014-11-03 19:23:20 +01:00
parent 033274db66
commit 7ad48a91dd
3 changed files with 64 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
templates/package.hamlet
View File

@ -118,8 +118,10 @@ $newline never
<div .markdown-container .readme-container> <div .markdown-container .readme-container>
<div .container> <div .container>
<div .row> <div .row>
<div .span12> <div .span12 .expanding>
#{metadataReadme metadata} #{metadataReadme metadata}
<div .bottom-gradient>
<i class="fa fa-angle-down">
$maybe log <- metadataChangelog metadata $maybe log <- metadataChangelog metadata
<div .container> <div .container>
@ -129,8 +131,10 @@ $maybe log <- metadataChangelog metadata
<div .markdown-container .changelog-container> <div .markdown-container .changelog-container>
<div .container> <div .container>
<div .row> <div .row>
<div .span12> <div .span12 .expanding>
#{log} #{log}
<div .bottom-gradient>
<i class="fa fa-angle-down">
<div .container> <div .container>
<div .row> <div .row>

11
templates/package.julius Normal file
View File

@ -0,0 +1,11 @@
$(function(){
$('.expanding').each(function(){
var $this = $(this);
if ($this.height() > 300) {
$this.addClass('collapsed');
$this.find('.bottom-gradient').click(function(){
$this.removeClass('collapsed');
});
}
});
});

53
templates/package.lucius
View File

@ -71,12 +71,12 @@ h3 {
margin-top: 1em; margin-top: 1em;
margin-left: -8px; margin-left: -8px;
} }
.container { .container {
padding-left: 15px !important; padding-left: 15px !important;
padding-right: 15px !important; padding-right: 15px !important;
margin-right: 0 !important; margin-right: 0 !important;
margin-left: 0 !important; margin-left: 0 !important;
} }
} }
.markdown-container { .markdown-container {
@ -144,3 +144,44 @@ h2.changes-title {
.hidden { .hidden {
display: none; display: none;
} }
.expanding {
.bottom-gradient {
display: none;
bottom: 0;
position: absolute;
width: 100%;
cursor: pointer;
height: 150px;
line-height: 150px;
text-align: center;
background: -moz-linear-gradient(top, rgba(244,244,244,0) 0%, rgba(244,244,244,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,244,0)), color-stop(100%,rgba(244,244,244,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(244,244,244,0) 0%,rgba(244,244,244,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(244,244,244,0) 0%,rgba(244,244,244,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(244,244,244,0) 0%,rgba(244,244,244,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(244,244,244,0) 0%,rgba(244,244,244,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f4f4f4', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */
}
.bottom-gradient:hover {
.fa {
color: #000;
}
}
.fa {
font-size: 5em;
color: #666;
line-height: 150px;
margin-top: 25px;
}
position: relative;
}
.expanding.collapsed {
height: 300px;
overflow: hidden;
.bottom-gradient {
display: block;
}
}