aziascreations/Web-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reworked wedge element, Fixed code copy button, Silenced SplideJS error for now

Browse Source 
Update composer.php, common.json, and 8 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2023-12-20 00:24:52 +01:00
parent 0f63ab3371
commit 44a05eb73a
10 changed files with 118 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
commons/composer.php
View File

@@ -756,6 +756,10 @@ class ComposerElement {
// Defining the highlight language. // Defining the highlight language.
$_language_class = is_null($this->codeLanguage) ? "nohighlight" : "language-" . $this->codeLanguage; $_language_class = is_null($this->codeLanguage) ? "nohighlight" : "language-" . $this->codeLanguage;
if($this->codeCopyable) {
$_language_class .= ' p-relative';
}
// Opening the code element. // Opening the code element.
// Note: The "mt-10" may have to be removed if it clashes with 'no-margin-top' ! // Note: The "mt-10" may have to be removed if it clashes with 'no-margin-top' !
$htmlCode .= '<div class="code ' . $this->get_modifiers_classes() . $htmlCode .= '<div class="code ' . $this->get_modifiers_classes() .
@@ -772,7 +776,9 @@ class ComposerElement {
} }
if($this->codeCopyable) { if($this->codeCopyable) {
$htmlCode .= '<div class="container-card-fold primary fold-top-right js-code-copy"><i class="fad fa-copy"></i></div>'; $htmlCode .= '<div class="wedge wedge-tr primary js-code-copy border border-t-0 border-r-0 rbl-m p-xxxs px-xs wedge-shadow">';
$htmlCode .= '<i class="fad fa-copy"></i> ' . localize("common.action.copy");
$htmlCode .= '</div>';
} }
// Closing code element. // Closing code element.

2
commons/strings/en/common.json
View File

@@ -1,3 +1,3 @@
{ {
"common.action.copy": "Copy"
} }

2
commons/strings/fr/common.json
View File

@@ -1,3 +1,3 @@
{ {
"common.action.copy": "Copier"
} }

50
resources/NibblePoker/js/nibblepoker-code.js
View File

@@ -1,7 +1,6 @@
// Highlights the code blocks when included on a page. // 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 // 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. // in a script element without using an external .js file.
Array.from(document.getElementsByClassName("code")).forEach(eCodeContainer => { Array.from(document.getElementsByClassName("code")).forEach(eCodeContainer => {
let language = null; 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. // 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 // 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. // reading each of its children with the "code-line" class.
document.addEventListener("DOMContentLoaded", () => {
Array.from(document.getElementsByClassName("js-code-copy")).forEach(eCodeCopyButton => { //let codeCopyButtonCount = 0;
let eParentCodeBlock = eCodeCopyButton;
while(eParentCodeBlock != null &&!eParentCodeBlock.classList.contains("code") && Array.from(document.getElementsByClassName("js-code-copy")).forEach(eCodeCopyButton => {
eParentCodeBlock.nodeName.toLowerCase() !== "code") { let eParentCodeBlock = eCodeCopyButton;
eParentCodeBlock = eParentCodeBlock.parentElement;
} 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) { //console.debug("Added code copying to " + codeCopyButtonCount + " button(s)");
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);
};
}
});

23
resources/NibblePoker/js/nibblepoker-splide.js
View File

@@ -1,14 +1,19 @@
// Creating the galleries with SplideJs // Creating the galleries with SplideJs
window.addEventListener('load', function() { window.addEventListener('load', function() {
new Splide( '.splide', { try {
perPage: 2, new Splide( '.splide', {
cover: true, perPage: 2,
heightRatio: 0.4, cover: true,
breakpoints: { heightRatio: 0.4,
768: { breakpoints: {
perPage: 1, 768: {
perPage: 1,
},
}, },
}, }).mount();
} ).mount(); } catch(err) {
console.log("Unable to setup Splide !");
console.log(err);
}
}); });

5
resources/NibblePoker/scss/core/position.scss Normal file
View File

@@ -0,0 +1,5 @@
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
.p-relative {
position: relative;
}

3
resources/NibblePoker/scss/core/spacing/global.scss
View File

@@ -40,6 +40,9 @@
/* Utilities > Spacing > Global > Manual Extras */ /* Utilities > Spacing > Global > Manual Extras */
.p-xxxs {
padding: calc(#{$margin-base-size} * 0.125);
}
.p-xxs { .p-xxs {
padding: calc(#{$margin-base-size} * 0.25); padding: calc(#{$margin-base-size} * 0.25);
} }

1
resources/NibblePoker/scss/nibblepoker.scss
View File

@@ -27,6 +27,7 @@
@import 'core/text'; @import 'core/text';
@import 'core/containers'; @import 'core/containers';
@import 'core/display'; @import 'core/display';
@import 'core/position';
/* Core > Rounding */ /* Core > Rounding */
@import 'core/rounding/global'; @import 'core/rounding/global';

149
resources/NibblePoker/scss/site/wedge.scss
View File

@@ -4,116 +4,75 @@
.wedge { .wedge {
position: absolute; position: absolute;
bottom: 0; top: 0;
right: 0; right: 0;
width: 2.5rem;
height: 2.5rem;
clip-path: polygon(100% 0, 0 100%, 100% 100%); color: #{$color-text-regular-normal};
border-radius: var(--base-border-radius) !important; background-color: #{$color-background-button};
//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);
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
&.primary { //opacity: 0.875;
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);
}
&.secondary { // https://codepen.io/setswon/pen/VJeXXq
color: var(--dm-button-secondary-text-color); // Using a value of ~0.35 feels sluggish.
background-color: var(--dm-button-secondary-bg-color); //transition: color 0.25s ease;
background-image: var(--dm-button-secondary-bg-image); //transition-timing-function: cubic-bezier(.47,1.64,.41,.8);
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;
}
}
&:hover { &:hover {
width: 3rem; background-color: #{$color-background-button-hover};
height: 3rem; }
opacity: 0.8;
&.wedge-shadow {
i { box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
bottom: 0.325em; }
right: 0.325rem;
&.primary {
&.r-45 { background-color: #{$color-background-button-primary};
// Small fix &:hover {
right: 0.7rem; background-color: #{$color-background-button-primary-hover};
}
} }
} }
// Extra rule for mobile &.success {
// If it doesn't work, use "768px" ! background-color: #{$color-background-button-success};
@media (max-width: 576px) { &:hover {
width: 3.5rem; background-color: #{$color-background-button-success-hover};
height: 3.5rem;
opacity: 0.8;
i {
bottom: 0.325em;
right: 0.325rem;
&.r-45 {
// Small fix
right: 0.7rem;
}
} }
} }
&.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; top: 0;
clip-path: polygon(0 0, 100% 0, 100% 100%); right: 0;
}
i {
top: 0.3em; &.wedge-br {
right: 0.3rem; bottom: 0;
} right: 0;
}
&:hover i {
top: 0.4rem; &.wedge-tl {
right: 0.4rem; top: 0;
} left: 0;
}
&.wedge-bl {
bottom: 0;
left: 0;
} }
} }

6
resources/NibblePoker/scss/variables.scss
View File

@@ -267,8 +267,10 @@ $color-link-blue-hover: #{$color-apollo-05};
$color-input-glow: $color-apollo-02; $color-input-glow: $color-apollo-02;
$color-wedge-blue-background: $color-apollo-03; //$color-wedge-blue-background: $color-apollo-03;
$color-wedge-blue-border: $color-apollo-02;
// 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-body: $color-apollo-custom-00;
//$color-background-main: $color-apollo-custom-02; //$color-background-main: $color-apollo-custom-02;