Skip to content

Instantly share code, notes, and snippets.

@abalter

abalter/mycards.html

Created October 5, 2017 20:13
Show Gist options
  • Save abalter/380f9d9e07ee48e80d6f36a148b183df to your computer and use it in GitHub Desktop.
Save abalter/380f9d9e07ee48e80d6f36a148b183df to your computer and use it in GitHub Desktop.
Download ZIP
My Cards
Raw
mycards.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1" name="viewport">
<title>mycards</title><!-- Custom fonts for this template -->
<!-- ========== STYLESHEETS ============= -->
<!-- BOOTSTRAP -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css">
<style>
section {
margin: 0 5vw;
}
.mycard-deck {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
/* border: 1px solid red; */
}
.mycard {
padding: 0;
margin: 1rem;
display: flex;
align-self: center;
/* border: 1px solid black; */
border-radius: 0 0.4rem 0.4rem 0;
}
.mycard-header {
margin: 0;
padding: 0;
/* border: 3px dashed red; */
}
.mycard-body {
padding: 0;
margin: 0;
background-color: lightgrey;
/* border: 3px solid orange; */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.mycard-title {
margin: 0;
padding: 1rem;
background-color: white;
display: flex;
/* align-items: center; */
justify-content: flex-end;
background-color: black;
/* border: 1px dashed purple; */
}
.mycard-title h1 {
color: white;
font-weight: 600;
vertical-align: middle;
}
.toggle {
font-size: 1.5em;
margin: 0 0 0 0.5em;
display: none;
color: white;
align-self: center;
}
.mycard-text {
padding: 1rem 1rem;
display: block;
/* border: 2px dashed green; */
border: 1px solid black;
/* border-radius: 0 0.4rem 0.4rem 0; */
}
.mycard-text p {
display: flex;
align-self: flex-end;
}
.show {
display: block;
}
.hide {
display: none;
}
@media (max-width: 767px) {
.mycard {
margin: 0.2em;
}
.mycard-title {
justify-content: center;
/* border: 1px dashed green; */
padding: 0.2em;
}
.toggle {
display: inline-block;
}
}
@media (min-width: 767px) {}
</style>
</head>
<body>
<section id="outer">
<div class="mycard-deck row">
<div class='mycard col-lg-12 row' id="0">
<!-- <div class='mycard-header col-md-2'>
<img src="https://placehold.it/200x100" />
</div> -->
<div class="mycard-body col-md-12 row">
<div class='mycard-title col-xs-12 col-md-6 col-xl-4'>
<h1>This Is The Title</h1>
</div>
<div class="mycard-text col-xs-12 col-md-6 col-xl-8">
<p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.</p>
</div><!-- card-text -->
</div><!-- card-body -->
</div><!-- card -->
<div class='mycard col-lg-12 row' id="1">
<!-- <div class='mycard-header col-md-2'>
<img src="https://placehold.it/200x100" />
</div> -->
<div class="mycard-body col-md-12 row">
<div class='mycard-title col-xs-12 col-md-6 col-xl-4'>
<h1>This Is The Title</h1>
</div>
<div class="mycard-text col-xs-12 col-md-6 col-xl-8">
<p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.</p>
</div><!-- card-text -->
</div><!-- card-body -->
</div><!-- card -->
<div class='mycard col-lg-12 row' id="2">
<!-- <div class='mycard-header col-md-2'>
<img src="https://placehold.it/200x100" />
</div> -->
<div class="mycard-body col-md-12 row">
<div class='mycard-title col-xs-12 col-md-6 col-xl-4'>
<h1>This Is The Title</h1>
</div>
<div class="mycard-text col-xs-12 col-md-6 col-xl-8">
<p>A quick and simplified answer is that Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when the real text is not available.</p>
</div><!-- card-text -->
</div><!-- card-body -->
</div><!-- card -->
</div>
</section>
<div id="width"></div>
<!-- ============ SCRIPTS ================= -->
<!-- JQUERY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- BOOTSTRAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!-- CUSTOM -->
<script
console.log("mycards.js");
/* -- Fill viewport dimensions -- */
$('#width').text(`width=${$(window).width()} height=${$(window).height()}`);
/* -- ON WINDOW RESIZE -- */
/* -- Fill viewport and show/hide text -- */
$(window).on('resize', function()
{
console.log("window resized");
$('#width').text(`width=${$(window).width()} height=${$(window).height()}`);
if ($(window).width() < 767)
{
console.log("mobile so hiding text initially");
$('.mycard-text').removeClass('show');
$('.mycard-text').addClass('hide');
}
else
{
console.log("normal so showing text initially");
$('.mycard-text').removeClass('hide');
$('.mycard-text').addClass('show');
}
});
/* -- Adding toggle button span -- */
$('.mycard-title').append($('<span>').addClass('fa fa-plus-square-o toggle hide'));
/* -- Mobile screen -- */
if ($(window).width() < 767)
{
console.log("screen mobile so hiding text initially");
$('.mycard-text').addClass('hide');
}
else
{
console.log("screen normal so showing text initially");
$('.mycard-text').addClass('show');
}
/* -- Card title click actions. -- */
$('.mycard-title').on('click', function()
{
console.log("title clicked");
var next_toggle = $(this).parent().find('.toggle');
var text = $(this).next('.mycard-text');
if ($(window).width() < 767)
{
console.log("mobile display so toggling toggle icon and show/hide text");
$(next_toggle).toggleClass('fa-minus-square-o');
$(next_toggle).toggleClass('fa-plus-square-o');
$(text).toggleClass('show');
$(text).toggleClass('hide');
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment