update around responsive design

This commit is contained in:
Kaoru FUZITA 2015-11-26 10:57:05 +09:00
parent b505fd322b
commit 6666d29dfd
10 changed files with 181 additions and 123 deletions

View file

@ -623,7 +623,7 @@ public class FessLabels extends ActionMessages {
/** The key of the message: Search */
public static final String LABELS_SEARCH = "{labels.search}";
/** The key of the message: Results <b>{2}</b><span class="br-phone"></span><span class="hidden-phone"> -</span> <b>{3}</b> of <b>{1}</b> for <b>{0}</b> */
/** The key of the message: Results <b>{2}</b><span class="hidden-phone"> -</span> <b>{3}</b> of <b>{1}</b> for <b>{0}</b> */
public static final String LABELS_search_result_status = "{labels.search_result_status}";
/** The key of the message: ({0} sec) */
@ -695,7 +695,7 @@ public class FessLabels extends ActionMessages {
/** The key of the message: Liked */
public static final String LABELS_search_result_favorited = "{labels.search_result_favorited}";
/** The key of the message: Clicked ({0}) */
/** The key of the message: Viewed ({0}) */
public static final String LABELS_search_click_count = "{labels.search_click_count}";
/** The key of the message: more.. */
@ -770,19 +770,19 @@ public class FessLabels extends ActionMessages {
/** The key of the message: Score */
public static final String LABELS_searchoptions_score = "{labels.searchoptions_score}";
/** The key of the message: Sort: */
/** The key of the message: Sort */
public static final String LABELS_searchoptions_menu_sort = "{labels.searchoptions_menu_sort}";
/** The key of the message: Result: */
/** The key of the message: Result */
public static final String LABELS_searchoptions_menu_num = "{labels.searchoptions_menu_num}";
/** The key of the message: {0} results */
public static final String LABELS_searchoptions_num = "{labels.searchoptions_num}";
/** The key of the message: Languages: */
/** The key of the message: Languages */
public static final String LABELS_searchoptions_menu_lang = "{labels.searchoptions_menu_lang}";
/** The key of the message: Labels: */
/** The key of the message: Labels */
public static final String LABELS_searchoptions_menu_labels = "{labels.searchoptions_menu_labels}";
/** The key of the message: Error */

View file

@ -15,6 +15,8 @@
*/
package org.codelibs.fess.taglib;
import java.math.RoundingMode;
import java.text.DecimalFormat;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.time.LocalDateTime;
@ -154,6 +156,27 @@ public class FessFunctions {
return date.format(DateTimeFormatter.ofPattern(Constants.ISO_DATETIME_FORMAT, Locale.ROOT));
}
public static String formatNumber(final long value) {
int ratio = 1;
String unit = "";
String format = "0.#";
if (value < 1024) {
format = "0";
} else if (value < (1024 * 1024)) {
ratio = 1024;
unit = "K";
} else if (value < (1024 * 1024 * 1024)) {
ratio = 1024 * 1024;
unit = "M";
} else {
ratio = 1024 * 1024 * 1024;
unit = "G";
}
final DecimalFormat df = new DecimalFormat(format + unit);
df.setRoundingMode(RoundingMode.HALF_UP);
return df.format((double) value / ratio);
}
public static String facetQuery() {
return createQuery(Constants.FACET_QUERY, FACET_PREFIX);
}

View file

@ -202,7 +202,7 @@ labels.menu_search_list=Search
labels.sidebar.placeholder_search=Search...
labels.footer.copyright=Copyright(C) 2009-2015 <a href="https://github.com/codelibs">CodeLibs Project</a>. <span class="br-phone"></span>All Rights Reserved.
labels.search=Search
labels.search_result_status=Results <b>{2}</b><span class="br-phone"></span><span class="hidden-phone"> -</span> <b>{3}</b> of <b>{1}</b> for <b>{0}</b>
labels.search_result_status=Results <b>{2}</b><span class="hidden-phone"> -</span> <b>{3}</b> of <b>{1}</b> for <b>{0}</b>
labels.search_result_time=({0} sec)
labels.prev_page=Prev
labels.next_page=Next
@ -226,7 +226,7 @@ labels.search_result_created=Registered:
labels.search_result_last_modified=Last Modified:
labels.search_result_favorite=Like
labels.search_result_favorited=Liked
labels.search_click_count=Clicked ({0})
labels.search_click_count=Viewed ({0})
labels.search_result_more=more..
labels.search_result_cache=Cache
labels.facet_label_title=Label
@ -251,11 +251,11 @@ labels.facet_filetype_others=PDF
labels.facet_label_reset=Reset
labels.searchoptions_all=All
labels.searchoptions_score=Score
labels.searchoptions_menu_sort=Sort:
labels.searchoptions_menu_num=Result:
labels.searchoptions_menu_sort=Sort
labels.searchoptions_menu_num=Result
labels.searchoptions_num={0} results
labels.searchoptions_menu_lang=Languages:
labels.searchoptions_menu_labels=Labels:
labels.searchoptions_menu_lang=Languages
labels.searchoptions_menu_labels=Labels
labels.error_title=Error
labels.system_error_title=System Error
labels.contact_site_admin=Contact the Site Administrator.

View file

@ -83,6 +83,18 @@
</example>
</function>
<function>
<description>
Returns formatted number from a given value.
</description>
<name>formatNumber</name>
<function-class>org.codelibs.fess.taglib.FessFunctions</function-class>
<function-signature>java.lang.String formatNumber(long)</function-signature>
<example>
${fe:formatNumber(doc.content_length)}
</example>
</function>
<function>
<description>
Returns query parameters for Facet.

View file

@ -1,7 +1,7 @@
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<hr/>
<footer class="bd-footer text-muted" role="contentinfo">
<div id="footer" class="container center">
<div id="footer" class="center">
<p>
<la:message key="labels.footer.copyright" />
</p>

View file

@ -1,50 +1,50 @@
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<la:form action="search" method="get" styleId="searchForm"
styleClass="searchResultForm">
<la:form action="search" method="get" styleId="searchForm" role="search">
${fe:facetForm()}${fe:geoForm()}
<nav class="navbar navbar-dark bg-inverse navbar-static-top pos-f-t">
<div class="container">
<la:link styleClass="navbar-brand" href="/">
<img src="${f:url('/images/logo-head.png')}"
alt="<la:message key="labels.header_brand_name" />" />
</la:link>
<div class="form-inline navbar-form pull-right">
<la:text property="query" maxlength="1000" styleId="query"
styleClass="form-control" autocomplete="off" />
<div class="btn-group">
<nav class="navbar navbar-dark bg-inverse navbar-fixed-top">
<la:link styleClass="navbar-brand" href="/">
<img src="${f:url('/images/logo-head.png')}"
alt="<la:message key="labels.header_brand_name" />" />
</la:link>
<ul class="nav navbar-nav hidden-xs-down">
<c:if test="${!empty username && username != 'guest'}">
<li class="nav-item username">
<div class="dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown"
href="#" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user"></i>${username}
</a>
<div class="dropdown-menu" aria-labelledby="userMenu">
<la:link href="/logout" styleClass="dropdown-item">
<la:message key="labels.logout" />
</la:link>
</div>
</div>
</li>
</c:if>
</ul>
<div class="navbar-form navbar-right" role="search">
<div class="input-group">
<la:text property="query" styleId="query" styleClass="form-control"
autocomplete="off" />
<div class="input-group-btn">
<button type="submit" name="search" id="searchButton"
class="btn btn-primary">
<i class="fa fa-search"></i>
<la:message key="labels.search" />
<i class="fa fa-search"></i> <span class="hidden-xs-down"><la:message
key="labels.search" /></span>
</button>
<button type="button" class="btn btn-primary dropdown-toggle"
data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span> <span class="sr-only"><la:message
id="searchOptionsButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<span class="sr-only"><la:message
key="labels.header_form_option_btn" /></span>
</button>
<div class="dropdown-menu" aria-labelledby="optionMenu">
<div class="dropdown-menu dropdown-menu-right">
<a href="#searchOptions" class="dropdown-item" data-toggle="modal"><la:message
key="labels.header_form_option_btn" /></a>
</div>
</div>
</div>
<ul class="nav navbar-nav pull-right">
<c:if test="${!empty username && username != 'guest'}">
<li class="nav-item">
<div class="dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown"
href="#" role="button" aria-haspopup="true"
aria-expanded="false"> <i class="fa fa-user"></i>${username}
</a>
<div class="dropdown-menu" aria-labelledby="userMenu">
<la:link href="/logout" styleClass="dropdown-item">
<la:message key="labels.logout" />
</la:link>
</div>
</div>
</li>
</c:if>
</ul>
</div>
</nav>
<div class="modal fade" id="searchOptions" tabindex="-1" role="dialog"

View file

@ -22,11 +22,11 @@
<jsp:include page="header.jsp" />
<div class="container">
<div class="row">
<div class="col-md-9">
<p id="searchOptionMenu">
<span> <la:message key="labels.searchoptions_menu_sort" />
<a href="#searchOptions" data-toggle="modal"> <c:if
test="${empty sort}">
<div class="col-md-12">
<ul class="searchOptionLabels">
<li><la:message key="labels.searchoptions_menu_sort" /> <a
href="#searchOptions" class="label label-primary"
data-toggle="modal"> <c:if test="${empty sort}">
<la:message key="labels.searchoptions_score" />
</c:if> <c:if test="${sort=='created.asc'}">
<la:message key="labels.search_result_sort_created_asc" />
@ -49,14 +49,15 @@
</c:if> <c:if test="${sort=='favoriteCount_l_x_dv.desc'}">
<la:message key="labels.search_result_sort_favoriteCount_desc" />
</c:if>
</a>
</span> <span> <la:message key="labels.searchoptions_menu_num" />
<a href="#searchOptions" data-toggle="modal"> <la:message
</a></li>
<li><la:message key="labels.searchoptions_menu_num" /> <a
href="#searchOptions" class="label label-primary"
data-toggle="modal"> <la:message
key="labels.searchoptions_num" arg0="${f:h(num)}" />
</a>
</span> <span> <la:message key="labels.searchoptions_menu_lang" />
<a href="#searchOptions" data-toggle="modal"> <c:if
test="${empty lang}">
</a></li>
<li><la:message key="labels.searchoptions_menu_lang" /> <a
href="#searchOptions" class="label label-primary"
data-toggle="modal"> <c:if test="${empty lang}">
<la:message key="labels.searchoptions_all" />
</c:if> <c:if test="${!empty lang}">
<c:forEach var="sLang" items="${lang}">
@ -65,12 +66,11 @@
</c:forEach>
</c:forEach>
</c:if>
</a>
</span>
</a></li>
<c:if test="${displayLabelTypeItems}">
<span> <la:message key="labels.searchoptions_menu_labels" />
<a href="#searchOptions" data-toggle="modal"> <c:if
test="${empty fields.label}">
<li><la:message key="labels.searchoptions_menu_labels" /> <a
href="#searchOptions" class="label label-primary"
data-toggle="modal"> <c:if test="${empty fields.label}">
<la:message key="labels.searchoptions_all" />
</c:if> <c:if test="${!empty fields.label}">
<c:forEach var="sLabel" items="${fields.label}">
@ -79,10 +79,9 @@
</c:forEach>
</c:forEach>
</c:if>
</a>
</span>
</a></li>
</c:if>
</p>
</ul>
</div>
</div>
<c:if test="${fe:hswsize(null) != 0}">

View file

@ -44,20 +44,21 @@
<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" />
<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" />
<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="${f:h(doc.content_length)}" />
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"/>
@ -71,6 +72,7 @@
<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>
</li>

View file

@ -50,14 +50,20 @@ h1.mainLogo {
#result ol {
list-style: none;
padding-left: 0;
}
#result ol li {
margin-bottom: 20px;
}
#result .title a:visited {
color: #014c8c;
}
#result .body cite {
color: #093;
font-style: normal;
}
#result .body a.cache {
@ -112,22 +118,40 @@ h1.mainLogo {
margin: 0;
}
#searchOptionMenu span {
margin-right: 10px;
.username {
margin-left: 2.0rem;
margin-right: 1.0rem;
}
.username {
text-align: right;
button>i, a>i {
margin-right: 0.2em;
}
nav.navbar .form-inline {
margin-left: 20px;
}
#searchOptionsButton {
border-left:1px solid #2e6da4;
}
ul.searchOptionLabels {
list-style-type: none;
padding: 0;
}
ul.searchOptionLabels li {
display: inline-block;
margin-right: 10px;
vertical-align: middle;
}
/* Large desktop */
@media ( min-width : 74.9em) {
.visible-phone {
display: none !important;
}
#query {
width: 500px;
}
#contentQuery {
width: 500px;
}
@ -141,9 +165,6 @@ h1.mainLogo {
.br-tablet {
display: block;
}
#query {
width: 200px;
}
#contentQuery {
width: 500px;
}
@ -151,9 +172,6 @@ h1.mainLogo {
/* Medium devices (tablets, less than 62em) */
@media ( max-width : 61.9em) {
#query {
width: 300px;
}
#contentQuery {
width: 500px;
}
@ -164,9 +182,6 @@ h1.mainLogo {
.br-phone {
display: block;
}
#query {
width: 150px;
}
#contentQuery {
width: 200px;
}
@ -195,12 +210,9 @@ h1.mainLogo {
.mainLogo img {
width: 200px;
}
.brand img {
.navbar-brand img {
width: 80px;
}
#query {
width: 100px;
}
.searchFormBox {
margin-top: 80px;
}
@ -213,6 +225,20 @@ h1.mainLogo {
#result .info {
display: none;
}
#subheader {
font-size: 90%;
}
#searchButton {
padding-left: 0.8rem;
padding-right: 0.8rem;
}
#searchOptionsButton {
padding-left: 0.6rem;
padding-right: 0.6rem;
}
#footer {
font-size: 65%;
}
}
@media ( max-width : 767px) and (min-width: 481px) {
@ -231,11 +257,3 @@ h1.mainLogo {
overflow-y: scroll;
}
}
button>i, a>i {
margin-right: 0.2em;
}
nav.navbar .form-inline {
margin-left: 20px;
}

