Download as
Browse Code »

Commit f491fc42cfed01d9031cb26fe5d2e6837bab864c

Authored by Melissa Wen
2 parents 44378211 f7514f25
Exists in master and in 9 other branches bootstrap_modal, bug_fix_40, code_block, design_41_backup, event_block, master_with_pkg_fixes, pkg_fixes, r4, r5_design

Merge branch 'html_classes_revision' into 'restructuring_css' 

Html classes revision

See merge request !2
Showing 9 changed files with 231 additions and 118 deletions   Show diff stats
css/animate.css 0 → 100644
  Diff comments   View file @f491fc4
... ... @@ -0,0 +1,68 @@
  1 +.animated {
  2 + -webkit-animation-duration: .7s;
  3 + animation-duration: .7s;
  4 + -webkit-animation-fill-mode: both;
  5 + animation-fill-mode: both;
  6 +}
  7 +
  8 +@-webkit-keyframes slideInDown {
  9 + from {
  10 + -webkit-transform: translate3d(0, -100%, 0);
  11 + transform: translate3d(0, -100%, 0);
  12 + visibility: visible;
  13 + }
  14 +
  15 + 100% {
  16 + -webkit-transform: translate3d(0, 0, 0);
  17 + transform: translate3d(0, 0, 0);
  18 + }
  19 +}
  20 +
  21 +@keyframes slideInDown {
  22 + from {
  23 + -webkit-transform: translate3d(0, -100%, 0);
  24 + transform: translate3d(0, -100%, 0);
  25 + visibility: visible;
  26 + }
  27 +
  28 + 100% {
  29 + -webkit-transform: translate3d(0, 0, 0);
  30 + transform: translate3d(0, 0, 0);
  31 + }
  32 +}
  33 +
  34 +.slideInDown {
  35 + -webkit-animation-name: slideInDown;
  36 + animation-name: slideInDown;
  37 +}
  38 +
  39 +@-webkit-keyframes slideOutUp {
  40 + from {
  41 + -webkit-transform: translate3d(0, 0, 0);
  42 + transform: translate3d(0, 0, 0);
  43 + }
  44 +
  45 + 100% {
  46 + visibility: hidden;
  47 + -webkit-transform: translate3d(0, -100%, 0);
  48 + transform: translate3d(0, -100%, 0);
  49 + }
  50 +}
  51 +
  52 +@keyframes slideOutUp {
  53 + from {
  54 + -webkit-transform: translate3d(0, 0, 0);
  55 + transform: translate3d(0, 0, 0);
  56 + }
  57 +
  58 + 100% {
  59 + visibility: hidden;
  60 + -webkit-transform: translate3d(0, -100%, 0);
  61 + transform: translate3d(0, -100%, 0);
  62 + }
  63 +}
  64 +
  65 +.slideOutUp {
  66 + -webkit-animation-name: slideOutUp;
  67 + animation-name: slideOutUp;
  68 +}
... ...
css/community-pages.css
  Diff comments   View file @f491fc4
... ... @@ -58,6 +58,7 @@
58 58 .action-profile-index #content .main-block h1 {
59 59 color: #172738;
60 60 border-bottom: none;
  61 + font-size: 2.3em;
61 62 font-weight: bold;
62 63 font-variant: normal;
63 64 font-family: Arial, open_sansbold, Helvetica, sans-serif;
... ...
css/edition-pages.css
  Diff comments   View file @f491fc4
... ... @@ -125,7 +125,7 @@
125 125 }
126 126  
127 127 .controller-cms #content .main-content form label.formlabel,
128   -.controller-cms #content .main-content form .article-translation-field{
  128 +.controller-cms #content .main-content form .article-translation-field {
129 129 font-size: 14px;
130 130 margin-bottom: 5px;
131 131 color: #231f20;
... ... @@ -249,3 +249,4 @@
249 249 border-radius: 4px;
250 250 border: 1px solid #D3D6DE;
251 251 }
  252 +
... ...
css/software-catalog-page.css
  Diff comments   View file @f491fc4
