kittyfangs
/
fchat-rising
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
site/character_page/character_page.vue
View File

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

14
site/character_page/images.vue
View File

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