Commit 53470fb008c5942f09ee00982ab3f1c02d6831c3

Authored by Leandro Santos
2 parents 270f9197 63e3af5b

Merge branch 'master' of gitlab.com:participa/proposal-app

index.html
... ... @@ -6,6 +6,7 @@
6 6 <script src='js/jquery-2.1.3.min.js'></script>
7 7 <script src='js/handlebars-v3.0.1.js'></script>
8 8 <script src='js/handlebars-helpers.js'></script>
  9 + <script src='js/jquery.dotdotdot.min.js'></script>
9 10 <!--
10 11 <script src='js/layout.js'></script>
11 12 -->
... ... @@ -33,6 +34,7 @@
33 34 {{#each article.categories}}
34 35 <li id='proposal-category-{{slug}}' class="proposal-category">
35 36 {{#link name id}}{{/link}}
  37 + <div class="arrow-box" style="display: none"></div>
36 38 </li>
37 39 {{/each}}
38 40 {{#each article.categories}}
... ... @@ -41,7 +43,7 @@
41 43 <div class="name">{{name}}</div>
42 44 <div class="description"></div>
43 45 </div>
44   - <ul>
  46 + <ul class="proposal-list">
45 47 {{#list_proposal ../article.children category=slug}}
46 48 {{#link title id}}{{/link}}
47 49 {{/list_proposal}}
... ...
js/jquery.dotdotdot.min.js 0 → 100644
... ... @@ -0,0 +1,13 @@
  1 +/*
  2 + * jQuery dotdotdot 1.7.2
  3 + *
  4 + * Copyright (c) Fred Heusschen
  5 + * www.frebsite.nl
  6 + *
  7 + * Plugin website:
  8 + * dotdotdot.frebsite.nl
  9 + *
  10 + * Licensed under the MIT license.
  11 + * http://en.wikipedia.org/wiki/MIT_License
  12 + */
  13 +!function(t,e){function n(t,e,n){var r=t.children(),o=!1;t.empty();for(var i=0,d=r.length;d>i;i++){var l=r.eq(i);if(t.append(l),n&&t.append(n),a(t,e)){l.remove(),o=!0;break}n&&n.detach()}return o}function r(e,n,i,d,l){var s=!1,c="a table, thead, tbody, tfoot, tr, col, colgroup, object, embed, param, ol, ul, dl, blockquote, select, optgroup, option, textarea, script, style",u="script, .dotdotdot-keep";return e.contents().detach().each(function(){var f=this,h=t(f);if("undefined"==typeof f||3==f.nodeType&&0==t.trim(f.data).length)return!0;if(h.is(u))e.append(h);else{if(s)return!0;e.append(h),!l||h.is(d.after)||h.find(d.after).length||e[e.is(c)?"after":"append"](l),a(i,d)&&(s=3==f.nodeType?o(h,n,i,d,l):r(h,n,i,d,l),s||(h.detach(),s=!0)),s||l&&l.detach()}}),s}function o(e,n,r,o,d){var c=e[0];if(!c)return!1;var f=s(c),h=-1!==f.indexOf(" ")?" ":" ",p="letter"==o.wrap?"":h,g=f.split(p),v=-1,w=-1,b=0,y=g.length-1;for(o.fallbackToLetter&&0==b&&0==y&&(p="",g=f.split(p),y=g.length-1);y>=b&&(0!=b||0!=y);){var m=Math.floor((b+y)/2);if(m==w)break;w=m,l(c,g.slice(0,w+1).join(p)+o.ellipsis),a(r,o)?(y=w,o.fallbackToLetter&&0==b&&0==y&&(p="",g=g[0].split(p),v=-1,w=-1,b=0,y=g.length-1)):(v=w,b=w)}if(-1==v||1==g.length&&0==g[0].length){var x=e.parent();e.detach();var T=d&&d.closest(x).length?d.length:0;x.contents().length>T?c=u(x.contents().eq(-1-T),n):(c=u(x,n,!0),T||x.detach()),c&&(f=i(s(c),o),l(c,f),T&&d&&t(c).parent().append(d))}else f=i(g.slice(0,v+1).join(p),o),l(c,f);return!0}function a(t,e){return t.innerHeight()>e.maxHeight}function i(e,n){for(;t.inArray(e.slice(-1),n.lastCharacter.remove)>-1;)e=e.slice(0,-1);return t.inArray(e.slice(-1),n.lastCharacter.noEllipsis)<0&&(e+=n.ellipsis),e}function d(t){return{width:t.innerWidth(),height:t.innerHeight()}}function l(t,e){t.innerText?t.innerText=e:t.nodeValue?t.nodeValue=e:t.textContent&&(t.textContent=e)}function s(t){return t.innerText?t.innerText:t.nodeValue?t.nodeValue:t.textContent?t.textContent:""}function c(t){do t=t.previousSibling;while(t&&1!==t.nodeType&&3!==t.nodeType);return t}function u(e,n,r){var o,a=e&&e[0];if(a){if(!r){if(3===a.nodeType)return a;if(t.trim(e.text()))return u(e.contents().last(),n)}for(o=c(a);!o;){if(e=e.parent(),e.is(n)||!e.length)return!1;o=c(e[0])}if(o)return u(t(o),n)}return!1}function f(e,n){return e?"string"==typeof e?(e=t(e,n),e.length?e:!1):e.jquery?e:!1:!1}function h(t){for(var e=t.innerHeight(),n=["paddingTop","paddingBottom"],r=0,o=n.length;o>r;r++){var a=parseInt(t.css(n[r]),10);isNaN(a)&&(a=0),e-=a}return e}if(!t.fn.dotdotdot){t.fn.dotdotdot=function(e){if(0==this.length)return t.fn.dotdotdot.debug('No element found for "'+this.selector+'".'),this;if(this.length>1)return this.each(function(){t(this).dotdotdot(e)});var o=this;o.data("dotdotdot")&&o.trigger("destroy.dot"),o.data("dotdotdot-style",o.attr("style")||""),o.css("word-wrap","break-word"),"nowrap"===o.css("white-space")&&o.css("white-space","normal"),o.bind_events=function(){return o.bind("update.dot",function(e,d){e.preventDefault(),e.stopPropagation(),l.maxHeight="number"==typeof l.height?l.height:h(o),l.maxHeight+=l.tolerance,"undefined"!=typeof d&&(("string"==typeof d||d instanceof HTMLElement)&&(d=t("<div />").append(d).contents()),d instanceof t&&(i=d)),g=o.wrapInner('<div class="dotdotdot" />').children(),g.contents().detach().end().append(i.clone(!0)).find("br").replaceWith(" <br /> ").end().css({height:"auto",width:"auto",border:"none",padding:0,margin:0});var c=!1,u=!1;return s.afterElement&&(c=s.afterElement.clone(!0),c.show(),s.afterElement.detach()),a(g,l)&&(u="children"==l.wrap?n(g,l,c):r(g,o,g,l,c)),g.replaceWith(g.contents()),g=null,t.isFunction(l.callback)&&l.callback.call(o[0],u,i),s.isTruncated=u,u}).bind("isTruncated.dot",function(t,e){return t.preventDefault(),t.stopPropagation(),"function"==typeof e&&e.call(o[0],s.isTruncated),s.isTruncated}).bind("originalContent.dot",function(t,e){return t.preventDefault(),t.stopPropagation(),"function"==typeof e&&e.call(o[0],i),i}).bind("destroy.dot",function(t){t.preventDefault(),t.stopPropagation(),o.unwatch().unbind_events().contents().detach().end().append(i).attr("style",o.data("dotdotdot-style")||"").data("dotdotdot",!1)}),o},o.unbind_events=function(){return o.unbind(".dot"),o},o.watch=function(){if(o.unwatch(),"window"==l.watch){var e=t(window),n=e.width(),r=e.height();e.bind("resize.dot"+s.dotId,function(){n==e.width()&&r==e.height()&&l.windowResizeFix||(n=e.width(),r=e.height(),u&&clearInterval(u),u=setTimeout(function(){o.trigger("update.dot")},100))})}else c=d(o),u=setInterval(function(){if(o.is(":visible")){var t=d(o);(c.width!=t.width||c.height!=t.height)&&(o.trigger("update.dot"),c=t)}},500);return o},o.unwatch=function(){return t(window).unbind("resize.dot"+s.dotId),u&&clearInterval(u),o};var i=o.contents(),l=t.extend(!0,{},t.fn.dotdotdot.defaults,e),s={},c={},u=null,g=null;return l.lastCharacter.remove instanceof Array||(l.lastCharacter.remove=t.fn.dotdotdot.defaultArrays.lastCharacter.remove),l.lastCharacter.noEllipsis instanceof Array||(l.lastCharacter.noEllipsis=t.fn.dotdotdot.defaultArrays.lastCharacter.noEllipsis),s.afterElement=f(l.after,o),s.isTruncated=!1,s.dotId=p++,o.data("dotdotdot",!0).bind_events().trigger("update.dot"),l.watch&&o.watch(),o},t.fn.dotdotdot.defaults={ellipsis:"... ",wrap:"word",fallbackToLetter:!0,lastCharacter:{},tolerance:0,callback:null,after:null,height:null,watch:!1,windowResizeFix:!0},t.fn.dotdotdot.defaultArrays={lastCharacter:{remove:[" "," ",",",";",".","!","?"],noEllipsis:[]}},t.fn.dotdotdot.debug=function(){};var p=1,g=t.fn.html;t.fn.html=function(n){return n!=e&&!t.isFunction(n)&&this.data("dotdotdot")?this.trigger("update",[n]):g.apply(this,arguments)};var v=t.fn.text;t.fn.text=function(n){return n!=e&&!t.isFunction(n)&&this.data("dotdotdot")?(n=t("<div />").text(n).html(),this.trigger("update",[n])):v.apply(this,arguments)}}}(jQuery);
0 14 \ No newline at end of file
... ...
js/main.js
... ... @@ -69,6 +69,9 @@ $.getJSON(noosferoAPI)
69 69 //Display Topics or Discussion by category
70 70 $('.proposal-category-items').hide();
71 71 $('#' + item).show();
  72 + $(".proposal-item").dotdotdot();
  73 + $('.proposal-category .arrow-box').hide();
  74 + $(this).siblings('.arrow-box').show();
72 75 }
73 76 event.preventDefault();
74 77 });
... ...
sass/_proposal_categories.scss
1 1 @import "utilities/variables";
2 2  
3   -#proposal-categories{
  3 +#proposal-categories {
4 4 background: #fff;
5 5 clear: both;
6 6 margin: 0;
7   - width: 100%;
8 7 padding: 10px;
9 8 text-align: center;
10 9 li {
... ... @@ -77,7 +76,7 @@
77 76  
78 77 .proposal-category-items .proposal-item {
79 78 width: 290px;
80   - min-height: 134px;
  79 + height: 134px;
81 80 margin: 10px;
82 81 background: #fff;
83 82 border-radius: 5px;
... ... @@ -85,6 +84,14 @@
85 84 vertical-align: top;
86 85 }
87 86  
  87 + .proposal-category-items {
  88 + text-align: left;
  89 + border-radius: 6px;
  90 + .proposal-list {
  91 + padding-left: 20px;
  92 + }
  93 + }
  94 +
88 95 #proposal-categories-container {
89 96 display: inline;
90 97 width: auto;
... ... @@ -114,6 +121,10 @@
114 121 background-color: $color;
115 122 border-color: $color;
116 123 }
  124 + #proposal-category-#{$category} .arrow-box:after {
  125 + border-bottom-color: $color;
  126 + }
  127 +
117 128 .proposal-category-items-#{$category} ul.category li {
118 129 background-color: $color;
119 130 background-image: url(./images/icons/#{$category}.png);
... ... @@ -128,3 +139,23 @@
128 139 content: "#{$description}";
129 140 }
130 141 }
  142 +
  143 +.arrow-box {
  144 + position: relative;
  145 + background: #88b7d5;
  146 + top: 3px;
  147 + &:after {
  148 + bottom: 100%;
  149 + left: 50%;
  150 + border: solid transparent;
  151 + content: " ";
  152 + height: 0;
  153 + width: 0;
  154 + position: absolute;
  155 + pointer-events: none;
  156 + border-color: rgba(136, 183, 213, 0);
  157 + border-bottom-color: #88b7d5;
  158 + border-width: 8px;
  159 + margin-left: -8px;
  160 + }
  161 +}
... ...