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 c55d89f0500ce7f5fb776666420794275f4b60f1 Author: kaufmann <kaufmann@codelutin.com> Date: Tue Dec 19 17:44:07 2017 +0100 Refonte de l'UI: Ajout d'un mode d'affichage des bookmarks en grille (Utilisation de la lib bricklayer, source incluse directement pour l'instant, pour tester) --- bow-ui/src/main/less/common/_bookmark-grid.less | 136 ++++++++++++++++-------- bow-ui/src/main/webapp/css/bricklayer.min.css | 1 + bow-ui/src/main/webapp/js/bricklayer.min.js | 1 + 3 files changed, 94 insertions(+), 44 deletions(-) diff --git a/bow-ui/src/main/less/common/_bookmark-grid.less b/bow-ui/src/main/less/common/_bookmark-grid.less index 241eca1..1f6852d 100644 --- a/bow-ui/src/main/less/common/_bookmark-grid.less +++ b/bow-ui/src/main/less/common/_bookmark-grid.less @@ -1,62 +1,110 @@ .bookmarks-grid { - display: flex; - .bookmark { - margin-left: 1%; - margin-right: 1%; - margin-bottom: @default-marge--small; - margin-top: @default-marge--small; - height:auto; - background-color: #f3f6f9; + margin-bottom: 2 * @default-marge--small; } - .bookmark-favicon { - width: 16px; - height: 16px; - float:left; + .bookmark-title { + padding: @default-marge--small; + text-align: center; } - - .bookmark-description{ - margin:5px 5px; - color:#999999; - font-size:12px; - position: relative; - width: 100%; + .bookmark-content { + padding: 0 @default-marge--small @default-marge--small @default-marge--small; + position: relative; } - .bookmark-screenshot{ - width:100%; + .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%; + height: auto; + } - img { - width: 100%; - max-height: 150px; - } + .bookmark-metadata { + text-align: center; } - .bookmark-content { + .bookmark-tags { + padding-left: @default-marge--small; + padding-right: @default-marge--small; } - .bookmark-tags{ - color:#88516c; - background:url('../img/tag.jpg') no-repeat left center; - font-size:12px; - padding-left:30px; - height:auto; - width:100%; - line-height:28px; - padding-top:10px; + // FIXME LK TMP >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> - & > a { - margin: 5px; - padding: 5px; - border: 1px solid #eee; - } + .bookmark-actions-menu { + margin: @default-marge--small / 2; + border-radius: 50%; + padding: 5px; + position: absolute; + right: 10px; + top: -17px; + background: #7DBED2; + border: 2px solid #fff; + color: #000; + + &:hover ~.bookmark-actions { + display: block; + } + } + .bookmark-actions { + display: none; + position: absolute; + left: 0; + top: 0; + background: @color-sidebar-background; + width: 100%; + height: 100%; + border-radius: 0 0 5px 5px; + text-align: center; + padding: 15px; + + &:hover { + display: block; + } } +} + +// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< - .bookmark-nb-click{ +.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%; } +} - .bookmark-actions { - display: none; +@media screen and (min-width: 1200px) { + .bricklayer-column-sizer { + width: 25%; } -} \ No newline at end of file +} diff --git a/bow-ui/src/main/webapp/css/bricklayer.min.css b/bow-ui/src/main/webapp/css/bricklayer.min.css new file mode 100644 index 0000000..f62e047 --- /dev/null +++ b/bow-ui/src/main/webapp/css/bricklayer.min.css @@ -0,0 +1 @@ +.bricklayer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.bricklayer-column-sizer{width:100%;display:none}@media screen and (min-width:640px){.bricklayer-column-sizer{width:50%}}@media screen and (min-width:9 [...] \ No newline at end of file diff --git a/bow-ui/src/main/webapp/js/bricklayer.min.js b/bow-ui/src/main/webapp/js/bricklayer.min.js new file mode 100644 index 0000000..5451c46 --- /dev/null +++ b/bow-ui/src/main/webapp/js/bricklayer.min.js @@ -0,0 +1 @@ +!function t(e,n,r){function o(s,u){if(!n[s]){if(!e[s]){var l="function"==typeof require&&require;if(!u&&l)return l(s,!0);if(i)return i(s,!0);var a=new Error("Cannot find module '"+s+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[s]={exports:{}};e[s][0].call(p.exports,function(t){var n=e[s][1][t];return o(n?n:t)},p,p.exports,t,e,n,r)}return n[s].exports}for(var i="function"==typeof require&&require,s=0;s<r.length;s++)o(r[s]);return o}({1:[function(t,e,n){var r,o=this&&this.__extends||func [...] \ No newline at end of file -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.