Commit 53470fb008c5942f09ee00982ab3f1c02d6831c3
Exists in
master
and in
11 other branches
Merge branch 'master' of gitlab.com:participa/proposal-app
Showing
4 changed files
with
53 additions
and
4 deletions
Show diff stats
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}} | ... | ... |
... | ... | @@ -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 | +} | ... | ... |