Tweak styling.

Add hidden capability.
Add JS to show on click.
parent 121e1a18
Pipeline #84 canceled with stage
......@@ -27,6 +27,12 @@
.calendar_day_cell h2 {
text-align: center;
font-size: 400%;
}
.calendar_day_cell h2.middle {
position: relative;
top: 40%;
}
.calendar_day_cell img {
......@@ -37,6 +43,25 @@
vertical-align: middle;
}
.advent-joke-answer {
p.advent-motto,
p.advent-joke-answer,
.calendar_day_cell .day-image {
background-color: rgba(255, 255, 255, 0.25);
}
.hidden {
opacity: 0.0;
filter: alpha(opacity=0); /* For IE8 and earlier */
}
.hidden2 {
display: none;
}
p.advent-motto {
margin-bottom: 0em;
}
p.advent-joke-answer {
margin-bottom: 0;
}
/* JavaScript for front end advent calendar */
'use strict';
jQuery( document ).ready( function ( $ ) {
$( '.content-area' ).on( 'click', '.calendar_day_cell', function ( event ) {
event.preventDefault(); // prevent normal click function
// find the image or video
let cell_image = $( this ).children( '.day-image.hidden' );
// if we found it, remove the hidden class to show it.
if ( cell_image ) {
cell_image.removeClass( 'hidden' );
}
// find the h2 and move it up.
let heading = $( this ).children( 'h2' );
if ( heading ) {
heading.removeClass( 'middle' );
}
// find the motto and display it
let motto = $( this ).children( '.advent-motto' );
if ( motto ) {
motto.removeClass( 'hidden' );
}
// if there is a joke answer make it clickable
let joke_answer = $( this ).siblings( '.advent-joke-answer' );
if ( joke_answer ) {
motto.on( 'click', function ( event ) {
event.stopPropagation(); // prevent normal click function
joke_answer = $( this ).siblings( '.advent-joke-answer' );
joke_answer.removeClass( 'hidden2' );
} );
}
} );
} );
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment