Download as
Browse Code »

Commit e26874010f31e2311e9cb15f46559510419e71aa

Authored by Victor Costa
1 parent 519fb6db
Exists in master and in 11 other branches build, build2, capa, captcha, contigency_plan_recaptcha, jasmine-testing, make_harder_to_vote_twice, production, refactory-sass, session_cookie, staging

Improve categories style

Showing 3 changed files with 110 additions and 88 deletions   Show diff stats
index.html
  Diff comments   View file @e268740
... ... @@ -34,11 +34,19 @@
34 34 <li id='proposal-category-{{slug}}' class="proposal-category">
35 35 {{#link name id}}{{/link}}
36 36 </li>
37   - <ul id='proposal-item-{{id}}' class='proposal-category-items proposal-category-items-{{slug}} hide'>
38   - {{#list_proposal ../article.children category=slug}}
39   - {{#link title id}}{{/link}}
40   - {{/list_proposal}}
41   - </ul>
  37 + {{/each}}
  38 + {{#each article.categories}}
  39 + <div id='proposal-item-{{id}}' class="proposal-category-items proposal-category-items-{{slug}} hide">
  40 + <div class="header">
  41 + <div class="name">{{name}}</div>
  42 + <div class="description"></div>
  43 + </div>
  44 + <ul>
  45 + {{#list_proposal ../article.children category=slug}}
  46 + {{#link title id}}{{/link}}
  47 + {{/list_proposal}}
  48 + </ul>
  49 + </div>
42 50 {{/each}}
43 51 </div>
44 52 </ul>
... ...
sass/_proposal_categories.scss
  Diff comments   View file @e268740
... ... @@ -11,30 +11,93 @@
11 11 list-style: none;
12 12 display: inline-block;
13 13 }
14   - a {
  14 + .proposal-category {
  15 + a {
  16 + text-decoration: none;
  17 + color: #fff;
  18 + margin: 10px;
  19 + -webkit-border-radius: 6px;
  20 + -moz-border-radius: 6px;
  21 + border-radius: 6px;
  22 + background-position: center 30px;
  23 + background-repeat: no-repeat;
  24 + width: 140px;
  25 + height: 40px;
  26 + display: inline-block;
  27 + font-size: 14px;
  28 + font-family: asap_bold, sans;
  29 + font-weight: bolder;
  30 + text-align: center;
  31 + padding-top: 100px;
  32 + overflow: hidden;
  33 + border-width: 2px;
  34 + border-style: solid;
  35 + hover: {
  36 + border-color: #fff !important;
  37 + }
  38 + }
  39 + }
  40 +
  41 + .category > li {
  42 + color: #FFFFFF;
  43 + text-align: left;
  44 + font-family: asap_bold;
  45 + font-size: 16px;
  46 + padding: 10px 10px 5px 30px;
  47 + margin-bottom: 10px;
  48 + }
  49 +
  50 + ul.category {
  51 + text-align: left;
  52 + padding: 0;
  53 + }
  54 +
  55 + .proposal-item p {
  56 + font-size: 14px;
  57 + color: #172938;
  58 + margin: 0;
  59 + padding-top: 5px;
  60 + background: #fff;
  61 + margin-bottom: 10px;
  62 + text-align: left;
  63 + }
  64 +
  65 + .proposal-item > a {
  66 + border-top: 1px dotted #03316f;
  67 + padding-top: 10px;
  68 + display: block;
  69 + margin: 0;
  70 + color: #335277;
  71 + text-align: left;
  72 + font-family: asap_bold;
  73 + font-size: 16px;
15 74 text-decoration: none;
16   - color: #fff;
  75 + background: #fff;
  76 + }
  77 +
  78 + .proposal-category-items .proposal-item {
  79 + width: 290px;
  80 + min-height: 134px;
17 81 margin: 10px;
18   - -webkit-border-radius: 6px;
19   - -moz-border-radius: 6px;
20   - border-radius: 6px;
21   - background-position: center 30px;
22   - background-repeat: no-repeat;
23   - width: 140px;
24   - height: 40px;
25   - display: inline-block;
26   - font-size: 14px;
27   - font-family: asap_bold, sans;
28   - font-weight: bolder;
29   - text-align: center;
30   - padding-top: 100px;
31   - overflow: hidden;
32   - border-width: 2px;
33   - border-style: solid;
34   - hover: {
35   - border-color: #fff !important;
  82 + background: #fff;
  83 + border-radius: 5px;
  84 + padding: 15px;
  85 + vertical-align: top;
  86 + }
  87 +
  88 + #proposal-categories-container {
  89 + display: inline;
  90 + width: auto;
  91 + }
  92 +
  93 + .header {
  94 + color: white;
  95 + .name {
  96 + font-weight: bold;
  97 + border: 2px solid white;
36 98 }
37 99 }
  100 +
38 101 }
39 102  
40 103 @each $category, $color in $categories {
... ... @@ -46,67 +109,17 @@
46 109 background-color: $color;
47 110 border-color: $color;
48 111 }
  112 + .proposal-category-items-#{$category} ul.category li {
  113 + background-color: $color;
  114 + background-image: url(./images/icons/#{$category}.png);
  115 + background-repeat: no-repeat;
  116 + background-size: 22px;
  117 + background-position-y: center;
  118 + background-position-x: 3px;
  119 + }
49 120 }
50   -
51   -#proposal-categories-container {
52   - display: inline;
53   - width: auto;
54   -}
55   -
56   -.proposal-category-items {
57   - margin: 0 auto;
58   - padding: 0;
59   - -webkit-border-radius: 6px;
60   - -moz-border-radius: 6px;
61   - border-radius: 6px;
62   -}
63   -
64   -ul.category {
65   - display: block;
66   - text-align: left;
67   - padding: 0;
68   -}
69   -
70   -.category > li {
71   - color: #FFFFFF;
72   - text-align: left;
73   - font-family: asap_bold;
74   - font-size: 16px;
75   - padding: 10px 10px 5px 10px;
76   - margin-bottom: 10px;
77   - background-color: gray;
78   -}
79   -
80   -.proposal-item p {
81   - font-size: 14px;
82   - color: #172938;
83   - margin: 0;
84   - padding-top: 5px;
85   - background: #fff;
86   - margin-bottom: 10px;
87   - text-align: left;
88   -}
89   -
90   -.proposal-item > a {
91   - border-top: 1px dotted #03316f;
92   - padding-top: 10px;
93   - display: block;
94   - margin: 0;
95   - color: #03316f;
96   - text-align: left;
97   - font-family: asap_bold;
98   - font-size: 16px;
99   - text-decoration: none;
100   - background: #fff;
101   -}
102   -
103   -.proposal-category-items .proposal-item {
104   - width: 290px;
105   - min-height: 134px;
106   - margin: 10px;
107   - background: #fff;
108   - border-radius: 7px;
109   - padding: 15px;
110   - vertical-align: top;
  121 +@each $category, $description in $categories-descriptions {
  122 + .proposal-category-items-#{$category} .header .description:before {
  123 + content: "#{$description}";
  124 + }
111 125 }
112   -
... ...
sass/utilities/_variables.scss
  Diff comments   View file @e268740
1   -$categories: (saude: #00cbd7, seguranca: #e34748, educacao: #ffb400, desenvolvimento-social: #51d0b3);
  1 +$categories: (saude: #00a9bd, seguranca: #e34748, educacao: #ffb400, desenvolvimento-social: #51d0b3);
  2 +$categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é um dos maiores do mundo: atende 202 milhões de brasileiras e brasileiros.", seguranca: '')
... ...