Browse Source

limit the number of popular words in small displays

Keiichi Watanabe 9 years ago
parent
commit
ba76b2ba99
2 changed files with 20 additions and 8 deletions
  1. 9 3
      src/main/webapp/WEB-INF/view/index.jsp
  2. 11 5
      src/main/webapp/WEB-INF/view/search.jsp

+ 9 - 3
src/main/webapp/WEB-INF/view/index.jsp

@@ -78,9 +78,15 @@
 							<div class="clearfix">
 								<p class="popularWordBody ellipsis">
 									<la:message key="labels.search_popular_word_word" />
-									<c:forEach var="item" items="${popularWords}">
-										<la:link
-											href="/search/search?q=${f:u(item)}${fe:facetQuery()}${fe:geoQuery()}">${f:h(item)}</la:link>
+									<c:forEach var="item" varStatus="s" items="${popularWords}">
+										<c:if test="${s.index < 3}">
+											<la:link
+												href="/search/search?q=${f:u(item)}${fe:facetQuery()}${fe:geoQuery()}">${f:h(item)}</la:link>
+										</c:if>
+										<c:if test="${3 <= s.index}">
+											<la:link styleClass="hidden-xs"
+												href="/search/search?q=${f:u(item)}${fe:facetQuery()}${fe:geoQuery()}">${f:h(item)}</la:link>
+										</c:if>
 									</c:forEach>
 								</p>
 							</div>

+ 11 - 5
src/main/webapp/WEB-INF/view/search.jsp

@@ -15,8 +15,8 @@
 <link href="${f:url('/css/style-base.css')}" rel="stylesheet"
 	type="text/css" />
 <link href="${f:url('/css/style.css')}" rel="stylesheet" type="text/css" />
-<link href="${f:url('/css/font-awesome.min.css')}"
-	rel="stylesheet" type="text/css" />
+<link href="${f:url('/css/font-awesome.min.css')}" rel="stylesheet"
+	type="text/css" />
 </head>
 <body class="search">
 	<jsp:include page="header.jsp" />
@@ -94,9 +94,15 @@
 				<div class="col-md-12">
 					<p class="popularWordBody ellipsis">
 						<la:message key="labels.search_popular_word_word" />
-						<c:forEach var="item" items="${popularWords}">
-							<la:link
-								href="/search/search?q=${f:u(item)}${fe:facetQuery()}${fe:geoQuery()}">${f:h(item)}</la:link>
+						<c:forEach var="item" varStatus="s" items="${popularWords}">
+							<c:if test="${s.index < 3}">
+								<la:link
+									href="/search/search?q=${f:u(item)}${fe:facetQuery()}${fe:geoQuery()}">${f:h(item)}</la:link>
+							</c:if>
+							<c:if test="${3 <= s.index}">
+								<la:link styleClass="hidden-xs"
+									href="/search/search?q=${f:u(item)}${fe:facetQuery()}${fe:geoQuery()}">${f:h(item)}</la:link>
+							</c:if>
 						</c:forEach>
 					</p>
 				</div>