improve: show countries as multiple columns on the /countries page

Fix #604

Author: php-coder

src/main/java/ru/mystamps/web/feature/site/ResourceUrl.java

@@ -32,7 +32,7 @@ public final class ResourceUrl {
 	public static final String STATIC_RESOURCES_URL = "https://stamps.filezz.ru";
 
 	// MUST be updated when any of our resources were modified
-	public static final String RESOURCES_VERSION = "v0.4.5.5";
+	public static final String RESOURCES_VERSION = "v0.4.5.6";
 
 	// CheckStyle: ignore LineLength for next 17 lines
 	private static final String CATALOG_UTILS_JS      = "/public/js/" + RESOURCES_VERSION + "/CatalogUtils.min.js";

src/main/webapp/WEB-INF/static/styles/main.css

@@ -151,3 +151,25 @@ label {
 	height: 200px;
 	padding: 0;
 }
+
+@media (min-width: 384px) { /* Extra Small devices (our custom) */
+	.countries-list {
+		column-count: 2;
+	}
+}
+/* Media queries use values from Bootstrap (https://getbootstrap.com/docs/3.4/css/#grid-media-queries) */
+@media (min-width: 768px) { /* Small devices */
+	.countries-list {
+		column-count: 3;
+	}
+}
+@media (min-width: 992px) { /* Medium devices */
+	.countries-list {
+		column-count: 4;
+	}
+}
+@media (min-width: 1200px) { /* Large devices */
+	.countries-list {
+		column-count: 5;
+	}
+}

src/main/webapp/WEB-INF/views/country/list.html

@@ -73,7 +73,7 @@ <h3 th:text="${#strings.capitalize(country_list)}">
 						</a>
 					</div>
 
-					<ul th:if="${not #lists.isEmpty(countries)}">
+					<ul th:if="${not #lists.isEmpty(countries)}" class="countries-list">
 						<li th:each="country : ${countries}">
 							<a href="../country/info.html" th:href="@{${INFO_COUNTRY_PAGE}(slug=${country.slug})}" th:text="${country.name}">Italy</a>
 						</li>