0ct0pu5/fess
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix responsive design issues

Browse source
This commit is contained in:
Kaoru FUZITA 2016-01-15 21:16:12 +09:00
parent fdc3982085
commit c7747c75f0
4 changed files with 124 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/main/webapp/WEB-INF/view/footer.jsp
View file

@ -1,5 +1,4 @@
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<hr/>
<footer class="bd-footer text-muted" role="contentinfo">
<div id="footer" class="center">
<p>

20
src/main/webapp/WEB-INF/view/index.jsp
View file

@ -14,8 +14,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>
<nav class="navbar navbar-dark bg-inverse navbar-static-top pos-f-t">
@ -63,15 +63,15 @@
styleId="searchForm">
${fe:facetForm()}${fe:geoForm()}
<fieldset>
<div class="clearfix">
<div class="input">
<div class="cleafix">
<div class="centered col-lg-5 col-md-6 col-sm-6 col-xs-8">
<la:text styleClass="query form-control center-block"
property="q" size="50" maxlength="1000"
styleId="contentQuery" autocomplete="off" />
property="q" size="50" maxlength="1000" styleId="contentQuery"
autocomplete="off" />
</div>
</div>
<c:if test="${!empty popularWords}">
<div>
<div class="clearfix">
<p class="popularWordBody ellipsis">
<la:message key="labels.search_popular_word_word" />
<c:forEach var="item" items="${popularWords}">
@ -148,7 +148,8 @@
key="labels.search_result_sort_content_length_desc" />
</la:option>
<la:option value="last_modified.asc">
<la:message key="labels.search_result_sort_last_modified_asc" />
<la:message
key="labels.search_result_sort_last_modified_asc" />
</la:option>
<la:option value="last_modified.desc">
<la:message
@ -159,7 +160,8 @@
<la:message key="labels.search_result_sort_click_count_asc" />
</la:option>
<la:option value="click_count.desc">
<la:message key="labels.search_result_sort_click_count_desc" />
<la:message
key="labels.search_result_sort_click_count_desc" />
</la:option>
</c:if>
<c:if test="${favoriteSupport}">

141
src/main/webapp/WEB-INF/view/searchResults.jsp
View file

