Sticky tabs

This commit is contained in:
Mr. Stallion 2019-12-07 09:23:22 -06:00
parent dab83dbc14
commit 66a083cbdb
2 changed files with 13 additions and 11 deletions

View File

@ -23,7 +23,7 @@
</div>
<div v-if="character.memo" id="headerCharacterMemo" class="alert alert-info">Memo: {{ character.memo.memo }}</div>
<div class="card bg-light">
<div class="card-header">
<div class="card-header character-card-header">
<tabs class="card-header-tabs" v-model="tab">
<span>Overview</span>
<span>Info</span>
@ -859,4 +859,12 @@
color: rgba(255, 255, 255, 0.5);
}
.character-card-header {
position: sticky;
top: 0;
z-index: 10000;
background: #2a2a54 !important;
}
</style>

View File

@ -3,6 +3,10 @@
<div class="character-images">
<div v-show="loading" class="alert alert-info">Loading images.</div>
<template v-if="!loading">
<div class="images-navigate-up">
<i class="fa fa-angle-up"></i>
</div>
<!-- @click="handleImageClick($event, image)" -->
<div v-for="image in images" :key="image.id" class="character-image-wrapper">
<a :href="imageUrl(image)" target="_blank">
@ -10,16 +14,6 @@
</a>
<div class="image-description" v-if="!!image.description">{{image.description}}</div>
</div>
<!-- <div class="character-image col-6 col-sm-12 col-md-12" v-for="image in images" :key="image.id">-->
<!-- <img :src="imageUrl(image)" :title="image.description">-->
<!-- </div>-->
<!-- -->
<!-- <a :href="imageUrl(image)" target="_blank" @click="handleImageClick($event, image)">-->
<!-- <img :src="thumbUrl(image)" :title="image.description">-->
<!-- </a>-->
<!-- </div>-->
</template>
<div v-if="!loading && !images.length" class="alert alert-info">No images.</div>
<div class="image-preview" v-show="previewImage" @click="previewImage = ''">