itube-specs 0.0.977 → 0.0.981

package/components/card/model.vue

@@ -93,11 +93,11 @@ const { generateLink } = useGenerateLink();
 const { t } = useI18n();
 
 /**
- * Пороги — колоночная лестница `.grid-models` (2 → 3 с 640px → … → 6 с 1280px), а не `$brkpnts`.
- * Слот от 640px и выше держится в 206–249px, поэтому один `250px` покрывает всю правую часть.
+ * Пороги — колоночная лестница `.grid-models` (2 → 3 с 450px → … → 6 с 1160px), а не `$brkpnts`.
+ * До 1386px слот держится в 213px, дальше растёт до 249 — оттуда и правое значение.
  * `auto` впереди — см. `UiImg`.
  */
-const SIZES = 'auto, (max-width: 639px) 50vw, 250px';
+const SIZES = 'auto, (max-width: 449px) 50vw, (max-width: 1385px) 215px, 250px';
 
 const fallbackImage = '/img/model-placeholder.webp';
 const imageError = ref(false);

package/components/card/video/actions.vue

@@ -112,7 +112,9 @@ $action-size: 36px;
       var(--transition) color;
   }
 
-  .card-video:is(:hover, :focus-within) .card-video-actions__btn {
+  /* :focus-visible, а не :focus-within: после клика мышью фокус остаётся на кнопке, и она
+     продолжала висеть видимой, когда курсор уже ушёл с карточки. Клавиатурный обход не страдает. */
+  .card-video:is(:hover, :has(:focus-visible)) .card-video-actions__btn {
     opacity: 1;
   }
 

package/components/card/video/index.vue

@@ -442,20 +442,16 @@ $dropdown-column: 18px;
   --line-clamp: 2;
 
   grid-row: 1;
+  font-weight: 500;
   color: $video-card-text;
 
   @include to-cq($layout-breakpoint) {
     grid-column: 1;
   }
 
-  @media (hover: hover) {
-    transition: var(--transition) color;
-  }
-}
-
-.card-video:is(:hover, :focus-visible) .card-video__title {
-  @media (hover: hover) {
+  @include hover(color, opacity) {
     color: $video-card-text--hover;
+    opacity: 0.9;
   }
 }
 
@@ -529,8 +525,7 @@ $dropdown-column: 18px;
 }
 
 .card-video__logo-wrapper[href],
-.card-video__channel-wrapper[href],
-.card-video__title {
+.card-video__channel-wrapper[href] {
   @include hover(opacity) {
     opacity: 0.9;
   }

package/components/grid/models.vue

@@ -26,26 +26,35 @@ defineProps<{
 </script>
 
 <style lang="scss">
-/* Лестница колонок как в макете: 2 → 3 (640px) → 4 (768px) → 5 (1024px) → 6 (1280px).
-   Пороги — литералы макета, с тирами $brkpnts намеренно не совпадают. */
+/* Лестница колонок: 2 → 3 (450px) → 4 (690px) → 5 (920px) → 6 (1160px). Больше шести в ряд
+   не даём — продуктовое требование.
+
+   Пороги — литералы, с тирами $brkpnts намеренно не совпадают: они подобраны так, чтобы слот
+   карточки держался в 213px. Это ширина исходника 640, делённая на 3 — предел плотности
+   современных телефонов. Считается как
+   (вьюпорт − 2×--container-padding-inline − 12×(колонок−1)) / колонок.
+
+   Единственное место, где 213 превышены — шесть колонок шире 1386px: там слот растёт до 249.
+   Это осознанно: при тройной плотности такому слоту нужно 746px, но десктопов с тройной
+   плотностью практически не бывает, а DPR2 просит 497 и укладывается в наши 640. */
 .grid-models {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
 
-  @include from-br(640px) {
+  @include from-br(450px) {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
-  @include from-br(768px) {
+  @include from-br(690px) {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
-  @include from-br(1024px) {
+  @include from-br(920px) {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
 
-  @include from-br(1280px) {
+  @include from-br(1160px) {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 }

package/components/layout/language.vue

@@ -215,9 +215,9 @@ function changeLocale(locale: string) {
 
 async function changeCountry(item: ISelectItem) {
   setCountry(item);
-  // куку пишет вотчер useCookie — ждём флаш, иначе навигация может срезать запись
+  // куку пишет вотчер useCookie — ждём флаш, иначе перезагрузка может срезать запись
   await nextTick();
-  window.location.href = '/';
+  window.location.reload();
 }
 </script>
 

package/composables/use-client-country.ts

@@ -42,7 +42,7 @@ export const useClientCountry = () => {
 
   /**
    * Ручной выбор страны в селекторе: наружу переживает перезагрузку только код. `place`
-   * пересчитает следующий SSR — layout/language.vue тут же уходит в `location.href`.
+   * пересчитает следующий SSR — layout/language.vue тут же перезагружает текущую страницу.
    */
   const setCountry = (item: ISelectItem) => {
     code.value = item.key || '';

package/composables/use-test-model-images.ts

@@ -24,6 +24,8 @@ const PORTRAIT_GUIDS = [
  * Тестовые портреты моделей:
  *
  * - `?img=png` — исходники 1024×1536;
+ * - `?img=444` — наш avif в полной цветности 4:4:4 при том же качестве яркости, что у поставки
+ *   нарезчика (она в 4:2:0). Сравнение стоит вести по цвету: губы, румянец, переходы кожи;
  * - без параметра — нарезка по `DOCS/MODEL-IMAGES.md`: один 640w, avif через `<picture>`.
  *
  * Две ширины, выбирает их КОМПОНЕНТ, а не браузер: srcset мы не ставим. 640w — портрет в
@@ -43,12 +45,12 @@ const PORTRAIT_GUIDS = [
  * по query. Для замера сети это и нужно: он честен только с чистого захода.
  */
 export function useTestModelImages() {
-  const isSource = useRoute().query['img'] === 'png';
+  const format = String(useRoute().query['img'] || '');
 
   const portraits: ITestModelPortrait[] = PORTRAIT_GUIDS.map((guid) => {
     const base = `/img/models/${guid}`;
 
-    if (isSource) {
+    if (format === 'png') {
       return { primaryImageUrl: `${base}.png`, thumbUrl: `${base}.png` };
     }
 
@@ -56,8 +58,8 @@ export function useTestModelImages() {
       primaryImageUrl: `${base}-640.webp`,
       thumbUrl: `${base}-256.webp`,
       primaryImageSmallUrl: `${base}-256.webp`,
-      primaryImageAvifUrl: `${base}-640.avif`,
-      primaryImageSmallAvifUrl: `${base}-256.avif`,
+      primaryImageAvifUrl: format === '444' ? `${base}-640-444.avif` : `${base}-640.avif`,
+      primaryImageSmallAvifUrl: format === '444' ? `${base}-256-444.avif` : `${base}-256.avif`,
     };
   });
 

package/package.json

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

package/pages/playlists/index.vue

@@ -141,4 +141,10 @@ const breadcrumbs = [
 .playlists__navigation {
   margin-bottom: 32px;
 }
+
+/* Два класса, а не `._pagination`: у `.ui-pagination` своя `margin: auto auto 0` той же
+   специфичности, и при заполненной странице отбивка сверху схлопывалась в ноль. */
+.ui-pagination.playlists__pagination {
+  margin-top: 32px;
+}
 </style>