Add vertical tabs + new styling for retry button + effects

pull/20/merge
Frode Petterson 2017-06-20 14:25:31 +02:00
parent 857b5069b6
commit 746e599208
4 changed files with 58 additions and 11 deletions

View File

@ -35,6 +35,11 @@
"machineName": "H5P.Timer", "machineName": "H5P.Timer",
"majorVersion": 0, "majorVersion": 0,
"minorVersion": 4 "minorVersion": 4
},
{
"machineName": "FontAwesome",
"majorVersion": 4,
"minorVersion": 5
} }
], ],
"editorDependencies": [ "editorDependencies": [
@ -42,6 +47,11 @@
"machineName": "H5PEditor.ColorSelector", "machineName": "H5PEditor.ColorSelector",
"majorVersion": 1, "majorVersion": 1,
"minorVersion": 2 "minorVersion": 2
},
{
"machineName": "H5PEditor.VerticalTabs",
"majorVersion": 1,
"minorVersion": 3
} }
] ]
} }

View File

@ -273,13 +273,36 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%,-50%); transform: translate(-50%,-50%) scale(1) rotate(0);
cursor: pointer; cursor: pointer;
font-style: italic; line-height: 1.2;
text-shadow: 0 0 0.5em white; padding: 0.5em 1.25em;
padding: 0.125em 0.25em; border-radius: 2em;
line-height: 1; background: #1a73d9;
color: #ffffff;
box-shadow: 0 0.5em 1em #999;
opacity: 1;
transition: box-shadow 200ms linear, margin 200ms linear, transform 300ms ease-out, opacity 300ms ease-out;
}
.h5p-memory-reset:before {
font-family: 'H5PFontAwesome4';
content: "\f01e";
margin-right: 0.5em;
}
.h5p-memory-reset:hover,
.h5p-memory-reset:focus {
background: #1356a3;
box-shadow: 0 1em 1.5em #999;
margin-top: -0.2em;
} }
.h5p-memory-reset:focus { .h5p-memory-reset:focus {
outline: dashed pink; outline: 2px dashed pink;
}
.h5p-memory-transin {
transform: translate(-50%,-50%) scale(0) rotate(180deg);
opacity: 0;
}
.h5p-memory-transout {
transform: translate(-50%,-450%) scale(0) rotate(360deg);
opacity: 0;
} }

View File

@ -100,17 +100,25 @@ H5P.MemoryGame = (function (EventDispatcher, $) {
if (parameters.behaviour && parameters.behaviour.allowRetry) { if (parameters.behaviour && parameters.behaviour.allowRetry) {
// Create retry button // Create retry button
var retryButton = createButton('reset', parameters.l10n.tryAgain || 'Try again?', function () { var retryButton = createButton('reset', parameters.l10n.tryAgain || 'Reset', function () {
// Trigger handler (action) // Trigger handler (action)
resetGame(); retryButton.classList.add('h5p-memory-transout');
setTimeout(function () {
// Remove button on nextTick to get transition effect
$wrapper[0].removeChild(retryButton);
}, 300);
// Remove button from DOM resetGame();
$wrapper[0].removeChild(this);
}); });
retryButton.classList.add('h5p-memory-transin');
setTimeout(function () {
// Remove class on nextTick to get transition effect
retryButton.classList.remove('h5p-memory-transin');
}, 0);
// Same size as cards // Same size as cards
retryButton.style.fontSize = $wrapper.children('ul')[0].style.fontSize; retryButton.style.fontSize = (parseFloat($wrapper.children('ul')[0].style.fontSize) * 0.5) + 'px';
$wrapper[0].appendChild(retryButton); // Add to DOM $wrapper[0].appendChild(retryButton); // Add to DOM
} }

View File

@ -2,6 +2,12 @@
{ {
"name": "cards", "name": "cards",
"type": "list", "type": "list",
"widgets": [
{
"name": "VerticalTabs",
"label": "Default"
}
],
"label": "Cards", "label": "Cards",
"importance": "high", "importance": "high",
"entity": "card", "entity": "card",