@bagelink/vue 0.0.1006 → 0.0.1008

package/src/styles/mobilLayout.css

@@ -264,140 +264,455 @@
     }
 
     .m_w10,
-    .m_10px {
+    .m_w10px {
         max-width: 10px;
     }
 
     .m_w20,
-    .m_20px {
-        max-width: 20px;
-    }
-
-    .m_w20,
-    .m_20px {
+    .m_w20px {
         max-width: 20px;
     }
 
     .m_w30,
-    .m_30px {
+    .m_w30px {
         max-width: 30px;
     }
 
     .m_w40,
-    .m_40px {
+    .m_w40px {
         max-width: 40px;
     }
 
     .m_w50,
-    .m_50px {
+    .m_w50px {
         max-width: 50px;
     }
 
     .m_w60,
-    .m_60px {
+    .m_w60px {
         max-width: 60px;
     }
 
     .m_w70,
-    .m_70px {
+    .m_w70px {
         max-width: 70px;
     }
 
     .m_w80,
-    .m_80px {
+    .m_w80px {
         max-width: 80px;
     }
 
     .m_w90,
-    .m_90px {
+    .m_w90px {
         max-width: 90px;
     }
 
     .m_w100,
-    .m_100px {
+    .m_w100px {
         max-width: 100px;
     }
 
+    .m_w110,
+    .m_w110px {
+        max-width: 110px;
+    }
+
+    .m_w120,
+    .m_w120px {
+        max-width: 120px;
+    }
+
+    .m_w130,
+    .m_w130px {
+        max-width: 130px;
+    }
+
+    .m_w140,
+    .m_w140px {
+        max-width: 140px;
+    }
+
     .m_w150,
-    .m_150px {
+    .m_w150px {
         max-width: 150px;
     }
 
+    .m_w160,
+    .m_w160px {
+        max-width: 160px;
+    }
+
+    .m_w170,
+    .m_w170px {
+        max-width: 170px;
+    }
+
+    .m_w180,
+    .m_w180px {
+        max-width: 180px;
+    }
+
+    .m_w190,
+    .m_w190px {
+        max-width: 190px;
+    }
+
     .m_w200,
-    .m_200px {
+    .m_w200px {
         max-width: 200px;
     }
 
+    .m_w210,
+    .m_w210px {
+        max-width: 210px;
+    }
+
+    .m_w220,
+    .m_w220px {
+        max-width: 220px;
+    }
+
+    .m_w230,
+    .m_w230px {
+        max-width: 230px;
+    }
+
+    .m_w240,
+    .m_w240px {
+        max-width: 240px;
+    }
+
     .m_w250,
-    .m_250px {
+    .m_w250px {
         max-width: 250px;
     }
 
+    .m_w260,
+    .m_w260px {
+        max-width: 260px;
+    }
+
+    .m_w270,
+    .m_w270px {
+        max-width: 270px;
+    }
+
+    .m_w280,
+    .m_w280px {
+        max-width: 280px;
+    }
+
+    .m_w290,
+    .m_w290px {
+        max-width: 290px;
+    }
+
     .m_w300,
-    .m_300px {
+    .m_w300px {
         max-width: 300px;
     }
 
+    .m_w310,
+    .m_w310px {
+        max-width: 310px;
+    }
+
+    .m_w320,
+    .m_w320px {
+        max-width: 320px;
+    }
+
+    .m_w330,
+    .m_w330px {
+        max-width: 330px;
+    }
+
+    .m_w340,
+    .m_w340px {
+        max-width: 340px;
+    }
+
     .m_w350,
-    .m_350px {
+    .m_w350px {
         max-width: 350px;
     }
 
+    .m_w360,
+    .m_w360px {
+        max-width: 360px;
+    }
+
+    .m_w370,
+    .m_w370px {
+        max-width: 370px;
+    }
+
+    .m_w380,
+    .m_w380px {
+        max-width: 380px;
+    }
+
+    .m_w390,
+    .m_w390px {
+        max-width: 390px;
+    }
+
     .m_w400,
-    .m_400px {
+    .m_w400px {
         max-width: 400px;
     }
 
+    .m_w410,
+    .m_w410px {
+        max-width: 410px;
+    }
+
+    .m_w420,
+    .m_w420px {
+        max-width: 420px;
+    }
+
+    .m_w430,
+    .m_w430px {
+        max-width: 430px;
+    }
+
+    .m_w440,
+    .m_w440px {
+        max-width: 440px;
+    }
+
     .m_w450,
-    .m_450px {
+    .m_w450px {
         max-width: 450px;
     }
 
+    .m_w460,
+    .m_w460px {
+        max-width: 460px;
+    }
+
+    .m_w470,
+    .m_w470px {
+        max-width: 470px;
+    }
+
+    .m_w480,
+    .m_w480px {
+        max-width: 480px;
+    }
+
+    .m_w490,
+    .m_w490px {
+        max-width: 490px;
+    }
+
     .m_w500,
-    .m_500px {
+    .m_w500px {
         max-width: 500px;
     }
 
+    .m_w510,
+    .m_w510px {
+        max-width: 510px;
+    }
+
+    .m_w520,
+    .m_w520px {
+        max-width: 520px;
+    }
+
+    .m_w530,
+    .m_w530px {
+        max-width: 530px;
+    }
+
+    .m_w540,
+    .m_w540px {
+        max-width: 540px;
+    }
+
     .m_w550,
-    .m_550px {
+    .m_w550px {
         max-width: 550px;
     }
 
+    .m_w560,
+    .m_w560px {
+        max-width: 560px;
+    }
+
+    .m_w570,
+    .m_w570px {
+        max-width: 570px;
+    }
+
+    .m_w580,
+    .m_w580px {
+        max-width: 580px;
+    }
+
+    .m_w590,
+    .m_w590px {
+        max-width: 590px;
+    }
+
     .m_w600,
-    .m_600px {
+    .m_w600px {
         max-width: 600px;
     }
 
+    .m_w610,
+    .m_w610px {
+        max-width: 610px;
+    }
+
+    .m_w620,
+    .m_w620px {
+        max-width: 620px;
+    }
+
+    .m_w630,
+    .m_w630px {
+        max-width: 630px;
+    }
+
+    .m_w640,
+    .m_w640px {
+        max-width: 640px;
+    }
+
     .m_w650,
-    .m_650px {
+    .m_w650px {
         max-width: 650px;
     }
 
+    .m_w660,
+    .m_w660px {
+        max-width: 660px;
+    }
+
+    .m_w670,
+    .m_w670px {
+        max-width: 670px;
+    }
+
+    .m_w680,
+    .m_w680px {
+        max-width: 680px;
+    }
+
+    .m_w690,
+    .m_w690px {
+        max-width: 690px;
+    }
+
     .m_w700,
-    .m_700px {
+    .m_w700px {
         max-width: 700px;
     }
 
+    .m_w710,
+    .m_w710px {
+        max-width: 710px;
+    }
+
+    .m_w720,
+    .m_w720px {
+        max-width: 720px;
+    }
+
+    .m_w730,
+    .m_w730px {
+        max-width: 730px;
+    }
+
+    .m_w740,
+    .m_w740px {
+        max-width: 740px;
+    }
+
     .m_w750,
-    .m_750px {
+    .m_w750px {
         max-width: 750px;
     }
 
+    .m_w760,
+    .m_w760px {
+        max-width: 760px;
+    }
+
     .m_w770,
-    .m_770px {
+    .m_w770px {
         max-width: 770px;
     }
 
+    .m_w780,
+    .m_w780px {
+        max-width: 780px;
+    }
+
+    .m_w790,
+    .m_w790px {
+        max-width: 790px;
+    }
+
     .m_w800,
-    .m_800px {
+    .m_w800px {
         max-width: 800px;
     }
 
+    .m_w810,
+    .m_w810px {
+        max-width: 810px;
+    }
+
+    .m_w820,
+    .m_w820px {
+        max-width: 820px;
+    }
+
+    .m_w830,
+    .m_w830px {
+        max-width: 830px;
+    }
+
+    .m_w840,
+    .m_w840px {
+        max-width: 840px;
+    }
+
     .m_w850,
-    .m_850px {
+    .m_w850px {
         max-width: 850px;
     }
 
+    .m_w860,
+    .m_w860px {
+        max-width: 860px;
+    }
+
+    .m_w870,
+    .m_w870px {
+        max-width: 870px;
+    }
+
+    .m_w880,
+    .m_w880px {
+        max-width: 880px;
+    }
+
+    .m_w890,
+    .m_w890px {
+        max-width: 890px;
+    }
+
+    .m_w900,
+    .m_w900px {
+        max-width: 900px;
+    }
+
     .m_vw10 {
         width: 10vw;
     }
@@ -1380,7 +1695,7 @@
         margin-inline-end: 10rem !important;
     }
 
-    .mx-auto,
+    .m_mx-auto,
     .m_margin-auto {
         margin-inline-start: auto !important;
         margin-inline-end: auto !important;

package/src/utils/timeAgo.ts

@@ -12,6 +12,7 @@ const translations: Record<AvailableTimeLanguages, LanguageTranslations> = {
 		minute: 'minute',
 		second: 'second',
 		ago: 'ago',
+		in: 'in',
 		justNow: 'Just now'
 	},
 	es: {
@@ -23,6 +24,7 @@ const translations: Record<AvailableTimeLanguages, LanguageTranslations> = {
 		minute: 'minuto',
 		second: 'segundo',
 		ago: 'hace',
+		in: 'en',
 		justNow: 'Justo ahora'
 	},
 	fr: {
@@ -34,6 +36,7 @@ const translations: Record<AvailableTimeLanguages, LanguageTranslations> = {
 		minute: 'minute',
 		second: 'seconde',
 		ago: 'il y a',
+		in: 'dans',
 		justNow: 'À l’instant'
 	},
 	he: {
@@ -45,17 +48,17 @@ const translations: Record<AvailableTimeLanguages, LanguageTranslations> = {
 		minute: 'דקה',
 		second: 'שנייה',
 		ago: 'לפני',
+		in: 'בעוד',
 		justNow: 'זה עתה'
 	}
 }
-
 export function timeAgo(date: string | Date, lang: AvailableTimeLanguages = 'en') {
 	if (!date) return ''
 	if (typeof date === 'string') date = new Date(date)
 	const now: Date = new Date()
 	const nowNumber = now.getTime()
 	const dateNumber = date.getTime()
-	const seconds = Math.floor((nowNumber - dateNumber) / 1000)
+	const seconds = Math.floor((dateNumber - nowNumber) / 1000)
 
 	const intervals = [
 		{ label: 'year', seconds: 31536000 },
@@ -70,10 +73,15 @@ export function timeAgo(date: string | Date, lang: AvailableTimeLanguages = 'en'
 	const selectedLang = translations[lang]
 
 	for (const interval of intervals) {
-		const count = Math.floor(seconds / interval.seconds)
+		const count = Math.floor(Math.abs(seconds) / interval.seconds)
 		if (count >= 1) {
-			const suffix = lang === 'he' ? '' : ` ${selectedLang.ago}`
-			const prefix = lang === 'he' ? 'לפני ' : ''
+			const suffix = seconds < 0 ? ` ${selectedLang.ago}` : ''
+			const prefix = ''
+			if (interval.label === 'day' && seconds > 0) {
+				const hours = Math.floor((Math.abs(seconds) % 86400) / 3600)
+				const hourLabel = hours > 1 ? `${selectedLang.hour}s` : selectedLang.hour
+				return `${prefix}${count} ${selectedLang[interval.label]}${hours > 0 ? ` ${hours} ${hourLabel}` : ''}${suffix}`
+			}
 			return `${prefix}${count} ${selectedLang[interval.label]}${suffix}`
 		}
 	}