Commit 6353fd24 authored by Dannon Baker's avatar Dannon Baker
Browse files

Swaps back to the 'standard' bootstrap collapse directive. We have less 

control over this, but then we don't have to fiddle with element height
directly -- it simply relies on the placeholder space consumed.
parent 0f033804

client/src/components/History/Content/ContentItem.vue

+2 −11
Original line number Diff line number Diff line
@@ -77,14 +77,14 @@ 
            @tag-click="onTagClick"

            @input="onTags" />

        <!-- collections are not expandable, so we only need the DatasetDetails component here -->

        <div class="detail-animation-wrapper" :class="expandDataset ? '' : 'collapsed'">

        <b-collapse :visible="expandDataset">

            <DatasetDetails

                v-if="expandDataset"

                :dataset="item"

                :show-highlight="isHistoryItem && isHistPanel"

                @edit="onEdit"

                @toggleHighlights="toggleHighlights" />

        </div>

        </b-collapse>

    </div>

</template>
@@ -214,13 +214,4 @@ export default { 
        word-break: break-all;

    }

}

.detail-animation-wrapper {

    overflow: hidden;

    transition: max-height 0.2s ease-out;

    height: auto;

    max-height: 400px;

}

.detail-animation-wrapper.collapsed {

    max-height: 0;

}

</style>

client/src/components/History/Content/Dataset/DatasetDetails.vue

+26 −0
Original line number Diff line number Diff line
@@ -25,6 +25,32 @@ 
                <pre v-if="result.peek" class="dataset-peek p-1" v-html="result.peek" />

            </div>

        </div>

        <div v-else class="dataset">

            <!--

                placeholder skeleton for loading smoothly without a spinner

                (which you don't even see since this happens pretty fast)

            -->

            <div class="p-2 details">

                <div class="summary">

                    <div class="mb-1">

                        <b-skeleton width="85%"></b-skeleton>

                    </div>

                    <span class="datatype">

                        <b-skeleton width="55%"></b-skeleton>

                    </span>

                    <div class="info">

                        <span class="value">Dataset Information Loading.</span>

                    </div>

                </div>

                <pre class="dataset-peek p-1">

                    <table cellspacing="0" cellpadding="3">

                        <tbody>

                            <tr><td>Loading...</td></tr>

                        </tbody>

                    </table>

                </pre>

            </div>

        </div>

    </DatasetProvider>

</template>