View file

@ -1,4 +1,6 @@
$(function(){
$(function() {
$('#contentQuery').focus();
var $searchButton = $('#searchButton');
var contextPath = $('#contextPath').val();
@ -18,29 +20,31 @@ $(function(){
return false;
});
$('#contentQuery').suggestor( {
ajaxinfo: {
url: contextPath + '/suggest',
fn: '_default,content,title',
num: 10
},
boxCssInfo: {
border: '1px solid rgba(82, 168, 236, 0.5)',
'-webkit-box-shadow': '0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(82, 168, 236, 0.2)',
'-moz-box-shadow': '0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(82, 168, 236, 0.2)',
'box-shadow': '0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(82, 168, 236, 0.2)',
'background-color': '#fff',
'z-index': '10000'
},
listSelectedCssInfo: {
'background-color': 'rgba(82, 168, 236, 0.1)'
},
listDeselectedCssInfo: {
'background-color': '#ffffff'
},
minturm: 1,
adjustWidthVal: 11,
searchForm: $('#searchForm')
});
$('#contentQuery')
.suggestor(
{
ajaxinfo : {
url : contextPath + '/suggest',
fn : '_default,content,title',
num : 10
},
boxCssInfo : {
border : '1px solid rgba(82, 168, 236, 0.5)',
'-webkit-box-shadow' : '0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(82, 168, 236, 0.2)',
'-moz-box-shadow' : '0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(82, 168, 236, 0.2)',
'box-shadow' : '0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(82, 168, 236, 0.2)',
'background-color' : '#fff',
'z-index' : '10000'
},
listSelectedCssInfo : {
'background-color' : 'rgba(82, 168, 236, 0.1)'
},
listDeselectedCssInfo : {
'background-color' : '#ffffff'
},
minturm : 1,
adjustWidthVal : 11,
searchForm : $('#searchForm')
});
});