docs: improve demo on mobile devices and reduce package readmes

simonwep · Jan 20, 2025 · 47d0bca · 47d0bca
1 parent b01ae1f
commit 47d0bca
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 220 deletions.
diff --git a/docs/pages/quickstart.md b/docs/pages/quickstart.md
@@ -49,44 +49,44 @@ const selection = new SelectionArea({
 
 ```css [styles.css]
 .container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-    border-radius: 15px;
-    padding: 15px;
-    margin: 15px 0;
-    user-select: none;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  border-radius: 15px;
+  padding: 10px;
+  margin: 15px 0;
+  user-select: none;
 }
 
 .container div {
-    height: 50px;
-    width: 50px;
-    margin: 3px;
-    background: rgba(66, 68, 90, 0.075);
-    border-radius: 10px;
-    cursor: pointer;
+  height: 50px;
+  width: 50px;
+  margin: 4px;
+  background: rgba(66, 68, 90, 0.075);
+  border-radius: 5px;
+  cursor: pointer;
 }
 
 .container.blue {
-    border: 2px dashed #a8b1ff;
+  border: 2px dashed #a8b1ff;
 }
 
 .container.purple {
-    border: 2px dashed #c8abfa;
+  border: 2px dashed #c8abfa;
 }
 
 .container.blue div.selected {
-    background: #5c73e7;
+  background: #5c73e7;
 }
 
 .container.purple div.selected {
-    background: #a879e6;
+  background: #a879e6;
 }
 
 .selectionArea {
-    background: rgba(102, 110, 255, 0.16);
-    border: 1px solid rgb(62, 99, 221);
-    border-radius: 0.15em;
+  background: rgba(102, 110, 255, 0.16);
+  border: 1px solid rgb(62, 99, 221);
+  border-radius: 0.15em;
 }
 ```
 
@@ -99,21 +99,31 @@ const selection = new SelectionArea({
 
 Which will give you something like this:
 
-<div :class="[$style.container, $style.purple]"/>
+<div ref="container" :class="[$style.container, $style.purple]"/>
 <div :class="[$style.container, $style.blue]"/>
 
 <script setup>
-import { useCssModule, onMounted } from 'vue';
+import {useCssModule, onMounted, useTemplateRef} from 'vue';
 import SelectionArea from '@viselect/vanilla';
 
 const styles = useCssModule();
+const container = useTemplateRef('container');
+const { matches: mobile } = window.matchMedia('(max-width: 430px)');
 
 onMounted(() => {
-  [[styles.purple, 33], [styles.blue, 33]].forEach(([selector, items]) => {
+  const { width } = container.value.getBoundingClientRect();
+  const boxes = 33;
+  const rows = 3;
+  const totalBoxMargin = 4 * 2 * (boxes / rows);
+  const boxWidth = (width - 20 - 4 - totalBoxMargin) / ((boxes / rows));
+
+  [[styles.purple, boxes], [styles.blue, boxes]].forEach(([selector, items]) => {
     const container = document.querySelector(`.${selector}`);
 
     for (let i = 0; i < items; i++) {
-    container.appendChild(document.createElement('div'));
+      const div = document.createElement('div');
+      div.style.width = div.style.height = `${Math.floor(boxWidth)}px`;
+      container.appendChild(div);
     }
   });
 
@@ -123,8 +133,8 @@ onMounted(() => {
     selectionAreaClass: styles.selectionArea
   }).on('start', ({ store, event }) => {
     if (!event.ctrlKey && !event.metaKey) {
-    store.stored.forEach(el => el.classList.remove(styles.selected));
-    selection.clearSelection();
+      store.stored.forEach(el => el.classList.remove(styles.selected));
+      selection.clearSelection();
     }
   }).on('move', ({ store: { changed: { added, removed } } }) => {
     added.forEach(el => el.classList.add(styles.selected));
@@ -137,19 +147,17 @@ onMounted(() => {
 .container {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-evenly;
+  justify-content: center;
   border-radius: 15px;
-  padding: 15px;
+  padding: 10px;
   margin: 15px 0;
   user-select: none;
 }
 
 .container div {
-  height: 50px;
-  width: 50px;
-  margin: 3px;
+  margin: 4px;
   background: rgba(66, 68, 90, 0.075);
-  border-radius: 10px;
+  border-radius: 0.75vw;
   cursor: pointer;
 }
 

diff --git a/packages/preact/README.md b/packages/preact/README.md
@@ -1,50 +1,7 @@
-<h3 align="center">
-    <img alt="Logo" src="https://user-images.githubusercontent.com/30767528/123517467-622b0f80-d6a1-11eb-9bf3-abcb4928a89e.png" width="300"/>
-</h3>
-
-<h3 align="center">
-    Viselect - Preact
-</h3>
-
 <p align="center">
-    <a href="https://choosealicense.com/licenses/mit/"><img
-        alt="License MIT"
-        src="https://img.shields.io/badge/license-MIT-ae15cc.svg"></a>
-    <img alt="No dependencies"
-        src="https://img.shields.io/badge/dependencies-none-8115cc.svg">
-    <a href="https://github.com/sponsors/Simonwep"><img
-        alt="Support me"
-        src="https://img.shields.io/badge/github-support-6a15cc.svg"></a>
-    <a href="https://www.buymeacoffee.com/aVc3krbXQ"><img
-        alt="Buy me a coffee"
-        src="https://img.shields.io/badge/%F0%9F%8D%BA-buy%20me%20a%20beer-%23FFDD00"></a>
-    <a href="https://github.com/simonwep/viselect/actions?query=workflow%3ACI"><img
-        alt="Build Status"
-        src="https://github.com/simonwep/viselect/workflows/CI/badge.svg"></a>
-    <img alt="gzip size" src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@viselect/preact/dist/viselect.mjs?compression=gzip">
-    <img alt="brotli size" src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@viselect/preact/dist/viselect.mjs?compression=brotli">
-    <a href="https://v3.vuejs.org"><img
-        alt="Vue support"
-        src="https://img.shields.io/badge/✔-vue-%2340B581"></a>
-    <a href="https://preactjs.com/"><img
-        alt="Preact support"
-        src="https://img.shields.io/badge/✔-preact-%236337B1"></a>
-    <a href="https://reactjs.org"><img
-        alt="React support"
-        src="https://img.shields.io/badge/✔-react-%2359D7FF"></a>
-    <a href="https://svelte.dev"><img
-        alt="Svelte support"
-        src="https://img.shields.io/badge/%E2%9A%99-svelte-%23F83C00"></a>
-    <a href="https://lit-element.polymer-project.org"><img
-        alt="Lit-Element support"
-        src="https://img.shields.io/badge/%E2%9A%99-lit--element-%233CA4F6"></a>
-    <a href="https://lit-element.polymer-project.org"><img
-        alt="Lit-Element support"
-        src="https://img.shields.io/badge/%E2%9A%99-angular-%23c3002f"></a>
+    <code>@viselect/preact</code>
 </p>
 
-<br>
-
-### Getting started
-
-Head over to [the documentation](https://simonwep.github.io/viselect) to get started 🚀
+<p align="center">
+    <a href="https://simonwep.github.io/viselect">Go Here For Documentation</a>
+</p>
diff --git a/packages/react/README.md b/packages/react/README.md
@@ -1,50 +1,7 @@
-<h3 align="center">
-    <img alt="Logo" src="https://user-images.githubusercontent.com/30767528/123517467-622b0f80-d6a1-11eb-9bf3-abcb4928a89e.png" width="300"/>
-</h3>
-
-<h3 align="center">
-    Viselect - React
-</h3>
-
 <p align="center">
-    <a href="https://choosealicense.com/licenses/mit/"><img
-        alt="License MIT"
-        src="https://img.shields.io/badge/license-MIT-ae15cc.svg"></a>
-    <img alt="No dependencies"
-        src="https://img.shields.io/badge/dependencies-none-8115cc.svg">
-    <a href="https://github.com/sponsors/Simonwep"><img
-        alt="Support me"
-        src="https://img.shields.io/badge/github-support-6a15cc.svg"></a>
-    <a href="https://www.buymeacoffee.com/aVc3krbXQ"><img
-        alt="Buy me a coffee"
-        src="https://img.shields.io/badge/%F0%9F%8D%BA-buy%20me%20a%20beer-%23FFDD00"></a>
-    <a href="https://github.com/simonwep/viselect/actions?query=workflow%3ACI"><img
-        alt="Build Status"
-        src="https://github.com/simonwep/viselect/workflows/CI/badge.svg"></a>
-    <img alt="gzip size" src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@viselect/react/dist/viselect.mjs?compression=gzip">
-    <img alt="brotli size" src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@viselect/react/dist/viselect.mjs?compression=brotli">
-    <a href="https://v3.vuejs.org"><img
-        alt="Vue support"
-        src="https://img.shields.io/badge/✔-vue-%2340B581"></a>
-    <a href="https://preactjs.com/"><img
-        alt="Preact support"
-        src="https://img.shields.io/badge/✔-preact-%236337B1"></a>
-    <a href="https://reactjs.org"><img
-        alt="React support"
-        src="https://img.shields.io/badge/✔-react-%2359D7FF"></a>
-    <a href="https://svelte.dev"><img
-        alt="Svelte support"
-        src="https://img.shields.io/badge/%E2%9A%99-svelte-%23F83C00"></a>
-    <a href="https://lit-element.polymer-project.org"><img
-        alt="Lit-Element support"
-        src="https://img.shields.io/badge/%E2%9A%99-lit--element-%233CA4F6"></a>
-    <a href="https://lit-element.polymer-project.org"><img
-        alt="Lit-Element support"
-        src="https://img.shields.io/badge/%E2%9A%99-angular-%23c3002f"></a>
+    <code>@viselect/react</code>
 </p>
 
-<br>
-
-### Getting started
-
-Head over to [the documentation](https://simonwep.github.io/viselect) to get started 🚀
+<p align="center">
+    <a href="https://simonwep.github.io/viselect">Go Here For Documentation</a>
+</p>
diff --git a/packages/vanilla/README.md b/packages/vanilla/README.md
@@ -1,50 +1,7 @@
-<h3 align="center">
-    <img alt="Logo" src="https://user-images.githubusercontent.com/30767528/123517467-622b0f80-d6a1-11eb-9bf3-abcb4928a89e.png" width="300"/>
-</h3>
-
-<h3 align="center">
-    Viselect - Vanilla
-</h3>
-
 <p align="center">
-    <a href="https://choosealicense.com/licenses/mit/"><img
-        alt="License MIT"
-        src="https://img.shields.io/badge/license-MIT-ae15cc.svg"></a>
-    <img alt="No dependencies"
-        src="https://img.shields.io/badge/dependencies-none-8115cc.svg">
-    <a href="https://github.com/sponsors/Simonwep"><img
-        alt="Support me"
-        src="https://img.shields.io/badge/github-support-6a15cc.svg"></a>
-    <a href="https://www.buymeacoffee.com/aVc3krbXQ"><img
-        alt="Buy me a coffee"
-        src="https://img.shields.io/badge/%F0%9F%8D%BA-buy%20me%20a%20beer-%23FFDD00"></a>
-    <a href="https://github.com/simonwep/viselect/actions?query=workflow%3ACI"><img
-        alt="Build Status"
-        src="https://github.com/simonwep/viselect/workflows/CI/badge.svg"></a>
-    <img alt="gzip size" src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@viselect/vanilla/dist/viselect.mjs?compression=gzip">
-    <img alt="brotli size" src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@viselect/vanilla/dist/viselect.mjs?compression=brotli">
-    <a href="https://v3.vuejs.org"><img
-        alt="Vue support"
-        src="https://img.shields.io/badge/✔-vue-%2340B581"></a>
-    <a href="https://preactjs.com/"><img
-        alt="Preact support"
-        src="https://img.shields.io/badge/✔-preact-%236337B1"></a>
-    <a href="https://reactjs.org"><img
-        alt="React support"
-        src="https://img.shields.io/badge/✔-react-%2359D7FF"></a>
-    <a href="https://svelte.dev"><img
-        alt="Svelte support"
-        src="https://img.shields.io/badge/%E2%9A%99-svelte-%23F83C00"></a>
-    <a href="https://lit-element.polymer-project.org"><img
-        alt="Lit-Element support"
-        src="https://img.shields.io/badge/%E2%9A%99-lit--element-%233CA4F6"></a>
-    <a href="https://lit-element.polymer-project.org"><img
-        alt="Lit-Element support"
-        src="https://img.shields.io/badge/%E2%9A%99-angular-%23c3002f"></a>
+    <code>@viselect/vanilla</code>
 </p>
 
-<br>
-
-### Getting started
-
-Head over to [the documentation](https://simonwep.github.io/viselect) to get started 🚀
+<p align="center">
+    <a href="https://simonwep.github.io/viselect">Go Here For Documentation</a>
+</p>
diff --git a/packages/vue/README.md b/packages/vue/README.md
@@ -1,50 +1,7 @@
-<h3 align="center">
-    <img alt="Logo" src="https://user-images.githubusercontent.com/30767528/123517467-622b0f80-d6a1-11eb-9bf3-abcb4928a89e.png" width="300"/>
-</h3>
-
-<h3 align="center">
-    Viselect - Vue
-</h3>
-
 <p align="center">
-    <a href="https://choosealicense.com/licenses/mit/"><img
-        alt="License MIT"
-        src="https://img.shields.io/badge/license-MIT-ae15cc.svg"></a>
-    <img alt="No dependencies"
-        src="https://img.shields.io/badge/dependencies-none-8115cc.svg">
-    <a href="https://github.com/sponsors/Simonwep"><img
-        alt="Support me"
-        src="https://img.shields.io/badge/github-support-6a15cc.svg"></a>
-    <a href="https://www.buymeacoffee.com/aVc3krbXQ"><img
-        alt="Buy me a coffee"
-        src="https://img.shields.io/badge/%F0%9F%8D%BA-buy%20me%20a%20beer-%23FFDD00"></a>
-    <a href="https://github.com/simonwep/viselect/actions?query=workflow%3ACI"><img
-        alt="Build Status"
-        src="https://github.com/simonwep/viselect/workflows/CI/badge.svg"></a>
-    <img alt="gzip size" src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@viselect/vue/dist/viselect.mjs?compression=gzip">
-    <img alt="brotli size" src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@viselect/vue/dist/viselect.mjs?compression=brotli">
-    <a href="https://v3.vuejs.org"><img
-        alt="Vue support"
-        src="https://img.shields.io/badge/✔-vue-%2340B581"></a>
-    <a href="https://preactjs.com/"><img
-        alt="Preact support"
-        src="https://img.shields.io/badge/✔-preact-%236337B1"></a>
-    <a href="https://reactjs.org"><img
-        alt="React support"
-        src="https://img.shields.io/badge/✔-react-%2359D7FF"></a>
-    <a href="https://svelte.dev"><img
-        alt="Svelte support"
-        src="https://img.shields.io/badge/%E2%9A%99-svelte-%23F83C00"></a>
-    <a href="https://lit-element.polymer-project.org"><img
-        alt="Lit-Element support"
-        src="https://img.shields.io/badge/%E2%9A%99-lit--element-%233CA4F6"></a>
-    <a href="https://lit-element.polymer-project.org"><img
-        alt="Lit-Element support"
-        src="https://img.shields.io/badge/%E2%9A%99-angular-%23c3002f"></a>
+    <code>@viselect/vue</code>
 </p>
 
-<br>
-
-### Getting started
-
-Head over to [the documentation](https://simonwep.github.io/viselect) to get started 🚀
+<p align="center">
+    <a href="https://simonwep.github.io/viselect">Go Here For Documentation</a>
+</p>