mirror of
https://github.com/scratchfoundation/scratchx.git
synced 2024-11-25 00:58:05 -05:00
Use modal Refill for popovers. Add JSshowExtensionDialog
This commit is contained in:
Ray Schamp
parent
c0b538de72
commit
30e6bb0828
7 changed files with 313 additions and 43 deletions
141
css/scratchx.css
141
css/scratchx.css
|
|
@ -613,7 +613,7 @@ h6 {
|
|||
article h1 {
|
||||
font-size: 1.5em; }
|
||||
|
||||
article h2 {
|
||||
article h2, dialog h2 {
|
||||
font-size: 1.5em; }
|
||||
|
||||
p {
|
||||
|
|
@ -640,6 +640,132 @@ picture {
|
|||
margin: 0;
|
||||
max-width: 100%; }
|
||||
|
||||
.modal label {
|
||||
cursor: pointer;
|
||||
margin-bottom: 0; }
|
||||
.modal label img {
|
||||
border-radius: 150px;
|
||||
display: block;
|
||||
max-width: 300px; }
|
||||
.modal .modal-state {
|
||||
display: none; }
|
||||
.modal .modal-trigger {
|
||||
background-color: #21b4f0;
|
||||
border-radius: 3px;
|
||||
border: 0;
|
||||
color: #333333;
|
||||
display: inline-block;
|
||||
font-size: inherit;
|
||||
font-weight: bold;
|
||||
padding: 7px 18px;
|
||||
text-decoration: none;
|
||||
background-clip: padding-box;
|
||||
padding: 0.8em 1em; }
|
||||
.modal .modal-trigger:hover:not(:disabled) {
|
||||
background-color: #35bef6;
|
||||
cursor: pointer; }
|
||||
.modal .modal-trigger:active:not(:disabled), .modal .modal-trigger:focus:not(:disabled) {
|
||||
background-color: #15a7e3;
|
||||
cursor: pointer; }
|
||||
.modal .modal-trigger:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5; }
|
||||
.modal .modal-fade-screen {
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
opacity: 0;
|
||||
padding-top: 0.6em;
|
||||
text-align: left;
|
||||
visibility: hidden;
|
||||
z-index: 99999999999; }
|
||||
@media screen and (min-width: 60em) {
|
||||
.modal .modal-fade-screen {
|
||||
padding-top: 10em; } }
|
||||
.modal .modal-fade-screen .modal-bg {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
cursor: pointer; }
|
||||
.modal .modal-close {
|
||||
position: absolute;
|
||||
top: 1.5em;
|
||||
right: 1.5em;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
background: #fff;
|
||||
cursor: pointer; }
|
||||
.modal .modal-close:after, .modal .modal-close:before {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
height: 1.5em;
|
||||
width: 0.15em;
|
||||
background: #dfe3e7;
|
||||
content: '';
|
||||
display: block;
|
||||
margin: -3px 0 0 -1px; }
|
||||
.modal .modal-close:hover:after, .modal .modal-close:hover:before {
|
||||
background: #c2c9d1; }
|
||||
.modal .modal-close:before {
|
||||
-webkit-transform: rotate(-45deg);
|
||||
-moz-transform: rotate(-45deg);
|
||||
-ms-transform: rotate(-45deg);
|
||||
-o-transform: rotate(-45deg);
|
||||
transform: rotate(-45deg); }
|
||||
.modal .modal-inner {
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
padding: 1.5em;
|
||||
position: relative;
|
||||
max-width: 60em;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
.modal .modal-inner::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table; }
|
||||
.modal .modal-inner .modal-content {
|
||||
color: #58595b;
|
||||
-webkit-columns: 2 8em;
|
||||
-moz-columns: 2 8em;
|
||||
columns: 2 8em; }
|
||||
.modal .modal-inner a.cta {
|
||||
color: white;
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
margin-top: 1em; }
|
||||
.modal .modal-inner a.cta:last-child {
|
||||
padding: 0 2em; }
|
||||
.modal .modal-state:checked + .modal-fade-screen,
|
||||
.modal .modal-fade-screen.visible {
|
||||
opacity: 1;
|
||||
visibility: visible; }
|
||||
.modal .modal-state:checked + .modal-fade-screen .modal-inner,
|
||||
.modal .modal-fade-screen.visible .modal-inner {
|
||||
top: 0.5em; }
|
||||
|
||||
.modal-open {
|
||||
overflow: hidden; }
|
||||
|
||||
dialog {
|
||||
display: block;
|
||||
position: static; }
|
||||
|
|
@ -816,19 +942,24 @@ body > section {
|
|||
body #home {
|
||||
display: block; }
|
||||
|
||||
#dialogs {
|
||||
#dialogs, #modal-dialogs .modal-inner {
|
||||
display: block; }
|
||||
#dialogs::after {
|
||||
#dialogs::after, #modal-dialogs .modal-inner::after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table; }
|
||||
#dialogs dialog {
|
||||
#dialogs dialog, #modal-dialogs .modal-inner dialog {
|
||||
float: left;
|
||||
display: block;
|
||||
margin-right: 1.25%;
|
||||
width: 32.5%; }
|
||||
#dialogs dialog:last-child {
|
||||
#dialogs dialog:last-child, #modal-dialogs .modal-inner dialog:last-child {
|
||||
margin-right: 0; }
|
||||
#dialogs dialog p, #modal-dialogs .modal-inner dialog p {
|
||||
text-align: center; }
|
||||
|
||||
#modal-dialogs .modal-inner {
|
||||
background-color: transparent; }
|
||||
|
||||
.extension-file section:first-child {
|
||||
/* Add a border equal to the number of featured extensions - 1 */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -36,6 +36,10 @@ function JSprojectLoaded() {
|
|||
loadExtensionQueue();
|
||||
}
|
||||
|
||||
function JSshowExtensionDialog() {
|
||||
showModal("dialogs");
|
||||
}
|
||||
|
||||
var extensionQueue = [];
|
||||
function handleParameters() {
|
||||
var project;
|
||||
|
|
@ -198,36 +202,31 @@ function loadFromURLParameter() {
|
|||
}
|
||||
|
||||
|
||||
/* Popovers */
|
||||
/* Modals */
|
||||
|
||||
function getOrCreateFromTemplate(elementId, templateId, appendTo, initialStyle) {
|
||||
if (initialStyle === undefined) {
|
||||
initialStyle = {};
|
||||
}
|
||||
if (appendTo) {
|
||||
appendTo = "body";
|
||||
}
|
||||
function getOrCreateFromTemplate(elementId, templateId, elementType, appendTo, wrapper) {
|
||||
elementType = elementType ? elementType : "div";
|
||||
var $element = $("#" + elementId);
|
||||
if (!$element.length) {
|
||||
$template = $("#" + templateId);
|
||||
$element = $("<dialog></dialog>")
|
||||
$element = $("<"+elementType+"></"+elementType+">")
|
||||
.attr("id", elementId)
|
||||
.html($template.html())
|
||||
.appendTo(appendTo);
|
||||
.html($template.html());
|
||||
if (wrapper) $element.wrapInner(wrapper);
|
||||
$element.appendTo(appendTo)
|
||||
}
|
||||
$element.css(initialStyle);
|
||||
return $element;
|
||||
};
|
||||
|
||||
function enableOverlay(forZIndex) {
|
||||
var overlayId = "popover-overlay";
|
||||
var overlayId = "modal-overlay";
|
||||
var $overlay = $("#" + overlayId);
|
||||
if (!$overlay.length) {
|
||||
$overlay = $("<div></div>")
|
||||
.attr("id", overlayId)
|
||||
.appendTo("body")
|
||||
.click(function(){
|
||||
$(this).trigger("popover:exit");
|
||||
$(this).trigger("modal:exit");
|
||||
});
|
||||
}
|
||||
$overlay.css({
|
||||
|
|
@ -244,34 +243,38 @@ function enableOverlay(forZIndex) {
|
|||
return $overlay;
|
||||
}
|
||||
|
||||
$("[data-action='popover']").click(function(e){
|
||||
function showModal(templateId) {
|
||||
/*
|
||||
* Usage:
|
||||
* <a href="#content" data-action="popover" data-template="id-for-content">Popup</a>
|
||||
*
|
||||
* Copies the HTML referenced by data-template into a new element,
|
||||
* with id="popover-[template value]" and creates an overlay on the
|
||||
* with id="modal-[template value]" and creates an overlay on the
|
||||
* page, which when clicked will close the popup.
|
||||
*/
|
||||
|
||||
e.preventDefault();
|
||||
var templateId = $(this).data("template");
|
||||
var popoverId = "popover-" + templateId;
|
||||
var zIndex = 100;
|
||||
var $overlay = enableOverlay(zIndex);
|
||||
var $popover = getOrCreateFromTemplate(
|
||||
popoverId, templateId, "body", {
|
||||
position: "fixed",
|
||||
display: "block",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
"z-index": zIndex,
|
||||
});
|
||||
$(document).on("popover:exit", function(){
|
||||
$overlay.css({display: 'none'});
|
||||
$popover.css({display: 'none'});
|
||||
var modalId = "modal-" + templateId;
|
||||
$modalwrapper = $("<div class='modal-fade-screen'><div class='modal-inner'></div></div>");
|
||||
var $modal = getOrCreateFromTemplate(modalId, templateId, "dialog", "body", $modalwrapper);
|
||||
$modal.addClass("modal");
|
||||
$(".modal-fade-screen", $modal)
|
||||
.addClass("visible")
|
||||
.click(function(e){$(this).trigger("modal:exit")});
|
||||
$(".modal-inner", $modal).click(function(e){e.stopPropagation();})
|
||||
$("body").addClass("modal-open");
|
||||
$(document).on("modal:exit", function(){
|
||||
$("body").removeClass("modal-open");
|
||||
$(".modal-fade-screen", $modal).removeClass("visible");
|
||||
$(this).off();
|
||||
});
|
||||
}
|
||||
|
||||
$("[data-action='modal']").click(function(e){
|
||||
/*
|
||||
* Usage:
|
||||
* <a href="#content" data-action="modal" data-template="id-for-content">Popup</a>
|
||||
*/
|
||||
|
||||
e.preventDefault();
|
||||
showModal($(this).data("template"));
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
@import "lists";
|
||||
@import "tables";
|
||||
@import "typography";
|
||||
@import "modal";
|
||||
|
||||
dialog {
|
||||
display: block;
|
||||
|
|
|
|||
128
sass/base/_modal.scss
Normal file
128
sass/base/_modal.scss
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
.modal {
|
||||
$base-border-color: gainsboro !default;
|
||||
$base-border-radius: 3px !default;
|
||||
$base-background-color: white !default;
|
||||
$base-font-size: 1em !default;
|
||||
$base-line-height: 1.5em !default;
|
||||
$action-color: #477DCA !default;
|
||||
$dark-gray: #333 !default;
|
||||
$light-gray: #DDD !default;
|
||||
$medium-screen: em(640) !default;
|
||||
$large-screen: em(860) !default;
|
||||
$base-font-color: $dark-gray !default;
|
||||
$modal-padding: 3em;
|
||||
$modal-background: $base-background-color;
|
||||
$modal-close-color: $light-gray;
|
||||
$modal-image-height: 135px;
|
||||
$modal-image-width: $modal-image-height;
|
||||
$modal-trigger-image-width: 300px;
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
label img {
|
||||
border-radius: $modal-trigger-image-width / 2;
|
||||
display: block;
|
||||
max-width: $modal-trigger-image-width;
|
||||
}
|
||||
|
||||
.modal-state {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-trigger {
|
||||
@include button(flat, $action-color);
|
||||
padding: 0.8em 1em;
|
||||
}
|
||||
|
||||
.modal-fade-screen { // overlay
|
||||
@include transition(opacity 0.25s ease);
|
||||
@include position(fixed, 0px 0px 0px 0px);
|
||||
background: rgba(0,0,0, 0.85);
|
||||
opacity: 0;
|
||||
padding-top: 0.6em;
|
||||
text-align: left;
|
||||
visibility: hidden;
|
||||
z-index: 99999999999;
|
||||
|
||||
@include media($large-screen) {
|
||||
padding-top: 10em;
|
||||
}
|
||||
|
||||
.modal-bg {
|
||||
@include position(absolute, 0px 0px 0px 0px);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
@include position(absolute, ($modal-padding /2) ($modal-padding /2) null null);
|
||||
@include size(1.5em);
|
||||
background: $modal-background;
|
||||
cursor: pointer;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
@include position(absolute, 3px 3px 0 50%);
|
||||
@include transform(rotate(45deg));
|
||||
@include size(0.15em 1.5em);
|
||||
background: $modal-close-color;
|
||||
content: '';
|
||||
display: block;
|
||||
margin: -3px 0 0 -1px;
|
||||
}
|
||||
|
||||
&:hover:after,
|
||||
&:hover:before {
|
||||
background: darken($modal-close-color, 10%);
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include transform(rotate(-45deg));
|
||||
}
|
||||
}
|
||||
|
||||
.modal-inner {
|
||||
@include transition(opacity 0.25s ease);
|
||||
background: $modal-background;
|
||||
border-radius: $base-border-radius;
|
||||
padding: $modal-padding / 2;
|
||||
position: relative;
|
||||
@include outer-container;
|
||||
|
||||
.modal-content {
|
||||
color: $base-font-color;
|
||||
@include columns(2 8em);
|
||||
}
|
||||
|
||||
a.cta {
|
||||
color: white;
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
margin-top: 1em;
|
||||
|
||||
&:last-child {
|
||||
padding: 0 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-state:checked + .modal-fade-screen,
|
||||
.modal-fade-screen.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.modal-state:checked + .modal-fade-screen .modal-inner,
|
||||
.modal-fade-screen.visible .modal-inner {
|
||||
top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Based on code by Kasper Mikiewicz
|
||||
|
|
@ -25,7 +25,7 @@ article h1 {
|
|||
font-size: $h1-font-size;
|
||||
}
|
||||
|
||||
article h2 {
|
||||
article h2, dialog h2 {
|
||||
font-size: $h2-font-size;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,12 +40,19 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
#dialogs {
|
||||
#dialogs, #modal-dialogs .modal-inner {
|
||||
@include row();
|
||||
dialog {
|
||||
@include span-columns(4);
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#modal-dialogs .modal-inner {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.extension-file {
|
||||
section:first-child {
|
||||
|
|
|
|||
Loading…
Reference in a new issue