... ... @@ -42,6 +42,7 @@
42 42 padding: 16px 0 10px 14px;
43 43 color: #2C4B6B;
44 44 font-family:"open_sansregular", Arial, Helvetica, sans-serif;
  45 + color: #2B51A8;
45 46 font-weight: bold;
46 47 font-size: 15px;
47 48 text-transform: uppercase;
... ... @@ -79,9 +80,13 @@
79 80 max-height: 30px;
80 81 margin: 14px;
81 82 padding: 0 14px 0 14px;
82   - background-color: #3E67B1;
  83 + background: #3E67B1;
83 84 line-height: 14px;
  85 + border-radius: 4px;
  86 + color: #ffffff;
84 87 text-transform: uppercase;
  88 + font-family: "open_sansbold",Arial,sans-serif;
  89 + font-size: 14px;
85 90 }
86 91  
87 92 /* Filter options */
... ... @@ -94,10 +99,17 @@
94 99 padding: 14px;
95 100 background-color: #D3D6DE;
96 101 border: none;
  102 + border-bottom-left-radius: 4px;
  103 + border-bottom-right-radius: 4px;
97 104 font-size: 11px;
98 105 text-align: right;
  106 + text-transform: uppercase;
99 107 }
100 108  
  109 +.action-search-software_infos #filter-option-catalog-close {
  110 + padding: 7px 7px 17px 10px;
  111 + display: none;
  112 +}
101 113 .action-search-software_infos #filter-option-catalog-software:hover {
102 114 background-color: #c7c7c7;
103 115 }
... ... @@ -112,43 +124,52 @@
112 124 }
113 125  
114 126 .action-search-software_infos #filter-catalog-software #filter-categories-option {
115   - border:none;
  127 + border: none;
  128 + height: 0;
  129 + max-height: 620px;
  130 + position: relative;
  131 + overflow: hidden;
  132 + padding: 0 15px;
116 133 }
117 134  
118 135 .action-search-software_infos #filter-catalog-software #filter-categories-catalog h4 {
119   - margin: 5px 0 10px 5px;
  136 + margin: 20px 0 10px 5px;
120 137 background: transparent;
121 138 color: black;
122 139 }
123 140  
124 141 .action-search-software_infos #filter-catalog-software input[type="checkbox"]{
125   - vertical-align:sub;
  142 + vertical-align: middle;
  143 + margin: 0 3px 2px 8px;
126 144 }
127 145  
128   -.action-search-software_infos #group-categories #group-catalog-01 {
129   - float: left;
130   - width: 50%;
131   -}
132   -
133   -.action-search-software_infos #group-categories label {
  146 +.action-search-software_infos #group-categories ul {
134 147 font-family: Arial;
135 148 font-size: 14px;
  149 + line-height: 31px;
  150 + columns: 2;
  151 + -webkit-columns: 2;
  152 + -moz-columns: 2;
136 153 }
137 154  
138   -.action-search-software_infos #group-categories label span {
  155 +.action-search-software_infos #group-categories li span {
139 156 font-family: Arial;
140 157 font-size: 14px;
141 158 }
142 159  
143 160 .action-search-software_infos #filter-catalog-software .project-software{
144   - margin: 0 0 30px;
  161 + margin: 20px 0 30px;
145 162 border-top: 1px dotted;
146 163 border-bottom: 1px dotted;
147 164 font-weight: bold;
148 165 font-size: 15px;
149 166 font-family: Arial;
  167 + padding: 10px;
150 168 }
151 169  
  170 +.action-search-software_infos #filter-catalog-software .project-software label {
  171 + font-weight: normal;
  172 +}
152 173  
153 174 .action-search-software_infos #filter-catalog-software .project-software span {
154 175 padding: 2px 6px;
... ... @@ -162,11 +183,24 @@
162 183 cursor: pointer;
163 184 background-color: #3E67B1;
164 185 font-size: 14px;
165   - font-family:Arial;
  186 + font-family: Arial;
  187 + color: #ffffff;
  188 + border: 1px solid #2B65CD;
  189 + border-radius: 4px;
  190 + margin: 5px 0 0 5px;
  191 + padding: 5px 10px;
