amelioration affichage mobile + maj du contenu vitrine

affichage des bulles plus ergonomique sur un format mobile
This commit is contained in:
Ploush 2026-06-10 16:33:00 +02:00
parent 95483c552a
commit a302812e84
4 changed files with 49 additions and 29 deletions

View file

@ -1,22 +1,22 @@
import { Controller } from '@hotwired/stimulus'; import { Controller } from '@hotwired/stimulus';
export default class extends Controller { export default class extends Controller {
static targets = ['link']; static targets = ['text'];
copy(event) { copy(event) {
event.preventDefault(); event.preventDefault();
const text = this.linkTarget.getAttribute('data-copy-text') || this.linkTarget.textContent; const text = this.textTarget.getAttribute('data-copy-text-value') || this.textTarget.textContent;
navigator.clipboard.writeText(text).then(() => { navigator.clipboard.writeText(text).then(() => {
// Feedback visuel : changement temporaire du texte/couleur // Feedback visuel : changement temporaire du texte/couleur
const originalText = this.linkTarget.textContent; const originalText = this.textTarget.textContent;
this.linkTarget.textContent = '✓ Copié !'; this.textTarget.textContent = '✓ Copié !';
this.linkTarget.classList.add('copied'); this.textTarget.classList.add('copied');
// Restaurer après 2 secondes // Restaurer après 2 secondes
setTimeout(() => { setTimeout(() => {
this.linkTarget.textContent = originalText; this.textTarget.textContent = originalText;
this.linkTarget.classList.remove('copied'); this.textTarget.classList.remove('copied');
}, 2000); }, 2000);
}).catch(err => { }).catch(err => {
console.error('Erreur lors de la copie:', err); console.error('Erreur lors de la copie:', err);

View file

@ -102,7 +102,6 @@ main {
.copy-link:hover { .copy-link:hover {
background: var(--pill-bg-light); background: var(--pill-bg-light);
text-decoration: underline;
} }
[data-theme="dark"] .copy-link:hover { [data-theme="dark"] .copy-link:hover {

View file

@ -37,18 +37,6 @@
margin: 0; margin: 0;
} }
.bulle-container>.bulle.bulle-all-col {
grid-column: 1 / -1;
}
.bulle-container>.bulle.bulle-2-col {
grid-column: span 2;
}
.bulle-container>.bulle.bulle-2-row {
grid-row: span 2;
}
/* HEADER */ /* HEADER */
.bulle-header { .bulle-header {
@ -71,3 +59,25 @@
[data-theme="dark"] .bulle-title { [data-theme="dark"] .bulle-title {
color: var(--text-dark); color: var(--text-dark);
} }
@media screen and (max-width: 768px) {
.bulle-container {
grid-template-columns: repeat(1, 1fr);
}
}
@media screen and (min-width: 769px){
.bulle-container>.bulle.bulle-all-col {
grid-column: 1 / -1;
}
.bulle-container>.bulle.bulle-2-col {
grid-column: span 2;
}
.bulle-container>.bulle.bulle-2-row {
grid-row: span 2;
}
}

View file

@ -10,18 +10,33 @@
{% block main %} {% block main %}
<div class="bulle-container"> <div class="bulle-container">
<section class="bulle bulle-all-col flex-column align-items-center"> <section class="bulle bulle-all-col flex-column align-items-center">
<h1 class="text-center">Bienvenue sur le serveur de Ploush</h1> <h1 class="text-center">Bienvenue sur le serveur de Ploush</h1>
<p class="text-center">Le serveur est accessible a l'adresse : <p class="text-center">Le serveur est accessible a l'adresse :
<span class="copy-link" data-controller="copy-link" <span class="copy-link" data-controller="copy-text"
data-action="click->copy-link#copy" data-copy-link-target="link" data-action="click->copy-text#copy" data-copy-text-target="text"
data-copy-text="ploush.top" data-copy-text-value="ploush.top"
>ploush.top</span></p> >ploush.top</span></p>
</section> </section>
<section class="bulle bulle-2-col bulle-2-row"> <section class="bulle bulle-2-col bulle-2-row">
<h4>Bienvenue sur le serveur de Ploush</h4> <h4>Conseil java flags</h4>
<p>Celui-ci est accessible a l'adresse <span class="copy-link" data-controller="copy-link" data-action="click->copy-link#copy" data-copy-link-target="link" data-copy-text="ploush.top">ploush.top</span></p> <p>Afin d'optimiser votre VM java, vous pouvez utiliser les flags suivants :</p>
<ul>
<li>
<span class="copy-link" data-controller="copy-text"
data-action="click->copy-text#copy" data-copy-text-target="text"
data-copy-text-value="-Xms4G -Xmx8G -XX:+UnlockExperimentalVMOptions -XX:+UseShenandoahGC -XX:ShenandoahGCMode=iu -XX:ShenandoahGarbageThreshold=15 -XX:ShenandoahInitFreeThreshold=70 -XX:+DisableExplicitGC -XX:+AlwaysPreTouch -XX:+PerfDisableSharedMem -XX:+UseTransparentHugePages -XX:CICompilerCount=4 -XX:+OptimizeStringConcat -XX:ReservedCodeCacheSize=512m -XX:+SegmentedCodeCache -XX:-OmitStackTraceInFastThrow -Dfile.encoding=UTF-8 -Dfml.ignorePatchDiscrepancies=true"
>flags compatible OpenJDK</span>
</li>
<li>
<span class="copy-link" data-controller="copy-text"
data-action="click->copy-text#copy" data-copy-text-target="text"
data-copy-text-value="-Xms6G -Xmx6G -XX:+UnlockExperimentalVMOptions -XX:+UseZGC -XX:+ZGenerational -XX:+DisableExplicitGC -XX:+AlwaysPreTouch -XX:+PerfDisableSharedMem -XX:+UseTransparentHugePages -XX:CICompilerCount=2 -XX:+OptimizeStringConcat -XX:ReservedCodeCacheSize=512m -XX:+SegmentedCodeCache -XX:-OmitStackTraceInFastThrow -Dfile.encoding=UTF-8 -Dfml.ignorePatchDiscrepancies=true -Xlog:gc:file=logs/gc.log:time,uptime:filecount=5,filesize=10m"
>flags compatible Oracle (Java "classique")</span>
</li>
</ul>
</section> </section>
<section class="bulle bulle-2-col"> <section class="bulle bulle-2-col">
@ -29,9 +44,5 @@
<p>Afin de vous faciliter l'installation des mods, je vous conseille vivement d'utiliser <a href="https://prismlauncher.org/" target="_blank" rel="noopener noreferrer">prism launcher</a> .</p> <p>Afin de vous faciliter l'installation des mods, je vous conseille vivement d'utiliser <a href="https://prismlauncher.org/" target="_blank" rel="noopener noreferrer">prism launcher</a> .</p>
</section> </section>
<section class="bulle">
<h4>Bienvenue sur le serveur de Ploush</h4>
<p>Celui-ci est accessible a l'adresse <span class="copy-link" data-controller="copy-link" data-action="click->copy-link#copy" data-copy-link-target="link" data-copy-text="ploush.top">ploush.top</span></p>
</section>
</div> </div>
{% endblock %} {% endblock %}