itube-specs 0.0.1049 → 0.0.1051

package/components/info/model.vue

@@ -1,7 +1,10 @@
 <!-- Инфо-блок модели: портрет 3:4, псевдонимы, соцсети, шапка с действиями, рождение, описание, сводка-чипсы; «About» и группы параметров — по «Show more», на десктопе свёрнутые доливают колонку до низа портрета -->
 <template>
   <section class="info-model">
-    <div class="info-model__aside">
+    <div
+      ref="asideRef"
+      class="info-model__aside"
+    >
       <UiImg
         :src="currentImage"
         :avif-src="currentAvifSrc"
@@ -251,21 +254,31 @@ const hasMore = computed(() => groupedParameters.value.length > 0 || Boolean(pro
 /** Единицы, которые прячутся только целиком: заголовки, абзацы, плашки. Порядок — документный. */
 const FIT_SELECTOR = 'h3, .info-model__about-text, .info-grid__plain-text, .info-grid__item';
 
-/** Если всё целиком выпирает ниже портрета не больше чем на столько — показываем всё без «Show more». */
-const FIT_TOLERANCE = 64;
+/** Меньше строк «About» не показываем: одна строка с многоточием читается как поломка. */
+const ABOUT_MIN_LINES = 2;
 
+const asideRef = ref<HTMLElement>();
 const detailsRef = ref<HTMLElement>();
 const moreRef = ref<HTMLElement>();
 const hasCut = ref(true);
 const isMeasured = ref(false);
 
-/** Строка грида под кнопкой (с её отступами): без «Show more» она достаётся деталям. */
-function getMoreRowHeight(box: HTMLElement) {
+/** Строка грида под кнопкой (с её отступами). Запоминается, пока кнопка видна, — спрятанную не измерить. */
+let moreRowHeight = 0;
+
+function getMoreRowHeight() {
   const more = moreRef.value;
-  if (!more || !more.offsetParent) return 0;
 
-  return more.getBoundingClientRect().bottom + Number.parseFloat(getComputedStyle(more).marginBottom)
-    - box.getBoundingClientRect().bottom;
+  if (more?.offsetParent) {
+    const { marginTop, marginBottom } = getComputedStyle(more);
+    moreRowHeight = more.offsetHeight + Number.parseFloat(marginTop) + Number.parseFloat(marginBottom);
+  }
+
+  return moreRowHeight;
+}
+
+function getBottoms(units: HTMLElement[], top: number) {
+  return units.map(el => el.getBoundingClientRect().bottom - top);
 }
 
 /** До первого замера детали и кнопка на десктопе прозрачны (`--pending`): иначе после гидрации видно, как они перестраиваются. */
@@ -275,37 +288,54 @@ function measureDetails() {
 }
 
 /**
- * На десктопе высоту свёрнутых деталей задаёт грид — остаток колонки до низа портрета.
- * Всё, что не влезло целиком, прячем; заголовок без единой видимой строки под ним — тоже.
- * Небольшой хвост в пределах допуска не прячем, а вытягиваем блок под него через `min-height`.
+ * На десктопе свёрнутые детали доливают колонку до низа портрета. Место — от верха блока до низа
+ * `aside` за вычетом строки кнопки; «About» обрезается по числу влезающих строк, из остального
+ * прячем всё, что не влезло целиком, и заголовок без единой видимой строки под ним.
+ * Высота блока = видимый контент, остаток уходит в пустую строку грида под кнопкой — она идёт сразу
+ * за контентом. Ниже портрета блок не вытягивается никогда: секция не растёт после гидрации.
  */
 function fitDetails() {
   const box = detailsRef.value;
   if (!box) return;
 
   const units = Array.from(box.querySelectorAll<HTMLElement>(FIT_SELECTOR));
-  box.style.minHeight = '';
+  const about = box.querySelector<HTMLElement>('.info-model__about-text');
+  box.style.height = '';
+  about?.style.removeProperty('--line-clamp');
 
-  if (isExpanded.value || !isChipsOverflowWidth()) {
+  if (isExpanded.value || !isChipsOverflowWidth() || !asideRef.value) {
     units.forEach(el => el.removeAttribute('data-cut'));
     hasCut.value = true;
     return;
   }
 
+  about?.style.setProperty('--line-clamp', '999');
+
   const { top } = box.getBoundingClientRect();
-  const limit = box.clientHeight + 0.5;
-  const bottoms = units.map(el => el.getBoundingClientRect().bottom - top);
+  const space = asideRef.value.getBoundingClientRect().bottom - top;
+  const moreRow = getMoreRowHeight();
+  let bottoms = getBottoms(units, top);
   const contentHeight = Math.max(0, ...bottoms);
 
-  const fullLimit = limit + getMoreRowHeight(box);
-
-  if (contentHeight <= fullLimit + FIT_TOLERANCE) {
-    if (contentHeight > fullLimit) box.style.minHeight = `${Math.ceil(contentHeight)}px`;
+  if (contentHeight <= space + 0.5) {
+    box.style.height = `${Math.ceil(contentHeight)}px`;
     units.forEach(el => el.removeAttribute('data-cut'));
     hasCut.value = false;
     return;
   }
 
+  const limit = space - moreRow + 0.5;
+
+  if (about) {
+    const lineHeight = Number.parseFloat(getComputedStyle(about).lineHeight);
+    const rect = about.getBoundingClientRect();
+    const fullLines = Math.round(rect.height / lineHeight);
+    const lines = Math.min(fullLines, Math.floor((limit - (rect.top - top)) / lineHeight));
+
+    about.style.setProperty('--line-clamp', String(Math.max(lines, ABOUT_MIN_LINES)));
+    bottoms = getBottoms(units, top);
+  }
+
   const visible: boolean[] = [];
   let isOver = false;
 
@@ -322,6 +352,9 @@ function fitDetails() {
 
   units.forEach((el, index) => el.toggleAttribute('data-cut', !visible[index]));
   hasCut.value = visible.includes(false);
+
+  const visibleHeight = Math.max(0, ...bottoms.filter((_, index) => visible[index]));
+  box.style.height = `${Math.ceil(visibleHeight)}px`;
 }
 
 useChipsOverflow(detailsRef, measureDetails);
@@ -391,14 +424,15 @@ const shareModelCard = computed<IModelCard>(() => ({
 
   @include from-br(sm) {
     grid-template-columns: 240px minmax(0, 1fr);
-    grid-template-rows: auto auto auto auto 1fr auto;
+    grid-template-rows: auto auto auto auto auto auto 1fr;
     grid-template-areas:
       'aside header'
       'aside born'
       'aside description'
       'aside summary'
       'aside details'
-      'aside more';
+      'aside more'
+      'aside .';
   }
 }
 

package/nuxt.config.ts

@@ -1,19 +1,39 @@
 import { readdirSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { defineNuxtConfig } from 'nuxt/config';
+import { useNuxt } from 'nuxt/kit';
 
 // Общие для всех сайтов переводы (навигация, сортировки, UI-действия). `@nuxtjs/i18n`
 // мержит локали слоёв: файл слоя встаёт в `files` ПЕРЕД проектным, поэтому проект
 // перекрывает любой ключ, а `deepCopy` мержит вложенные группы, не заменяя их целиком.
-// Список кодов выводится из самих файлов, поэтому набор здесь — канонический:
-// код, которого нет в locales приложения, добавит приложению лишнюю локаль.
+// Список кодов выводится из самих файлов, поэтому набор здесь — надмножество локалей всех
+// сайтов. Код, которого нет в locales приложения, i18n добавил бы приложению лишней локалью
+// (без `language` → «ISO code is required to generate alternate link», лишние /<code>/ роуты),
+// поэтому до установки модулей локали слоя урезаются до объявленных приложением.
 const sharedLocalesDir = fileURLToPath(new URL('./i18n/locales', import.meta.url));
 const sharedLocales = readdirSync(sharedLocalesDir)
   .filter(file => file.endsWith('.json'))
   .sort()
   .map(file => ({ code: file.split('-')[0], file }));
 
+const localeCode = (locale: string | { code: string }) => typeof locale === 'string' ? locale : locale.code;
+
 export default defineNuxtConfig({
+  hooks: {
+    'modules:before'() {
+      const [project, ...layers] = useNuxt().options._layers;
+      const appCodes = new Set((project.config.i18n?.locales ?? []).map(localeCode));
+      if (!appCodes.size) {
+        return;
+      }
+      for (const layer of layers) {
+        const i18n = layer.config.i18n;
+        if (i18n?.locales) {
+          i18n.locales = i18n.locales.filter(locale => appCodes.has(localeCode(locale)));
+        }
+      }
+    },
+  },
   modules: ['@nuxt/eslint', '@nuxt/icon', '@nuxtjs/i18n'],
   imports: {
     dirs: ['composables/**']

package/package.json

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