itube-specs 0.0.957 → 0.0.959

package/assets/scss/themes/dark/_theme.scss

@@ -868,6 +868,8 @@ $bg-fade-90: $color-zinc-950-90; // почти непрозрачный
 // ─── Model card ───
 $model-card-bg: $color-zinc-900-50;
 $model-card-bg--hover: $color-zinc-800-50;
+$model-card-thumb-bg: $color-zinc-800;
+$model-card-separator: $color-zinc-600;
 $model-card-border: $color-zinc-800-50;
 $model-card-border--hover: $color-zinc-700-50;
 $model-card-params: $color-zinc-500;

package/assets/scss/themes/light/_theme.scss

@@ -894,6 +894,8 @@ $bg-fade-90: $color-gray-950-90; // почти непрозрачный
 // ─── Model card ───
 $model-card-bg: $color-gray-100;
 $model-card-bg--hover: $model-card-bg;
+$model-card-thumb-bg: $color-gray-200;
+$model-card-separator: $color-gray-400;
 $model-card-border: transparent;
 $model-card-border--hover: $model-card-border;
 $model-card-params: $color-gray-600;

package/components/card/model.vue

@@ -1,82 +1,83 @@
-<!-- Карточка модели: аватар, параметры, страна, счётчики видео/обновлений -->
+<!-- Карточка модели: портрет 3:4, имя со страной, параметры и счётчики видео/обновлений -->
 <template>
   <NuxtLink
     :to="generateLink(`/models/${convertString().toSlug(card.title)}`)"
     :title="card.title"
     class="card-model"
   >
-    <div class="card-model__inner">
+    <div class="card-model__thumb">
       <UiImg
         :src="currentImage"
         :loading="loading"
         :alt="card.title"
         :priority="priority"
+        :sizes="`(max-width: ${CSS_BREAKPOINTS.xs}px) 50vw, 240px`"
         class="card-model__img"
-        width="64"
-        height="64"
-        sizes="xs:64px sm:64px md:64px lg:64px"
+        width="240"
+        height="320"
         @error="onImageError"
       />
-      <div class="card-model__wrapper">
-        <p class="card-model__info">
-          <span class="card-model__info-name">
-            {{ card.title }}
-          </span>
-          <span
-            v-if="card.country && card.country.name"
-            :title="`${t('birthplace_country')}: ${card.country.title}`"
-            class="card-model__country-wrapper"
-          >
-            <img
-              :alt="card.country.title"
-              :src="`/icons/flags/${card.country.name}.svg`"
-              class="card-model__info-country"
-              width="16"
-              height="12"
-            >
-          </span>
-        </p>
-        <p class="card-model__parameters">
-          <span
-            v-for="(parameter, index) in card.parameters"
-            :key="`parameter-${index}`"
-            class="card-model__parameter"
-          >
-            <span
-              v-if="parameter.title"
-              class="card-model__parameter-title"
-            >{{ getValue(parameter) }}</span>
-          </span>
-        </p>
-        <p class="card-model__parameters-footer">
-          <span
-            v-if="card.videosCount"
-            class="card-model__count"
+    </div>
+    <div class="card-model__wrapper">
+      <p class="card-model__info">
+        <span class="card-model__info-name">
+          {{ card.title }}
+        </span>
+        <span
+          v-if="card.country?.name"
+          :title="`${t('birthplace_country')}: ${card.country.title}`"
+          class="card-model__country-wrapper"
+        >
+          <img
+            :alt="card.country.title"
+            :src="`/icons/flags/${card.country.name}.svg`"
+            class="card-model__info-country"
+            width="16"
+            height="12"
           >
-            <UiIcon
-              name="video-camera"
-              size="14"
-            />
-            {{ $n(card.videosCount, 'compact') }}
-          </span>
+        </span>
+      </p>
+      <p class="card-model__parameters">
+        <span
+          v-for="(parameter, index) in visibleParameters"
+          :key="`parameter-${index}`"
+          class="card-model__parameter"
+        >
           <span
-            v-if="card.lastVideoAddedAt"
-            class="card-model__update"
-          >
-            <UiIcon
-              name="time-updated"
-              size="14"
-            />
-            {{ formatDate(card.lastVideoAddedAt) }}
-          </span>
-        </p>
-      </div>
+            v-if="parameter.title"
+            class="card-model__parameter-title"
+          >{{ getValue(parameter) }}</span>
+        </span>
+        <span
+          v-if="card.videosCount"
+          class="card-model__count"
+        >
+          <UiIcon
+            name="video-camera"
+            size="14"
+          />
+          {{ $n(card.videosCount, 'compact') }}
+        </span>
+      </p>
+      <p
+        v-if="card.lastVideoAddedAt"
+        class="card-model__update"
+      >
+        <UiIcon
+          name="time-updated"
+          size="12"
+        />
+        <span class="card-model__update-text">
+          {{ t('library.updated_at', { date: formatDate(card.lastVideoAddedAt) }) }}
+        </span>
+      </p>
     </div>
   </NuxtLink>
 </template>
 
 <script setup lang="ts">
 import { convertString, formatDate } from '../../runtime';
