Correctly fit text in tiles

Author: SpeedJack

_files/js/inforge/gridshow/widget.js

@@ -1,3 +1,20 @@
+function if_gs_fit_text()
+{
+	var titles = $(".if-gs-widget").find(".if-gs-tile-title");
+	titles.each(function() {
+		var mul = 0.05 + 0.02 * $(this).text().length;
+		var size = Math.max(Math.min($(this).width() / (mul*10)));
+		var min_size = 5 + 0.05 * $(this).width();
+		if (min_size < 9)
+			min_size = 9;
+		if (size < min_size)
+			size = min_size;
+		if (size > 25)
+			size = 25;
+		$(this).css("font-size", size);
+	});
+}
+
 function if_gs_set_classes(tiles, pattern)
 {
 	var spans = pattern.split(" ", tiles.length);
@@ -60,4 +77,7 @@ function if_gs_arrange_tiles()
 	}
 	if_gs_set_classes(tiles, pattern);
 	widget.show();
+	if_gs_fit_text();
 }
+
+window.addEventListener("resize", if_gs_fit_text);

_output/templates/_metadata.json

@@ -17,6 +17,6 @@
     "public/if_gs_gridshow_widget.less": {
         "version_id": 1000070,
         "version_string": "1.0.0",
-        "hash": "c03ad39c486c7890e8c0a1c648705b23"
+        "hash": "8e249ea26ff6eb3461a6eccfcfdf7ee9"
     }
 }

_output/templates/public/if_gs_gridshow_widget.less

@@ -12,29 +12,51 @@
 .if-gs-tile {
 	position: relative;
 	background-size: cover;
+	background-position: center;
+	background-repeat: no-repeat;
 	border-radius: 5px;
 	box-sizing: border-box;
 	cursor: pointer;
 	overflow: hidden;
+	transition: all .5s;
+	z-index: auto;
+}
+
+.if-gs-tile:hover {
+	transform: scale(1.03);
+	border-radius: 10px;
+	z-index: 50;
 }
 
 .if-gs-tile-category {
 	font-size: .8em;
 	position: absolute;
 	top: 5px;
 	left: 5px;
-	border-radius: 2px;
+	border-radius: 3px;
 	color: #FFF;
 	padding: 4px 10px;
 	background: #173854;
 }
 
 .if-gs-tile-title {
 	position: absolute;
+	left: 5px;
 	bottom: 10px;
 	padding: 6px 10px;
+	max-height: 75%;
+	max-width: 100%;
 	font-size: 1.4em;
+	overflow: hidden;
 	color: #FFF;
+	text-shadow: 0.05em 0 black,
+		0 0.05em black,
+		-0.05em 0 black,
+		0 -0.05em black,
+		-0.05em -0.05em black,
+		-0.05em 0.05em black,
+		0.05em -0.05em black,
+		0.05em 0.05em black;
 }
 
 .if-gs-tile-span2h {