1
Download as
Browse Code »

Commit 6c3ab5003aba45f71f30da8a0fb2bf43eca65415

Authored by Arthur Sturzbecher
1 parent 7b948eb9

Adding popover to home page

Showing 2 changed files with 56 additions and 29 deletions   Show diff stats
css/home-page.css
  Diff comments   View file @6c3ab50
... ... @@ -148,7 +148,7 @@
148 148 display:none;
149 149 }
150 150  
151   -.action-home-index #content .software-block {
  151 +.action-home-index #content .software-block {
152 152 width: 145px;
153 153 height: 218px;
154 154 margin: 0px 18px 14px 0px;
... ... @@ -236,7 +236,7 @@
236 236 /*** News block - display content block **/
237 237  
238 238 .action-home-index #content .display-content-block .block-title {
239   - margin: 0px;
  239 + margin: 0px;
240 240 border-top: 4px solid #643C67;
241 241 background: #eee;
242 242 color: #643C67;
... ... @@ -303,8 +303,8 @@
303 303 font: 15px/1.3em arial;
304 304 }
305 305  
306   -.action-home-index #content .display-content-block .lead a:visited,
307   -.action-home-index #content .lead a:visited,
  306 +.action-home-index #content .display-content-block .lead a:visited,
  307 +.action-home-index #content .lead a:visited,
308 308 .action-home-index #content .lead dl.portlet a:visited {
309 309 color: #172738;
310 310 }
... ... @@ -372,7 +372,7 @@
372 372  
373 373 .action-home-index #content .highlights-border {
374 374 border: 1px solid #c0c1c1;
375   - border-radius: 8px 8px 8px 8px;
  375 + border-radius: 8px;
376 376 width: auto;
377 377 height: 248px;
378 378 max-height: 250px;
... ... @@ -385,15 +385,15 @@
385 385 }
386 386  
387 387 .action-home-index #content .highlights-container {
388   - border-radius: 8px 8px 8px 8px;
  388 + border-radius: 8px;
389 389 border-width: 0px 0px 1px 0px;
390 390 border-bottom: none;
391   - padding: 0px 0px 0px 0px;
  391 + padding: 0;
392 392 width: 100% !important;
393 393 max-height: 230px;
394 394 background: transparent;
395 395 position: relative;
396   - top: 0px;
  396 + top: 0;
397 397 }
398 398  
399 399 .action-home-index #content .highlights-image-link {
... ... @@ -423,11 +423,9 @@
423 423 }
424 424  
425 425 .action-home-index #content .highlights-block-pager {
426   - border: 0;
427   - padding: 0px 0px 0px 0px;
428   - width: 232px;
429   - float: left;
430   - position: static;
  426 + float: none;
  427 + display: block;
  428 + text-align: center;
431 429 }
432 430  
433 431 .action-home-index #content .highlights-block-pager a {
... ... @@ -449,6 +447,24 @@
449 447 color: transparent;
450 448 }
451 449  
  450 +/*** software highlights block ***/
  451 +
  452 +.action-home-index #content a.toggle-popover,
  453 +.action-home-index #content a.toggle-popover:hover {
  454 + margin: 0 0 0 55px;
  455 + color: #3867b7;
  456 + cursor: pointer;
  457 +}
  458 +
  459 +.action-home-index #content span.popover-span {
  460 + padding: 1px 6px;
  461 + border-radius: 50%;
  462 + background-color: #3867b7;
  463 + color: #ffffff;
  464 + font-weight: bold;
  465 + cursor: pointer;
  466 +}
  467 +
452 468 /*** mais software block **/
453 469 .action-home-index #content #mais-software-block {
454 470 margin: 11px 0px;
... ...
css/popover.css
  Diff comments   View file @6c3ab50
... ... @@ -33,7 +33,7 @@
33 33 line-break: auto;
34 34 }
35 35 .popover.top {
36   - margin-top: -10px;
  36 + margin-top: -12px;
37 37 }
38 38 .popover.right {
39 39 margin-left: 10px;
... ... @@ -133,41 +133,52 @@
133 133 }
134 134  
135 135 .highlights-popover {
136   - width: 300px;
137   - padding: 8px 6px;
  136 + max-width: 280px;
  137 + margin: 0 0 0 -75px;
138 138 background: #172638;
139 139 color: #FFFFFF;
140 140 }
141 141  
  142 +.highlights-popover .popover-content {
  143 + padding: 0;
  144 +}
  145 +
142 146 .highlights-popover p {
  147 + padding: 13px 13px 15px;
  148 + margin: 0px;
143 149 font-size: 14px;
  150 + line-height: 20px;
144 151 }
145   -
  152 +
146 153 .highlights-popover span {
147 154 font-weight: bold;
148   - border-bottom: 2px dotted #FFFFFF;
  155 + border-bottom: 1px dotted #FFFFFF;
149 156 }
150 157  
151 158 #content .highlights-popover a,
152 159 #content .highlights-popover a:visited,
153   -#content .highlights-popover a:hover {
  160 +#content .highlights-popover a:hover,
  161 +#content .highlights-popover a:link {
154 162 font-weight: bold;
155 163 color: #FFFFFF;
  164 + display: block;
  165 + padding: 8px 15px;
  166 + border-top: 1px dotted rgba(255,255,255,0.1);
156 167 }
157 168  
158 169 .highlights-popover a:before {
159   - content: "";
160   - background:
161   - linear-gradient( to bottom,
162   - transparent 35%, #FF0066 35%, #FF0066 65%, transparent 65%),
163   - linear-gradient( to right,
164   - transparent 35%, #FF0066 35%, #FF0066 65%, transparent 65%);
165   - margin: 5px;
166   - padding: 0 8px;
  170 + font-family: "FontAwesome";
  171 + content: "\f067";
  172 + vertical-align: middle;
  173 + color: #ff0066;
  174 + padding: 0 5px 0 0;
167 175 }
168 176  
169   -.highlights-popover .popover-content {
170   - padding: 9px 12px;
  177 +.highlights-popover.top > .arrow,
  178 +.highlights-popover.right > .arrow,
  179 +.highlights-popover.bottom > .arrow,
  180 +.highlights-popover.left > .arrow {
  181 + margin-left: 64px;
171 182 }
172 183  
173 184 .highlights-popover.top > .arrow:after,
... ...