From ff62d54bfca6b1f7432bec8e377d6152b9612db5 Mon Sep 17 00:00:00 2001 From: Zeyad Saleh Date: Thu, 16 Apr 2020 18:30:17 -0700 Subject: [PATCH] CSS changes for tutorial ui --- pixel.css | 51 +++++++++++++++++++------------------------- source/glossary.js | 6 +++--- source/tutorial.js | 4 ++-- source/ui-manager.js | 6 +++--- 4 files changed, 30 insertions(+), 37 deletions(-) diff --git a/pixel.css b/pixel.css index a08cc027..9d278ff7 100644 --- a/pixel.css +++ b/pixel.css @@ -290,20 +290,20 @@ kbd { height: 100%; width: 100%; opacity: 0.6; + overflow: hidden; } /* The Modal (background) */ .modal { + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + overflow-x: scroll; display: none; /* Hidden by default */ - position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ - padding-top: 5%; /* Location of the box */ - padding-left: 30%; /* Location of the box */ - left: 0; - top: 0; - width: 40%; - height: 100%; /* Full height */ - overflow: auto; /* Enable scroll if needed */ + padding: 10%; } /* Modal Content */ @@ -312,8 +312,6 @@ kbd { margin: auto; padding: 0; background: white; - border-radius: 20px; - width: 80%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; @@ -342,39 +340,34 @@ kbd { .modal-footer:hover, .modal-footer:focus { - color: #000; + background: #ccc; text-decoration: none; cursor: pointer; } .modal-header { - padding: 2px 16px; - color: white; + padding: 1px; + color: black; text-align: center; - background: rgb(47, 47, 47); /* Old browsers */ - background: -moz-linear-gradient(bottom, rgb(13, 13, 13) 0%, rgb(84, 84, 84) 50%, rgb(74, 74, 74) 51%, rgb(189, 189, 189) 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(bottom, rgb(13, 13, 13) 0%, rgb(84, 84, 84) 50%, rgb(74, 74, 74) 51%, rgb(189, 189, 189) 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(to top, rgb(13, 13, 13) 0%, rgb(84, 84, 84) 50%, rgb(74, 74, 74) 51%, rgb(189, 189, 189) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */ - border-top-left-radius: 20px; - border-top-right-radius: 20px; + font-family: sans-serif; + font-variant: all-small-caps; } .modal-body { padding: 2px 16px; + font-family: sans-serif; + font-size: small; + padding-bottom: 4%; } .modal-footer { padding: 2px 16px; - color: white; + color: black; text-align: center; - background: rgb(47, 47, 47); /* Old browsers */ - background: -moz-linear-gradient(bottom, rgb(13, 13, 13) 0%, rgb(84, 84, 84) 50%, rgb(74, 74, 74) 51%, rgb(155, 155, 155) 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(bottom, rgb(13, 13, 13) 0%, rgb(84, 84, 84) 50%, rgb(74, 74, 74) 51%, rgb(155, 155, 155) 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(to top, rgb(13, 13, 13) 0%, rgb(84, 84, 84) 50%, rgb(74, 74, 74) 51%, rgb(155, 155, 155) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */ - border-bottom-left-radius: 20px; - border-bottom-right-radius: 20px; + font-family: sans-serif; + font: status-bar; + background: gainsboro; + font-variant: all-small-caps; } li:not(:last-child) { @@ -476,4 +469,4 @@ button { position: absolute; right: 10px; bottom: 60px; -} \ No newline at end of file +} diff --git a/source/glossary.js b/source/glossary.js index 513b5a92..934769bc 100644 --- a/source/glossary.js +++ b/source/glossary.js @@ -42,7 +42,7 @@ export class Glossary modalFooter.setAttribute("id", "modal-footer"); let close = document.createElement('h2'); - close.innerHTML = "Got It!"; + close.innerHTML = "Dismiss"; modal.appendChild(this.modalContent); this.modalContent.appendChild(modalHeader); @@ -72,7 +72,7 @@ export class Glossary let glossaryP = document.createElement('p'); glossaryP.innerHTML = "The following is a glossary of available hotkeys. To learn how to use them in more detail, please consult the Pixel.js " + 'wiki' + " for details on the different export buttons and more information."; - + let hotkeyGlossary = document.createElement('ul'); hotkeyGlossary.setAttribute("style", "list-style-type:none;"); @@ -159,4 +159,4 @@ export class Glossary this.modalContent.insertBefore(this.getModalBody(pageIndex), document.getElementById("modal-footer")); } -} \ No newline at end of file +} diff --git a/source/tutorial.js b/source/tutorial.js index d565af06..bb09a845 100644 --- a/source/tutorial.js +++ b/source/tutorial.js @@ -42,7 +42,7 @@ export class Tutorial modalFooter.setAttribute("id", "modal-footer"); let close = document.createElement('h2'); - close.innerHTML = "Got It!"; + close.innerHTML = "Dismiss"; modal.appendChild(this.modalContent); this.modalContent.appendChild(modalHeader); @@ -95,7 +95,7 @@ export class Tutorial switch (tutorialPageIndex) { case 0: - tutorialP.innerHTML = "Welcome to Pixel.js, this is a tutorial that serves as a reminder of the available tools.
For a complete, detailed tutorial, visit the " + 'Full Tutorial Page' + " (right-click -> Open Link in New Tab).

Click on Got It! to exit this tutorial."; + tutorialP.innerHTML = "Welcome to Pixel.js, this is a tutorial that serves as a reminder of the available tools.
For a complete, detailed tutorial, visit the " + 'full tutorial page' + "

Click on \"Dismiss\" to exit this tutorial."; img.src = "https://github.com/DDMAL/Pixel.js/wiki/assets/01.gif"; break; case 1: diff --git a/source/ui-manager.js b/source/ui-manager.js index 0e1f561e..fd503224 100644 --- a/source/ui-manager.js +++ b/source/ui-manager.js @@ -27,7 +27,7 @@ export class UIManager this.placeLayerCanvasesInDiva(layers); this.createUndoButton(); this.createRedoButton(); - // Enable buttons only if in standalone Pixel + // Enable buttons only if in standalone Pixel if (typeof numberInputLayers === 'undefined') { this.createDeleteLayerButton(); this.createCreateLayerButton(); @@ -45,7 +45,7 @@ export class UIManager this.destroyBrushSizeSelector(); this.destroyUndoButton(); this.destroyRedoButton(); - // Enable buttons only if in standalone Pixel + // Enable buttons only if in standalone Pixel if (typeof numberInputLayers === 'undefined') { this.destroyDeleteLayerButton(); this.destroyCreateLayerButton(); @@ -940,7 +940,7 @@ export class UIManager modalFooter.setAttribute("class", "modal-footer"); let close = document.createElement('h2'); - close.innerHTML = "Got It!"; + close.innerHTML = "Dismiss"; hotkeyGlossary.appendChild(LayerSelect); hotkeyGlossary.appendChild(brushTool);