diff --git a/commons/composer.php b/commons/composer.php index c429ba8..7d88abc 100644 --- a/commons/composer.php +++ b/commons/composer.php @@ -756,6 +756,10 @@ class ComposerElement { // Defining the highlight language. $_language_class = is_null($this->codeLanguage) ? "nohighlight" : "language-" . $this->codeLanguage; + if($this->codeCopyable) { + $_language_class .= ' p-relative'; + } + // Opening the code element. // Note: The "mt-10" may have to be removed if it clashes with 'no-margin-top' ! $htmlCode .= '
'; + $htmlCode .= '
'; + $htmlCode .= ' ' . localize("common.action.copy"); + $htmlCode .= '
'; } // Closing code element. diff --git a/commons/strings/en/common.json b/commons/strings/en/common.json index 0e0dcd2..3be5183 100644 --- a/commons/strings/en/common.json +++ b/commons/strings/en/common.json @@ -1,3 +1,3 @@ { - + "common.action.copy": "Copy" } \ No newline at end of file diff --git a/commons/strings/fr/common.json b/commons/strings/fr/common.json index 0e0dcd2..c078702 100644 --- a/commons/strings/fr/common.json +++ b/commons/strings/fr/common.json @@ -1,3 +1,3 @@ { - + "common.action.copy": "Copier" } \ No newline at end of file diff --git a/resources/NibblePoker/js/nibblepoker-code.js b/resources/NibblePoker/js/nibblepoker-code.js index cd544ff..a9fdab2 100644 --- a/resources/NibblePoker/js/nibblepoker-code.js +++ b/resources/NibblePoker/js/nibblepoker-code.js @@ -1,7 +1,6 @@ // Highlights the code blocks when included on a page. // This command is separated in its own file since highlight.js isn't on every page and because I can't use JS // in a script element without using an external .js file. - Array.from(document.getElementsByClassName("code")).forEach(eCodeContainer => { let language = null; @@ -24,26 +23,33 @@ Array.from(document.getElementsByClassName("code")).forEach(eCodeContainer => { // Adding the action to copy the code to elements with the "js-code-copy" class. // The search works by searching the closest parent with the "code" class or that is a "code" element, and then // reading each of its children with the "code-line" class. - -Array.from(document.getElementsByClassName("js-code-copy")).forEach(eCodeCopyButton => { - let eParentCodeBlock = eCodeCopyButton; +document.addEventListener("DOMContentLoaded", () => { + //let codeCopyButtonCount = 0; - while(eParentCodeBlock != null &&!eParentCodeBlock.classList.contains("code") && - eParentCodeBlock.nodeName.toLowerCase() !== "code") { - eParentCodeBlock = eParentCodeBlock.parentElement; - } + Array.from(document.getElementsByClassName("js-code-copy")).forEach(eCodeCopyButton => { + let eParentCodeBlock = eCodeCopyButton; + + while(eParentCodeBlock != null &&!eParentCodeBlock.classList.contains("code") && + eParentCodeBlock.nodeName.toLowerCase() !== "code") { + eParentCodeBlock = eParentCodeBlock.parentElement; + } + + if(eParentCodeBlock != null) { + let code = ""; + + Array.from(eParentCodeBlock.children).forEach(eCodeLine => { + if(eCodeLine.classList.contains("code-line")) { + code += eCodeLine.textContent + "\n" + } + }); + + eCodeCopyButton.onclick = function() { + navigator.clipboard.writeText(code); + }; + } + + //codeCopyButtonCount++; + }); - if(eParentCodeBlock != null) { - let code = ""; - - Array.from(eParentCodeBlock.children).forEach(eCodeLine => { - if(eCodeLine.classList.contains("code-line")) { - code += eCodeLine.textContent + "\n" - } - }); - - eCodeCopyButton.onclick = function() { - navigator.clipboard.writeText(code); - }; - } -}); + //console.debug("Added code copying to " + codeCopyButtonCount + " button(s)"); +}); \ No newline at end of file diff --git a/resources/NibblePoker/js/nibblepoker-splide.js b/resources/NibblePoker/js/nibblepoker-splide.js index affd0b5..494d7af 100644 --- a/resources/NibblePoker/js/nibblepoker-splide.js +++ b/resources/NibblePoker/js/nibblepoker-splide.js @@ -1,14 +1,19 @@ // Creating the galleries with SplideJs window.addEventListener('load', function() { - new Splide( '.splide', { - perPage: 2, - cover: true, - heightRatio: 0.4, - breakpoints: { - 768: { - perPage: 1, + try { + new Splide( '.splide', { + perPage: 2, + cover: true, + heightRatio: 0.4, + breakpoints: { + 768: { + perPage: 1, + }, }, - }, - } ).mount(); + }).mount(); + } catch(err) { + console.log("Unable to setup Splide !"); + console.log(err); + } }); diff --git a/resources/NibblePoker/scss/core/position.scss b/resources/NibblePoker/scss/core/position.scss new file mode 100644 index 0000000..7654052 --- /dev/null +++ b/resources/NibblePoker/scss/core/position.scss @@ -0,0 +1,5 @@ +// NibblePoker.lu CSS - (C) 2023 Bozet Herwin + +.p-relative { + position: relative; +} diff --git a/resources/NibblePoker/scss/core/spacing/global.scss b/resources/NibblePoker/scss/core/spacing/global.scss index b4c9ad3..e25fc24 100644 --- a/resources/NibblePoker/scss/core/spacing/global.scss +++ b/resources/NibblePoker/scss/core/spacing/global.scss @@ -40,6 +40,9 @@ /* Utilities > Spacing > Global > Manual Extras */ +.p-xxxs { + padding: calc(#{$margin-base-size} * 0.125); +} .p-xxs { padding: calc(#{$margin-base-size} * 0.25); } diff --git a/resources/NibblePoker/scss/nibblepoker.scss b/resources/NibblePoker/scss/nibblepoker.scss index 9094904..205a76b 100644 --- a/resources/NibblePoker/scss/nibblepoker.scss +++ b/resources/NibblePoker/scss/nibblepoker.scss @@ -27,6 +27,7 @@ @import 'core/text'; @import 'core/containers'; @import 'core/display'; +@import 'core/position'; /* Core > Rounding */ @import 'core/rounding/global'; diff --git a/resources/NibblePoker/scss/site/wedge.scss b/resources/NibblePoker/scss/site/wedge.scss index 908cc9b..9cadea2 100644 --- a/resources/NibblePoker/scss/site/wedge.scss +++ b/resources/NibblePoker/scss/site/wedge.scss @@ -4,116 +4,75 @@ .wedge { position: absolute; - bottom: 0; + top: 0; right: 0; - width: 2.5rem; - height: 2.5rem; - clip-path: polygon(100% 0, 0 100%, 100% 100%); - border-radius: var(--base-border-radius) !important; - //border-bottom-right-radius: var(--base-border-radius) !important; - overflow: hidden; - - color: var(--dm-button-text-color); - background-color: var(--dm-button-bg-color); - background-image: var(--dm-button-bg-image); - border-color: var(--dm-button-border-color); - opacity: 0.4; - - // https://codepen.io/setswon/pen/VJeXXq - // Using a value of ~0.35 feels sluggish. - transition: width 0.25s ease, height 0.25s ease, opacity 0.2s ease; - transition-timing-function: cubic-bezier(.47,1.64,.41,.8); + color: #{$color-text-regular-normal}; + background-color: #{$color-background-button}; user-select: none; cursor: pointer; - &.primary { - color: white; - - background-color: #{$color-wedge-blue-background}; - border-color: #{$color-wedge-blue-border}; - - //color: var(--dm-button-primary-text-color); - //background-color: var(--dm-button-primary-bg-color); - //background-image: var(--dm-button-primary-bg-image); - //border-color: var(--dm-button-primary-border-color); - } + //opacity: 0.875; - &.secondary { - color: var(--dm-button-secondary-text-color); - background-color: var(--dm-button-secondary-bg-color); - background-image: var(--dm-button-secondary-bg-image); - border-color: var(--dm-button-secondary-border-color); - } - - &.danger { - color: var(--dm-button-secondary-text-color); // White icons looks like shit. - background-color: var(--dm-button-danger-bg-color); - background-image: var(--dm-button-danger-bg-image); - border-color: var(--dm-button-danger-border-color); - } - - i { - position: absolute; - right: 0.2rem; - bottom: 0.2rem; - transition: right 0.25s ease, bottom 0.25s ease; - transition-timing-function: cubic-bezier(.47,1.64,.41,.8); - - &.r-45 { - // Small fix - right: 0.4rem; - } - } + // https://codepen.io/setswon/pen/VJeXXq + // Using a value of ~0.35 feels sluggish. + //transition: color 0.25s ease; + //transition-timing-function: cubic-bezier(.47,1.64,.41,.8); &:hover { - width: 3rem; - height: 3rem; - opacity: 0.8; - - i { - bottom: 0.325em; - right: 0.325rem; - - &.r-45 { - // Small fix - right: 0.7rem; - } + background-color: #{$color-background-button-hover}; + } + + &.wedge-shadow { + box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5); + } + + &.primary { + background-color: #{$color-background-button-primary}; + &:hover { + background-color: #{$color-background-button-primary-hover}; } } - // Extra rule for mobile - // If it doesn't work, use "768px" ! - @media (max-width: 576px) { - width: 3.5rem; - height: 3.5rem; - opacity: 0.8; - - i { - bottom: 0.325em; - right: 0.325rem; - - &.r-45 { - // Small fix - right: 0.7rem; - } + &.success { + background-color: #{$color-background-button-success}; + &:hover { + background-color: #{$color-background-button-success-hover}; } } - &.fold-top-right { + &.error { + background-color: #{$color-background-button-error}; + &:hover { + background-color: #{$color-background-button-error-hover}; + } + } + + &.warning { + background-color: #{$color-background-button-warning}; + &:hover { + background-color: #{$color-background-button-warning-hover}; + } + } + + &.wedge-tr { top: 0; - clip-path: polygon(0 0, 100% 0, 100% 100%); - - i { - top: 0.3em; - right: 0.3rem; - } - - &:hover i { - top: 0.4rem; - right: 0.4rem; - } + right: 0; + } + + &.wedge-br { + bottom: 0; + right: 0; + } + + &.wedge-tl { + top: 0; + left: 0; + } + + &.wedge-bl { + bottom: 0; + left: 0; } } - diff --git a/resources/NibblePoker/scss/variables.scss b/resources/NibblePoker/scss/variables.scss index 0bb1931..4bde92a 100644 --- a/resources/NibblePoker/scss/variables.scss +++ b/resources/NibblePoker/scss/variables.scss @@ -267,8 +267,10 @@ $color-link-blue-hover: #{$color-apollo-05}; $color-input-glow: $color-apollo-02; -$color-wedge-blue-background: $color-apollo-03; -$color-wedge-blue-border: $color-apollo-02; +//$color-wedge-blue-background: $color-apollo-03; + +// Still used for wedges !!! - Nope, it looked bad with the new colors ! +//$color-wedge-blue-border: $color-apollo-02; //$color-background-body: $color-apollo-custom-00; //$color-background-main: $color-apollo-custom-02;