itube-specs 0.0.953 → 0.0.954

package/components/card/webcam/index.vue

@@ -115,6 +115,13 @@
         v-if="model.age"
         class="card-webcam__age"
       >{{ t('webcams.years_old', { age: model.age }) }}</span>
+
+      <!-- Страна — в строке имени справа (в макете на узких экранах её нет вовсе). -->
+      <a
+        v-if="model.country"
+        :href="`${nichePath}/webcams?filter_country=${model.country}`"
+        class="card-webcam__country"
+      >{{ countryName }}</a>
     </div>
 
     <!-- На узких экранах ховера нет, поэтому цель стримера с прогрессом живёт под
@@ -136,27 +143,6 @@
       </span>
     </div>
 
-    <div
-      v-if="model.viewers || model.country"
-      class="card-webcam__meta"
-    >
-      <span
-        v-if="model.viewers"
-        class="card-webcam__viewers"
-      >
-        <UiIcon
-          name="eye"
-          size="14"
-        />{{ $n(model.viewers) }}
-      </span>
-
-      <a
-        v-if="model.country"
-        :href="`${nichePath}/webcams?filter_country=${model.country}`"
-        class="card-webcam__country _truncate"
-      >{{ countryName }}</a>
-    </div>
-
     <ul
       v-if="visibleTags.length"
       class="card-webcam__tags"
@@ -484,8 +470,8 @@ onBeforeUnmount(() => {
   opacity: 1;
 }
 
-// одна плашка на постере: признак новой модели и зрители онлайн (на узких экранах
-// меты под карточкой нет, поэтому зрители показываются здесь)
+// одна плашка на постере: зрители онлайн и, у новых моделей, признак новизны перед
+// ними (в макете это один пилюль на все разрешения)
 .card-webcam__badge {
   @include font-4xs;
 
@@ -499,8 +485,6 @@ onBeforeUnmount(() => {
   padding: 2px 6px;
   font-weight: 600;
   line-height: 1;
-  text-transform: uppercase;
-  letter-spacing: .025em;
   color: $card-webcam-badge-text;
   text-shadow: 0 1px 2px $card-webcam-badge-shadow;
 
@@ -510,21 +494,16 @@ onBeforeUnmount(() => {
   border-radius: $radius-small;
 }
 
+// капс с трекингом — только у признака новизны: цифры зрителей в макете набраны обычным
+.card-webcam__badge-new {
+  text-transform: uppercase;
+  letter-spacing: .025em;
+}
+
 .card-webcam__badge-viewers {
   display: flex;
   align-items: center;
   gap: 4px;
-
-  @include from-br(xm) {
-    display: none;
-  }
-}
-
-// на десктопе плашка нужна только под признак новой модели
-.card-webcam__badge:not(:has(.card-webcam__badge-new)) {
-  @include from-br(xm) {
-    display: none;
-  }
 }
 
 .card-webcam__online {
@@ -651,43 +630,32 @@ onBeforeUnmount(() => {
 }
 
 .card-webcam__age {
-  @include font-sm;
-
-  flex-shrink: 0;
-  color: $card-webcam-meta-text;
-}
-
-// на узких экранах мету не показываем: зрители уехали в плашку на постере, а
-// место под карточкой занимает цель стримера
-.card-webcam__meta {
   @include font-xs;
 
-  display: none;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  margin-top: 8px;
+  flex-shrink: 0;
   color: $card-webcam-meta-text;
-
-  @include from-br(xm) {
-    display: flex;
-  }
-}
-
-.card-webcam__viewers {
-  display: flex;
-  align-items: center;
-  gap: 4px;
 }
 
+// обрезка своя, а не утилитой `_truncate`: та ставит `display` через !important и
+// строку не спрятать на мобиле
 .card-webcam__country {
-  --line-clamp: 1;
+  @include font-xs;
 
+  flex-shrink: 0;
   margin-left: auto;
+  overflow: hidden;
+  color: $card-webcam-meta-text;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   &:is(:hover, :focus) {
     color: $card-webcam-meta-text--hover;
   }
+
+  // на узких экранах строку имени занимают флаги, имя и возраст
+  @include to-br(xm) {
+    display: none;
+  }
 }
 
 // селектор с родителем не случайно: ресет обнуляет отступы у `ul[class]`, и

package/package.json

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