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.
$_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 .= '<div class="code ' . $this->get_modifiers_classes() .
@@ -772,7 +776,9 @@ class ComposerElement {
}
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.

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"
}

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

@@ -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.
document.addEventListener("DOMContentLoaded", () => {
//let codeCopyButtonCount = 0;
Array.from(document.getElementsByClassName("js-code-copy")).forEach(eCodeCopyButton => {
let eParentCodeBlock = eCodeCopyButton;
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;
}
while(eParentCodeBlock != null &&!eParentCodeBlock.classList.contains("code") &&
eParentCodeBlock.nodeName.toLowerCase() !== "code") {
eParentCodeBlock = eParentCodeBlock.parentElement;
}
if(eParentCodeBlock != null) {
let code = "";
if(eParentCodeBlock != null) {
let code = "";
Array.from(eParentCodeBlock.children).forEach(eCodeLine => {
if(eCodeLine.classList.contains("code-line")) {
code += eCodeLine.textContent + "\n"
}
});
Array.from(eParentCodeBlock.children).forEach(eCodeLine => {
if(eCodeLine.classList.contains("code-line")) {
code += eCodeLine.textContent + "\n"
}
});
eCodeCopyButton.onclick = function() {
navigator.clipboard.writeText(code);
};
}
eCodeCopyButton.onclick = function() {
navigator.clipboard.writeText(code);
};
}
//codeCopyButtonCount++;
});
//console.debug("Added code copying to " + codeCopyButtonCount + " button(s)");
});

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

@@ -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);
}
});

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 */
.p-xxxs {
padding: calc(#{$margin-base-size} * 0.125);
}
.p-xxs {
padding: calc(#{$margin-base-size} * 0.25);
}

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

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

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

@@ -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;
//opacity: 0.875;
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 {
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;
background-color: #{$color-background-button-hover};
}
i {
bottom: 0.325em;
right: 0.325rem;
&.wedge-shadow {
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}
&.r-45 {
// Small fix
right: 0.7rem;
}
&.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%);
right: 0;
}
i {
top: 0.3em;
right: 0.3rem;
}
&.wedge-br {
bottom: 0;
right: 0;
}
&:hover i {
top: 0.4rem;
right: 0.4rem;
}
&.wedge-tl {
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-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;