adjust css so accordion mouse-over area is consistent (#1603)

* adjust css so accordion mouse-over area is consistent * version bump --------- Co-authored-by: Ian Abbott <ij.abbott2306@gmail.com>
UrbanOS-Public · Feb 9, 2023 · 512d2af · 512d2af
1 parent 20f46f2
commit 512d2af
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 36 deletions.
diff --git a/apps/andi/assets/css/edit.scss b/apps/andi/assets/css/edit.scss
@@ -1,5 +1,5 @@
 $component-number-width: 4rem;
-$component-header-height: 7.5rem;
+$component-header-height: 4.5rem;
 
 .edit-page {
     display: grid;
@@ -18,10 +18,11 @@ $component-header-height: 7.5rem;
 }
 
 .form-section {
+    margin-left: 1rem;
+    margin-top: -$component-header-height;
     padding-left: $component-number-width - 1rem;
-    margin-top: -$component-header-height + 1rem;
     padding-top: $component-header-height;
-    margin-left: 1rem;
+    padding-bottom: 1rem;
     border-left: 2px solid $color-form-border;
 }
 
@@ -51,37 +52,25 @@ $component-header-height: 7.5rem;
     display: none;
 }
 
-.component-edit-section--expanded {
-    padding-bottom: 2rem;
-}
-
 .component-header {
+    position: relative;
+    z-index: 1;
     display: flex;
 }
 
 .component-header:hover {
     cursor: pointer;
 }
 
-#metadata-form>.form-section {
+.form-beginning>.form-section {
     margin-top: -3rem;
-    padding-top: 4rem;
+    padding-top: 3rem;
 }
 
-#extract-step-form>.form-section {
-    margin-top: -3rem;
-    padding-top: 4rem;
-}
-
-.finalize-form--collapsed>.form-section {
-    margin-top: -9.5rem;
-    margin-bottom: 4rem;
-}
-
-.datasets-data-dictionary {
-    .form-section {
-        margin-top: -8.75rem;
-    }
+.form-end>.form-section {
+    margin-bottom: 3rem;
+    padding-top: 3rem;
+    padding-bottom: 0;
 }
 
 .section-number {

diff --git a/apps/andi/assets/css/transformations.scss b/apps/andi/assets/css/transformations.scss
@@ -26,18 +26,10 @@
   }
 }
 
-#transformation-forms {
-  margin-bottom: 2rem;
-}
-
 #add-transformation {
   margin: 0;
 }
 
-.transformations--expanded {
-  margin-bottom: 1.2rem;
-}
-
 .transformation-form {
   border: 1px solid #C9C6C7;
   margin-bottom: 1.6rem;

diff --git a/apps/andi/lib/andi_web/live/dataset_live_view/data_dictionary_form.ex b/apps/andi/lib/andi_web/live/dataset_live_view/data_dictionary_form.ex
@@ -59,7 +59,7 @@ defmodule AndiWeb.EditLiveView.DataDictionaryForm do
       end
 
     ~L"""
-    <div id="data-dictionary-form" class="form-component">
+    <div id="data-dictionary-form" class="form-component form-end">
       <div class="component-header" phx-click="toggle-component-visibility" phx-value-component="data_dictionary_form">
         <div class="section-number">
           <div class="component-number component-number--<%= @validation_status %>"><%= @order %></div>

diff --git a/apps/andi/lib/andi_web/live/dataset_live_view/metadata_form.ex b/apps/andi/lib/andi_web/live/dataset_live_view/metadata_form.ex
@@ -41,7 +41,7 @@ defmodule AndiWeb.EditLiveView.MetadataForm do
       end
 
     ~L"""
-    <div id="metadata-form" class="form-component">
+    <div id="metadata-form" class="form-component form-beginning">
       <div class="component-header" phx-click="toggle-component-visibility">
         <div class="section-number">
           <div class="component-number component-number--<%= @validation_status %> component-number--<%= @visibility %>">1</div>

diff --git a/apps/andi/lib/andi_web/live/ingestion_live_view/extract_steps/extract_step_form.ex b/apps/andi/lib/andi_web/live/ingestion_live_view/extract_steps/extract_step_form.ex
@@ -49,7 +49,7 @@ defmodule AndiWeb.IngestionLiveView.ExtractSteps.ExtractStepForm do
       end
 
     ~L"""
-    <div id="extract-step-form" class="form-component">
+    <div id="extract-step-form" class="form-component form-beginning">
       <div class="component-header" phx-click="toggle-component-visibility" phx-value-component="extract_form">
         <div class="section-number">
           <div class="component-number component-number--<%= @validation_status %>"><%= @order %></div>

diff --git a/apps/andi/lib/andi_web/live/ingestion_live_view/finalize/finalize_form.ex b/apps/andi/lib/andi_web/live/ingestion_live_view/finalize/finalize_form.ex
@@ -60,7 +60,7 @@ defmodule AndiWeb.IngestionLiveView.FinalizeForm do
       end
 
     ~L"""
-    <div id="finalize_form" class="finalize-form finalize-form--<%= @visibility %>">
+    <div id="finalize_form" class="finalize-form finalize-form--<%= @visibility %> form-end">
       <div class="component-header" phx-click="toggle-component-visibility" phx-value-component="finalize_form">
         <div class="section-number">
           <div class="component-number component-number--<%= @validation_status %>">4</div>

diff --git a/apps/andi/mix.exs b/apps/andi/mix.exs
@@ -4,7 +4,7 @@ defmodule Andi.MixProject do
   def project do
     [
       app: :andi,
-      version: "2.5.54",
+      version: "2.5.55",
       build_path: "../../_build",
       config_path: "../../config/config.exs",
       deps_path: "../../deps",