166 192 }
167 193  
168 194 .action-search-software_infos button#close-filter-catalog {
169 195 cursor:pointer;
  196 + float: right;
  197 + border: none;
  198 + background: none;
  199 + font-size: 12px;
  200 + margin-top: 5px;
  201 + color: #000;
  202 + text-transform: uppercase;
  203 + padding: 5px;
170 204 }
171 205  
172 206 .action-search-software_infos button#close-filter-catalog:after {
... ... @@ -189,11 +223,22 @@
189 223  
190 224 .action-search-software_infos #catalog-display-options #catalog-display-options-count{
191 225 padding: 45px 0 4px 0;
  226 + float: left;
  227 + width: 50%;
192 228 }
193 229  
194 230 .action-search-software_infos #catalog-display-options #catalog-display-options-show-and-sort{
195 231 padding: 38px 0 5px 0;
196 232 font-weight: bold;
  233 + float: left;
  234 + width: 50%;
  235 +}
  236 +.action-search-software_infos #catalog-display-options #catalog-display-options-sort,
  237 +.action-search-software_infos #catalog-display-options #catalog-display-options-show{
  238 + position: relative;
  239 + float: left;
  240 + width: 50%;
  241 + text-align: right;
197 242 }
198 243  
199 244 /*** Search Results ***/
... ...
css/software-pages.css
  Diff comments   View file @f491fc4
... ... @@ -32,45 +32,40 @@
32 32  
33 33 /* Software Download Block*/
34 34  
35   -#content .download-block #download-block-2 {
  35 +#content .download-block {
36 36 margin: 0px 15px;
37 37 border: 1px solid #D3D6DE;
38 38 border-radius: 10px;
39 39 }
40 40  
41   -#content .download-block #download-block-2 #download_spb-2 {
42   - padding: 5px 10px 5px 10px;
  41 +#content .download-block .block-title {
  42 + padding: 11px 10px 7px 20px;
  43 + background-color: #D3D6DE;
43 44 border-top-left-radius: 8px;
44 45 border-top-right-radius: 8px;
45   - background-color: #D3D6DE;
46   - font-family: arial;
47   -}
48   -
49   -#content .download-block #download-block-2 #download_spb-2 h3 {
50   - margin: 6px 0px 2px 10px;
  46 + font-family: "open_sansbold", Arial, Helvetica, sans-serif;
  47 + margin: 0;
  48 + color: #172738;
51 49 font-size: 18px;
52 50 }
53 51  
54   -#content .download-block #download-block-2 #download-info-1,
55   -#content .download-block #download-block-2 #download-info-2,
56   -#content .download-block #download-block-2 #download-info-3 {
  52 +#content .download-block .download-list li {
57 53 padding: 30px 10px 30px 10px;
58 54 border-top: 1px solid #D3D6DE;
59 55 clear: both;
60 56 }
61 57  
62   -#content .download-block #download-block-2 #download-info-2 {
  58 +#content .download-block .download-list li:nth-child(even) {
63 59 background: #ECEDF1;
64 60 }
65 61  
66   -#content .download-block #download-block-2 #version01 {
67   - margin: 0px 20px 0px 15px;
  62 +#content .download-block .download-button {
68 63 width: 80px;
69 64 float: left;
70 65 clear: both;
71 66 }
72 67  
73   -#content .download-block #download-block-2 #version01 #image-download {
  68 +#content .download-block .download-button .download-image {
74 69 padding: 50px 0px 8px 0px;
75 70 border: 1px solid #2c66ce;
76 71 border-radius: 8px;
... ... @@ -79,7 +74,7 @@
79 74 display: block;
80 75 }
81 76  
82   -#content .download-block #download-block-2 #version01 #size-download {
  77 +#content .download-block .download-button #download-size {
83 78 border: 1px solid #1a397d;
84 79 border-radius: 0px 0px 8px 8px;
85 80 background-color: #1a397d;
... ... @@ -89,33 +84,33 @@
89 84 display: none;
90 85 }
91 86  
92   -#content .download-block #download-block-2 #info-software-download {
  87 +#content .download-block .download-info {
