Data type field is read-only

src/datadoc_editor/assets/dropdown_style.css

@@ -4,28 +4,3 @@
     max-width: unset;
     width: 100%;
 }
-
-.ssb-dropdown.dropdown-component > .ssb-glossary.info-glossary > .glossary-popup {
-    margin-left: 20px;
-    left: unset;
-    top: unset;
-    bottom: 5px;
-    background-image: none;
-}
-
-.ssb-dropdown.dropdown-component > .ssb-glossary.info-glossary > .glossary-popup::after {
-    left: -10px;
-    margin-left: -10px;
-    top: unset;
-    bottom: 5px;
-    transform: rotateX(-90deg);
-    -webkit-transform: rotate(-90deg);
-}
-
-.ssb-glossary.info-glossary > .glossary-button  > .glossary-textwrap > .ssb-dropdown label, .ssb-dropdown .dropdown-label{
-    margin-bottom: 0;
-}
-
-.ssb-dropdown.dropdown-component > .ssb-glossary.glossary-button {
-    background-image: none;
-}

src/datadoc_editor/assets/global_variables_style.css

@@ -60,15 +60,6 @@
     width: 100%;
 }
 
-.global-edit-section-form > .ssb-input.global-input-component .ssb-glossary .glossary-popup{
-    left: unset;
-    margin-left: unset;
-}
-
-.global-edit-section-form > .ssb-dropdown.global-dropdown-component .ssb-glossary .glossary-popup{
-    left: unset;
-    margin-left: unset;
-}
 
 @media (max-width: 960px) {
     .global-edit-section-form > .ssb-dropdown.global-dropdown-component, .ssb-input.global-input-component{

src/datadoc_editor/assets/glossary.css

@@ -0,0 +1,55 @@
+.ssb-glossary .glossary-closing,
+.edit-section .ssb-glossary .glossary-closing,
+.ssb-glossary.info-glossary .glossary-closing,
+.ssb-glossary.legend-glossary .glossary-closing
+{
+    margin-top: 1.8rem;
+}
+
+.ssb-glossary,
+.edit-section .ssb-glossary,
+.ssb-glossary.info-glossary
+{
+    position: relative;
+    max-width: fit-content;
+}
+
+.ssb-glossary.legend-glossary
+{
+    padding: 0 0.3rem;
+    background-image: none;
+    position: absolute;
+    top: -20px;
+    background-color: white;
+    padding-top: 0;
+    padding-bottom: 0;
+    margin: 0.3rem;
+    max-width: fit-content;
+}
+
+.edit-section .ssb-glossary .glossary-popup,
+.ssb-glossary.info-glossary .glossary-popup,
+.ssb-glossary.legend-glossary .glossary-popup
+{
+    position: absolute;
+    z-index: 999;
+    left: unset;
+    margin-left: unset;
+    top: 0px;
+    right: -290px;
+    bottom: 5px;
+}
+
+/* After refers to the little arrow on the glossary box */
+.edit-section .ssb-glossary .glossary-popup::after,
+.ssb-glossary.info-glossary .glossary-popup::after,
+.ssb-glossary.legend-glossary .glossary-popup::after
+{
+    position: absolute;
+    left: -10px;
+    margin-left: -10px;
+    top: 5px;
+    bottom: unset;
+    transform: rotateX(-90deg);
+    -webkit-transform: rotate(-90deg);
+}

src/datadoc_editor/assets/input_style.css

@@ -1,20 +1,5 @@
 /*Style for input components and checkbox components*/
 
-.ssb-input.input-component > span > .ssb-glossary.info-glossary > .glossary-popup {
-    margin-left: 20px;
-    left: unset;
-    top: unset;
-    bottom: 5px;
-}
-
-.ssb-input.input-component > span > .ssb-glossary.info-glossary > .glossary-popup::after {
-    left: -10px;
-    margin-left: -10px;
-    top: unset;
-    bottom: 5px;
-    transform: rotateX(-90deg);
-    -webkit-transform: rotate(-90deg);
-}
 
 .ssb-input.input-component input[readonly]{
     border: 1px solid #274247 !important;
@@ -80,20 +65,6 @@ label.form-check-label{
 }
 
 
-.ssb-glossary.info-glossary{
-    max-width: fit-content;
-}
-
-.ssb-glossary.datadoc-glossary > .glossary-popup .content-box > .glossary-closing{
-    margin-top: 1.8rem;
-}
-
-#dataset-metadata-input-Maskingenerert > .ssb-input .input-component > .ssb-glossary > .glossary-button,
-#variables-metadata-input-left-machine > div > span > span > button,
-#pseudo-metadata-input-left-pseudo > div > span > span > button {
-    background-image: none;
-}
-
 
 @media only screen and (max-width: 1900px) {
     #variables-metadata-input-left-machine > .ssb-input.input-component,

src/datadoc_editor/assets/multidropdown_style.css

@@ -27,22 +27,11 @@
     margin-bottom: 2rem;
 }
 
-.legend-glossary{
-    background-color: white;
-    padding-top: 0;
-    margin: 0.3rem;
-}
-
 .multidropdown-legend{
     width: fit-content;
     font-size: 1rem;
 }
 
-.multidropdown-fieldset > .ssb-glossary.legend-glossary > .glossary-button{
-    padding: 0 0.3rem;
-    background-image: none;
-}
-
 .multidropdown-fieldset:focus{
     border: 1px solid #00824d;
     outline: 1px solid #00824d;
@@ -55,36 +44,11 @@
     outline-offset: 0;
 }
 
-.ssb-glossary.legend-glossary{
-    position: absolute;
-    z-index: 10;
-    top: -20px;
-}
-
 .ssb-input.multidropdown-input-component{
     max-width: unset;
     width: 100%;
 }
 
-.multidropdown-fieldset > .ssb-glossary.legend-glossary > .glossary-popup {
-    margin-left: 20px;
-    left: unset;
-    top: unset;
-    bottom: 5px;
-}
-
-.multidropdown-fieldset > .ssb-glossary.legend-glossary > .glossary-popup::after {
-    left: -10px;
-    margin-left: -10px;
-    top: unset;
-    bottom: 5px;
-    transform: rotateX(-90deg);
-    -webkit-transform: rotate(-90deg);
-}
-
-.ssb-glossary.legend-glossary > .glossary-popup .content-box > .glossary-closing{
-    margin-top: 1.8rem;
-}
 
 .input-group-row {
   display: flex;

src/datadoc_editor/assets/multilanguage_style.css

@@ -9,22 +9,11 @@
     margin: 1.5rem 1rem 0 0;
 }
 
-.legend-glossary {
-    background-color: white;
-    padding-top: 0;
-    margin: 0.3rem;
-}
-
 .multilanguage-legend {
     width: fit-content;
     font-size: 1rem;
 }
 
-.multilanguage-fieldset>.ssb-glossary.legend-glossary>.glossary-button {
-    padding: 0 0.3rem;
-    background-image: none;
-}
-
 .multilanguage-fieldset:focus {
     border: 1px solid #00824d;
     outline: 1px solid #00824d;
@@ -37,77 +26,7 @@
     outline-offset: 0;
 }
 
-.ssb-glossary.legend-glossary {
-    position: absolute;
-    z-index: 10;
-    top: -20px;
-}
-
 .ssb-input.multilanguage-input-component {
     max-width: unset;
     width: 100%;
 }
-
-.multilanguage-fieldset>.ssb-glossary.legend-glossary>.glossary-popup {
-    margin-left: 20px;
-    left: unset;
-    top: unset;
-    bottom: 5px;
-}
-
-.multilanguage-fieldset>.ssb-glossary.legend-glossary>.glossary-popup::after {
-    left: -10px;
-    margin-left: -10px;
-    top: unset;
-    bottom: 5px;
-    transform: rotateX(-90deg);
-    -webkit-transform: rotate(-90deg);
-}
-
-.ssb-glossary.legend-glossary>.glossary-popup .content-box>.glossary-closing {
-    margin-top: 1.8rem;
-}
-
-#variables-metadata-input-left-editable .glossary-popup {
-    margin-left: 30px;
-    top: 0px;
-    left: 130px;
-}
-
-#variables-metadata-input-left-editable .glossary-popup::after {
-    left: -10px;
-    margin-left: -10px;
-    top: 5px;
-    bottom: unset;
-    transform: rotateX(-90deg);
-    -webkit-transform: rotate(-90deg);
-}
-
-#variables-metadata-input-right-editable .glossary-popup {
-    margin-left: 30px;
-    top: 0px;
-    left: 130px;
-}
-
-#variables-metadata-input-right-editable .glossary-popup::after {
-    left: -10px;
-    margin-left: -10px;
-    top: 5px;
-    bottom: unset;
-    transform: rotateX(-90deg);
-    -webkit-transform: rotate(-90deg);
-}
-
-#variables-metadata-input-right-editable .metadata-checkbox-field .glossary-popup {
-    margin-left: 10px;
-    top: 0px;
-    left: 240px;
-}
-
-#variables-metadata-input-right-editable .metadata-checkbox-field .glossary-popup::after {
-    left: -10px;
-    margin-left: -10px;
-    top: 5px;
-    transform: rotateX(-90deg);
-    -webkit-transform: rotate(-90deg);
-}

