Line data    Source code

       1           1 : <template lang="pug">
       2           7 : BaseWebSite(:title='TITLE' :version='VERSION'
       3           7 :     :showAbout='true' @toggle-about='$refs.about.toggle()')
       4           7 :   template(#root)
       5           7 :     BaseAbout(ref='about' :title="TITLE"
       6             :         :contributors='$options.contributors' :components='$options.libs')
       7             :       | Stateful Scalable Vector Graphics (SSVG) document editor
       8             :   .x-layout.d-flex.flex-column
       9             :     .row.flex-grow-1.no-gutters.h-100
      10             :       .col-3.x-left-panel
      11           0 :         .d-flex.flex-column.h-100(v-if='fragment')
      12             :           div.py-1.max-h-50
      13             :             SSVGPropList.h-100(v-for='(elt, index) in stateElements' :stateElement='elt' :key='index')
      14             :           div.py-1.max-h-50
      15             :             SSVGSelectorList.h-100
      16             :         .d-flex.justify-content-center.align-items-center.x-logo-container(v-if='!fragment')
      17             :           img.x-logo(:src='$butils.publicPath("logo.svg")')
      18           7 :       .col-6.x-content.d-flex.flex-grow-1.flex-column
      19             :         .flex-grow-1.x-item
      20             :           SSVGItem
      21             :         .x-bottom-panel
      22             :           SSVGControl
      23             :       .col-3.x-right-panel
      24             :         SSVGPropEdit
      25             :     CreateTransitionDialog(ref='createTransitionDialog')
      26             :     CreatePropertyDialog(ref='createPropertyDialog')
      27             : </template>
      28             : <script src='./App.vue.js' />
      29             : <style lang='scss'>
      30             : 
      31             : @import 'src/app';
      32             : 
      33             : .x-layout {
      34             :   height: 100%;
      35             :   .x-left-panel, .x-right-panel {
      36             :     max-height: 100%;
      37             :     overflow-y: auto;
      38             :     overflow-x: hidden;
      39             :   }
      40             :   .x-content {
      41             :     max-height: 100%;
      42             :   }
      43             : 
      44             :   .x-bottom-panel {
      45             :     z-index: 10;
      46             :     min-height: 10vh;
      47             :   }
      48             : 
      49             :   .x-logo-container {
      50             :     height: 100%;
      51             :   }
      52             :   .x-logo {
      53             :     height: 70vh;
      54           6 :     max-width: 80%;
      55             :   }
      56             : }
      57             : 
      58             : </style>