From e3a322c2228c1c7a8497331e5afb053670b68674 Mon Sep 17 00:00:00 2001
From: Marina Dali <marina.dali@schukai.com>
Date: Thu, 20 Mar 2025 07:44:22 +0100
Subject: [PATCH] feat: #301 breakpoints monster-slider
---
development/config/import.mjs | 6 ++--
development/issues/closed/239.html | 6 ++--
development/issues/open/301.html | 53 ++++++++++++++++++++++++++++++
3 files changed, 59 insertions(+), 6 deletions(-)
create mode 100644 development/issues/open/301.html
diff --git a/development/config/import.mjs b/development/config/import.mjs
index e258d899b..32c7fdde3 100644
--- a/development/config/import.mjs
+++ b/development/config/import.mjs
@@ -1,6 +1,6 @@
-export const projectRoot = "/home/vs/workspaces/oss/monster/monster";
-export const sourcePath = "/home/vs/workspaces/oss/monster/monster/source";
-export const developmentPath = "/home/vs/workspaces/oss/monster/monster/development";
+export const projectRoot = "/home/md/projekte/workspaces/libraries/monster";
+export const sourcePath = "/home/md/projekte/workspaces/libraries/monster/source";
+export const developmentPath = "/home/md/projekte/workspaces/libraries/monster/development";
export const pnpxBin = "/nix/store/sxw7i3pyw8v1ycw2sph0zq2byh1prrwm-nodejs-20.18.1/bin/npx";
export const nodeBin = "/nix/store/057dsl3wh2q8syy5sis0x9y5dksl63mv-nodejs-23.8.0/bin/node";
export const license = "/**" + "\n" +
diff --git a/development/issues/closed/239.html b/development/issues/closed/239.html
index c34634195..80f7f5b75 100644
--- a/development/issues/closed/239.html
+++ b/development/issues/closed/239.html
@@ -30,13 +30,13 @@
<path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1"/>
</svg>
</div>
- <div class="slide" style=";background-color: var(--monster-bg-color-primary-2); color: var(--monster-color-primary-2)">
+ <div class="slide" style="background-color: var(--monster-bg-color-primary-2); color: var(--monster-color-primary-2)">
<div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 1</div>
</div>
- <div class="slide" style=";background-color: var(--monster-bg-color-secondary-3); color: var(--monster-color-secondary-3)">
+ <div class="slide" style="background-color: var(--monster-bg-color-secondary-3); color: var(--monster-color-secondary-3)">
<div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 2</div>
</div>
- <div class="slide" style=";background-color: var(--monster-bg-color-primary-4); color: var(--monster-color-primary-4)">
+ <div class="slide" style="background-color: var(--monster-bg-color-primary-4); color: var(--monster-color-primary-4)">
<div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 3</div>
</div>
</monster-slider>
diff --git a/development/issues/open/301.html b/development/issues/open/301.html
new file mode 100644
index 000000000..f1e231d20
--- /dev/null
+++ b/development/issues/open/301.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Slider view more slides #239</title>
+ <script src="./239.mjs" type="module"></script>
+</head>
+<body>
+<h1>Slider view more slides #239</h1>
+<ul>
+ <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/239">Issue #239</a></li>
+ <li><a href="/">Back to overview</a></li>
+</ul>
+<main style="width: 1200px">
+
+ <div class="container">
+ <monster-slider style="height:360px"
+
+ data-monster-option-slides-0="1"
+ data-monster-option-slides-600="2"
+ data-monster-option-slides-1200="3"
+ data-monster-option-slides-1800="4">
+
+ <div slot="next">
+ <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
+ class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
+ <path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1"/>
+ </svg>
+ </div>
+ <div slot="prev">
+ <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor"
+ class="bi bi-arrow-left-square-fill" viewBox="0 0 16 16">
+ <path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1"/>
+ </svg>
+ </div>
+ <div class="slide" style="background-color: var(--monster-bg-color-primary-2); color: var(--monster-color-primary-2)">
+ <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 1</div>
+ </div>
+ <div class="slide" style="background-color: var(--monster-bg-color-secondary-3); color: var(--monster-color-secondary-3)">
+ <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 2</div>
+ </div>
+ <div class="slide" style="background-color: var(--monster-bg-color-primary-4); color: var(--monster-color-primary-4)">
+ <div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 3</div>
+ </div>
+ </monster-slider>
+ </div>
+
+
+
+</main>
+</body>
+</html>
--
GitLab