Improve flexibility

ctrl-escp · Jun 8, 2024 · aeb68d8 · aeb68d8
1 parent c421e3e
commit aeb68d8
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 39 deletions.
diff --git a/dist/assets/index-BTNZP7T-.css b/dist/assets/index-BTNZP7T-.css
diff --git a/dist/assets/index-CtjrXPTN.js → dist/assets/index-CrYJVL1p.js b/dist/assets/index-CtjrXPTN.js → dist/assets/index-CrYJVL1p.js
diff --git a/dist/assets/index-Dh6d4MQj.css b/dist/assets/index-Dh6d4MQj.css
diff --git a/dist/index.html b/dist/index.html
@@ -7,8 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="A web interface for exploring JS code structures">
     <title>flASTer</title>
-    <script type="module" crossorigin src="assets/index-CtjrXPTN.js"></script>
-    <link rel="stylesheet" crossorigin href="assets/index-Dh6d4MQj.css">
+    <script type="module" crossorigin src="assets/index-CrYJVL1p.js"></script>
+    <link rel="stylesheet" crossorigin href="assets/index-BTNZP7T-.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/App.vue b/src/App.vue
@@ -37,11 +37,11 @@ const navItems = [
     </nav>
   </header>
   <div class="panes">
-    <div class="pane-upper">
+    <div class="pane-top">
       <input-code-editor/>
       <nodes-list/>
     </div>
-    <div class="pane-lower">
+    <div class="pane-bottom">
       <filter-editor/>
     </div>
   </div>
@@ -90,20 +90,21 @@ nav {
   font-size: 2.4rem;
 }
 
-.pane-lower {
+.pane-bottom {
   flex: 1;
   display: flex;
 }
 
-.pane-upper {
+.pane-top {
   flex: 1;
   display: flex;
-  margin-bottom: 5px;
+  flex-wrap: wrap;
 }
 
 .panes {
   display: flex;
   flex-direction: column;
   height: calc(95vh - var(--nav-height));
+  gap: .2rem;
 }
 </style>
diff --git a/src/assets/base.css b/src/assets/base.css
@@ -55,11 +55,9 @@
 *::after {
   box-sizing: border-box;
   margin: 0;
-  font-weight: normal;
 }
 
 body {
-  min-height: 100vh;
   color: var(--color-text);
   background: var(--color-background);
   transition: color 0.5s, background-color 0.5s;

diff --git a/src/components/CodeEditor.vue b/src/components/CodeEditor.vue
@@ -145,6 +145,5 @@ onMounted(() => {
 .code-editor {
   width: 100%;
   height: 100%;
-  overflow: hidden;
 }
 </style>
diff --git a/src/components/FilterEditor.vue b/src/components/FilterEditor.vue
@@ -11,8 +11,8 @@ n.type === 'CallExpression' &&
 n.callee.type === 'Identifier'`;
 
 const messages = {
-  disableFilters: 'Disable filters',
-  enableFilters: 'Re-enable filters',
+  disableFilters: 'Disable all',
+  enableFilters: 'Enable all',
 };
 
 const numOfEnabledFilters = computed(() => store.filters.filter(f => f.enabled).length);
@@ -89,21 +89,18 @@ function setFilterEditorContent(filterSrc) {
 <template>
   <div class="filter-controller" v-if="store.ast.length">
     <div class="btn-group">
-      <button class="btn btn-apply"
-              @click="applyFilter(store.getEditor(store.editorIds.filterEditor).state.doc.toString())">Add
-        filter
-      </button>
-      <button class="btn btn-clear" @click="setFilterEditorContent('')">Clear current code</button>
-      <button class="btn btn-clear-all-filters" @click="clearAllFilters" :disabled="!numOfAvailableFilters">Clear all
-        filters
-      </button>
-      <button class="btn btn-clear-all-filters" @click="store.areFiltersActive = !store.areFiltersActive"
-              :disabled="!numOfAvailableFilters">
-        {{ store.areFiltersActive ? messages.disableFilters : messages.enableFilters }}
-      </button>
-      <button class="btn btn-clear-all-filters" :disabled="!numOfEnabledFilters || numOfEnabledFilters < 2"
-              @click="combineEnabledFilters">Combine active filters
-      </button>
+      <span class="filter-edit-btn-group">
+        <button class="btn btn-apply" @click="applyFilter(store.getEditor(store.editorIds.filterEditor).state.doc.toString())">Add</button>
+        <button class="btn btn-clear" @click="setFilterEditorContent('')">Clear</button>
+      </span>
+      <span class="applied-filters-btn-group">
+        <button class="btn btn-clear-all-filters" @click="clearAllFilters" :disabled="!numOfAvailableFilters">Clear all</button>
+        <button class="btn btn-clear-all-filters" @click="store.areFiltersActive = !store.areFiltersActive"
+                :disabled="!numOfAvailableFilters">
+          {{ store.areFiltersActive ? messages.disableFilters : messages.enableFilters }}
+        </button>
+        <button class="btn btn-clear-all-filters" :disabled="!numOfEnabledFilters || numOfEnabledFilters < 2" @click="combineEnabledFilters">Combine active</button>
+      </span>
     </div>
     <div class="filter-display">
       <fieldset class="filter-editor-wrapper">
@@ -132,9 +129,8 @@ function setFilterEditorContent(filterSrc) {
 .applied-filters-wrapper {
   flex: 1;
   padding: 5px;
-  overflow: hidden;
-  overflow-y: auto;
-  height: 100%;
+  overflow: auto;
+  min-width: 41%;
 }
 
 .btn-apply {
@@ -147,7 +143,12 @@ function setFilterEditorContent(filterSrc) {
   margin-left: 5px;
 }
 
-.btn-group > button {
+.btn-group {
+  display: flex;
+  justify-content: space-between;
+}
+
+.btn-group > * > button {
   margin-right: 5px;
 }
 
@@ -165,12 +166,13 @@ function setFilterEditorContent(filterSrc) {
 
 .filter-display {
   display: flex;
-  height: 92%;
+  flex-wrap: wrap;
+  height: 90%;
 }
 
 .filter-editor-wrapper {
-  overflow: auto;
   flex: 1;
+  overflow: auto;
   padding: 0;
 }
 

diff --git a/src/components/NodesList.vue b/src/components/NodesList.vue
@@ -76,7 +76,7 @@ onMounted(() => {
   padding: 5px;
   width: 100%;
   height: 50vh;
-  overflow-y: auto;
+  overflow: auto;
 }
 
 .prev-page, .next-page {