Skip to content
Snippets Groups Projects
Select Git revision
  • d88e731a6493941ceebdd67f4ab5a443701ec994
  • master default protected
  • gitkeep
  • dev protected
  • Issue/2218-updateLinksToDocumentationPage
  • Issue/1913-ModificationsResourceMetadata
  • Sprint/2022-01
  • Hotfix/1911-fixFormatting
  • Sprint/2021-2022
  • Issue/912-rearrangeHeader
  • Sprint/2021-22
  • Issue/1743-changedLink
  • Issue/1659-makeViewCardsALink
  • Sprint/2021-15
  • Product/1573-ReadOnlyResources
  • x/linting
  • Topic/1595-IncludeReadonlyValueInResourcesApp
  • Topic/1531-UseMangmntTableView
  • Product/1548-projectInviteMngmnt
  • Sprint/2021-08
  • Hotfix/1475-projectCreateSpinner
  • v1.12.1
  • v1.12.0
  • v1.11.1
  • v1.11.0
  • v1.10.0
  • v1.9.0
  • v1.8.1
  • v1.8.0
  • v1.7.0
  • v1.6.2
  • v1.6.1
  • v1.6.0
  • v1.5.0
  • v1.4.1
  • v1.4.0
  • v1.3.0
  • v1.2.0
  • v1.1.1
  • v1.1.0
  • v1.0.0
41 results

LoadingFormSkeleton.vue

Blame
  • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    LoadingFormSkeleton.vue 1.17 KiB
    <template>
      <span id="loadingFormSkeleton">
        <b-row>
          <div class="col-sm-3 labelSkeleton"><b-skeleton type="input" width="55%" /></div>
          <div class="col-sm-9">
            <b-skeleton type="input" width="85%" />
          </div>
        </b-row>
        <b-row>
          <div class="col-sm-3 labelSkeleton"><b-skeleton type="input" width="65%" /></div>
          <div class="col-sm-9">
            <b-skeleton type="input" width="55%" />
          </div>
        </b-row>
        <b-row>
          <div class="col-sm-3 labelSkeleton"><b-skeleton type="input" width="45%" /></div>
          <div class="col-sm-9">
            <b-skeleton type="input" width="70%" />
          </div>
        </b-row>
      </span>
    </template>
    
    <script lang="ts">
    import { FormGroupPlugin, BRow, BSkeleton } from 'bootstrap-vue';
    import Vue from 'vue';
    Vue.use(FormGroupPlugin);
    Vue.component('b-row', BRow);
    Vue.component('b-skeleton', BSkeleton);
    
    export default Vue.extend({
      name: 'CoscineLoadingFormSkeleton',
      props: {},
    });
    </script>
    <style>
    #loadingFormSkeleton .row {
      margin-bottom: 1rem;
    }
    #loadingFormSkeleton .labelSkeleton .b-skeleton {
      float: right;
    }
    #loadingFormSkeleton .b-skeleton {    
        margin-right: -7px;
        margin-left: -7px;
    }
    </style>