feat: improve CSS of dashboards

openedx · Mar 19, 2024 · a642e34 · a642e34
1 parent 6c1ce5f
commit a642e34
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 22 deletions.
diff --git a/platform_plugin_aspects/static/css/superset.css b/platform_plugin_aspects/static/css/superset.css
@@ -1,5 +1,53 @@
-.superset-embedded-container > iframe {
-    height: 720px;
+.superset-embedded-container>iframe {
+    height: 920px;
     width: 100%;
     display: block;
+    border: none;
 }
+
+.aspects-tabs {
+    position: relative;
+    min-height: 920px;
+    /* This part sucks */
+    clear: both;
+    margin: 25px 0;
+}
+
+.aspects-tab {
+    float: left;
+}
+
+.aspects-tab label {
+    background: #eee;
+    padding: 10px;
+    border: 1px solid #ccc;
+    margin-left: -1px;
+    position: relative;
+    left: 1px;
+    bottom: 5px;
+}
+
+.aspects-tab [type=radio] {
+    display: none;
+}
+
+.aspects-content {
+    position: absolute;
+    top: 28px;
+    left: 0;
+    background: white;
+    right: 0;
+    bottom: 0;
+    padding: 0;
+    border: 1px solid #ccc;
+}
+
+[type=radio]:checked~label {
+    background: white;
+    border-bottom: 1px solid white;
+    z-index: 2;
+}
+
+[type=radio]:checked~label~.aspects-content {
+    z-index: 1;
+}
diff --git a/platform_plugin_aspects/static/html/superset.html b/platform_plugin_aspects/static/html/superset.html
@@ -2,29 +2,32 @@
 
 <script src="https://unpkg.com/@superset-ui/embedded-sdk"></script>
 
-<div class="aspects-wrapper" width="parent">
+<div class="aspects-wrapper" width="fit-content">
     <h2>{{display_name}}</h2>
 
     {% if exception %}
     <p>{% trans 'Superset is not configured properly. Please contact your system administrator.'%}</p>
-    <p>
-        {{exception}}
-    </p>
+    <p>{{exception}}</p>
     {% elif not dashboard_uuid and not superset_dashboards %}
-    <p>
-        Dashboard UUID is not set. Please set the dashboard UUID in the Studio. {{dashboard_uuid}}
-    </p>
-    {% elif superset_url and superset_token %}
-        {% if xblock_id %}
-        <div class="superset-embedded-container" id="superset-embedded-container-{{xblock_id}}"></div>
-        {% else %}
-            {% for dashboard in superset_dashboards %}
-                <div>
-                    <h3>{{dashboard.name}}</h3>
-                </div>
-                <div class="superset-embedded-container" id="superset-embedded-container-{{dashboard.uuid}}"></div>
-            {% endfor %}
-        {% endif %}
+    <p>Dashboard UUID is not set. Please set the dashboard UUID in the Studio. {{dashboard_uuid}}</p>
+    {% elif superset_url and superset_token %} {% if xblock_id %}
+    <div class="superset-embedded-container" id="superset-embedded-container-{{xblock_id}}"></div>
+    {% else %}
+    <div class="aspects-tabs">
+        {% for dashboard in superset_dashboards %}
+        <div class="aspects-tab">
+            {% if forloop.counter == 1 %}
+            <input type="radio" id="tab-{{forloop.counter}}" name="tab-group-1" checked="checked" />
+            {% else %}
+            <input type="radio" id="tab-{{forloop.counter}}" name="tab-group-1" />
+            {% endif %}
+            <label for="tab-{{forloop.counter}}">{{dashboard.name}}</label>
+            <div class="aspects-content superset-embedded-container" id="superset-embedded-container-{{dashboard.uuid}}"></div>
+        </div>
+        {% endfor %}
+    </div>
+    {% endif %}
+
     <script type="text/javascript">
         window.superset_dashboards = {{superset_dashboards | safe }};
         window.superset_url = "{{superset_url}}";

diff --git a/platform_plugin_aspects/static/js/embed_dashboard.js b/platform_plugin_aspects/static/js/embed_dashboard.js
@@ -28,7 +28,6 @@ function embedDashboard(dashboard_uuid, superset_url, superset_token, xblock_id)
 
 if (window.superset_dashboards !== undefined) {
   window.superset_dashboards.forEach(function(dashboard) {
-    console.log(dashboard)
     embedDashboard(dashboard.uuid, window.superset_url, window.superset_token, dashboard.uuid);
   });
 }
diff --git a/platform_plugin_aspects/templates/instructor_dashboard/aspects.html b/platform_plugin_aspects/templates/instructor_dashboard/aspects.html
@@ -14,7 +14,7 @@
 <section class="superset">
     % if superset_url:
     <div class="superset-link">
-      <a href="${superset_url}">${_("Go to Superset")}</a>
+      <a href="${superset_url}login/openedxsso">${_("Go to Superset to create new or further customize the reports below.")}</a>
     </div>
     % endif
     ${HTML(section_data['fragment'].body_html())}