Mercurial > gemma

comparison client/src/components/App.vue @ 2549:9bf6b767a56a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: refactored and improved splitscreen for diagrams To make different diagrams possible, the splitscreen view needed to be decoupled from the cross profiles. Also the style has changed to make it more consistent with the rest of the app. The standard box header is now used and there are collapse and expand animations.
author Markus Kottlaender <markus@intevation.de>
date Fri, 08 Mar 2019 08:50:47 +0100
parents bb5286acfee2
children 2d2b7fdc0c01
comparison
equal deleted inserted replaced
2548:6b34d0fb4498 2549:9bf6b767a56a
24 <div class="flex-fill"></div> 24 <div class="flex-fill"></div>
25 <div class="d-flex flex-row align-items-end"> 25 <div class="d-flex flex-row align-items-end">
26 <Infobar v-if="isMapVisible"></Infobar> 26 <Infobar v-if="isMapVisible"></Infobar>
27 </div> 27 </div>
28 <Zoom v-if="isMapVisible"></Zoom> 28 <Zoom v-if="isMapVisible"></Zoom>
29 <Splitscreen />
29 </div> 30 </div>
30 <div class="d-flex flex-column"><router-view /></div> 31 <div class="d-flex flex-column"><router-view /></div>
31 <vue-snotify></vue-snotify> 32 <vue-snotify></vue-snotify>
32 <Popup /> 33 <Popup />
33 </div> 34 </div>
34 </template> 35 </template>
35 36
36 <style lang="scss" scoped> 37 <style lang="scss" scoped>
37 .small {
38 width: $icon-width;
39 }
40
41 .userinterface { 38 .userinterface {
42 position: absolute; 39 position: absolute;
43 top: 0; 40 top: 0;
44 left: 0; 41 left: 0;
45 right: 0; 42 right: 0;
113 Layers: () => import("./layers/Layers"), 110 Layers: () => import("./layers/Layers"),
114 Sidebar: () => import("./Sidebar"), 111 Sidebar: () => import("./Sidebar"),
115 Search: () => import("./Search"), 112 Search: () => import("./Search"),
116 Contextbox: () => import("./Contextbox"), 113 Contextbox: () => import("./Contextbox"),
117 Toolbar: () => import("./toolbar/Toolbar"), 114 Toolbar: () => import("./toolbar/Toolbar"),
118 Popup: () => import("./Popup") 115 Popup: () => import("./Popup"),
116 Splitscreen: () => import("./Splitscreen")
119 } 117 }
120 }; 118 };
121 </script> 119 </script>