@ -8,8 +8,7 @@
arg2="${f:h(currentStartRecordNumber)}"
arg3="${f:h(currentEndRecordNumber)}" />
<c:if test="${execTime!=null}">
<la:message key="labels.search_result_time"
arg0="${f:h(execTime)}" />
<la:message key="labels.search_result_time" arg0="${f:h(execTime)}" />
</c:if>
</p>
</div>
@ -22,58 +21,80 @@
</div>
</c:if>
<div id="result" class="row content">
<input type="hidden" id="queryId" value="${f:u(queryId)}" />
<input type="hidden" id="rt" value="${f:u(requestedTime)}" />
<input type="hidden" id="queryId" value="${f:u(queryId)}" /> <input
type="hidden" id="rt" value="${f:u(requestedTime)}" />
<div class="col-md-8">
<ol>
<c:forEach var="doc" varStatus="s" items="${documentItems}">
<li id="result${s.index}">
<h3 class="title ellipsis">
<a class="link" href="${doc.urlLink}" data-uri="${doc.urlLink}" data-id="${doc.doc_id}" data-order="${s.index}">${f:h(doc.contentTitle)}</a>
<a class="link" href="${doc.urlLink}" data-uri="${doc.urlLink}"
data-id="${doc.doc_id}" data-order="${s.index}">${f:h(doc.contentTitle)}</a>
</h3>
<div class="body">
<div class="description">${doc.contentDescription}</div>
<div class="site ellipsis">
<cite>${f:h(doc.sitePath)}</cite>
<c:if test="${doc.has_cache=='true'}">
<small>
<la:link href="/cache/?docId=${doc.doc_id}${appendHighlightParams}" class="cache"><la:message
key="labels.search_result_cache" /></la:link>
<small class="hidden-md-down"> <la:link
href="/cache/?docId=${doc.doc_id}${appendHighlightParams}"
class="cache">
<la:message key="labels.search_result_cache" />
</la:link>
</small>
</c:if>
</div>
<div class="more hidden-md-up">
<a href="#result${s.index}"><la:message key="labels.search_result_more" /></a>
<a href="#result${s.index}"><la:message
key="labels.search_result_more" /></a>
</div>
<div class="info">
<small>
<c:if test="${doc.created!=null && doc.created!=''}">
<c:set var="hasInfo" value="true"/>
<la:message key="labels.search_result_created" />
<fmt:formatDate value="${fe:parseDate(doc.created)}" type="BOTH" pattern="yyyy-MM-dd HH:mm" />
</c:if>
<c:if test="${doc.last_modified!=null && doc.last_modified!=''}">
<c:if test="${hasInfo}"><span class="br-phone"></span><span class="hidden-phone">-</span></c:if><c:set var="hasInfo" value="true"/>
<la:message key="labels.search_result_last_modified" />
<fmt:formatDate value="${fe:parseDate(doc.last_modified)}" type="BOTH" pattern="yyyy-MM-dd HH:mm" />
</c:if>
<c:if test="${doc.content_length!=null && doc.content_length!=''}">
<c:if test="${hasInfo}"><span class="br-phone"></span><span class="hidden-phone">-</span></c:if><c:set var="hasInfo" value="true"/>
<la:message key="labels.search_result_size"
arg0="${fe:formatNumber(doc.content_length)}" />
</c:if>
<c:if test="${searchLogSupport}">
<c:if test="${hasInfo}"><span class="br-phone"></span><span class="hidden-phone">-</span></c:if><c:set var="hasInfo" value="true"/>
<la:message key="labels.search_click_count"
arg0="${f:h(doc.click_count)}" />
</c:if>
<c:if test="${favoriteSupport}">
<c:if test="${hasInfo}"><span class="br-phone"></span><span class="hidden-phone">-</span></c:if><c:set var="hasInfo" value="true"/>
<a href="#${doc.doc_id}" class="favorite"><la:message
key="labels.search_result_favorite" /> (${f:h(doc.favorite_count)})</a>
<span class="favorited"><la:message
key="labels.search_result_favorited"/> <span class="favorited-count">(${f:h(doc.favorite_count)})</span></span>
</c:if>
<small> <c:if
test="${doc.created!=null && doc.created!=''}">
<c:set var="hasInfo" value="true" />
<la:message key="labels.search_result_created" />
<fmt:formatDate value="${fe:parseDate(doc.created)}"
type="BOTH" pattern="yyyy-MM-dd HH:mm" />
</c:if> <c:if
test="${doc.last_modified!=null && doc.last_modified!=''}">
<c:if test="${hasInfo}">
<span class="br-phone"></span>
<span class="hidden-phone">-</span>
</c:if>
<c:set var="hasInfo" value="true" />
<la:message key="labels.search_result_last_modified" />
<fmt:formatDate value="${fe:parseDate(doc.last_modified)}"
type="BOTH" pattern="yyyy-MM-dd HH:mm" />
</c:if> <c:if
test="${doc.content_length!=null && doc.content_length!=''}">
<c:if test="${hasInfo}">
<span class="br-phone"></span>
<span class="hidden-phone">-</span>
</c:if>
<c:set var="hasInfo" value="true" />
<la:message key="labels.search_result_size"
arg0="${fe:formatNumber(doc.content_length)}" />
</c:if> <c:if test="${searchLogSupport}">
<c:if test="${hasInfo}">
<span class="br-phone"></span>
<span class="hidden-phone">-</span>
</c:if>
<c:set var="hasInfo" value="true" />
<la:message key="labels.search_click_count"
arg0="${f:h(doc.click_count)}" />
</c:if> <c:if test="${favoriteSupport}">
<c:if test="${hasInfo}">
<span class="br-phone"></span>
<span class="hidden-phone">-</span>
</c:if>
<c:set var="hasInfo" value="true" />
<a href="#${doc.doc_id}" class="favorite"><la:message
key="labels.search_result_favorite" />
(${f:h(doc.favorite_count)})</a>
<span class="favorited"><la:message
key="labels.search_result_favorited" /> <span
class="favorited-count">(${f:h(doc.favorite_count)})</span></span>
</c:if>
</small>
</div>
</div>
@ -88,14 +109,16 @@
</c:if>
<c:if test="${facetResponse != null}">
<c:forEach var="fieldData" items="${facetResponse.fieldList}">
<c:if test="${fieldData.name == 'label' && fieldData.valueCountMap.size() > 0}">
<c:if
test="${fieldData.name == 'label' && fieldData.valueCountMap.size() > 0}">
<ul class="list-group m-b">
<li class="list-group-item text-uppercase"><la:message key="labels.facet_label_title" /></li>
<li class="list-group-item text-uppercase"><la:message
key="labels.facet_label_title" /></li>
<c:forEach var="countEntry" items="${fieldData.valueCountMap}">
<c:if test="${countEntry.value != 0 && fe:labelexists(countEntry.key)}">
<c:if
test="${countEntry.value != 0 && fe:labelexists(countEntry.key)}">
<li class="list-group-item"><la:link
href="/search/search?q=${f:u(q)}&ex_q=label%3a${f:u(countEntry.key)}${pagingQuery}${fe:facetQuery()}${fe:geoQuery()}"
>
href="/search/search?q=${f:u(q)}&ex_q=label%3a${f:u(countEntry.key)}${pagingQuery}${fe:facetQuery()}${fe:geoQuery()}">
${f:h(fe:label(countEntry.key))}
<span class="label label-default label-pill pull-right">${f:h(countEntry.value)}</span>
</la:link></li>
@ -106,12 +129,12 @@
</c:forEach>
<c:forEach var="facetQueryView" items="${fe:facetQueryViewList()}">
<ul class="list-group m-b">
<li class="list-group-item text-uppercase"><la:message key="${facetQueryView.title}" /></li>
<li class="list-group-item text-uppercase"><la:message
key="${facetQueryView.title}" /></li>
<c:forEach var="queryEntry" items="${facetQueryView.queryMap}">
<c:if test="${facetResponse.queryCountMap[queryEntry.value] != 0}">
<li class="list-group-item p-l-md"><la:link
href="/search/search?q=${f:u(q)}&ex_q=${f:u(queryEntry.value)}${pagingQuery}${fe:facetQuery()}${fe:geoQuery()}"
>
href="/search/search?q=${f:u(q)}&ex_q=${f:u(queryEntry.value)}${pagingQuery}${fe:facetQuery()}${fe:geoQuery()}">
<la:message key="${queryEntry.key}" />
<span class="label label-default label-pill pull-right">${f:h(facetResponse.queryCountMap[queryEntry.value])}</span>
</la:link></li>
@ -121,7 +144,8 @@
</c:forEach>
<c:if test="${!empty ex_q}">
<div class="pull-right">
<la:link href="/search/search?q=${f:u(q)}" styleClass="btn btn-secondary btn-sm">
<la:link href="/search/search?q=${f:u(q)}"
styleClass="btn btn-secondary btn-sm">
<la:message key="labels.facet_label_reset" />
</la:link>
</div>
@ -135,21 +159,20 @@
<c:if test="${existPrevPage}">
<li class="prev"><la:link aria-label="Previous"
href="/search/prev?q=${f:u(q)}&pn=${f:u(currentPageNumber)}&num=${f:u(pageSize)}${pagingQuery}${fe:facetQuery()}${fe:geoQuery()}">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only"><la:message key="labels.prev_page" /></span>
</la:link></li>
<span aria-hidden="true">&laquo;</span>
<span class="sr-only"><la:message key="labels.prev_page" /></span>
</la:link></li>
</c:if>
<c:if test="${!existPrevPage}">
<li class="prev disabled" aria-label="Previous"><a href="#">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only"><la:message key="labels.prev_page" /></span>
<span aria-hidden="true">&laquo;</span> <span class="sr-only"><la:message
key="labels.prev_page" /></span>
</a></li>
</c:if>
<c:forEach var="pageNumber" varStatus="s" items="${pageNumberList}">
<li
<c:if test="${pageNumber < currentPageNumber - 2 || pageNumber > currentPageNumber + 2}">class="hidden-phone"</c:if>
<c:if test="${pageNumber == currentPageNumber && pageNumber >= currentPageNumber - 2 && pageNumber <= currentPageNumber + 2}">class="active"</c:if>
>
<c:if test="${pageNumber == currentPageNumber && pageNumber >= currentPageNumber - 2 && pageNumber <= currentPageNumber + 2}">class="active"</c:if>>
<la:link
href="/search/move?q=${f:u(q)}&pn=${f:u(pageNumber)}&num=${f:u(pageSize)}${pagingQuery}${fe:facetQuery()}${fe:geoQuery()}">${f:h(pageNumber)}</la:link>
</li>
@ -157,14 +180,14 @@
<c:if test="${existNextPage}">
<li class="next"><la:link aria-label="Next"
href="/search/next?q=${f:u(q)}&pn=${f:u(currentPageNumber)}&num=${f:u(pageSize)}${pagingQuery}${fe:facetQuery()}${fe:geoQuery()}">
<span class="sr-only"><la:message key="labels.next_page" /></span>
<span aria-hidden="true">&raquo;</span>
</la:link></li>
<span class="sr-only"><la:message key="labels.next_page" /></span>
<span aria-hidden="true">&raquo;</span>
</la:link></li>
</c:if>
<c:if test="${!existNextPage}">
<li class="next disabled" aria-label="Next"><a href="#">
<span class="sr-only"><la:message key="labels.next_page"/></span>
<span aria-hidden="true">&raquo;</span>
<li class="next disabled" aria-label="Next"><a href="#"> <span
class="sr-only"><la:message key="labels.next_page" /></span> <span
aria-hidden="true">&raquo;</span>
</a></li>
</c:if>
</ul>