src/datadoc_editor/assets/workspace_style.css

@@ -81,12 +81,6 @@
     padding-top: 0.5rem;
 }
 
-.variable-machine-section >.edit-section.dataset-machine-section{
-    max-width: unset;
-    width: 100%;
-    justify-content: center;
-}
-
 #dataset-metadata-input-Maskingenerert, #pseudo-metadata-input-left-pseudo, #variables-metadata-input-left-machine{
     justify-content: space-between;
 }

src/datadoc_editor/frontend/callbacks/variables.py

@@ -31,7 +31,7 @@
 from datadoc_editor.frontend.callbacks.utils import update_stable_identifier_version
 from datadoc_editor.frontend.components.builders import build_edit_section
 from datadoc_editor.frontend.components.builders import build_pseudo_field_section
-from datadoc_editor.frontend.components.builders import build_ssb_accordion
+from datadoc_editor.frontend.components.builders import build_variable_accordion
 from datadoc_editor.frontend.components.builders import build_variables_machine_section
 from datadoc_editor.frontend.components.builders import (
     build_variables_pseudonymization_section,
@@ -77,21 +77,19 @@ def populate_variables_workspace(
     Allows for filtering which variables are displayed via the search box.
     """
     return [
-        build_ssb_accordion(
+        build_variable_accordion(
             variable.short_name or "",
             {
                 "type": "variables-accordion",
-                "id": f"{variable.short_name}-{dataset_opened_counter}",  # Insert language into the ID to invalidate browser caches
+                "id": f"{variable.short_name}-{dataset_opened_counter}",  # Insert counter into the ID to invalidate browser caches
             },
-            variable.short_name or "",
             children=[
-                build_edit_section(
-                    [VARIABLES_METADATA_LEFT, VARIABLES_METADATA_RIGHT],  # type: ignore [list-item]
-                    variable,
-                ),
                 build_variables_machine_section(
                     NON_EDITABLE_VARIABLES_METADATA,
-                    "Maskingenerert",
+                    variable,
+                ),
+                build_edit_section(
+                    [VARIABLES_METADATA_LEFT, VARIABLES_METADATA_RIGHT],
                     variable,
                 ),
                 build_variables_pseudonymization_section(