fix: control the height of the jdaviz app

Depends on spacetelescope/jdaviz#505
mariobuikhuizen · Apr 8, 2021 · 9e56bea · 9e56bea
1 parent 58ade75
commit 9e56bea
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/example/index_jwst.html b/example/index_jwst.html
@@ -9,6 +9,7 @@
         <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
         <link href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css" rel="stylesheet" />
+        <link rel="stylesheet" href="static/css/jdaviz.css" />
         <link href="static/css/specviz.css" rel="stylesheet" type="text/css" />
     </head>
 
@@ -111,6 +112,7 @@
                             <v-col>
                                 <v-alert type="error" v-if="!voilaConnection" class="voila-connection">Unable to connect to Voila server</v-alert>
                                 <jupyter-widget-embed
+                                    class="jdaviz-panel"
                                     voila-url="http://localhost:8000"
                                     notebook="jdaviz_test.ipynb"
                                     mount-id="specviz"

diff --git a/example/index_simple.html b/example/index_simple.html
@@ -8,6 +8,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.2.23/vuetify.min.css" rel="stylesheet">
     <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
     <link href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css" rel="stylesheet" />
+    <link rel="stylesheet" href="static/css/jdaviz.css" />
     <script src="voila-embed.js"></script>
 </head>
 <body>
@@ -22,6 +23,7 @@
                         -->
                     <v-col>
                         <jupyter-widget-embed
+                            class="jdaviz-panel"
                             voila-url="http://localhost:8000"
                             notebook="jdaviz_test.ipynb"
                             mount-id="specviz"

diff --git a/example/index_zmast.html b/example/index_zmast.html
@@ -7,14 +7,14 @@
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" />
+    <link rel="stylesheet" href="static/css/jdaviz.css" />
     <link rel="stylesheet" href="static/css/site.css" />
     <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
     <!-- <link rel="stylesheet" href="/static/css/jquery.dataTables.min.css" />
     <link rel="stylesheet" href="/static/css/jquery.loadingModal.min.css" />
     <link rel="stylesheet" href="/static/css/jquery-ui.min.css" /> -->
 
     <title>z.MAST object</title>
-
 </head>
 
     <body class="hsc-body">
@@ -134,7 +134,7 @@
                                                 the main content view consisting of the DATB JDAviz application
                                             -->
                                         <v-col>
-                                            <jupyter-widget-embed
+                                            <jupyter-widget-embed class="jdaviz-panel"
                                                 v-if="voilaConnection && fileSupported"
                                                 voila-url="http://localhost:8000"
                                                 notebook="jdaviz_test.ipynb"

diff --git a/example/static/css/jdaviz.css b/example/static/css/jdaviz.css
@@ -0,0 +1,7 @@
+.jdaviz-panel {
+    height: 400px;
+}
+
+.jdaviz-panel > .v-application--wrap {
+    min-height: unset;
+}