55
src/main/webapp/css/style.css
View file

@ -1,10 +1,26 @@
/* Override some defaults */
html {
min-height: 100%;
position: relative;
}
body {
padding-top: 70px;
margin-bottom: 4em;
}
footer {
width: 100%;
bottom: 0;
left: 0; height : 4em;
position: absolute;
border-top: 1px solid;
padding-top: 1em;
height: 4em;
}
.content {
min-height: 500px;
min-height: 100%;
}
h1, h2, h3 {
@ -215,14 +231,20 @@ body.search #searchOptions.active, body.help #searchOptions.active {
right: 0;
}
.centered {
float: none;
display: inline-block;
}
#contentQuery {
display: inline-block;
}
/* Large desktop */
@media ( min-width : 74.9em) {
.visible-phone {
display: none !important;
}
#contentQuery {
width: 500px;
}
}
/* Large devices (desktops, less than 75em) */
@ -233,16 +255,10 @@ body.search #searchOptions.active, body.help #searchOptions.active {
.br-tablet {
display: block;
}
#contentQuery {
width: 500px;
}
}
/* Medium devices (tablets, less than 62em) */
@media ( max-width : 61.9em) {
#contentQuery {
width: 500px;
}
}
/* Small devices (landscape phones, less than 48em) */
@ -250,21 +266,18 @@ body.search #searchOptions.active, body.help #searchOptions.active {
.br-phone {
display: block;
}
#contentQuery {
.mainLogo img {
width: 200px;
}
.navbar-brand img {
width: 80px;
}
.searchFormBox {
margin-top: 20px;
}
#result ol {
margin-left: 0;
}
.popularWordBody {
width: 440px;
}
#result .site {
width: 440px;
}
#result .info {
display: none;
}
@ -291,12 +304,6 @@ body.search #searchOptions.active, body.help #searchOptions.active {
.searchFormBox {
margin-top: 80px;
}
.popularWordBody {
width: 280px;
}
#result .site {
width: 280px;
}
#result .info {
display: none;
}
@ -331,4 +338,4 @@ body.search #searchOptions.active, body.help #searchOptions.active {
max-height: 300px;
overflow-y: scroll;
}
}
}