wineater-bot 3.0.14 → 3.0.17

package/dist/wineater-chatbot.mjs

@@ -6862,7 +6862,7 @@ const Ra = `
     box-sizing: border-box;
     z-index: 10000;
     max-width: 1200px;
-    min-width: 1024;
+    min-width: 1024px;
     min-height: 500px;
     margin: 40px auto;
 }
@@ -7001,6 +7001,11 @@ width: 100%;
 }
 
 /* Карточка рекомендации */
+
+.bar-widget #wine-placeholder {
+    min-height: 0;
+}
+
 .wine-recommendation-tile {
     display: flex;
     padding: 16px;
@@ -7014,6 +7019,18 @@ width: 100%;
     cursor: pointer;
 }
 
+.wine-recommendation-tile img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin-bottom: 8px;
+}
+
+.wine-recommendation-tile:hover {
+    transform: scale(1.05);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
 #loading-indicator {
     position: absolute;
     top: 50%;
@@ -7048,25 +7065,25 @@ width: 100%;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
+/* Стиль для Somm Selection */
 .somm-selection {
     position: relative;
-    border: 2px solid #FFD700; /* Золотая рамка */
-    background: linear-gradient(white, #FFF8DC); /* Легкий золотистый фон */
-    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4); /* Золотая тень */
+    border: 2px solid #FFD700;
+    background: linear-gradient(white, #FFF8DC);
+    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
 }
 
-/* Подпись Somm Selection */
 .somm-selection-badge {
     position: absolute;
     top: -10px;
     left: 10px;
-    background: linear-gradient(90deg, #FFD700, #FFB800); /* Градиентная золотая заливка */
+    background: linear-gradient(90deg, #FFD700, #FFB800);
     color: #FFF;
     font-size: 12px;
     font-weight: bold;
     padding: 4px 8px;
     border-radius: 4px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Тень для выделения */
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }
 
 /* Изображение */
@@ -7079,22 +7096,19 @@ width: 100%;
 
 /* Детали карточки */
 .tile-details {
-    font-size: 14px;
-    color: #333;
-    flex: 1;
+    text-align: left;
 }
 
 .tile-details strong {
-    display: block;
-    font-size: 18px;
+    font-size: 16px;
     margin-bottom: 4px;
     font-weight: bold;
-    color: #1F1F1F;
+    display: block;
 }
 
 .tile-details p {
+    font-size: 14px;
     margin: 4px 0;
-    color: #555;
 }
 
 .tile-details a {
@@ -7269,6 +7283,44 @@ width: 100%;
   box-shadow: 0 4px 8px rgba(123, 43, 235, 0.15);
 }
 
+/* Адаптивность для мобильных устройств */
+@media screen and (max-width: 768px) {
+    #wine-widget-container {
+        flex-direction: column;
+        padding: 16px;
+        min-width: 100vw;
+    }
+
+    #wine-placeholder {
+    display: flex;
+   gap: 8px;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    padding: 8px 0;
+    width: calc(100vw - 32px);
+    min-width: calc(100vw - 32px);
+}
+
+    #wine-widget-header p {
+    display: none;
+    }
+
+    .wine-recommendation-tile {
+        width: 200px;
+        text-align: center;
+    }
+
+    .tile-details {
+    text-align: center;
+}
+
+.wine-recommendation-tile {
+    flex: 0 0 auto;
+    scroll-snap-align: center;
+    width: 240px;
+    display: block;
+}
+}
 
 
 .hidden {
@@ -7671,7 +7723,7 @@ class La {
       e.insertAdjacentHTML("beforeend", n), this.addEventListenersStoreVersion();
     } else {
       const n = `
