From a9177dfd4d349c51a406e7d924044876ad070d15 Mon Sep 17 00:00:00 2001 From: indigane Date: Sat, 30 Jul 2022 13:15:33 +0300 Subject: [PATCH] Add functioning category merges --- analysis.html | 129 +++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 101 insertions(+), 28 deletions(-) diff --git a/analysis.html b/analysis.html index b15f41c..cc85208 100644 --- a/analysis.html +++ b/analysis.html @@ -15,18 +15,15 @@ * { box-sizing: border-box; } - .main-layout { - display: grid; - grid-template-columns: calc(100vw - 50px); - grid-template-rows: min-content 1fr; - grid-template-areas: - "top top" - "bottom bottom"; - } - .top-bar { - grid-area: top; + .results-input-container { padding: 15px; } + .results-input-container .title-bar { + padding: 0 0 15px 0; + } + .results-input-container .title-bar h2 { + margin: 0; + } #results-input { padding: 0.5em; width: 100%; @@ -35,9 +32,28 @@ /* Category refinement */ .category-refinement { grid-area: bottom; + position: relative; + } + .category-refinement .title-bar { + position: sticky; + display: flex; + align-items: center; + top: 0; + gap: 15px; + padding: 15px; + background: #fff; + } + .category-refinement .title-bar h2 { + margin: 0; + } + .category-refinement .title-bar button { + cursor: pointer; + } + .category-refinement .title-bar button[disabled] { + cursor: not-allowed; } .category-refinement .categories { - padding: 10px; + padding: 15px; } .category-refinement .category { display: grid; @@ -83,6 +99,11 @@ .category-refinement .category-merge-button-start:focus { opacity: 1; } + @media (hover: none) { + .category-refinement .category-merge-button-start { + opacity: 1; + } + } .category-refinement .categories:not(.is-merge-active) .category-merge-button-end, .category-refinement .categories.is-merge-active .is-merge-source .category-merge-button-end, .category-refinement .categories.is-merge-active .category-merge-button-start, @@ -101,7 +122,8 @@ .category-refinement .category.is-merge-pending { opacity: .3; } - .category-refinement .category.is-merge-pending .category-name { + .category-refinement .category.is-merge-pending .category-name, + .category-refinement .merged-category.is-undo-pending .merged-category-name { text-decoration: line-through; } .category-refinement .merged-category { @@ -148,7 +170,16 @@ } /* Association table */ .associations { - padding: 30px; + padding: 15px; + } + .associations .title-bar { + position: sticky; + top: 0; + padding: 15px 0; + background: #fff; + } + .associations .title-bar h2 { + margin: 0; } .association-table { border-collapse: collapse; @@ -198,19 +229,28 @@ -
-
-
- -
- +
+
+

Data input

-
-
+
+
-
-
+ +
+
+
+

Category refinement

+ +
+
+
+
+
+

Category–card table

+
+