gamv/ds2-core
1
0
Fork 0
Code Issues 10 Releases 9 Activity

Fixes #34 some issues with breakpoints

Browse Source
This commit is contained in:
A McIlwraith
2025-06-10 16:20:24 -04:00
parent 8fe6e39440
commit 5141878b4b
10 changed files with 97 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/patterns/core/breakpoints/index.html → public/patterns/core/breakpoint/index.html
View File

@@ -2,6 +2,13 @@
<html>
<head>
<title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>
@@ -14,8 +21,8 @@
<p>When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. </p>
<tabset id="breakpoints">
<div tab="scss">
<pre class="language-sass">@import "[path-to]/breakpoints";
@include break([breakpoint]) {
<pre class="language-sass">@use "scss/core/breakpoint/breakpoint";
@include breapoint.break([breakpoint]) {
// css here
}</pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
@@ -24,12 +31,13 @@
// default breakpoints match bootstrap 5 breakpoints.
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
@mixin breakpoint-debug {
@mixin debug {
body::before, body::after {
background-color: #555;
color: white;
content: "bigger than extra large";
display: grid;
font-family: sans-serif;
font-size: 25px;
grid-template-columns: auto;
padding: 25px;

7
public/patterns/core/colours/index.html
View File

@@ -2,6 +2,13 @@
<html>
<head>
<title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>

7
public/patterns/core/header/index.html
View File

@@ -2,6 +2,13 @@
<html>
<head>
<title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>

13
public/patterns/core/status/index.html
View File

@@ -2,6 +2,13 @@
<html>
<head>
<title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head>
<body data-prismjs-copy-timeout="1500">
<div class="tab-group" id="status-report">
@@ -52,7 +59,7 @@
<td><span class="status-complete">Complete</span></td>
</tr>
<tr>
<td><a href="./?p=layouts/breakpoints"> Breakpoints</a></td>
<td><a href="./?p=layouts/breakpoint"> Breakpoint</a></td>
<td><span class="status-complete">Complete</span></td>
</tr>
<tr>
@@ -83,7 +90,7 @@
<td colspan="2"><span class="status-complete">Complete (10)</span></td>
</tr>
<tr>
<td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
<td> <a href="./?p=layouts/breakpoint">Breakpoint</a></td>
<td>Layouts</td>
</tr>
<tr>
@@ -136,7 +143,7 @@
<table role="presentation">
<tbody>
<tr>
<td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
<td> <a href="./?p=layouts/breakpoint">Breakpoint</a></td>
<td><span><span class="status-complete">Complete</span></span></td>
<td>Layouts</td>
</tr>

69
public/patterns/core/sticky-note/index.html
View File

@@ -2,6 +2,13 @@
<html>
<head>
<title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>
@@ -279,38 +286,40 @@ const calculateStickyPosition = (s) => {
}
}
export function init(p = document){
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
p.querySelectorAll("sticky-note").forEach((s) => {
if (s.querySelectorAll("svg").length == 0) {
let wrapper = document.createElement("sticky-note-wrapper");
s.parentNode.insertBefore(wrapper, s);
wrapper.appendChild(s);
s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
}
calculateStickyPosition(s);
drag(s);
s.ondblclick = (e) => {
if (e.ctrlKey) {
calculateStickyPosition(s);
} else {
// add one click select
}
}
})
window.onresize = () => {
module.exports = {
init: (p = document) => {
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
let stickies = p.querySelectorAll("sticky-note");
stickies.forEach((s) => {
p.querySelectorAll("sticky-note").forEach((s) => {
if (s.querySelectorAll("svg").length == 0) {
let wrapper = document.createElement("sticky-note-wrapper");
s.parentNode.insertBefore(wrapper, s);
wrapper.appendChild(s);
s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
}
calculateStickyPosition(s);
});
drag(s);
s.ondblclick = (e) => {
if (e.ctrlKey) {
calculateStickyPosition(s);
} else {
// add one click select
}
}
})
window.onresize = () => {
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
let stickies = p.querySelectorAll("sticky-note");
stickies.forEach((s) => {
calculateStickyPosition(s);
});
}
}
}</pre>
</div>

7
public/patterns/core/switch/index.html
View File

@@ -2,6 +2,13 @@
<html>
<head>
<title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>

9
public/patterns/core/tooltip/index.html
View File

@@ -2,6 +2,13 @@
<html>
<head>
<title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>
@@ -187,6 +194,7 @@
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
$font-body: sans-serif !default;
$tooltip-border-radius: .5rem !default;
$tooltip-dark-allow: true !default;
$tooltip-dark-background: #1f2127 !default;
@@ -215,6 +223,7 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
border-radius: $tooltip-border-radius;
color: $tooltip-light-foreground;
filter: $tooltip-light-drop-shadow;
$font-family: $font-body;
font-size: 1rem;
font-weight: 400;
inline-size: max-content;