Author: bleny Date: 2014-04-03 17:51:24 +0200 (Thu, 03 Apr 2014) New Revision: 1824 Url: http://forge.codelutin.com/projects/wao/repository/revisions/1824 Log: refs 4490 layout for boats page and style Modified: trunk/wao-web/src/main/java/fr/ifremer/wao/web/action/obsmer/BoatsAction.java trunk/wao-web/src/main/webapp/WEB-INF/content/obsmer/boats.jsp trunk/wao-web/src/main/webapp/wao.css Modified: trunk/wao-web/src/main/java/fr/ifremer/wao/web/action/obsmer/BoatsAction.java =================================================================== --- trunk/wao-web/src/main/java/fr/ifremer/wao/web/action/obsmer/BoatsAction.java 2014-04-03 15:24:32 UTC (rev 1823) +++ trunk/wao-web/src/main/java/fr/ifremer/wao/web/action/obsmer/BoatsAction.java 2014-04-03 15:51:24 UTC (rev 1824) @@ -45,7 +45,7 @@ public TopiaPagerBean getPager() { if (pager == null) { - pager = service.newBoatsPager(50); + pager = service.newBoatsPager(25); } return pager; } Modified: trunk/wao-web/src/main/webapp/WEB-INF/content/obsmer/boats.jsp =================================================================== --- trunk/wao-web/src/main/webapp/WEB-INF/content/obsmer/boats.jsp 2014-04-03 15:24:32 UTC (rev 1823) +++ trunk/wao-web/src/main/webapp/WEB-INF/content/obsmer/boats.jsp 2014-04-03 15:51:24 UTC (rev 1824) @@ -58,203 +58,207 @@ <content tag="mainClass">large</content> -<s:form method="GET" id="boats-filters-form" cssClass="filters-form"> +<div id="boats-filters-list-details-layout"> - <fieldset> + <div> + <s:form method="GET" id="boats-filters-form" cssClass="filters-form"> - <s:select name="filter.elligibleBoatsFilter.fishingZoneFacadeNames" - label="%{getText('wao.ui.field.FishingZone.facadeName')}" - list="filterValues.elligibleBoatsFilterValues.fishingZoneFacadeNames" - listKey="value" - listValue="label" - multiple="true" - dataBinding="elligibleBoatsFilterValues.fishingZoneFacadeNames"/> + <s:select name="filter.elligibleBoatsFilter.fishingZoneFacadeNames" + label="%{getText('wao.ui.field.FishingZone.facadeName')}" + list="filterValues.elligibleBoatsFilterValues.fishingZoneFacadeNames" + listKey="value" + listValue="label" + multiple="true" + dataBinding="elligibleBoatsFilterValues.fishingZoneFacadeNames"/> - <s:select name="filter.elligibleBoatsFilter.fishingZoneSectorNames" - label="%{getText('wao.ui.field.FishingZone.sectorName')}" - list="filterValues.elligibleBoatsFilterValues.fishingZoneSectorNames" - listKey="value" - listValue="label" - multiple="true" - dataBinding="elligibleBoatsFilterValues.fishingZoneSectorNames"/> + <s:select name="filter.elligibleBoatsFilter.fishingZoneSectorNames" + label="%{getText('wao.ui.field.FishingZone.sectorName')}" + list="filterValues.elligibleBoatsFilterValues.fishingZoneSectorNames" + listKey="value" + listValue="label" + multiple="true" + dataBinding="elligibleBoatsFilterValues.fishingZoneSectorNames"/> - <s:select name="filter.elligibleBoatsFilter.sampleRowCodes" - label="%{getText('wao.ui.field.SampleRow.code')}" - list="filterValues.elligibleBoatsFilterValues.sampleRowCodes" - listKey="value" - listValue="label" - multiple="true" - dataBinding="elligibleBoatsFilterValues.sampleRowCodes"/> + <s:select name="filter.elligibleBoatsFilter.sampleRowCodes" + label="%{getText('wao.ui.field.SampleRow.code')}" + list="filterValues.elligibleBoatsFilterValues.sampleRowCodes" + listKey="value" + listValue="label" + multiple="true" + dataBinding="elligibleBoatsFilterValues.sampleRowCodes"/> - </fieldset> + <s:textfield name="filter.boatName" + label="%{getText('wao.ui.form.Boat.name')}" + placeholder="%{getText('wao.ui.form.boatName.placeholder')}" + cssClass=""/> - <fieldset> + <s:textfield name="filter.registrationCode" + label="%{getText('wao.ui.form.Boat.registrationCode')}" + placeholder="%{getText('wao.ui.form.registrationCode.placeholder')}" + cssClass=""/> - <s:textfield name="filter.boatName" - label="%{getText('wao.ui.form.Boat.name')}" - placeholder="%{getText('wao.ui.form.boatName.placeholder')}" - cssClass=""/> + <s:select name="filter.districtIds" + label="%{getText('wao.ui.field.Boat.district')}" + list="filterValues.districts" + listKey="value" + listValue="label" + multiple="true" + dataBinding="districts"/> - <s:textfield name="filter.registrationCode" - label="%{getText('wao.ui.form.Boat.registrationCode')}" - placeholder="%{getText('wao.ui.form.registrationCode.placeholder')}" - cssClass=""/> + <s:select name="filter.shipOwnerIds" + label="%{getText('wao.ui.field.Boat.shipOwner')}" + list="filterValues.shipOwners" + listKey="value" + listValue="label" + multiple="true" + dataBinding="shipOwners"/> - </fieldset> + <s:select name="filter.portOfRegistryIds" + label="%{getText('wao.ui.field.Boat.portOfRegistry')}" + list="filterValues.portsOfRegistry" + listKey="value" + listValue="label" + multiple="true" + dataBinding="portsOfRegistry"/> - <fieldset> + <div class="form-actions"> - <s:select name="filter.districtIds" - label="%{getText('wao.ui.field.Boat.district')}" - list="filterValues.districts" - listKey="value" - listValue="label" - multiple="true" - dataBinding="districts"/> + <button type="button" id="reset-filters" class="btn"> + <i class="icon-reset"></i> <s:text name="wao.ui.action.reset" /> + </button> - <s:select name="filter.shipOwnerIds" - label="%{getText('wao.ui.field.Boat.shipOwner')}" - list="filterValues.shipOwners" - listKey="value" - listValue="label" - multiple="true" - dataBinding="shipOwners"/> + <s:submit type="button" cssClass="btn"> + <i class="icon-filter"></i> <s:text name="wao.ui.action.filter"/> + </s:submit> - <s:select name="filter.portOfRegistryIds" - label="%{getText('wao.ui.field.Boat.portOfRegistry')}" - list="filterValues.portsOfRegistry" - listKey="value" - listValue="label" - multiple="true" - dataBinding="portsOfRegistry"/> - </fieldset> + <s:submit action="export-boats" type="button" cssClass="btn"> + <i class="icon-download"></i> <s:text name="wao.ui.action.csvExport"/> + </s:submit> - <div class="form-actions"> + </div> - <button type="button" id="reset-filters" class="btn"> - <i class="icon-reset"></i> <s:text name="wao.ui.action.reset" /> - </button> + </s:form> - <s:submit type="button" cssClass="btn"> - <i class="icon-filter"></i> <s:text name="wao.ui.action.filter"/> - </s:submit> + </div> - <s:submit action="export-boats" type="button" cssClass="btn"> - <i class="icon-download"></i> <s:text name="wao.ui.action.csvExport"/> - </s:submit> + <div> - </div> + <table id="boats-list" class="table-condensed table-striped table-hover"> + <caption> + <s:text name="wao.ui.boats.title"> + <s:param value="%{pagination.nbRecords}"/> + </s:text> + </caption> + <thead> + <tr> + <th> + <s:text name="wao.ui.boats.registrationCode"/> + </th> + <th> + <s:text name="wao.ui.boats.boatName"/> + </th> + <th> + <s:text name="wao.ui.boats.boatLength"/> (m) + </th> + <th> + <s:text name="wao.ui.boats.buildYear"/> + </th> + <th> + <s:text name="wao.ui.boats.district"/> + </th> + <th> + <span data-original-title="<s:text name="wao.ui.boats.portOfRegistry.description"/>" data-toggle="tooltip" data-placement="bottom"> + <s:text name="wao.ui.boats.portOfRegistry"/> + </span> + </th> + </tr> + </thead> + <tbody> + <s:iterator value="boats" var="boat"> + <tr class="boat-row<s:if test="!active"> inactive</s:if>"> + <td id="<s:property value="topiaId"/>"> + <s:if test="authenticatedWaoUser.authorizedToViewBoatDetails"> + <s:url action="boat-details" id="boatDetailsUrl"> + <s:param name="companyId" value="authenticatedWaoUser.waoUser.company.topiaId" /> + <s:param name="boatId" value="topiaId" /> + <s:param name="fragment" value="true" /> + </s:url> + <s:a href="%{boatDetailsUrl}" cssClass="boat-details-action"> + <s:property value="%{'' + immatriculation}"/> + </s:a> + </s:if> + <s:else> + <s:property value="%{'' + immatriculation}"/> + </s:else> + </td> + <td><s:property value="name"/></td> + <td><s:property value="boatLength"/></td> + <td><s:property value="%{'' + buildYear}"/></td> + <td><s:property value="district.districtCode"/></td> + <td> + <s:if test="portOfRegistry != null"> + <span data-original-title="<s:property value="portOfRegistry.description"/>" data-toggle="tooltip" data-placement="bottom"> + <s:property value="portOfRegistry.portCode"/> + </span> + </s:if> + </td> + </tr> + </s:iterator> + </todby> + </table> -</s:form> + <%-- Pagination --%> + <div class="pagination"> + <ul> + <s:url var="fullUrl" includeParams="get"/> + <s:set var="paginationUrl" value="%{getPaginationUrl(#fullUrl)}"/> + <s:if test="pagination.firstPageIndex > 2"> + <li> + <a href="${paginationUrl}1">1</a> + </li> + <li> + <a href="${paginationUrl}2">2</a> + </li> + <li> + <span>...</span> + </li> + </s:if> -<h3> - <s:text name="wao.ui.boats.title"> - <s:param value="%{pagination.nbRecords}"/> - </s:text> -</h3> + <s:iterator var="currentPageIndex" begin="pagination.firstPage" end="pagination.lastPage"> + <li class="<s:if test="#currentPageIndex == pagination.currentPage">active</s:if>"> + <a href="${paginationUrl}${currentPageIndex}"> + <s:property/> + </a> + </li> + </s:iterator> -<%-- Pagination --%> -<div class="pagination"> - <ul> - <s:url var="fullUrl" includeParams="get"/> - <s:set var="paginationUrl" value="%{getPaginationUrl(#fullUrl)}"/> - <s:if test="pagination.firstPageIndex > 2"> - <li> - <a href="${paginationUrl}1">1</a> - </li> - <li> - <a href="${paginationUrl}2">2</a> - </li> - <li> - <span>...</span> - </li> - </s:if> + <s:if test="pagination.lastPage < pagination.nbPages - 1"> + <li> + <span>...</span> + </li> + <li> + <a href="${paginationUrl}${pagination.nbPages - 1}"> + <s:property value="pagination.nbPages - 1"/> + </a> + </li> + <li> + <a href="${paginationUrl}${pagination.nbPages}"> + <s:property value="pagination.nbPages"/> + </a> + </li> + </s:if> + </ul> + </div> + </div> - <s:iterator var="currentPageIndex" begin="pagination.firstPage" end="pagination.lastPage"> - <li class="<s:if test="#currentPageIndex == pagination.currentPage">active</s:if>"> - <a href="${paginationUrl}${currentPageIndex}"> - <s:property/> - </a> - </li> - </s:iterator> + <s:if test="authenticatedWaoUser.authorizedToViewBoatDetails"> + <div id="boat-details"> + <div class="alert alert-info"> + Vous devez sélectionner un navire dans la liste en cliquant sur son immatriculation pour afficher les détails ici. + </div> + </div> + </s:if> - <s:if test="pagination.lastPage < pagination.nbPages - 1"> - <li> - <span>...</span> - </li> - <li> - <a href="${paginationUrl}${pagination.nbPages - 1}"> - <s:property value="pagination.nbPages - 1"/> - </a> - </li> - <li> - <a href="${paginationUrl}${pagination.nbPages}"> - <s:property value="pagination.nbPages"/> - </a> - </li> - </s:if> - </ul> </div> -<table id="boats-list" class="table-condensed table-striped table-hover"> - <thead> - <tr> - <th> - <s:text name="wao.ui.boats.registrationCode"/> - </th> - <th> - <s:text name="wao.ui.boats.boatName"/> - </th> - <th> - <s:text name="wao.ui.boats.boatLength"/> (m) - </th> - <th> - <s:text name="wao.ui.boats.buildYear"/> - </th> - <th> - <s:text name="wao.ui.boats.district"/> - </th> - <th> - <span data-original-title="<s:text name="wao.ui.boats.portOfRegistry.description"/>" data-toggle="tooltip" data-placement="bottom"> - <s:text name="wao.ui.boats.portOfRegistry"/> - </span> - </th> - </tr> - </thead> - <tbody> - <s:iterator value="boats" var="boat"> - <tr class="boat-row<s:if test="!active"> inactive</s:if>"> - <td id="<s:property value="topiaId"/>"> - <s:if test="authenticatedWaoUser.authorizedToViewBoatDetails"> - <s:url action="boat-details" id="boatDetailsUrl"> - <s:param name="companyId" value="authenticatedWaoUser.waoUser.company.topiaId" /> - <s:param name="boatId" value="topiaId" /> - <s:param name="fragment" value="true" /> - </s:url> - <s:a href="%{boatDetailsUrl}" cssClass="boat-details-action"> - <s:property value="%{'' + immatriculation}"/> - </s:a> - </s:if> - <s:else> - <s:property value="%{'' + immatriculation}"/> - </s:else> - </td> - <td><s:property value="name"/></td> - <td><s:property value="boatLength"/></td> - <td><s:property value="%{'' + buildYear}"/></td> - <td><s:property value="district.districtCode"/></td> - <td> - <s:if test="portOfRegistry != null"> - <span data-original-title="<s:property value="portOfRegistry.description"/>" data-toggle="tooltip" data-placement="bottom"> - <s:property value="portOfRegistry.portCode"/> - </span> - </s:if> - </td> - </tr> - </s:iterator> - </todby> -</table> - -<div id="boat-details"></div> - </html> Modified: trunk/wao-web/src/main/webapp/wao.css =================================================================== --- trunk/wao-web/src/main/webapp/wao.css 2014-04-03 15:24:32 UTC (rev 1823) +++ trunk/wao-web/src/main/webapp/wao.css 2014-04-03 15:51:24 UTC (rev 1824) @@ -263,10 +263,6 @@ width: 450px; } -#boats-list, #boat-details { - float: left; -} - #boats-list th, #boats-list td { text-align: right; width: 30px; @@ -277,3 +273,24 @@ text-align: left; width: 200px; } + +#boats-filters-form .control-group { + clear: left; +} + +#boats-filters-form button { + margin-top: 5px; + clear: left; + float: left; +} + +#boats-filters-list-details-layout { + display: flex; + justify-content: space-around; + align-items: stretch; + align-items: center; +} + +#boats-filters-list-details-layout > div:nth-child(3) { + max-width: 35%; +}