This is an automated email from the git hooks/post-receive script. New commit to branch refonteUI-2017 in repository bow. See https://gitlab.nuiton.org/chorem/bow.git commit b723264e2abe1c39e22cebd187b06d13540a1cae Author: kaufmann <kaufmann@codelutin.com> Date: Wed Feb 5 11:19:53 2020 +0100 Modification de l'affichage des bookmarks --- bow-ui/src/main/less/common/_bookmark-grid.less | 85 +++++++++++----------- bow-ui/src/main/less/common/_bookmark-list.less | 29 +++++++- bow-ui/src/main/less/common/_bookmark.less | 16 +++- bow-ui/src/main/webapp/WEB-INF/jsp/home.jsp | 11 ++- .../src/main/webapp/WEB-INF/jsp/inc/bookmark.jsp | 76 +++++++++---------- 5 files changed, 127 insertions(+), 90 deletions(-) diff --git a/bow-ui/src/main/less/common/_bookmark-grid.less b/bow-ui/src/main/less/common/_bookmark-grid.less index 1f6852d..c4a218e 100644 --- a/bow-ui/src/main/less/common/_bookmark-grid.less +++ b/bow-ui/src/main/less/common/_bookmark-grid.less @@ -1,8 +1,27 @@ .bookmarks-grid { + display: flex; + flex-wrap: wrap; + .bookmark { + position: relative; margin-bottom: 2 * @default-marge--small; + padding-top: 135px; + + border: 1px solid #eee; + + &:hover { + border-color: #07999255; + } + } + + #bookmarks-display-settings { + width: 100%; } + .bookmark-icon { + height: 20px; + margin-bottom: -30px; + } .bookmark-title { padding: @default-marge--small; text-align: center; @@ -12,6 +31,15 @@ position: relative; } + .bookmark-screenshot { + position: absolute; + top: 0; + left: 0; + width: 100%; + + border-bottom: 2px solid #eee; + } + .bookmark-screenshot-image { border-radius: @default-bookmark-radius - 1 @default-bookmark-radius - 1 0 0; // -1 to avoir display issues with two stacked elements with radius width: 100%; @@ -39,7 +67,7 @@ background: #7DBED2; border: 2px solid #fff; color: #000; - + &:hover ~.bookmark-actions { display: block; } @@ -55,56 +83,27 @@ border-radius: 0 0 5px 5px; text-align: center; padding: 15px; - + &:hover { display: block; } } } -// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - -.bricklayer-column { - padding-right: @default-marge--small; - padding-left: @default-marge--small; -} - -.bricklayer-column:nth-child(3n) .bookmark:nth-child(3n+1) { - background-color: lighten(@color-bookmark-background, 10%); -} -.bricklayer-column:nth-child(3n) .bookmark:nth-child(3n+2) { - background-color: darken(@color-bookmark-background, 20%); -} -.bricklayer-column:nth-child(3n) .bookmark:nth-child(3n+3) { - background-color: mix(@color-bookmark-background, @color-sidebar-background, 70%); -} -.bricklayer-column:nth-child(3n+1) .bookmark:nth-child(3n+1) { - background-color: mix(@color-bookmark-background, @color-sidebar-background); -} -.bricklayer-column:nth-child(3n+1) .bookmark:nth-child(3n+2) { - background-color: lighten(@color-bookmark-background, 20%); -} -.bricklayer-column:nth-child(3n+1) .bookmark:nth-child(3n+3) { - background-color: lighten(@color-bookmark-background, 15%); -} -.bricklayer-column:nth-child(3n+2) .bookmark:nth-child(3n+1) { - background-color: darken(@color-bookmark-background, 10%); -} -.bricklayer-column:nth-child(3n+2) .bookmark:nth-child(3n+2) { - background-color: mix(@color-bookmark-background, @color-sidebar-background, 30%); -} -.bricklayer-column:nth-child(3n+2) .bookmark:nth-child(3n+3) { - background-color: darken(@color-bookmark-background, 15%); -} - -@media screen and (min-width: 984px) { - .bricklayer-column-sizer { - width: 33.3%; +@media screen and (min-width: @screen-desktop-low) { + .bookmarks-grid { + .bookmark { + width: calc(33% - 20px); + margin-left: 10px; + margin-right: 10px; + } } } -@media screen and (min-width: 1200px) { - .bricklayer-column-sizer { - width: 25%; +@media screen and (min-width: @screen-desktop-large) { + .bookmarks-grid { + .bookmark { + width: calc(25% - 20px); + } } } diff --git a/bow-ui/src/main/less/common/_bookmark-list.less b/bow-ui/src/main/less/common/_bookmark-list.less index 05c09db..956880e 100644 --- a/bow-ui/src/main/less/common/_bookmark-list.less +++ b/bow-ui/src/main/less/common/_bookmark-list.less @@ -4,9 +4,13 @@ .bookmark { display: flex; flex-direction: row; + justify-content: center; + align-items: center; + background-color: @color-bookmark-background; - border: 1px solid transparent; - transition: border 1s ease; + border: 1px solid #EEE; + + transition: border 0.5s ease; &:nth-child(2n+1) { background-color: @color-bookmark-background; @@ -19,7 +23,13 @@ .bookmark-description { } + .bookmark-icon { + width: 60px; + + text-align: center; + } .bookmark-title { + padding: @default-marge--small 0; color: #555; } @@ -29,14 +39,25 @@ flex: 1; } + .bookmark-screenshot-image { + max-width: 200px; + margin: 5px; + vertical-align: middle; + } + .bookmark-nb-click { } .bookmark-tags{ + .tag { + + } } .bookmark-actions { - opacity: 0.4; + opacity: 0.6; + transition: opacity 0.5s ease; + a { float: left; margin: @default-marge--small / 2 @default-marge--medium / 2; @@ -44,7 +65,7 @@ } .bookmark:hover { - border-color: @color-main; + border-color: #07999255; .bookmark-actions { opacity: 1; diff --git a/bow-ui/src/main/less/common/_bookmark.less b/bow-ui/src/main/less/common/_bookmark.less index 56d5ec4..a7ef4eb 100644 --- a/bow-ui/src/main/less/common/_bookmark.less +++ b/bow-ui/src/main/less/common/_bookmark.less @@ -14,6 +14,15 @@ } } +.bookmarks-tags-cloud--selected { + padding-top: @default-marge--small; + padding-bottom: @default-marge--small; + margin-bottom: 0; + + background: lighten(@color-background-tag-cloud, 5%); + border-bottom: none; +} + #bookmarks-display-settings { display: flex; flex-direction: row; @@ -25,11 +34,14 @@ background: #1e2a2f0d; // @color-bookmark-header-background; border: 1px solid #1e2a2f11; - color: @color-main; + color: @color-text; position: relative; text-align: center; font-size: 130%; + .icon.active { + color: @color-link-active; + } & > div { flex: 1; @@ -49,8 +61,6 @@ } .bookmarks-count { - color: @color-main; - text-align: center; } #bookmarks { diff --git a/bow-ui/src/main/webapp/WEB-INF/jsp/home.jsp b/bow-ui/src/main/webapp/WEB-INF/jsp/home.jsp index af4c52f..2b7d475 100644 --- a/bow-ui/src/main/webapp/WEB-INF/jsp/home.jsp +++ b/bow-ui/src/main/webapp/WEB-INF/jsp/home.jsp @@ -31,7 +31,12 @@ <body> <jsp:include page="inc/header.jsp" flush="true"/> - <div id="bookmarks-tags"> + <s:if test="!tagLine.empty"> + <div class="bookmarks-tags-cloud bookmarks-tags-cloud--selected"> + <s:text name="bow.bookmark.tag.selected"/> : <s:property value="tagLine" /> + </div> + </s:if> + <div id="bookmarks-tags" class="bookmarks-tags-cloud"> <jsp:include page="inc/tagsCloud.jsp" flush="true"/> </div> @@ -44,8 +49,8 @@ <div id="bookmarks-display-settings" class="menu clearfix"> <div id="bookmarks-display-settings-mode"> - <i class="icon icon-list" onclick="document.getElementById('bookmarks').className = 'bookmarks-list';"></i> - <i class="icon icon-grid" onclick="document.getElementById('bookmarks').className = 'bookmarks-grid';"></i> + <i class="icon icon-list active" onclick="document.getElementById('bookmarks').className = 'bookmarks-list';this.classList.add('active');this.nextElementSibling.classList.remove('active');"></i> + <i class="icon icon-grid" onclick="document.getElementById('bookmarks').className = 'bookmarks-grid';this.classList.add('active');this.previousElementSibling.classList.remove('active');"></i> </div> <div class="bookmarks-count"> diff --git a/bow-ui/src/main/webapp/WEB-INF/jsp/inc/bookmark.jsp b/bow-ui/src/main/webapp/WEB-INF/jsp/inc/bookmark.jsp index f0f86bf..23f6b4f 100644 --- a/bow-ui/src/main/webapp/WEB-INF/jsp/inc/bookmark.jsp +++ b/bow-ui/src/main/webapp/WEB-INF/jsp/inc/bookmark.jsp @@ -29,44 +29,44 @@ xmlns:s="http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd" xmlns:jsp="http://java.sun.com/JSP/Page"> - <div class="bookmark-screenshot"> - <s:a title="%{#bookmark.link}" href="alias/%{#bookmark.wikittyId}.action" target="_blank"> - <s:set var="screenshot" value="#bookmark.screenshot"/> - <c:if test="${fn:length(screenshot) > 0}"> - <img src="data:image/png;base64,${u:base64(screenshot)}" class="bookmark-screenshot-image"/> - </c:if> - </s:a> - </div> - <div class="bookmark-content"> + <div class="bookmark-icon"> + <s:set var="favicon" value="#bookmark.favicon"/> + <c:if test="${fn:length(favicon) > 0}"> + <img class="bookmark-favicon" src="data:image/png;base64,${u:base64(favicon)}"/> + </c:if> + </div> - <div class="bookmark-title"> - <s:set var="favicon" value="#bookmark.favicon"/> - <c:if test="${fn:length(favicon) > 0}"> - <img class="bookmark-favicon" src="data:image/png;base64,${u:base64(favicon)}"/> - </c:if> + <div class="bookmark-title"> + <s:a href="alias/%{#bookmark.wikittyId}.action" cssClass="bookmark-link"><s:property value="%{#bookmark.link}"/></s:a> - <div class="bookmark-alias left"> - <s:if test="%{!#bookmark.privateAlias.empty}"> - <s:a cssClass="alias" href="%{config.aliasUrl + #bookmark.wikittyId}.action" - title="%{#bookmark.link}" target="_blank"> - a:<s:property value="%{#bookmark.privateAlias}" /> - </s:a> - </s:if> + <div class="bookmark-alias"> + <s:if test="%{!#bookmark.privateAlias.empty}"> + <s:a cssClass="alias" href="%{config.aliasUrl + #bookmark.wikittyId}.action" + title="%{#bookmark.link}" target="_blank"> + a:<s:property value="%{#bookmark.privateAlias}" /> + </s:a> + </s:if> - <s:if test="%{!#bookmark.publicAlias.empty}"> - <s:a cssClass="alias" href="%{config.aliasUrl + #bookmark.publicAlias}.action" - title="%{#bookmark.link}" target="_blank"> - a:<s:property value="%{#bookmark.publicAlias}" /> - </s:a> - </s:if> - </div> + <s:if test="%{!#bookmark.publicAlias.empty}"> + <s:a cssClass="alias" href="%{config.aliasUrl + #bookmark.publicAlias}.action" + title="%{#bookmark.link}" target="_blank"> + a:<s:property value="%{#bookmark.publicAlias}" /> + </s:a> + </s:if> + </div> + <span class="bookmark-creation-date"><s:property value="#bookmark.creationDate"/></span> + <span class="bookmark-nb-click">, <s:property value="%{#bookmark.click}" /> clics</span> - <s:a href="alias/%{#bookmark.wikittyId}.action" cssClass="bookmark-link"><s:property value="%{#bookmark.link}"/></s:a> + <div class="bookmark-description"> + ${u:toHtml(bookmark.description)} </div> - + </div> + + + <div class="bookmark-content"> + <div class="bookmark-metadata"> - <span class="bookmark-creation-date"><s:property value="#bookmark.creationDate"/></span> <span class="bookmark-tags"> <s:iterator value="#bookmark.labels" var="tag"> @@ -81,11 +81,6 @@ </s:iterator> </span> - <span class="bookmark-nb-click"><s:property value="%{#bookmark.click}" /></span> - </div> - - <div class="bookmark-description clear"> - ${u:toHtml(bookmark.description)} </div> <div class="bookmark-authentification"> @@ -112,6 +107,13 @@ </div> </div> + <div class="bookmark-screenshot"> + <s:set var="screenshot" value="#bookmark.screenshot"/> + <c:if test="${fn:length(screenshot) > 0}"> + <img src="data:image/png;base64,${u:base64(screenshot)}" class="bookmark-screenshot-image"/> + </c:if> + </div> + <!--i class="icon icon-menu bookmark-actions-menu"></i--> <div class="bookmark-actions"> <s:url var="editBookmark" action="editBookmark" escapeAmp="true"> @@ -129,7 +131,7 @@ <s:param name="order" value="%{order}"/> <s:param name="first" value="%{first}"/> </s:url> - <s:a cssClass="screenshotLink" href="%{screenshotBookmark}"><i class="icon-camera icon"></i> Screenshot</s:a> + <s:a cssClass="screenshotLink" href="%{screenshotBookmark}"><i class="icon-photo icon"></i> Screenshot</s:a> <s:url var="authenticationEdit" action="authenticationEdit" escapeAmp="true"> <s:param name="bookmarkId" value="%{#bookmark.wikittyId}" /> <s:param name="tagLine" value="%{tagLine}" /> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.