Sticky tabs
This commit is contained in:
parent
dab83dbc14
commit
66a083cbdb
|
@ -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>
|
|
@ -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 = ''">
|
||||
|
|
Loading…
Reference in New Issue