ResultsList.vue

<template>
  <v-container>
    <v-row>
      <v-col
        v-for="result in results.results"
        :key="result._id"
        cols="12"
        md="4"
        sm="6"
        xs="12"
      >
        <v-hover v-slot="{ isHovering, props }">
          <v-card
            v-bind="props"
            :elevation="isHovering ? 24 : 6"
            style="height: 100%; display: flex; flex-direction: column"
          >
            <v-card-title v-if="result._source.name.length > 65">
              <NuxtLink :href="'/CHEBI:' + result._id" class="vf-link">
                <v-tooltip :text="result._source.ascii_name">
                  <template v-slot:activator="{ props }">
                    <h4
                      class="headline text-overflow-adjust"
                      v-html="result._source.name"
                      v-bind="props"
                    ></h4>
                  </template>
                </v-tooltip>
              </NuxtLink>
            </v-card-title>
            <v-card-title v-else>
              <NuxtLink :href="'/CHEBI:' + result._id" class="vf-link">
                <h4
                  class="headline text-overflow-adjust"
                  v-html="result._source.name"
                ></h4>
              </NuxtLink>
            </v-card-title>
<!--            Card body display if SVG structure exists -->
            <v-row style="flex: 1" v-if="result._source.default_structure">
              <v-col
                cols="4"
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  padding-right: 0px;
                "
              >
                <v-img
                  :src="
                    mediaBaseUrl + result._source.default_structure + '.svg'
                  "
                ></v-img>
              </v-col>
              <v-col cols="8">
                <v-card-text>
                  <div
                    class="text-overflow-adjust"
                  >
                    <b>CHEBI:{{ result._id }} </b><br />
                  </div>
                  <div class="text-overflow-adjust">
                    <b>Stars:</b>
                    <SharedDisplayStars
                      :stars="result._source.stars"
                      :show-tooltip="false"
                    />
                  </div>
                  <div>
                    <div
                      class="text-overflow-adjust"
                      v-if="result._source.formula"
                    >
                      <b>Formula: </b>{{ result._source.formula }}<br />
                    </div>
                    <div
                      class="text-overflow-adjust"
                      v-if="result._source.mass"
                    >
                      <b>Mass: </b>{{ result._source.mass }}<br />
                    </div>
                    <div
                      class="text-overflow-adjust"
                      v-if="result._source.charge"
                    >
                      <b>Charge: </b>{{ result._source.charge }}<br />
                    </div>

                  </div>
                </v-card-text>
              </v-col>
            </v-row>

<!--            Card body display if structure does not exist (show definition instead)-->
            <v-row style="flex: 1" v-else>
              <v-col
                cols="12"
                style="
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  padding-right: 0px;
                "
              >
                <v-card-text>
                  <div
                    class="text-overflow-adjust"
                  >
                    <b>CHEBI:{{ result._id }} </b><br />
                  </div>
                  <div class="text-overflow-adjust">
                    <b>Stars:</b>
                    <SharedDisplayStars
                      :stars="result._source.stars"
                      :show-tooltip="false"
                    />
                  </div>
                  <div>
                    <div
                      class="text-overflow-adjust"
                      v-if="result._source.formula"
                    >
                      <b>Formula: </b>{{ result._source.formula }}<br />
                    </div>
                    <div
                      class="text-overflow-adjust"
                      v-if="result._source.mass"
                    >
                      <b>Mass: </b>{{ result._source.mass }}<br />
                    </div>
                    <div
                      class="text-overflow-adjust"
                      v-if="result._source.charge"
                    >
                      <b>Charge: </b>{{ result._source.charge }}<br />
                    </div>

                  </div>
                  <div class="" v-if="result._source.definition">
                    <b>Definition: </b>{{ result._source.definition }}
                  </div>
                </v-card-text>
              </v-col>
            </v-row>
          </v-card>
        </v-hover>
      </v-col>
    </v-row>
  </v-container>
</template>
<script setup lang="ts">
const runtimeConfig = useRuntimeConfig();
const mediaBaseUrl = runtimeConfig.public.apiBaseUrl + "/media/svg/";
defineProps<{
  results: {
    results: {
      _id: number;
      _score: number;
      _source: {
        charge: number;
        mass: number;
        name: string;
        formula: string;
        default_structure: string;
        stars: number;
        monoisotopicmass: number;
        ascii_name: string;
        definition: string;
      };
    }[];
  };
}>();
</script>

<style>
.text-overflow-adjust {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}
</style>