itube-specs 0.0.1018 → 0.0.1021

package/components/info/model.vue

@@ -1,131 +1,164 @@
-<!-- Инфо-карточка модели: портрет 3:4, псевдонимы, соцсети, шапка с действиями, рождение, описание, параметры с «Show more» -->
+<!-- Инфо-блок модели: портрет 3:4, псевдонимы, соцсети, шапка с действиями, рождение, описание, сводка-чипсы; «About» и группы параметров — по «Show more» -->
 <template>
   <section class="info-model">
-    <div class="info-model__content">
-      <div class="info-model__aside">
-        <UiImg
-          :src="currentImage"
-          :avif-src="currentAvifSrc"
-          :alt="card.title"
-          :sizes="IMG_SIZES"
-          class="info-model__img"
-          width="240"
-          height="320"
-          priority
-          @error="imageError = true"
-        />
-        <p
-          v-if="card.akaNames"
-          class="info-model__also"
+    <div class="info-model__aside">
+      <UiImg
+        :src="currentImage"
+        :avif-src="currentAvifSrc"
+        :alt="card.title"
+        :sizes="IMG_SIZES"
+        class="info-model__img"
+        width="240"
+        height="320"
+        priority
+        @error="imageError = true"
+      />
+      <p
+        v-if="akaNames.length"
+        class="info-model__also"
+      >
+        <span class="info-model__also-title">{{ t('also_known_as') }}</span>
+        <template
+          v-for="name in akaNames"
+          :key="name"
         >
-          <span class="info-model__also-title">{{ t('also_known_as') }}&nbsp;</span>
-          <span class="info-model__also-text">{{ card.akaNames }}</span>
-        </p>
-        <InfoSocials
-          v-if="socialItems.length > 0"
-          :items="socialItems"
-          :known-icons="KNOWN_ICONS"
-          class="info-model__social"
-          icon-size="16"
-        />
-      </div>
+          {{ ' ' }}<span class="info-model__also-name">{{ name }}</span>
+        </template>
+      </p>
+      <InfoSocials
+        v-if="socialItems.length"
+        :items="socialItems"
+        :known-icons="KNOWN_ICONS"
+        class="info-model__social"
+        icon-size="20"
+      />
+    </div>
 
-      <header class="info-model__header">
+    <header class="info-model__header">
+      <div class="info-model__heading">
         <h1 class="info-model__title">{{ card.title }}</h1>
-        <div class="info-model__actions">
-          <UiCount
-            class="info-model__count"
-            icon="video-camera"
-          >{{ $n(videosCount || card.videosCount, 'compact') }}</UiCount>
-          <UiBtn
-            :aria-label="t('share')"
-            :title="t('share')"
-            theme="muted"
-            size="s"
-            class="info-model__share"
-            @click="isShareOpen = true"
-          >
-            <UiIcon
-              name="share"
-              size="16"
-            />
-            <span class="info-model__share-text">{{ t('share') }}</span>
-          </UiBtn>
-          <UiFollowBtn
-            v-if="featureFlags.FeatureFollowEnabled"
-            :following="isFollowing"
-            :name="card.title"
-            class="info-model__follow"
-            size="s"
-            @toggle="onFollowClick"
+        <UiCount
+          class="info-model__count"
+          icon="video-camera"
+        >{{ $n(videosCount || card.videosCount, 'compact') }}</UiCount>
+        <UiBtn
+          :aria-label="t('share')"
+          :title="t('share')"
+          theme="muted"
+          size="s"
+          class="info-model__share"
+          @click="isShareOpen = true"
+        >
+          <UiIcon
+            name="share"
+            size="16"
           />
-        </div>
-      </header>
+          <span class="info-model__share-text">{{ t('share') }}</span>
+        </UiBtn>
+      </div>
+      <UiFollowBtn
+        v-if="featureFlags.FeatureFollowEnabled"
+        :following="isFollowing"
+        :name="card.title"
+        class="info-model__follow"
+        size="s"
+        @toggle="onFollowClick"
+      />
+    </header>
 