+import { CSS_BREAKPOINTS } from '../../config/css-breakpoints';
 import type { IModelCard } from '../../types';
 
 const props = withDefaults(defineProps<{
@@ -102,6 +103,16 @@ function onImageError() {
   imageError.value = true;
 }
 
+/** В строку помещается только первый параметр из списка (тип парня) и возраст — остальные скрыты. */
+const visibleParameters = computed(() => {
+  const isAge = (item: IModelCard['parameters'][number]) => item.title === 'age';
+
+  return [
+    props.card.parameters.find(item => !isAge(item)),
+    props.card.parameters.find(isAge),
+  ].filter(item => item !== undefined);
+});
+
 function getValue(item: { title?: string; value?: string }) {
   if (item.title === 'age') {
     return `${item.value} ${t('yo')}`;
@@ -112,11 +123,12 @@ function getValue(item: { title?: string; value?: string }) {
 
 <style lang="scss">
 .card-model {
-  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
   background-color: $model-card-bg;
-  border-radius: $radius-xl;
+  border-radius: $radius-md;
   border: 1px solid $model-card-border;
-  display: block;
+  overflow: hidden;
 
   @include hover(border-color, background-color, box-shadow) {
     border-color: $model-card-border--hover;
@@ -125,52 +137,48 @@ function getValue(item: { title?: string; value?: string }) {
   }
 }
 
-.card-model__inner {
-  --img-size: 80px;
+.card-model__thumb {
+  aspect-ratio: 3/4;
+  background-color: $model-card-thumb-bg;
+  overflow: hidden;
+}
 
-  display: grid;
-  grid-template-columns: var(--img-size) 1fr;
-  padding: 8px;
-  column-gap: 8px;
+.card-model__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center top;
 
   @include from-br(sm) {
-    padding: 12px;
-    column-gap: 12px;
+    transition: var(--transition) transform;
   }
 }
 
-.card-model__parameters {
-  @include font-sm;
-
-  color: $model-card-params;
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
+@media (hover: hover) {
+  .card-model:is(:hover, :focus-visible) .card-model__img {
+    transform: scale(1.05);
+  }
 }
 
-.card-model__parameters-footer {
-  @include font-sm;
-
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  color: $model-card-params-footer;
-  margin-top: 2px;
-  column-gap: 12px;
+.card-model__wrapper {
+  padding: 8px;
 }
 
-.card-model__update {
+.card-model__info {
   display: grid;
-  grid-template-columns: 12px 1fr;
-  column-gap: 4px;
+  grid-template-columns: minmax(0, auto) auto;
+  column-gap: 6px;
+  justify-content: start;
   align-items: center;
+  margin-bottom: 2px;
 }
 
 .card-model__info-name {
+  @include font-sm;
+
   font-weight: 500;
   color: $model-card-name;
   white-space: nowrap;
-  max-width: 100%;
   text-overflow: ellipsis;
   overflow: hidden;
   text-transform: capitalize;
@@ -186,50 +194,64 @@ function getValue(item: { title?: string; value?: string }) {
   }
 }
 
-.card-model__info {
-  display: grid;
-  column-gap: 8px;
-  margin-bottom: 4px;
-  grid-template-columns: auto auto auto;
-  justify-content: start;
-  align-items: center;
+.card-model__country-wrapper {
+  display: flex;
 }
 
-.card-model__count {
+.card-model__info-country {
+  border-radius: 2px;
+}
+
+.card-model__parameters {
   @include font-sm;
 
   display: flex;
+  flex-wrap: nowrap;
   align-items: center;
-  column-gap: 4px;
-  color: $model-card-count;
-}
-
-.card-model__img {
-  width: var(--img-size);
-  height: var(--img-size);
-  border-radius: $radius-xl;
-  object-fit: cover;
-  object-position: center 70%;
+  overflow: hidden;
+  color: $model-card-params;
+  margin-bottom: 2px;
 }
 
 .card-model__parameter:not(:last-child) {
-  position: relative;
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   column-gap: 6px;
   padding-right: 6px;
 
   &::after {
     content: '·';
+    color: $model-card-separator;
   }
 }
 
-.card-model__parameter {
-  text-align: center;
-  color: inherit;
+.card-model__parameter-title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
-.card-model__country-wrapper {
-  padding-block: 4px;
+.card-model__count {
+  display: flex;
+  align-items: center;
+  column-gap: 4px;
+  flex-shrink: 0;
+  color: $model-card-count;
+}
+
+.card-model__update {
+  @include font-sm;
+
+  display: grid;
+  grid-template-columns: 12px minmax(0, 1fr);
+  column-gap: 4px;
+  align-items: center;
+  color: $model-card-params-footer;
+}
+
+.card-model__update-text {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 </style>

package/components/grid/models.vue

@@ -26,15 +26,27 @@ defineProps<{
 </script>
 
 <style lang="scss">
+/* Лестница колонок как в макете: 2 → 3 (640px) → 4 (768px) → 5 (1024px) → 6 (1280px).
+   Пороги — литералы макета, с тирами $brkpnts намеренно не совпадают. */
 .grid-models {
-  --min-width: 280px;
-
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--min-width) ,1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
 
-  @include from-br(sm) {
-    --min-width: 320px;
+  @include from-br(640px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @include from-br(768px) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  @include from-br(1024px) {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  @include from-br(1280px) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 }
 </style>

package/components/layout/header.vue

@@ -164,18 +164,36 @@ function closeLanguage() {
 
 /* Поиск живёт в своей колонке (свободный 1fr между лого и правым блоком), а не оверлеем
    поверх всей строки: так он сжимается вместе с ней и на него ничто не наезжает */
+
+/**
+ * Поиск стоит строго по центру ШАПКИ, а не по центру свободного места: он растянут
+ * на всю строку сетки и центрирован `justify-self`. Иначе центр уезжал влево —
+ * правая группа (ниша, колокольчик, язык, вход) шире логотипа, и с добавлением
+ * переключателя ниш перекос дошёл до сотни пикселей.
+ *
+ * Наезжать при этом не на что: по обе стороны резервируется `--header-side-space`
+ * — ширина более широкой (правой) группы: ниша 54 + колокольчик, язык и вход.
+ * Считается БЕЗ бокового паддинга шапки, потому что `100%` у поиска — это уже
+ * контентная ширина. Не хватило места — поиск сужается, а боковые группы остаются
+ * на своих местах. Значение вынесено в переменную: у сайта без переключателя ниш
+ * правая группа уже, и он может его уменьшить.
+ */
 .layout-header__search {
+  --header-side-space: 358px;
+
   @include from-br($brkpnt-burger) {
-    grid-column: 2;
+    grid-column: 1 / -1;
     grid-row: 1;
+    justify-self: center;
     width: 100%;
     min-width: 0;
-    max-width: $search-max-width;
-    margin-inline: auto;
+
+    // 24px — два column-gap шапки по бокам от поиска
+    max-width: min($search-max-width, calc(100% - 2 * var(--header-side-space) - 24px));
   }
 
   @include from-br(md) {
-    max-width: $search-max-width-md;
+    max-width: min($search-max-width-md, calc(100% - 2 * var(--header-side-space) - 24px));
   }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.957",
+  "version": "0.0.959",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/pages/models/index.vue

@@ -46,11 +46,14 @@ const testModelImages = [
   '/img/models/Sebastian _Kane.png',
 ];
 
-function applyTestImages<T extends { primaryImageUrl?: string; thumbUrl?: string }>(items: T[] | undefined): T[] | undefined {
+/** Портреты 3:4 — только под карточку модели, круглым аватарам топа они не подходят. */
+const testModelPortraits = Array.from({ length: 16 }, (_, index) => `/img/models/portrait-${index + 1}.png`);
+
+function applyTestImages<T extends { primaryImageUrl?: string; thumbUrl?: string }>(items: T[] | undefined, images: string[]): T[] | undefined {
   return items?.map((item, i) => ({
     ...item,
-    primaryImageUrl: testModelImages[i % testModelImages.length],
-    thumbUrl: testModelImages[i % testModelImages.length],
+    primaryImageUrl: images[i % images.length],
+    thumbUrl: images[i % images.length],
   }));
 }
 
@@ -63,10 +66,10 @@ const [
 ]);
 
 if (topModels.value?.items) {
-  topModels.value.items = applyTestImages(topModels.value.items)!;
+  topModels.value.items = applyTestImages(topModels.value.items, testModelImages)!;
 }
 if (models.value?.items) {
-  models.value.items = applyTestImages(models.value.items)!;
+  models.value.items = applyTestImages(models.value.items, testModelPortraits)!;
 }
 
 const { meta, h1 } = useMeta({