-            <div id="wine-widget-container">
+            <div id="wine-widget-container" class="bar-widget">
             <div id="wine-widget-right">
             ${fn.dishGroups.map((s) => `
                 <!-- Обёртка группы -->

package/dist/wineater-chatbot.umd.js

@@ -674,7 +674,7 @@ If you're using serverside rendering in your app, make sure that tracker is load
     box-sizing: border-box;
     z-index: 10000;
     max-width: 1200px;
-    min-width: 1024;
+    min-width: 1024px;
     min-height: 500px;
     margin: 40px auto;
 }
@@ -813,6 +813,11 @@ width: 100%;
 }
 
 /* Карточка рекомендации */
+
+.bar-widget #wine-placeholder {
+    min-height: 0;
+}
+
 .wine-recommendation-tile {
     display: flex;
     padding: 16px;
@@ -826,6 +831,18 @@ width: 100%;
     cursor: pointer;
 }
 
+.wine-recommendation-tile img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin-bottom: 8px;
+}
+
+.wine-recommendation-tile:hover {
+    transform: scale(1.05);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
 #loading-indicator {
     position: absolute;
     top: 50%;
@@ -860,25 +877,25 @@ width: 100%;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
+/* Стиль для Somm Selection */
 .somm-selection {
     position: relative;
-    border: 2px solid #FFD700; /* Золотая рамка */
-    background: linear-gradient(white, #FFF8DC); /* Легкий золотистый фон */
-    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4); /* Золотая тень */
+    border: 2px solid #FFD700;
+    background: linear-gradient(white, #FFF8DC);
+    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
 }
 
-/* Подпись Somm Selection */
 .somm-selection-badge {
     position: absolute;
     top: -10px;
     left: 10px;
-    background: linear-gradient(90deg, #FFD700, #FFB800); /* Градиентная золотая заливка */
+    background: linear-gradient(90deg, #FFD700, #FFB800);
     color: #FFF;
     font-size: 12px;
     font-weight: bold;
     padding: 4px 8px;
     border-radius: 4px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Тень для выделения */
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }
 
 /* Изображение */
@@ -891,22 +908,19 @@ width: 100%;
 
 /* Детали карточки */
 .tile-details {
-    font-size: 14px;
-    color: #333;
-    flex: 1;
+    text-align: left;
 }
 
 .tile-details strong {
-    display: block;
-    font-size: 18px;
+    font-size: 16px;
     margin-bottom: 4px;
     font-weight: bold;
-    color: #1F1F1F;
+    display: block;
 }
 
 .tile-details p {
+    font-size: 14px;
     margin: 4px 0;
-    color: #555;
 }
 
 .tile-details a {
@@ -1081,6 +1095,44 @@ width: 100%;
   box-shadow: 0 4px 8px rgba(123, 43, 235, 0.15);
 }
 
+/* Адаптивность для мобильных устройств */
+@media screen and (max-width: 768px) {
+    #wine-widget-container {
+        flex-direction: column;
+        padding: 16px;
+        min-width: 100vw;
+    }
+
+    #wine-placeholder {
+    display: flex;
+   gap: 8px;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    padding: 8px 0;
+    width: calc(100vw - 32px);
+    min-width: calc(100vw - 32px);
+}
+
+    #wine-widget-header p {
+    display: none;
+    }
+
+    .wine-recommendation-tile {
+        width: 200px;
+        text-align: center;
+    }
+
+    .tile-details {
+    text-align: center;
+}
+
+.wine-recommendation-tile {
+    flex: 0 0 auto;
+    scroll-snap-align: center;
+    width: 240px;
+    display: block;
+}
+}
 
 
 .hidden {
@@ -1114,7 +1166,7 @@ width: 100%;
                 </div>
             </div>
         `;e.insertAdjacentHTML("beforeend",n),this.addEventListenersStoreVersion()}else{const n=`
-            <div id="wine-widget-container">
+            <div id="wine-widget-container" class="bar-widget">
             <div id="wine-widget-right">
             ${kn.dishGroups.map(s=>`
                 <!-- Обёртка группы -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wineater-bot",
-  "version": "3.0.14",
+  "version": "3.0.17",
   "description": "",
   "main": "dist/index.js",
   "module": "src/index.js",

package/src/js/widget-styles.js

@@ -12,7 +12,7 @@ const widgetStyles = `
     box-sizing: border-box;
     z-index: 10000;
     max-width: 1200px;
-    min-width: 1024;
+    min-width: 1024px;
     min-height: 500px;
     margin: 40px auto;
 }
@@ -151,6 +151,11 @@ width: 100%;
 }
 
 /* Карточка рекомендации */
+
+.bar-widget #wine-placeholder {
+    min-height: 0;
+}
+
 .wine-recommendation-tile {
     display: flex;
     padding: 16px;
@@ -164,6 +169,18 @@ width: 100%;
     cursor: pointer;
 }
 
+.wine-recommendation-tile img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    margin-bottom: 8px;
+}
+
+.wine-recommendation-tile:hover {
+    transform: scale(1.05);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
+}
+
 #loading-indicator {
     position: absolute;
     top: 50%;
@@ -198,25 +215,25 @@ width: 100%;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
 }
 
+/* Стиль для Somm Selection */
 .somm-selection {
     position: relative;
-    border: 2px solid #FFD700; /* Золотая рамка */
-    background: linear-gradient(white, #FFF8DC); /* Легкий золотистый фон */
-    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4); /* Золотая тень */
+    border: 2px solid #FFD700;
+    background: linear-gradient(white, #FFF8DC);
+    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
 }
 
-/* Подпись Somm Selection */
 .somm-selection-badge {
     position: absolute;
     top: -10px;
     left: 10px;
-    background: linear-gradient(90deg, #FFD700, #FFB800); /* Градиентная золотая заливка */
+    background: linear-gradient(90deg, #FFD700, #FFB800);
     color: #FFF;
     font-size: 12px;
     font-weight: bold;
     padding: 4px 8px;
     border-radius: 4px;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* Тень для выделения */
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
 }
 
 /* Изображение */
@@ -229,22 +246,19 @@ width: 100%;
 
 /* Детали карточки */
 .tile-details {
-    font-size: 14px;
-    color: #333;
-    flex: 1;
+    text-align: left;
 }
 
 .tile-details strong {
-    display: block;
-    font-size: 18px;
+    font-size: 16px;
     margin-bottom: 4px;
     font-weight: bold;
-    color: #1F1F1F;
+    display: block;
 }
 
 .tile-details p {
+    font-size: 14px;
     margin: 4px 0;
-    color: #555;
 }
 
 .tile-details a {
@@ -419,6 +433,44 @@ width: 100%;
   box-shadow: 0 4px 8px rgba(123, 43, 235, 0.15);
 }
 
+/* Адаптивность для мобильных устройств */
+@media screen and (max-width: 768px) {
+    #wine-widget-container {
+        flex-direction: column;
+        padding: 16px;
+        min-width: 100vw;
+    }
+
+    #wine-placeholder {
+    display: flex;
+   gap: 8px;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    padding: 8px 0;
+    width: calc(100vw - 32px);
+    min-width: calc(100vw - 32px);
+}
+
+    #wine-widget-header p {
+    display: none;
+    }
+
+    .wine-recommendation-tile {
+        width: 200px;
+        text-align: center;
+    }
+
+    .tile-details {
+    text-align: center;
+}
+
+.wine-recommendation-tile {
+    flex: 0 0 auto;
+    scroll-snap-align: center;
+    width: 240px;
+    display: block;
+}
+}
 
 
 .hidden {

package/src/js/widget.js

@@ -71,7 +71,7 @@ export class WineWidget {
         this.addEventListenersStoreVersion();
         } else {
             const barHTML = `
-            <div id="wine-widget-container">
+            <div id="wine-widget-container" class="bar-widget">
             <div id="wine-widget-right">
             ${barConfig.dishGroups.map(group => `
                 <!-- Обёртка группы -->
@@ -383,49 +383,49 @@ export class WineWidget {
       }
 
       initializeSearchAnimation() {
-        const searchInput = document.getElementById('wine-search-input');
-        const suggestions = translator.translate('placeholderSuggestions');
-        let index = 0;
-        let charIndex = 0;
-        let typingForward = true;
-        let isInputFocused = false;
-    
-        const typeEffect = () => {
-            if (isInputFocused) return; // Если фокус в поле ввода, эффект останавливается
-            if (typingForward) {
-                searchInput.placeholder = suggestions[index].substring(0, charIndex++);
-                if (charIndex > suggestions[index].length) {
-                    typingForward = false;
-                    setTimeout(typeEffect, 2000); // Пауза после завершения строки
-                } else {
-                    setTimeout(typeEffect, 100); // Скорость ввода
-                }
+    const searchInput = document.getElementById('wine-search-input');
+    const suggestions = translator.translate('placeholderSuggestions');
+    let index = 0;
+    let charIndex = 0;
+    let typingForward = true;
+    let isInputFocused = false;
+
+    const typeEffect = () => {
+        if (isInputFocused) return; // Если фокус в поле ввода, эффект останавливается
+        if (typingForward) {
+            searchInput.placeholder = suggestions[index].substring(0, charIndex++);
+            if (charIndex > suggestions[index].length) {
+                typingForward = false;
+                setTimeout(typeEffect, 2000); // Пауза после завершения строки
             } else {
-                searchInput.placeholder = suggestions[index].substring(0, charIndex--);
-                if (charIndex < 0) {
-                    typingForward = true;
-                    index = (index + 1) % suggestions.length; // Переход к следующей подсказке
-                    setTimeout(typeEffect, 500); // Пауза перед началом следующей строки
-                } else {
-                    setTimeout(typeEffect, 50); // Скорость удаления
-                }
+                setTimeout(typeEffect, 100); // Скорость ввода
             }
-        };
-    
+        } else {
+            searchInput.placeholder = suggestions[index].substring(0, charIndex--);
+            if (charIndex < 0) {
+                typingForward = true;
+                index = (index + 1) % suggestions.length; // Переход к следующей подсказке
+                setTimeout(typeEffect, 500); // Пауза перед началом следующей строки
+            } else {
+                setTimeout(typeEffect, 50); // Скорость удаления
+            }
+        }
+    };
+
+    typeEffect();
+
+    // Очистка строки и остановка эффекта при фокусе
+    searchInput.addEventListener('focus', () => {
+        searchInput.placeholder = '';
+        isInputFocused = true; // Останавливаем эффект
+    });
+
+    // Возобновление эффекта при потере фокуса
+    searchInput.addEventListener('blur', () => {
+        isInputFocused = false; // Возобновляем эффект
+        charIndex = 0;
+        typingForward = true;
         typeEffect();
-    
-        // Очистка строки и остановка эффекта при фокусе
-        searchInput.addEventListener('focus', () => {
-            searchInput.placeholder = '';
-            isInputFocused = true; // Останавливаем эффект
-        });
-    
-        // Возобновление эффекта при потере фокуса
-        searchInput.addEventListener('blur', () => {
-            isInputFocused = false; // Возобновляем эффект
-            charIndex = 0;
-            typingForward = true;
-            typeEffect();
-        });
-    }
+    });
+}
 }