-      <p
-        v-if="card.birthSummary"
-        class="info-model__born"
+    <p
+      v-if="card.birthSummary"
+      class="info-model__born"
+    >
+      <UiIcon
+        class="info-model__born-icon"
+        name="geo"
+        size="14"
+      />
+      <span class="info-model__born-text">{{ card.birthSummary }}</span>
+      <!-- Национальность нигде больше не подписана — флаг единственный её носитель,
+      поэтому в `alt` идёт название страны, а не ISO-код. -->
+      <img
+        v-for="(item, index) in card.nationalityIsoCodes"
+        :key="`nationalityIsoCodes-${index}`"
+        :src="`/icons/flags/${item}.svg`"
+        :alt="isoCodeToCountryName(item, locale)"
+        class="info-model__born-flag"
+        width="20"
+        height="14"
       >
-        <UiIcon
-          class="info-model__born-icon"
-          name="geo"
-          size="14"
-        />
-        <span class="info-model__born-text">{{ card.birthSummary }}</span>
-        <!-- Национальность нигде больше не подписана — флаг единственный её носитель,
-        поэтому в `alt` идёт название страны, а не ISO-код. -->
-        <img
-          v-for="(item, index) in card.nationalityIsoCodes"
-          :key="`nationalityIsoCodes-${index}`"
-          :src="`/icons/flags/${item}.svg`"
-          :alt="isoCodeToCountryName(item, locale)"
-          class="info-model__born-flag"
-          width="20"
-          height="14"
+    </p>
+
+    <p
+      v-if="card.description"
+      class="info-model__description"
+    >{{ card.description }}</p>
+
+    <ul
+      v-if="summaryItems.length"
+      class="info-model__summary"
+    >
+      <li
+        v-for="item in summaryItems"
+        :key="item.key"
+      >
+        <component
+          :is="item.to ? NuxtLink : 'span'"
+          :class="{'--link': item.to}"
+          :to="item.to"
+          class="info-model__summary-item"
         >
-      </p>
+          <UiIcon
+            v-if="item.icon"
+            :name="item.icon"
+            class="info-model__summary-icon"
+            prefix="models"
+            size="16"
+          />
+          {{ item.title }}
+        </component>
+      </li>
+    </ul>
 
-      <p
-        v-if="card.description"
-        :class="{'_truncate': !isExpanded}"
-        class="info-model__description"
-      >{{ card.description }}</p>
+    <div
+      v-if="hasMore"
+      :class="{'--collapsed': !isExpanded, '--about': card.fullDescription}"
+      class="info-model__details"
+    >
+      <div
+        v-if="card.fullDescription"
+        class="info-model__about"
+      >
+        <h3 class="info-model__about-title">{{ t('model_about') }}</h3>
+        <p
+          :class="{'_truncate': !isExpanded}"
+          class="info-model__about-text"
+        >{{ card.fullDescription }}</p>
+      </div>
 
       <InfoGrid
-        v-if="mainGroups.length > 0"
-        :groups="mainGroups"
+        v-if="groupedParameters.length"
+        :groups="groupedParameters"
         :iso-codes="card.nationalityIsoCodes"
         class="info-model__parameters"
       />
-
-      <InfoGrid
-        v-if="extraGroups.length > 0"
-        :class="{'--collapsed': !isExpanded}"
-        :groups="extraGroups"
-        :iso-codes="card.nationalityIsoCodes"
-        class="info-model__parameters-extra"
-      />
     </div>
 
-    <footer
+    <button
       v-if="hasMore"
-      class="info-model__footer"
+      :aria-expanded="isExpanded"
+      class="info-model__more"
+      type="button"
+      @click="isExpanded = !isExpanded"
     >
