public/owltide
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages 1 Wiki Activity Actions

Render multi-line diff entries

Browse source 
Rework the rendering of the DiffEntry component to properly show
multiline entries as spanning multiple lines.
This commit is contained in:
Hornwitser 2025-09-06 16:50:41 +02:00
parent a8c62e6688
commit 6d9d937c70
2 changed files with 17 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/CardEventSlot.vue
View file

@ -13,7 +13,7 @@
<p v-if=event?.host> <p v-if=event?.host>
Host: {{ event.host }} Host: {{ event.host }}
</p> </p>
<p>{{ event?.description ?? "No description provided" }}</p> <p class="preWrap">{{ event?.description ?? "No description provided" }}</p>
<p v-if="locations.length"> <p v-if="locations.length">
At {{ locations.map(location => location?.name ?? "unknown").join(" + ") }} At {{ locations.map(location => location?.name ?? "unknown").join(" + ") }}
</p> </p>

25
components/DiffEntry.vue
View file

@ -15,9 +15,14 @@
:key="index" :key="index"
:class="type" :class="type"
> >
<div class="symbol">
{{ { "removed": "- ", "added": "+ "}[type] }}
</div>
<div class="content">
{{ text }} {{ text }}
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -33,20 +38,20 @@ defineProps<{
grid-template-columns: 5rem 1fr; grid-template-columns: 5rem 1fr;
column-gap: 1rem; column-gap: 1rem;
} }
.removed { :is(.removed, .added) {
display: flex;
grid-column: 2 / 2; grid-column: 2 / 2;
white-space: pre-wrap;
}
:is(.removed, .added) .symbol {
display: block;
font-family: monospace;
flex: 0 0 auto;
}
.removed {
color: color-mix(in srgb, CanvasText, red 40%); color: color-mix(in srgb, CanvasText, red 40%);
} }
.removed::before {
content: "- ";
font-family: monospace;
}
.added { .added {
grid-column: 2 / 2;
color: color-mix(in srgb, CanvasText, green 40%); color: color-mix(in srgb, CanvasText, green 40%);
} }
.added::before {
content: "+ ";
font-family: monospace;
}
</style> </style>