diff --git a/README.md b/README.md index 9500bfd..4c113b6 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,11 @@ A tool for conducting a virtual card sorting. -## Web +## Demo + +[https://indigane.github.io/cardsort/card-sort.html#eJxNUMtOwzAQ...voGHGh0GQ==](https://indigane.github.io/cardsort/card-sort.html#eJxNUMtOwzAQ_JXIPbYIce0FJSCoSlBMXfWCOGyMSUxMHfmRyEL8O54WAYedGa_Xs-v9ZAu2fmblK7EVK71XH61JhaFjF6lTyM1Dxop8n-kGsQAsl0BD3mtZHLSPZIpcpCXSTdXUmW8R5AJImbHXl037rmQoOHlJJqfvrAuOjlndW4CzdkpZbMgPyqBiSxP9kJBOjzDbRqORfLDBaDyutR9BtoNLHXH5WO7rssri3FNP6gLTc-VgyzccaGflRH_uxJ01toNIobew3SFIDgpNd7FNJ_I4iTw_ndhRkFiNeMKXxazfcL9Po_qd91D9yf-belmxa7a--voGHGh0GQ==) + +## Create your own https://indigane.github.io/cardsort/ diff --git a/card-sort.html b/card-sort.html index d6a2d50..8bfc37a 100644 --- a/card-sort.html +++ b/card-sort.html @@ -60,16 +60,15 @@ } /* Toolbar */ .toolbar { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: 1fr; - gap: 10px 10px; + display: flex; + padding: 5px; align-items: center; - justify-items: center; + justify-content: space-around; } .toolbar button { font-size: 24px; cursor: pointer; + margin: 5px; } /* Uncategorized cards */ .uncategorized-cards { @@ -223,7 +222,9 @@ const cardTexts = data[uncategorizedKey]; Object.assign(settings, loadSettings(data)); if (settings.allowCategoryEditing === false) { + buttonCreateCategory.style.display = 'none'; categoryTemplate.content.querySelector('.title').disabled = true; + categoryTemplate.content.querySelector('.title').removeAttribute('placeholder'); } buttonCreateCategory.addEventListener('click', () => createCategory()); for (const text of cardTexts) { @@ -273,6 +274,12 @@ if (name) { titleInput.value = name; } + else if (settings.allowCategoryEditing === false) { + titleInput.style.opacity = '0'; + titleInput.style.height = '0'; + titleInput.style.margin = '0'; + titleInput.style.padding = '0'; + } categoriesGrid.show( categoriesGrid.add([itemElement], { active: false,