-      <button
-        :aria-expanded="isExpanded"
-        class="info-model__more"
-        type="button"
-        @click="isExpanded = !isExpanded"
-      >
-        {{ isExpanded ? t('show_less') : t('show_more') }}
-        <UiIcon
-          :class="{'--expanded': isExpanded}"
-          class="info-model__more-icon"
-          name="angle-down"
-          size="12"
-        />
-      </button>
-    </footer>
+      {{ isExpanded ? t('show_less') : t('show_more') }}
+      <UiIcon
+        :class="{'--expanded': isExpanded}"
+        class="info-model__more-icon"
+        name="angle-down"
+        size="16"
+      />
+    </button>
 
     <ShareMain v-model="isShareOpen">
       <template #card>
@@ -141,6 +174,7 @@ import type { ICardInfo, IGroupedParameter, ILinkItem, IModelCard } from '../../
 import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 import { AuthorizationApiService } from '../../services/api/authorization.service';
 import { groupParametersByGroup } from '../../utils/info-main/group-parameters-by-group';
+import { modelFilterLink } from '../../utils/info-grid/model-filter-link';
 import { isoCodeToCountryName } from '../../utils/iso-code-to-country-name';
 
 const props = defineProps<{
@@ -152,9 +186,14 @@ const { t, locale } = useI18n();
 
 const featureFlags = useRuntimeConfig().public.featureFlags;
 const placeholderOf = useModelPlaceholder();
+const { generateLink } = useGenerateLink();
+const NuxtLink = resolveComponent('NuxtLink');
 
 const KNOWN_ICONS = ['facebook', 'instagram', 'tiktok', 'twitter', 'x', 'youtube', 'snapchat'];
 
+/** Параметры сводки под описанием, в порядке показа. В группах ниже они не повторяются. */
+const SUMMARY_NAMES = ['guy_type', 'body_build', 'ethnicity', 'role', 'age'];
+
 const placeholder = computed(() => placeholderOf(props.card.gender, 'portrait'));
 
 /** `.info-model__img` — 160px до sm, 240px дальше. `auto` впереди — см. `UiImg`. */
@@ -165,6 +204,8 @@ const isFallback = computed(() => imageError.value || !props.card.portraitImg);
 const currentImage = computed(() => (isFallback.value ? placeholder.value.webp : props.card.portraitImg));
 const currentAvifSrc = computed(() => (isFallback.value ? placeholder.value.avif : props.card.portraitAvifUrl));
 
+const akaNames = computed(() => props.card.akaNames.split(', ').filter(Boolean));
+
 const socialItems = computed<ILinkItem[]>(() => (
   Object.entries(props.card.social || {}).map(([key, value]) => ({
     name: value || '',
@@ -173,20 +214,27 @@ const socialItems = computed<ILinkItem[]>(() => (
   }))
 ));
 
-const groupedParameters = computed<IGroupedParameter[]>(() =>
-  groupParametersByGroup(props.card.parameters ?? []),
-);
-
-/** Первая группа видна всегда; вторая свёрнутой видна только с sm, остальные — после «Show more». */
-const mainGroups = computed(() => groupedParameters.value.slice(0, 1));
+const summaryItems = computed(() => SUMMARY_NAMES.flatMap((name) => {
+  const param = props.card.parameters?.find(p => p.name === name);
+  if (!param) return [];
 
-const isExpanded = ref(false);
+  return param.values.map(value => ({
+    key: `${name}-${value.name}`,
+    title: name === 'age' ? `${value.title} ${t('yo')}` : value.title,
+    icon: name === 'age' ? undefined : param.icon,
+    to: param.is_filter ? generateLink(modelFilterLink(param, value.name)) : undefined,
+  }));
+}));
 
-const extraGroups = computed(() => (
-  isExpanded.value ? groupedParameters.value.slice(1) : groupedParameters.value.slice(1, 2)
+/** Страна уже есть в строке рождения флагом — отдельным чипсом её не повторяем. */
+const groupedParameters = computed<IGroupedParameter[]>(() => groupParametersByGroup(
+  (props.card.parameters ?? []).filter(p => !SUMMARY_NAMES.includes(p.name)
+    && !(p.name === 'nationality_iso_codes' && props.card.birthSummary)),
 ));
 
-const hasMore = computed(() => groupedParameters.value.length > 1 || Boolean(props.card.description));
+const isExpanded = ref(false);
+
+const hasMore = computed(() => groupedParameters.value.length > 0 || Boolean(props.card.fullDescription));
 
 const isShareOpen = ref(false);
 
@@ -236,34 +284,30 @@ const shareModelCard = computed<IModelCard>(() => ({
 
 <style lang="scss">
 .info-model {
-  border: 1px solid $info-model-border;
-  border-radius: $radius-xl;
-  background-color: $info-model-bg;
-}
-
-.info-model__content {
   display: grid;
   grid-template-columns: 160px minmax(0, 1fr);
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto auto auto auto auto 1fr auto;
   grid-template-areas:
     'aside header'
-    'aside parameters'
-    'born born'
-    'description description'
-    'extra extra';
+    'aside born'
+    'aside description'
+    'aside summary'
+    'aside more'
+    'aside .'
+    'details details';
   column-gap: 16px;
-  padding: 16px;
 
   @include from-br(sm) {
     grid-template-columns: 240px minmax(0, 1fr);
-    grid-template-rows: auto auto auto auto 1fr;
+    grid-template-rows: auto auto auto auto auto auto 1fr;
     grid-template-areas:
       'aside header'
       'aside born'
       'aside description'
-      'aside parameters'
-      'aside extra';
-    padding: 20px;
+      'aside summary'
+      'aside details'
+      'aside more'
+      'aside .';
   }
 }
 
@@ -287,7 +331,7 @@ const shareModelCard = computed<IModelCard>(() => ({
   @include font-xs;
 
   margin-top: 8px;
-  color: $info-model-also;
+  color: $info-model-also-title;
   line-height: 1.625;
 
   @include from-br(sm) {
@@ -297,8 +341,13 @@ const shareModelCard = computed<IModelCard>(() => ({
   }
 }
 
-.info-model__also-title {
-  color: $info-model-also-title;
+.info-model__also-name {
+  color: $info-model-also;
+  white-space: nowrap;
+}
+
+.info-model__also-name:not(:last-of-type)::after {
+  content: ',';
 }
 
 .info-model__social {
@@ -312,21 +361,36 @@ const shareModelCard = computed<IModelCard>(() => ({
 .info-model__header {
   display: grid;
   grid-area: header;
-  row-gap: 8px;
-  margin-bottom: 8px;
+  grid-template-columns: auto auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+
+  @include from-br(sm) {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    column-gap: 12px;
+  }
+}
+
+.info-model__heading {
+  display: contents;
 
   @include from-br(sm) {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    column-gap: 12px;
+    gap: 12px;
+    min-width: 0;
   }
 }
 
 .info-model__title {
   @include font-base;
 
+  grid-column: 1 / -1;
   min-width: 0;
+  margin-top: -2px;
   font-weight: 700;
   line-height: 1.25;
   text-transform: uppercase;
@@ -334,27 +398,22 @@ const shareModelCard = computed<IModelCard>(() => ({
 
   @include from-br(sm) {
     @include font-lg;
-  }
-}
-
-.info-model__actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
 
-  @include from-br(sm) {
-    display: contents;
+    margin-top: 0;
   }
 }
 
 .info-model__count {
-  padding: 7px 12px;
+  min-height: 36px;
+  padding: 8px 12px;
   flex-shrink: 0;
 }
 
 .info-model__share {
   @include button-variant(info-model-button);
 
+  min-height: 36px;
+
   @include to-br(sm) {
     width: 36px;
     padding: 0;
@@ -368,19 +427,28 @@ const shareModelCard = computed<IModelCard>(() => ({
 }
 
 .info-model__follow {
-  margin-inline-start: auto;
+  justify-self: end;
+
+  @include to-br(sm) {
+    width: 36px;
+    height: 36px;
+  }
+
+  @include from-br(sm) {
+    min-height: 36px;
+  }
 }
 
 .info-model__born {
   @include font-sm;
 
   grid-area: born;
-  margin-top: 20px;
+  margin-top: 12px;
   color: $info-model-born;
+  line-height: 1.625;
 
   @include from-br(sm) {
-    margin-top: 0;
-    margin-bottom: 12px;
+    margin-top: 8px;
   }
 }
 
@@ -404,56 +472,93 @@ const shareModelCard = computed<IModelCard>(() => ({
 .info-model__description {
   @include font-sm;
 
-  --line-clamp: 2;
-
   grid-area: description;
-  margin-top: 16px;
+  max-width: 740px;
+  margin-top: 8px;
+  margin-bottom: -6px;
   line-height: 1.625;
   color: $info-model-description;
+  text-wrap: pretty;
 
   @include from-br(sm) {
-    margin-top: 0;
+    margin-top: 12px;
   }
 }
 
-.info-model__parameters {
-  grid-area: parameters;
-  align-self: start;
+.info-model__summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  grid-area: summary;
+  gap: 8px;
   margin-top: 16px;
+}
 
-  @include from-br(sm) {
-    margin-top: 20px;
-  }
+.info-model__summary-item {
+  @include font-sm;
+
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  height: 36px;
+  padding-inline: 10px;
+  border-radius: $radius-lg;
+  background-color: $info-model-summary-bg;
+  color: $info-model-summary-text;
 }
 
-.info-model__parameters .info-grid__item-title {
-  @include to-br(sm) {
-    display: none;
+.info-model__summary-item.--link {
+  @include hover(background-color) {
+    background-color: $info-model-summary-bg--hover;
   }
 }
 
-.info-model__parameters .info-grid__item:not(.--link) .info-grid__item-value {
-  @include to-br(sm) {
-    border-left: none;
-  }
+.info-model__summary-icon {
+  flex-shrink: 0;
+  color: $info-model-summary-icon;
 }
 
-.info-model__parameters-extra {
-  grid-area: extra;
+.info-model__details {
+  display: grid;
+  grid-area: details;
+  row-gap: 20px;
   margin-top: 20px;
 }
 
-.info-model__parameters-extra.--collapsed {
+.info-model__details.--collapsed {
   @include to-br(sm) {
     display: none;
   }
 }
 
-.info-model__footer {
-  display: flex;
-  justify-content: center;
-  padding: 12px 20px;
-  border-top: 1px solid $info-model-footer-border;
+.info-model__details.--collapsed:not(.--about) {
+  display: none;
+}
+
+.info-model__details.--collapsed .info-model__parameters {
+  display: none;
+}
+
+.info-model__about-title {
+  @include font-xs;
+
+  margin-bottom: 12px;
+  color: $info-model-about-title;
+  font-weight: 600;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.info-model__about-text {
+  @include font-sm;
+
+  --line-clamp: 3;
+
+  max-width: 740px;
+  margin-block: -6px;
+  line-height: 1.625;
+  color: $info-model-about-text;
+  text-wrap: pretty;
 }
 
 .info-model__more {
@@ -461,7 +566,11 @@ const shareModelCard = computed<IModelCard>(() => ({
 
   display: flex;
   align-items: center;
+  justify-self: start;
+  grid-area: more;
   column-gap: 6px;
+  margin-top: 16px;
+  margin-bottom: -6px;
   color: $info-model-more-text;
 
   @include hover(color) {

package/components/info/socials.vue

@@ -39,15 +39,10 @@ withDefaults(
   gap: 8px;
   flex-wrap: wrap;
   align-items: start;
-
-  @include from-br(sm) {
-    margin-inline: 0;
-    gap: 12px;
-  }
 }
 
 .info-socials__item {
-  --size: 32px;
+  --size: 44px;
 
   display: grid;
   place-content: center;
@@ -58,19 +53,8 @@ withDefaults(
   border-radius: $radius-full;
   color: $info-socials-icon;
 
-  @include from-br(sm) {
-    --size: 28px;
-  }
-
   @include hover(background-color) {
     background-color: $info-socials-bg--hover;
   }
 }
-
-.info-socials__item img {
-  @include from-br(sm) {
-    width: 14px;
-    height: 14px;
-  }
-}
 </style>