Issue #8 Positioning minimap

ReliSA · Dec 7, 2021 · 3a4c246 · 3a4c246
1 parent 610237c
commit 3a4c246
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 44 deletions.
diff --git a/sources/frontend/src/App.vue b/sources/frontend/src/App.vue
@@ -1,8 +1,12 @@
 <!-- Root Vue component of the application -->
 <template>
-  <Menu/>
-  <InitialScreen @diagram_retrieved="on_diagram_retrieval" v-if="!this.$store.state.graph_loaded" />
-  <SvgShowcase v-else />
+  <div class="container-fluid d-flex h-100 flex-column">
+    <div class="row">
+      <Menu/>
+    </div>
+    <InitialScreen @diagram_retrieved="on_diagram_retrieval" v-if="!this.$store.state.graph_loaded" />
+    <SvgShowcase v-else />
+  </div>
 </template>
 
 <script>
@@ -35,5 +39,4 @@ export default {
 </script>
 
 <style>
-
 </style>
diff --git a/sources/frontend/src/components/InitialScreen.vue b/sources/frontend/src/components/InitialScreen.vue
@@ -1,27 +1,29 @@
 <template>
-  <div v-if="modules === null"></div>
-  <div v-else class="container h-100 w-100">
-    <div v-if="show_error_popup" class="error popup">{{ message }}</div>
-    <div v-if="show_notify_popup" class="notify popup">{{ message }}</div>
+  <div class="row flex-grow-1 d-flex">
+    <div v-if="modules === null"></div>
+    <div v-else class="container w-100">
+      <div v-if="show_error_popup" class="error popup">{{ message }}</div>
+      <div v-if="show_notify_popup" class="notify popup">{{ message }}</div>
 
-    <div id="switch_button">
-      <button class="btn btn-primary btn-customized" @click="switch_context">{{ switch_button_text }}</button>
-    </div>
+      <div id="switch_button">
+        <button class="btn btn-primary btn-customized" @click="switch_context">{{ switch_button_text }}</button>
+      </div>
 
-    <!-- MAIN SCREEN -->
+      <!-- MAIN SCREEN -->
 
-    <div v-if="main_screen" class="row h-100 justify-content-center align-items-center">
-      <UploadDiagramForm :modules="modules" :api_base_path="api_base_path" @diagram_retrieved="handle_diagram"
-                         @failure="handle_failure"/>
-    </div>
+      <div v-if="main_screen" class="row h-100 justify-content-center align-items-center">
+        <UploadDiagramForm :modules="modules" :api_base_path="api_base_path" @diagram_retrieved="handle_diagram"
+                           @failure="handle_failure"/>
+      </div>
 
-    <!-- SIGNUP/IN -->
+      <!-- SIGNUP/IN -->
 
-    <div v-else class="row h-100 justify-content-center align-items-center">
-      <div class="container-fluid h-custom">
-        <div class="row d-flex justify-content-center align-items-center h-100">
-          <SignUpForm />
-          <SignInForm />
+      <div v-else class="row h-100 justify-content-center align-items-center">
+        <div class="container-fluid h-custom">
+          <div class="row d-flex justify-content-center align-items-center h-100">
+            <SignUpForm />
+            <SignInForm />
+          </div>
         </div>
       </div>
     </div>

diff --git a/sources/frontend/src/components/SvgShowcase.vue b/sources/frontend/src/components/SvgShowcase.vue
@@ -1,22 +1,24 @@
 <!-- A component composing together a SVG canvas and its minimap -->
 <template>
-  <div class="container-fluid canvas-container p-0">
-    <svg-canvas
-        id="main"
-        :view-port="this.$store.state.viewPort"
-        :vertices="this.$store.state.vertices"
-        :edges="this.$store.state.edges"
-        :vertex_map="this.$store.state.vertex_map"
-        :style="this.$store.state.style"/>
-  </div>
-  <div class="canvas-minimap-container" style="opacity: 0.9">
-    <svg-minimap
-        class="canvas-minimap"
-        ref-id="main"
-        :view-port="{height: 300}"
-        :parent-world-size="this.$store.state.worldSize"
-        :parent-view-port="this.$store.state.viewPort"
-    />
+  <div class="row flex-grow-1 d-flex">
+    <div class="p-0">
+      <svg-canvas
+          id="main"
+          :view-port="this.$store.state.viewPort"
+          :vertices="this.$store.state.vertices"
+          :edges="this.$store.state.edges"
+          :vertex_map="this.$store.state.vertex_map"
+          :style="this.$store.state.style"/>
+    </div>
+      <div class="canvas-minimap-container p-0" style="opacity: 0.9">
+        <svg-minimap
+            class="canvas-minimap"
+            ref-id="main"
+            :view-port="{height: 300, width: 300}"
+            :parent-world-size="this.$store.state.worldSize"
+            :parent-view-port="this.$store.state.viewPort"
+        />
+    </div>
   </div>
 </template>
 
@@ -32,14 +34,12 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.canvas-container, .row, .col-md-8 {
-  height: 100%;
-}
 
 .canvas-minimap-container {
+  width: 300px;
   position: absolute;
-  top: 0px;
+  top: 87px;
   background: white;
-  right: 0px;
+  right: 5px;
 }
 </style>