93 88 margin: 5px 0px 0px 100px;
94 89 position: relative;
95 90 font-size: 16px;
96 91 }
97 92  
98   -#content .download-block #download-block-2 #info-software-download .download-name {
  93 +#content .download-block .download-info .download-name {
99 94 display: block;
100 95 font-weight: bold;
101 96 }
102 97  
103   -#content .download-block #download-block-2 #info-software-download .download-system {
  98 +#content .download-block .download-info .download-platform {
104 99 display: block;
105 100 font-size: 14px;
106 101 }
107 102  
108   -#content .download-block #download-block-2 #info-software-download .req_min_spb {
  103 +#content .download-block .download-info .min-requirements {
109 104 font-size: 12px;
110 105 }
111 106  
112   -#content .download-block #download-block-2 #info-software-download .req_min_spb a {
  107 +#content .download-block .download-info .req_min_spb a {
113 108 line-height: 40px;
114 109 color: #3E67B1;
115 110 text-decoration: underline;
116 111 }
117 112  
118   -#content .download-block #download-block-2 #licensed-software {
  113 +#content .download-block #licensed-software {
119 114 padding:14px;
120 115 border-top: 1px solid #D3D6DE;
121 116 border-radius: 0px 0px 8px 8px;
... ... @@ -124,7 +119,7 @@
124 119 text-align: right;
125 120 }
126 121  
127   -#content .download-block #download-block-2 #licensed-software a {
  122 +#content .download-block #licensed-software a {
128 123 color: #3e67b1;
129 124 text-decoration: underline;
130 125 }
... ...
header.html.erb
  Diff comments   View file @f491fc4
1 1 <!-- barra do governo -->
2   - <div id="barra-brasil">
3   - <a href="http://brasil.gov.br" title="Acesse para conhecer todos os serviços e informações do Governo Brasileiro na Internet.">Portal do Governo Brasileiro</a>
4   - </div>
  2 +<div id="barra-brasil">
  3 + <a href="http://brasil.gov.br" title="Acesse para conhecer todos os serviços e informações do Governo Brasileiro na Internet.">Portal do Governo Brasileiro</a>
  4 +</div>
5 5 <!--fim barra do governo -->
6 6  
7   -
8 7 <div class="header-content">
9 8 <div role="banner" id="header">
10 9 <div>
... ... @@ -34,8 +33,6 @@
34 33 </a>
35 34 </li>
36 35 </ul>
37   -
38   -
39 36 <ul id="portal-siteactions">
40 37 <li id="siteaction-accessibility">
41 38 <a href="/software-publico-brasileiro/acessibilidade">Acessibilidade</a>
... ... @@ -46,29 +43,24 @@
46 43 <li id="siteaction-mapadosite">
47 44 <a href="/search">Mapa do Site</a>
48 45 </li>
49   -
50   - <li id="siteaction-languages-pt">
51   - <a href="?lang=pt" title="Português">Português</a>
52   - </li>
53   - <li id="siteaction-languages-en">
  46 + <li id="siteaction-languages-pt">
  47 + <a href="?lang=pt" title="Português">Português</a>
  48 + </li>
  49 + <li id="siteaction-languages-en">
54 50 <a href="?lang=en" title="English">English</a>
55 51 </li>
56 52 </ul>
57   -
58   -
59 53 <div id="logo">
60   -
61   - <a title="Software Público" href="/">
  54 + <a title="Software Público" href="/">
62 55 <span id="portal-title"></span>
63 56 </a>
64 57 </div>
65   -
66 58 <div role="search" id="portal-searchbox">
67 59 <form action="/search">
68 60 <input type="text" autocomplete="off" name="query" size="18" title="Buscar no Site" placeholder="Buscar no Site" accesskey="3" class="searchField" id="searchGadget">
69   - <input type="submit" class="searchButton" value="Buscar"></form>
  61 + <input type="submit" class="searchButton" value="Buscar">
  62 + </form>
