This commit is contained in:
@ -115,13 +115,31 @@ body {
|
||||
.stopdescription {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
padding: 0 15px 0 15px;
|
||||
padding: 0 10px 0 10px;
|
||||
color: #fff;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 15px;
|
||||
max-height: calc(100% - 430px);
|
||||
}
|
||||
|
||||
.stopdescription::-webkit-scrollbar {
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.stopdescription::-webkit-scrollbar-track {
|
||||
background: #a6a6a6;
|
||||
}
|
||||
|
||||
.stopdescription::-webkit-scrollbar-thumb {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* Firefox scrollbar */
|
||||
.stopdescription {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: white #a6a6a6;
|
||||
}
|
||||
|
||||
.landmarks {
|
||||
background: #806c58;
|
||||
border-radius: 10px 10px 0 0;
|
||||
@ -843,18 +861,35 @@ li.checked {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.sight-thumbnail {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 100%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sight-thumbnail img {
|
||||
object-fit: cover;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.sight-title {
|
||||
margin-top: 4px;
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.sight-letter {
|
||||
@ -1063,3 +1098,136 @@ li.checked {
|
||||
.governor-appeal h3 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.sight-card {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sight-card-detail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 105%;
|
||||
width: 260px;
|
||||
z-index: 20;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
color: #fff;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.sight-card-detail .detail-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sight-card-detail .detail-name {
|
||||
margin: 0 0 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-articles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.detail-article {
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.sight-side-panel {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
padding: 14px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.panel-image-wrapper {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.panel-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.panel-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.panel-articles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.panel-article-option {
|
||||
padding: 4px 8px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.panel-article-option.selected {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
.language-options {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.lang-option svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.sights-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.sight-letter-group {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.letter-anchor {
|
||||
position: absolute !important;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sight-card {
|
||||
flex: 0 0 calc((100% - 24px) / 3);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@ -216,9 +216,9 @@
|
||||
<div
|
||||
v-for="(group, letter) in groupedSights"
|
||||
:key="letter"
|
||||
:ref="'letter-' + letter"
|
||||
class="sight-letter-group"
|
||||
>
|
||||
<span :ref="'letter-' + letter" class="letter-anchor"></span>
|
||||
<div
|
||||
v-for="sight in group"
|
||||
:key="sight.id"
|
||||
@ -228,7 +228,9 @@
|
||||
}"
|
||||
@click.stop="openSightCardDetails(sight.id)"
|
||||
>
|
||||
<img class="sight-thumbnail" :src="sight.thumbnailUrl" />
|
||||
<div class="sight-thumbnail">
|
||||
<img :src="sight.thumbnailUrl" />
|
||||
</div>
|
||||
<div class="sight-title">{{ sight.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -761,12 +763,19 @@ export default {
|
||||
}
|
||||
},
|
||||
selectLetter(letter) {
|
||||
const section = this.$refs[`letter-${letter}`]?.[0];
|
||||
const anchorArr = this.$refs[`letter-${letter}`];
|
||||
const anchor = anchorArr ? anchorArr[0] : null;
|
||||
const container = this.$refs.scrollContainer;
|
||||
if (section && container) {
|
||||
const top = section.offsetTop;
|
||||
container.scrollTo({ top, behavior: "smooth" });
|
||||
|
||||
if (!anchor || !container) return;
|
||||
|
||||
let target = anchor.nextElementSibling;
|
||||
if (!target || !target.classList.contains("sight-card")) {
|
||||
target = anchor;
|
||||
}
|
||||
|
||||
const top = target.offsetTop;
|
||||
container.scrollTo({ top, behavior: "smooth" });
|
||||
},
|
||||
toggleTransfers() {
|
||||
console.log("Transfer toggle clicked");
|
||||
@ -841,113 +850,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sight-card {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sight-card-detail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 105%;
|
||||
width: 260px;
|
||||
z-index: 20;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
color: #fff;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.sight-card-detail .detail-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.sight-card-detail .detail-name {
|
||||
margin: 0 0 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-articles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.detail-article {
|
||||
margin-top: 4px;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.sight-side-panel {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
padding: 14px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.panel-image-wrapper {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.panel-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.panel-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.panel-description {
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 10px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.panel-articles {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.panel-article-option {
|
||||
padding: 4px 8px;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.panel-article-option.selected {
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
.language-options {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.lang-option svg {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user