Line data    Source code

       1           1 : <template lang="pug">
       2          33 : BaseCard.x-card.b-focus-highlight(:class='{ selected: isSelected }' tabIndex='-1'
       3          33 :     @focusin.native='isFocused = true'
       4          33 :     @focusout.native='isFocused = false')
       5          33 :   template(#header='')
       6             :     .d-flex.flex-wrap
       7             :       div
       8             :         strong(style='text-transform: capitalize;') {{ title }}
       9             :       div.mr-auto
      10             :       slot(name='icons' v-bind='{ ...$data, showKeyHints }')
      11             :       button.btn.btn-sm.btn-outline-info.mx-1(title='info' @click='showInfo = !showInfo')
      12             :         kbd.mr-2(v-if="showKeyHints && isFocused") Ctrl+H
      13           0 :         | #[i.fa.fa-question-circle]
      14             :       button.btn.btn-sm.btn-outline-secondary.ml-1(type='button' @click='toggleSelected')
      15             :         template(v-if='isSelected')
      16           0 :           kbd.mr-2(v-if='showKeyHints && isFocused') Esc
      17             :           i.fa.fa-compress-alt
      18             :         template(v-else)
      19             :           kbd.mr-2(v-if='showKeyHints && isFocused') Ctrl-Enter
      20             :           i.fa.fa-expand-alt
      21             :   li.p-0(key='info' v-show='showInfo')
      22             :     InfoAlert
      23             :       slot(name='info' v-bind='{ ...$data, showKeyHints }')
      24          66 :   slot(name='default' v-bind='{ ...$data, showKeyHints }')
      25             : </template>
      26             : <script src='./Card.vue.js' />
      27             : <style lang='scss'>
      28             : .x-card {
      29             :   transition: width 250ms, height 250ms;
      30             :   &.selected {
      31             :     box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
      32             :     position: fixed !important;
      33             :     margin: auto !important;
      34             :     top: 0;
      35             :     bottom: 0;
      36             :     left: 0;
      37             :     right: 0;
      38             :     z-index: 1050;
      39             :     max-height: 95vh !important;
      40             :     max-width: 95vw !important;
      41             :     width: 95vw !important;
      42             :   }
      43             :   > ul {
      44             :     overflow-y: auto;
      45             :     overflow-x: hidden;
      46             :     max-height: 100%;
      47             :   }
      48           0 : }
      49             : </style>