70 63 </div>
71   -
72 64 <div id="social-icons">
73 65 <ul>
74 66 <li>
... ... @@ -85,56 +77,21 @@
85 77 </li>
86 78 </ul>
87 79 </div>
  80 + </div>
  81 + <div id="sobre">
  82 + <ul id="links-rapidos">
  83 + <li id="link-faq">
  84 + <a href="/ajuda/ajuda/duvidas-frequentes">Perguntas frequentes</a>
  85 + </li>
  86 + <li id="link-contact">
  87 + <a href="/contact/portal/new">Contato</a>
  88 + </li>
  89 + </ul>
  90 + </div>
88 91 </div>
89   -
90   - <div id="sobre">
91   - <ul id="links-rapidos">
92   - <li id="link-faq">
93   - <a href="/ajuda/ajuda/duvidas-frequentes">Perguntas frequentes</a>
94   - </li>
95   - <li id="link-contact">
96   - <a href="/contact/portal/new">Contato</a>
97   - </li>
98   - </ul>
  92 + <div id="menucontainer">
99 93 </div>
100   -
101   -</div>
102   -
103   -
104   -<div id="menucontainer">
105   - <!--<ul id="hmenu">
106   - <li class="parent_menu"><a href="/">Software Público</a>
107   -
108   - </li>
109   - <li class="parent_menu"><a href="/">Mercado Público</a>
110   -
111   - </li>
112   - <li class="parent_menu"><a href="/search/communities">Comunidades</a>
113   -
114   - <!-- <ul>
115   - <li class="child_menu"><a href="#">Comunidades de Software</a>
116   -
117   - </li>
118   - <li class="child_menu"><a href="#">Universidades</a>
119   - </li>
120   - </ul>
121   - </li>-->
122   - <!-- <li class="parent_menu"><a href="#">Software</a>
123   -
124   - </li> -->
125   - <!-- <li class="parent_menu"><a href="/search/people">Usuário</a>
126   -
127   - </li>
128   - </ul> -->
129   -
130   -</div>
131   -
132   - <div id="categories_menu">
  94 + <div id="categories_menu">
133 95 <%= theme_include 'categories' %>
134 96 </div>
135   -
136   - <!--
137   -<div id="barra-psocial">
138   -
139   -</div>-->
140   -
  97 +</div>
... ...
style.css
  Diff comments   View file @f491fc4
... ... @@ -21,7 +21,7 @@
21 21 @import url(css/use-report.css);
22 22 @import url(css/tooltips.css);
23 23 */
24   -
  24 +@import url(css/animate.css);
