itube-specs 0.0.1045 → 0.0.1047

package/components/info/model.vue

@@ -1,4 +1,4 @@
-<!-- Инфо-блок модели: портрет 3:4, псевдонимы, соцсети, шапка с действиями, рождение, описание, сводка-чипсы; «About» и группы параметров — по «Show more» -->
+<!-- Инфо-блок модели: портрет 3:4, псевдонимы, соцсети, шапка с действиями, рождение, описание, сводка-чипсы; «About» и группы параметров — по «Show more», на десктопе свёрнутые доливают колонку до низа портрета -->
 <template>
   <section class="info-model">
     <div class="info-model__aside">
@@ -122,7 +122,8 @@
 
     <div
       v-if="hasMore"
-      :class="{'--collapsed': !isExpanded, '--about': card.fullDescription}"
+      ref="detailsRef"
+      :class="{'--collapsed': !isExpanded}"
       class="info-model__details"
     >
       <div
@@ -146,7 +147,9 @@
 
     <button
       v-if="hasMore"
+      ref="moreRef"
       :aria-expanded="isExpanded"
+      :class="{'--fit': !hasCut && !isExpanded}"
       class="info-model__more"
       type="button"
       @click="isExpanded = !isExpanded"
@@ -245,6 +248,79 @@ const isExpanded = ref(false);
 
 const hasMore = computed(() => groupedParameters.value.length > 0 || Boolean(props.card.fullDescription));
 
+/** Единицы, которые прячутся только целиком: заголовки, абзацы, плашки. Порядок — документный. */
+const FIT_SELECTOR = 'h3, .info-model__about-text, .info-grid__plain-text, .info-grid__item';
+
+/** Если всё целиком выпирает ниже портрета не больше чем на столько — показываем всё без «Show more». */
+const FIT_TOLERANCE = 64;
+
+const detailsRef = ref<HTMLElement>();
+const moreRef = ref<HTMLElement>();
+const hasCut = ref(true);
+
+/** Строка грида под кнопкой (с её отступами): без «Show more» она достаётся деталям. */
+function getMoreRowHeight(box: HTMLElement) {
+  const more = moreRef.value;
+  if (!more || !more.offsetParent) return 0;
+
+  return more.getBoundingClientRect().bottom + Number.parseFloat(getComputedStyle(more).marginBottom)
+    - box.getBoundingClientRect().bottom;
+}
+
+/**
+ * На десктопе высоту свёрнутых деталей задаёт грид — остаток колонки до низа портрета.
+ * Всё, что не влезло целиком, прячем; заголовок без единой видимой строки под ним — тоже.
+ * Небольшой хвост в пределах допуска не прячем, а вытягиваем блок под него через `min-height`.
+ */
+function measureDetails() {
+  const box = detailsRef.value;
+  if (!box) return;
+
+  const units = Array.from(box.querySelectorAll<HTMLElement>(FIT_SELECTOR));
+  box.style.minHeight = '';
+
+  if (isExpanded.value || !isChipsOverflowWidth()) {
+    units.forEach(el => el.removeAttribute('data-cut'));
+    hasCut.value = true;
+    return;
+  }
+
+  const { top } = box.getBoundingClientRect();
+  const limit = box.clientHeight + 0.5;
+  const bottoms = units.map(el => el.getBoundingClientRect().bottom - 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`;
+    units.forEach(el => el.removeAttribute('data-cut'));
+    hasCut.value = false;
+    return;
+  }
+
+  const visible: boolean[] = [];
+  let isOver = false;
+
+  bottoms.forEach((bottom, index) => {
+    isOver ||= bottom > limit;
+    visible[index] = !isOver;
+  });
+
+  for (let index = units.length - 1; index >= 0; index--) {
+    if (units[index].tagName === 'H3' && !(visible[index + 1] && units[index + 1].tagName !== 'H3')) {
+      visible[index] = false;
+    }
+  }
+
+  units.forEach((el, index) => el.toggleAttribute('data-cut', !visible[index]));
+  hasCut.value = visible.includes(false);
+}
+
+useChipsOverflow(detailsRef, measureDetails);
+
+watch([isExpanded, () => props.card], () => nextTick(measureDetails));
+
 const isShareOpen = ref(false);
 
 const { isAuthorized } = useUser(AuthorizationApiService);
@@ -308,15 +384,14 @@ const shareModelCard = computed<IModelCard>(() => ({
 
   @include from-br(sm) {
     grid-template-columns: 240px minmax(0, 1fr);
-    grid-template-rows: auto auto auto auto auto auto 1fr;
+    grid-template-rows: auto auto auto auto 1fr auto;
     grid-template-areas:
       'aside header'
       'aside born'
       'aside description'
       'aside summary'
       'aside details'
-      'aside more'
-      'aside .';
+      'aside more';
   }
 }
 
@@ -543,14 +618,16 @@ const shareModelCard = computed<IModelCard>(() => ({
   @include to-br(sm) {
     display: none;
   }
-}
 
-.info-model__details.--collapsed:not(.--about) {
-  display: none;
+  @include from-br(sm) {
+    align-content: start;
+    overflow: clip;
+    contain: size;
+  }
 }
 
-.info-model__details.--collapsed .info-model__parameters {
-  display: none;
+.info-model__details [data-cut] {
+  visibility: hidden;
 }
 
 .info-model__about-title {
@@ -592,6 +669,12 @@ const shareModelCard = computed<IModelCard>(() => ({
   }
 }
 
+.info-model__more.--fit {
+  @include from-br(sm) {
+    display: none;
+  }
+}
+
 .info-model__more-icon {
   transition: var(--transition) transform;
 }

package/components/layout/language.vue

@@ -285,13 +285,14 @@ async function changeCountry(item: ISelectItem) {
   @include font-sm;
 
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   margin-bottom: 4px;
   column-gap: 12px;
   align-items: center;
   color: $language-item-text;
   padding: 10px 8px;
   text-align: start;
+  overflow-wrap: anywhere;
   border-radius: $radius-lg;
 
   @include hover(background-color) {
@@ -300,11 +301,11 @@ async function changeCountry(item: ISelectItem) {
 }
 
 .layout-language__details-item:has(img) {
-  grid-template-columns: 20px 1fr auto;
+  grid-template-columns: 20px minmax(0, 1fr) auto;
 }
 
 .layout-language__details-item:has(.layout-language__code) {
-  grid-template-columns: 32px 1fr auto;
+  grid-template-columns: 32px minmax(0, 1fr) auto;
 }
 
 .layout-language__check {
@@ -356,6 +357,7 @@ async function changeCountry(item: ISelectItem) {
 
 .layout-language__buttons {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   max-height: 192px;
   overflow-y: auto;
   scrollbar-width: none;

package/package.json

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

package/pages/user/profile.vue

@@ -182,6 +182,7 @@ watchEffect(() => {
 
 .profile__header-wrapper {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   row-gap: 1px;
 }
 
@@ -191,7 +192,7 @@ watchEffect(() => {
   display: grid;
   column-gap: 8px;
   align-items: center;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto minmax(0, 1fr);
   color: $profile-member-text;
   margin-top: 4px;
 }
@@ -245,7 +246,7 @@ watchEffect(() => {
 
 .profile__header {
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
   column-gap: 20px;
 }
@@ -253,6 +254,10 @@ watchEffect(() => {
 .profile__edit {
   @include button-variant(profile-edit);
 
+  grid-template-columns: auto minmax(0, 1fr);
+  max-width: 100%;
   margin-top: 12px;
+  white-space: normal;
+  text-align: start;
 }
 </style>