Remove dependency on jquery, replace collapse panels with bootstrap c…

…ollapse

dashboard_frontend/package.json

@@ -17,7 +17,6 @@
     "chartjs-plugin-datalabels": "^0.7.0",
     "dropzone": "^5.7.2",
     "headroom.js": "^0.12.0",
-    "jquery": "^3.5.1",
     "matomo-tracker": "^2.2.4",
     "patternomaly": "^1.3.2",
     "portal-vue": "^2.1.7",

dashboard_frontend/src/components/chart_collapse_panel.vue

@@ -1,61 +1,20 @@
-<style scoped>
-.panel-content {
-    padding-bottom: 10px;
-}
-
-.chart-container {
-    position: relative; height:500px; min-height:500px; width:100%; min-width: 950px;
-}
-.chart_collapse_panel{
-    border-top: 1px solid dimgray;
-    border-bottom: 1px solid dimgray;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-.panel-title {
-    font-size: 1.3em;
-}
-
-.h2 {
-  padding-left: 2em;
-    font-size: 1.2em;
-}
-
-.h3 {
-  padding-left: 3em;
-    font-size: 1.1em;
-}
-
-</style>
-
 <template>
-    <div class="chart_collapse_panel">
-        <h1 :class="level" class="panel-title">
-            <a href="" aria-expanded="false">
-                <span class="visuallyhidden">-:</span>
-                {{ title }}
-                <span class="pre-icon visuallyhidden"></span>
-                <span class="icon"><img
-                    src="/static/images/vendor/internet_nl/push-open.png"
-                    alt=""></span>
-            </a>
-        </h1>
-        <div class="panel-content">
-            <div style="overflow: auto; width: 100%;">
-                <div class="chart-container">
-                    <slot name="content">
-                        default content
+    <collapse-panel :title='title' :custom_title_class="level">
+        <div slot="content">
+            <div style="overflow: auto; width: 100%; height: 500px; position: relative;">
+                <div class="chart-container" style="position: relative; height: 500px; min-height: 500px; width: 100%;">
+                    <slot name="chart_content">
+                        Default Content
                     </slot>
                 </div>
             </div>
         </div>
-    </div>
+    </collapse-panel>
 </template>
 
 <script>
 export default {
-    name: "collapse_panel.vue",
+    name: "chart_collapse_panel",
     props: {
         title: {
             type: String,
@@ -69,33 +28,3 @@ export default {
 
 }
 </script>
-
-<style scoped>
-
-</style>
-<!--
-Possible upgrade:
-
-    <b-button v-b-toggle="category.key" variant="primary">{{ category.label }}</b-button>
-    <b-collapse :id="category.key" class="mt-2">
-        <div style="overflow: auto; width: 100%">
-            <div class="chart-container"
-                 style="position: relative; height:500px; width:100%; min-width: 950px;">
-                <percentage-bar-chart
-                    :title="graph_bar_chart_title"
-                    :translation_key="'charts.adoption_bar_chart'"
-                    :color_scheme="color_scheme"
-                    :chart_data="compare_charts"
-                    :accessibility_text="$t('charts.adoption_bar_chart.accessibility_text')"
-                    :show_dynamic_average="issue_filters[category.key].show_dynamic_average"
-                    :only_show_dynamic_average="false"
-                    :field_name_to_category_names="field_name_to_category_names"
-                    :axis="visible_fields_from_categories(category)">
-                </percentage-bar-chart>
-            </div>
-        </div>
-    </b-collapse>
-
-
-
--->

dashboard_frontend/src/components/charts/cumulative-percentage-bar-chart.vue

@@ -63,7 +63,7 @@ export default {
                         },
                     },
                     responsive: true,
-                    maintainAspectRatio: false,
+                    maintainAspectRatio: true,
                     title: {
                         position: 'top',
                         display: true,

dashboard_frontend/src/components/charts/percentage-bar-chart.vue

@@ -69,7 +69,9 @@ export default {
 
                     },
                     responsive: true,
-                    maintainAspectRatio: false,
+                    // setting this to false will not show the charts in collapse panels. See
+                    // https://github.com/chartjs/Chart.js/issues/762
+                    maintainAspectRatio: true,
                     title: {
                         position: 'top',
                         display: true,

dashboard_frontend/src/components/collapse_panel.vue

@@ -4,7 +4,7 @@
     padding-left: 20px;
 }
 
-.chart_collapse_panel {
+.collapse_panel {
     border-top: 1px solid gray;
     border-bottom: 1px solid gray;
     margin-top: 10px;
@@ -13,42 +13,106 @@
 
 .panel-title {
     font-size: 1.0em;
-    padding-left: 20px;
+    font-weight: normal;
+}
+
+.panel-title:hover {
+    text-decoration: underline;
+}
+
+button {
+    border: 0 !important;
+    color: dimgray;
+    font-weight: bold !important;
+}
+
+button:hover {
+    background-color: inherit;
 }
 
+.animate_opening {
+    transition: transform 300ms linear;
+    transform: rotate(0deg);
+    display: inline-block;
+}
+
+.animate_opening.open {
+    transform: rotate(180deg);
+    transition: transform 300ms linear;
+}
+
+.block button:hover, .block button:focus, .block button:active {
+    background: white
+}
+
+.level_two {
+  padding-left: 2em;
+    font-size: 0.9em;
+}
+
+.level_three {
+  padding-left: 3em;
+    font-size: 0.8em;
+}
+
+
 </style>
 
 <template>
-    <div class="chart_collapse_panel">
-        <h1 class="panel-title">
-            <a href="" aria-expanded="false">
-                <span class="visuallyhidden">-:</span>
+    <div class="collapse_panel">
+        <button
+            :class="status_visible ? null : 'collapsed'"
+            :aria-expanded="status_visible ? 'true' : 'false'"
+            :aria-controls="'collapse-' + id"
+            @click="status_visible = !status_visible"
+        >
+            <span :class="`panel-title ${custom_title_class}`">
+               <div :class="status_visible ? 'animate_opening open' : 'animate_opening'">
+                    <img src="/static/images/vendor/internet_nl/push-open.png" alt="open panel">
+                </div>
                 {{ title }}
-                <span class="pre-icon visuallyhidden"></span>
-                <span class="icon"><img src="/static/images/vendor/internet_nl/push-open.png" alt=""></span>
-            </a>
-        </h1>
-        <div class="panel-content">
+            </span>
+        </button>
+
+        <b-collapse :id="'collapse-' + id" v-model="status_visible" class="panel-content">
             <slot name="content">
                 default content
             </slot>
-        </div>
+        </b-collapse>
     </div>
 </template>
 
 <script>
 export default {
-    name: "collapse_panel.vue",
+    name: "collapse_panel",
+    mounted: function () {
+        // generated random id for this thing to be collapsable. Chance to be the same is 1 in 1 000 000 000 000.
+        this.id = Math.round((Math.random() * 1000000000000));
+
+        // support being open on start using :visible.
+        this.status_visible = this.visible;
+    },
+    data: function () {
+        return {
+            // random ID so the button knows what element to collapse or expand.
+            id: 0,
+            status_visible: false,
+        }
+    },
     props: {
         title: {
             type: String,
             default: ""
         },
+        visible: {
+            type: Boolean,
+            default: false,
+        },
+        custom_title_class: {
+            type: String,
+            default: ""
+        }
     }
 
 }
 </script>
-
-<style scoped>
-
-</style>

dashboard_frontend/src/components/domains/DomainListManager.vue

@@ -153,7 +153,6 @@ Fixed: when deleting a list, it is re-added to the list of lists when adding a n
 </template>
 
 <script>
-import legacy_mixin from '../legacy_mixin.vue'
 import managed_url_list from './managed-url-list.vue'
 import sharedMessages from './../translations/dashboard.js'
 
@@ -164,7 +163,6 @@ export default {
     i18n: {
         sharedMessages: sharedMessages,
     },
-    mixins: [legacy_mixin],
     data: function () {
         return {
             loading: false,
@@ -199,10 +197,6 @@ export default {
                 this.maximum_domains_per_list = data['maximum_domains_per_list'];
                 this.loading = false;
 
-                // this makes sure accordeons work while vue routing is in place:
-                this.$nextTick(() => {
-                    this.accordinate();
-                });
             }).catch((fail) => {
                 console.log('A loading error occurred: ' + fail);
             });