25 25 @import url(font-awesome.min.css);
26 26 /*@import url(http://fonts.googleapis.com/css?family=Open+Sans);*/
27 27  
... ... @@ -134,7 +134,11 @@ body {
134 134  
135 135 #content h1, #content h2, #content h3, #content h4, #content h5, #content h6{
136 136 margin-top: 20px;
  137 +<<<<<<< 22561cf84ef741968c2784eb32a3c64c4cc35acc
137 138 margin-bottom: 10px;
  139 +=======
  140 + margin-bottom:10px
  141 +>>>>>>> adjust headers styles on general and specific cases
138 142 color: inherit;
139 143 font-family: Arial;
140 144 font-weight: 700;
... ... @@ -207,3 +211,5 @@ img {
207 211 iframe {
208 212 border-width: 0; border-style:none;
209 213 }
  214 +
  215 +
... ...
theme.js
  Diff comments   View file @f491fc4
... ... @@ -83,16 +83,6 @@ $(&#39;#link-buscar&#39;).click(function(e) {
83 83 //finality.stop().animate({"top" : "100%"}, TRANSITION_TIME);
84 84 }
85 85  
86   - function set_events() {
87   - // Fade css
88   - $('.software-block-finality').css('opacity', 0);
89   - $('.software-block-finality').css('top', 0);
90   - // End Fade CSS
91   -
92   - $(".software-block").mouseover(show_finality);
93   - $(".software-block").mouseout(hide_finality);
94   - }
95   -
96 86 function move_article_buttons(){
97 87 var article_actions = $('#article-actions').clone();
98 88 var report = $('.report-abuse-action').remove();
... ... @@ -131,7 +121,48 @@ $(&#39;#link-buscar&#39;).click(function(e) {
131 121 //$('<div class="notice-item"></div>').wrap($(this).find( '.image', '.title', '.lead', '.read_more'));
132 122 });
133 123  
  124 + }
134 125  
  126 + //toggle filter options in catalog page
  127 + function setFilterCategoriesOptionClass() {
  128 + var filterOptions = $("#filter-categories-option");
  129 + filterOptions.addClass("animated slideInDown");
  130 + }
  131 +
  132 + function toggleFilterOptions(){
  133 + var filterOptions = $("#filter-categories-option");
  134 + var showOptions = $("#filter-option-catalog-software");
  135 + var hideOptions = $("#filter-option-catalog-close");
  136 + if(hideOptions.is(":visible")){
  137 + //filterOptions.slideUp(function() {
  138 + showOptions.show();
  139 + hideOptions.hide();
  140 + //});
  141 + filterOptions.animate({
  142 + height: 0
  143 + },500);
  144 + }
  145 + else {
  146 + showOptions.hide();
  147 + hideOptions.show();
  148 + filterOptions.animate({
  149 + height: 565
  150 + },500);
  151 + }
  152 + }
  153 +
  154 + function setEvents(){
  155 + // Fade css
  156 + $('.software-block-finality').css('opacity', 0);
  157 + $('.software-block-finality').css('top', 0);
  158 + // End Fade CSS
  159 + $(".software-block").mouseover(show_finality);
  160 + $(".software-block").mouseout(hide_finality);
  161 +
  162 + var showOptions = $("#filter-option-catalog-software");
  163 + var hideOptions = $("#filter-option-catalog-close");
  164 + showOptions.click(toggleFilterOptions);
  165 + hideOptions.click(toggleFilterOptions);
135 166 }
136 167  
137 168 /* Finds all uploaded files from manuals page and sets its names on the right format */
... ... @@ -190,6 +221,9 @@ $(&#39;#link-buscar&#39;).click(function(e) {
190 221 $('.star-rate-form .star-comment-container .comments-software-extra-fields #input_institution_comments label').html('Nome do órgão ou empresa');
191 222 $('.star-rate-form .star-comment-container .comments-software-extra-fields .comments-software-people-benefited label').html('Número de beneficiados');
192 223 $('.star-rate-form .star-comment-container .comments-software-extra-fields .comments-software-saved-values label').html('Recursos economizados');
  224 + $('.star-rate-form .star-comment-container .comments-software-extra-fields #input_institution_comments').addClass("animated slideInDown");
  225 + $('.star-rate-form .star-comment-container .comments-software-extra-fields .comments-software-people-benefited').addClass("animated slideInDown");
  226 + $('.star-rate-form .star-comment-container .comments-software-extra-fields .comments-software-saved-values').addClass("animated slideInDown");
193 227 }
194 228  
195 229 function add_top_tooltips(){
... ... @@ -217,8 +251,8 @@ $(&#39;#link-buscar&#39;).click(function(e) {
217 251 }
218 252  
219 253 $(document).ready(function(){
  254 +
220 255 add_top_tooltips();
221   - set_events();
222 256 move_article_buttons();
223 257 add_link_to_article_div();
224 258 insert_notice_div();
... ... @@ -226,5 +260,11 @@ $(&#39;#link-buscar&#39;).click(function(e) {
226 260 set_tooltip_content();
227 261 set_arrow_direction();
228 262 set_use_report_content();
  263 + setEvents();
  264 + move_article_buttons();
  265 + add_link_to_article_div();
  266 + insert_notice_div();
  267 +
229 268 });
230 269 })(jQuery);
  270 +
... ...
theme.yml
  Diff comments   View file @f491fc4
1 1 name: "Software Público"
2 2 layout: "application-ng"
3   -icon_theme: [participabr]
  3 +icon_theme: []
... ...