Commit 4a8c889684642fadca24fb7e44b04b96ada2be71
1 parent
f66d90f8
Exists in
master
and in
54 other branches
Adding/Fixing use report page
TODO: CSS is too long yet and full of unnecessary rules Signed-off-by: Álvaro Fernando <alvarofernandoms@gmail.com>
Showing
3 changed files
with
453 additions
and
0 deletions
Show diff stats
css/use-report.css
| @@ -54,3 +54,453 @@ | @@ -54,3 +54,453 @@ | ||
| 54 | margin-top: 0px; | 54 | margin-top: 0px; |
| 55 | padding-top: 32px; | 55 | padding-top: 32px; |
| 56 | } | 56 | } |
| 57 | + | ||
| 58 | +#content #software-information-block-table { | ||
| 59 | + width: 100%; | ||
| 60 | +} | ||
| 61 | + | ||
| 62 | +#content #software-information-block-table h1 { | ||
| 63 | + font-size: 34px; | ||
| 64 | +} | ||
| 65 | + | ||
| 66 | +#content #software-information-block-table #col-profile-big-image { | ||
| 67 | + padding-right: 0px; | ||
| 68 | +} | ||
| 69 | + | ||
| 70 | +#content #software-information-block-table #col-software-name { | ||
| 71 | + padding-left: 0px; | ||
| 72 | +} | ||
| 73 | + | ||
| 74 | + | ||
| 75 | +#content .community-average-rating-container { | ||
| 76 | + margin-top: 21px; | ||
| 77 | + overflow: auto; | ||
| 78 | +} | ||
| 79 | + | ||
| 80 | +#content .community-average-rating-container .star-rate-text { | ||
| 81 | + font-size: 14px; | ||
| 82 | + letter-spacing: 0.2px; | ||
| 83 | + margin-right: 5px; | ||
| 84 | + padding: 4px 0px 0px 3px; | ||
| 85 | +} | ||
| 86 | + | ||
| 87 | +#content .community-average-rating-container .star-container { | ||
| 88 | + margin-top: 2px; | ||
| 89 | +} | ||
| 90 | + | ||
| 91 | +#content .community-average-rating-container .rate-this-community { | ||
| 92 | + font-size: 14px; | ||
| 93 | + text-decoration: underline; | ||
| 94 | + margin: 4px 0px 0px 6px; | ||
| 95 | + padding: 0px 0px 0px 15px; | ||
| 96 | +} | ||
| 97 | + | ||
| 98 | +#content .community-average-rating-container .star-container .medium-star-negative, | ||
| 99 | +#content .community-average-rating-container .star-container .medium-star-positive { | ||
| 100 | + margin-right: 3px; | ||
| 101 | +} | ||
| 102 | + | ||
| 103 | +/*** Internal Page ***/ | ||
| 104 | + | ||
| 105 | +#content .main-content .star-page-title, | ||
| 106 | +#content .main-content .star-rate-data { | ||
| 107 | + max-width: 560px; | ||
| 108 | +} | ||
| 109 | + | ||
| 110 | +#content .main-content .star-page-title .title { | ||
| 111 | + font-size: 34px !important; | ||
| 112 | +} | ||
| 113 | + | ||
| 114 | +#content .main-content .star-rate-data { | ||
| 115 | + border-bottom: 1px solid #D3D6DE; | ||
| 116 | + border-top: 1px solid #D3D6DE !important; | ||
| 117 | + color: #172738; | ||
| 118 | + margin-top: 16px; | ||
| 119 | + padding: 29px 0px 21px 0px; | ||
| 120 | +} | ||
| 121 | + | ||
| 122 | +#content .main-content .star-rate-data .star-rate-form .star-rate-text, | ||
| 123 | +#content .main-content .star-rate-data .star-rate-form .star-container { | ||
| 124 | + display: inline; | ||
| 125 | + float: left; | ||
| 126 | +} | ||
| 127 | + | ||
| 128 | +#content .main-content .star-rate-data .star-rate-form .star-container { | ||
| 129 | + width: inherit; | ||
| 130 | + height: 30px; | ||
| 131 | + padding-left: 6px; | ||
| 132 | +} | ||
| 133 | + | ||
| 134 | +#content .main-content .star-rate-data .star-rate-form { | ||
| 135 | + padding-left: 37px; | ||
| 136 | + letter-spacing: 0.1px; | ||
| 137 | + width: 100%; | ||
| 138 | +} | ||
| 139 | + | ||
| 140 | +#content .main-content .star-rate-data .star-rate-form .star-rate-text { | ||
| 141 | + font-size: 14px; | ||
| 142 | + padding-top: 4px; | ||
| 143 | +} | ||
| 144 | + | ||
| 145 | +#content .main-content .star-rate-data .star-profile-information { | ||
| 146 | + padding-left: 15px; | ||
| 147 | + width: 79px; | ||
| 148 | +} | ||
| 149 | + | ||
| 150 | +#content .main-content .star-rate-data .star-profile-information .star-profile-image { | ||
| 151 | + padding-top: 1px; | ||
| 152 | +} | ||
| 153 | + | ||
| 154 | +#content .main-content .star-rate-data .star-profile-information .star-profile-image img { | ||
| 155 | + border-radius: 4px; | ||
| 156 | + height: 60px; | ||
| 157 | + width: 60px; | ||
| 158 | +} | ||
| 159 | + | ||
| 160 | +#content .main-content .star-rate-data .star-rate-form .star-container .star-positive, | ||
| 161 | +#content .main-content .star-rate-data .star-rate-form .star-container .star-negative { | ||
| 162 | + display: table-cell; | ||
| 163 | + margin-right: 0px; | ||
| 164 | + height: 30px; | ||
| 165 | + width: 28px; | ||
| 166 | +} | ||
| 167 | + | ||
| 168 | +#content .main-content .star-rate-data .star-rate-form .star-comment-container { | ||
| 169 | + padding-top: 23px; | ||
| 170 | +} | ||
| 171 | + | ||
| 172 | +#content .main-content .star-rate-data .star-rate-form .star-comment-container .formlabel { | ||
| 173 | + letter-spacing: -0.2px; | ||
| 174 | + margin-bottom: 2px; | ||
| 175 | +} | ||
| 176 | + | ||
| 177 | +#content .main-content .star-rate-data .star-rate-form .star-comment-container #comments_body { | ||
| 178 | + border-radius: 4px; | ||
| 179 | + height: 91px; | ||
| 180 | + background: none #FFFFFF; | ||
| 181 | + border: 1px solid #DDDDDD; | ||
| 182 | + color: #585858; | ||
| 183 | + font-size: 16px; | ||
| 184 | + width: 100%; | ||
| 185 | + word-wrap: break-word; | ||
| 186 | +} | ||
| 187 | + | ||
| 188 | +#content .main-content .star-rate-data .star-rate-form .star-comment-container .button-bar input { | ||
| 189 | + background-color: #3E67B1 !important; | ||
| 190 | + font-weight: 700; | ||
| 191 | + height: 31px; | ||
| 192 | + margin-top: 10px; | ||
| 193 | + text-transform: uppercase; | ||
| 194 | + color: #FFF; | ||
| 195 | + padding-top: 0; | ||
| 196 | +} | ||
| 197 | + | ||
| 198 | +#content .main-content .star-rate-data .star-rate-form .star-comment-container .button-bar a { | ||
| 199 | + display: none; | ||
| 200 | +} | ||
| 201 | + | ||
| 202 | +#content .main-content .star-rate-data .star-rate-form .star-comment-container .button-bar { | ||
| 203 | + margin-top: 0px; | ||
| 204 | + padding-bottom: 50px; | ||
| 205 | + padding-top: 10px; | ||
| 206 | +} | ||
| 207 | + | ||
| 208 | +#content .main-content .star-rate-data .star-rate-form .star-notice { | ||
| 209 | + display: none; | ||
| 210 | + float: left; | ||
| 211 | + margin-top: 10px; | ||
| 212 | + margin-left: 10px; | ||
| 213 | +} | ||
| 214 | + | ||
| 215 | +#content .star-rate-form .star-comment-container .comments-software-extra-fields { | ||
| 216 | + overflow: auto; | ||
| 217 | +} | ||
| 218 | + | ||
| 219 | +#content .star-rate-form .star-comment-container .comments-software-extra-fields #input_institution_comments { | ||
| 220 | + margin-bottom: 19px; | ||
| 221 | + margin-top: 16px; | ||
| 222 | +} | ||
| 223 | + | ||
| 224 | +#content .star-rate-form .star-comment-container .comments-software-extra-fields #input_institution_comments label { | ||
| 225 | + font-size: 12px; | ||
| 226 | +} | ||
| 227 | + | ||
| 228 | +/** TODO: fix theses rules to the forms on addtional information **/ | ||
| 229 | +#content .star-rate-form .star-comment-container .comments-software-extra-fields #input_institution_comments input { | ||
| 230 | + margin-top: 3px; | ||
| 231 | + padding: 4px 3px 3px 3px; | ||
| 232 | + width: 366px; | ||
| 233 | + display: block; | ||
| 234 | + height: 19px; | ||
| 235 | + padding: 6px; | ||
| 236 | + border: 1px solid rgb(204, 204, 204); | ||
| 237 | + border-image-source: initial; | ||
| 238 | + border-image-slice: initial; | ||
| 239 | + border-image-width: initial; | ||
| 240 | + border-image-outset: initial; | ||
| 241 | + border-image-repeat: initial; | ||
| 242 | + border-radius: 4px; | ||
| 243 | + width: 384px; | ||
| 244 | + font-size: 15px; | ||
| 245 | + font-family: arial, helvetica; | ||
| 246 | + color: rgb(88, 88, 88); | ||
| 247 | +} | ||
| 248 | + | ||
| 249 | +#content .star-rate-form .star-comment-container .comments-software-extra-fields .comments-software-people-benefited, | ||
| 250 | +#content .star-rate-form .star-comment-container .comments-software-extra-fields .comments-software-saved-values { | ||
| 251 | + font-size: 12px; | ||
| 252 | + float: left; | ||
| 253 | + padding-right: 20px; | ||
| 254 | +} | ||
| 255 | + | ||
| 256 | +#content .star-rate-form .star-comment-container form .formfieldline { | ||
| 257 | + margin-bottom: 17px; | ||
| 258 | +} | ||
| 259 | + | ||
| 260 | +#content .star-rate-form .star-comment-container .comments-display-fields { | ||
| 261 | + border-bottom: 1px dotted #D3D6DE; | ||
| 262 | + overflow: auto; | ||
| 263 | +} | ||
| 264 | + | ||
| 265 | +#content .star-rate-form .star-comment-container .comments-display-fields:hover span, | ||
| 266 | +#content .star-rate-form .star-comment-container .comments-display-fields:hover span:after { | ||
| 267 | + opacity: 0.6; | ||
| 268 | +} | ||
| 269 | + | ||
| 270 | +#content .star-rate-form .star-comment-container .comments-display-fields span#comments-additional-information { | ||
| 271 | + color: #172738; | ||
| 272 | + display: block; | ||
| 273 | + float: left; | ||
| 274 | + font-size: 14px; | ||
| 275 | + font-weight: 700; | ||
| 276 | + padding-bottom: 4px; | ||
| 277 | +} | ||
| 278 | + | ||
| 279 | +/** TODO: ARROWS ARE NOT SHOWING **/ | ||
| 280 | +#content .action-communities_ratings_plugin_profile-new_rating .star-rate-form .star-comment-container .comments-additional-information span.comments-arrow-up:after { | ||
| 281 | + content: url('/images/top-arrow-black.png') !important; | ||
| 282 | + float: right; | ||
| 283 | + padding-top: 7px; | ||
| 284 | + padding-right: 6px; | ||
| 285 | +} | ||
| 286 | + | ||
| 287 | +/** TODO: ARROWS ARE NOT SHOWING **/ | ||
| 288 | +#content .star-rate-form .star-comment-container .comments-additional-information span.comments-arrow-down:after { | ||
| 289 | + content: url('/images/bottom-arrow-black.png'); | ||
| 290 | + float: right; | ||
| 291 | + padding-top: 7px; | ||
| 292 | + padding-right: 6px; | ||
| 293 | +} | ||
| 294 | + | ||
| 295 | +/** TODO: fix theses rules to the forms on addtional information **/ | ||
| 296 | +#content .star-rate-form .star-comment-container .comments-software-extra-fields #comments_people_benefited, | ||
| 297 | +#content .star-rate-form .star-comment-container .comments-software-extra-fields #comments_saved_value { | ||
| 298 | + width: 167px; | ||
| 299 | + padding: 4px; | ||
| 300 | + margin-top: 4px; | ||
| 301 | + display: block; | ||
| 302 | + height: 19px; | ||
| 303 | + padding: 6px; | ||
| 304 | + border: 1px solid rgb(204, 204, 204); | ||
| 305 | + border-image-source: initial; | ||
| 306 | + border-image-slice: initial; | ||
| 307 | + border-image-width: initial; | ||
| 308 | + border-image-outset: initial; | ||
| 309 | + border-image-repeat: initial; | ||
| 310 | + border-radius: 4px; | ||
| 311 | + font-size: 15px; | ||
| 312 | + font-family: arial, helvetica; | ||
| 313 | + color: rgb(88, 88, 88); | ||
| 314 | +} | ||
| 315 | + | ||
| 316 | +#content .star-rate-form .star-comment-container .star-tooltip { | ||
| 317 | + cursor: default; | ||
| 318 | + content: '?'; | ||
| 319 | + border-radius: 90%; | ||
| 320 | + font-size: 12px; | ||
| 321 | + font-weight: 700; | ||
| 322 | + background: #3867b7; | ||
| 323 | + color: #fff; | ||
| 324 | + margin-left: 4px; | ||
| 325 | + padding: 0px 6px; | ||
| 326 | +} | ||
| 327 | + | ||
| 328 | +.ratings-list { | ||
| 329 | + color: #172738; | ||
| 330 | + font-family: Arial, Helvetica, "open_sansregular", sans-serif; | ||
| 331 | +} | ||
| 332 | + | ||
| 333 | +.ratings-list .user-rating-block { | ||
| 334 | + border-bottom: 1px solid #D3D6DE; | ||
| 335 | + border-top: none; | ||
| 336 | + padding-bottom: 40px; | ||
| 337 | + padding-top: 32px; | ||
| 338 | + margin-top: 0px; | ||
| 339 | +} | ||
| 340 | + | ||
| 341 | +.ratings-list .star-profile-information { | ||
| 342 | + padding: 1px 30px 0px 14px; | ||
| 343 | + width: 99px; | ||
| 344 | +} | ||
| 345 | + | ||
| 346 | +.ratings-list .user-rating-block .star-profile-information .star-profile-name { | ||
| 347 | + line-height: 16px; | ||
| 348 | + width: 70px; | ||
| 349 | +} | ||
| 350 | + | ||
| 351 | +.ratings-list .star-profile-information .star-profile-image img { | ||
| 352 | + border-radius: 4px; | ||
| 353 | + height: 60px; | ||
| 354 | +} | ||
| 355 | + | ||
| 356 | +.ratings-list .user-rating-block .user-testimony-container { | ||
| 357 | + width: 100%; | ||
| 358 | +} | ||
| 359 | + | ||
| 360 | +.ratings-list .user-rating-block .user-testimony-container .star-container div { | ||
| 361 | + display: inline; | ||
| 362 | +} | ||
| 363 | + | ||
| 364 | +.ratings-list .user-rating-block .user-testimony-container .user-testimony { | ||
| 365 | + font-size: 16px; | ||
| 366 | + line-height: 20px; | ||
| 367 | + margin-top: 31px; | ||
| 368 | + min-height: 60px; | ||
| 369 | +} | ||
| 370 | + | ||
| 371 | +.star-rate-data .star-rate-form .star-comment-container .formfield textarea { | ||
| 372 | + width: 100%; | ||
| 373 | +} | ||
| 374 | + | ||
| 375 | +.ratings-list .user-rating-block .user-testimony-container .testimony-rate-date { | ||
| 376 | + display: block; | ||
| 377 | + float: left; | ||
| 378 | + padding-right: 0px; | ||
| 379 | + width: 100px; | ||
| 380 | +} | ||
| 381 | + | ||
| 382 | +.ratings-list .star-container { | ||
| 383 | + display: block; | ||
| 384 | + float: right; | ||
| 385 | + width: auto; | ||
| 386 | +} | ||
| 387 | + | ||
| 388 | +.ratings-list .star-container .small-star-positive, | ||
| 389 | +.ratings-list .star-container .small-star-negative { | ||
| 390 | + margin-right: 3px; | ||
| 391 | +} | ||
| 392 | + | ||
| 393 | +.ratings-list .user-rating-block .user-testimony-container .testimony-rate-date { | ||
| 394 | + display: block; | ||
| 395 | + float: left; | ||
| 396 | + margin-top: 2px; | ||
| 397 | +} | ||
| 398 | + | ||
| 399 | +.ratings-list .user-rating-block .user-testimony-container .additional-informations { | ||
| 400 | + margin-top: 10px; | ||
| 401 | +} | ||
| 402 | + | ||
| 403 | +#content .ratings-title .block-title { | ||
| 404 | + background: none; | ||
| 405 | + border-bottom: 1px solid #D3D6DE; | ||
| 406 | + border-top: none; | ||
| 407 | + color: #172738; | ||
| 408 | + font-size: 20px; | ||
| 409 | + font-weight: 700; | ||
| 410 | + letter-spacing: 1.8px; | ||
| 411 | + margin-bottom: 0px; | ||
| 412 | + padding: 0px 0px 12px 4px; | ||
| 413 | +} | ||
| 414 | + | ||
| 415 | +.ratings-list .make-report-block { | ||
| 416 | + background-repeat: no-repeat; | ||
| 417 | + border-bottom: 1px solid #D3D6DE; | ||
| 418 | + border-top: none; | ||
| 419 | + margin-top: 0px; | ||
| 420 | + padding-top: 32px; | ||
| 421 | +} | ||
| 422 | + | ||
| 423 | +.make-report-block .star-profile-information { | ||
| 424 | + padding-right: 13px; | ||
| 425 | + padding-left: 0px; | ||
| 426 | +} | ||
| 427 | + | ||
| 428 | +.make-report-block .star-profile-information .star-profile-name { | ||
| 429 | + margin-top: 8px; | ||
| 430 | + width: 70px; | ||
| 431 | +} | ||
| 432 | + | ||
| 433 | +.ratings-list .make-report-block .make-report-container { | ||
| 434 | + padding-top: 2px; | ||
| 435 | +} | ||
| 436 | + | ||
| 437 | +.ratings-list .make-report-block .make-report-container .make-report-message { | ||
| 438 | + font-size: 18px; | ||
| 439 | +} | ||
| 440 | + | ||
| 441 | +.ratings-list .make-report-block .make-report-container .button-bar { | ||
| 442 | + padding-top: 6px; | ||
| 443 | +} | ||
| 444 | + | ||
| 445 | +.ratings-list .make-report-block .make-report-container .alert { | ||
| 446 | + margin-top: 37px; | ||
| 447 | + padding-left: 1px; | ||
| 448 | +} | ||
| 449 | + | ||
| 450 | +.ratings-list .make-report-block .make-report-container .button-bar a, | ||
| 451 | +.star-rate-data .rating-cooldown .button-bar a, | ||
| 452 | +.star-rate-data .rating-vote-once .button-bar a { | ||
| 453 | + background-color: #3E67B1 !important; | ||
| 454 | + background-image: none; | ||
| 455 | + color: #fff !important; | ||
| 456 | + font-weight: 700; | ||
| 457 | + font-size: 14px; | ||
| 458 | + font-style: normal; | ||
| 459 | + height: 31px; | ||
| 460 | + padding: 0px 7px 0px 7px; | ||
| 461 | + text-transform: uppercase; | ||
| 462 | +} | ||
| 463 | + | ||
| 464 | +.star-rate-data .rating-cooldown, | ||
| 465 | +.star-rate-data .rating-vote-once { | ||
| 466 | + font-family: Arial; | ||
| 467 | + font-size: 18px; | ||
| 468 | + font-style: italic; | ||
| 469 | + word-break: break-word; | ||
| 470 | +} | ||
| 471 | + | ||
| 472 | +.star-rate-data .rating-cooldown .button-bar a.disabled-button, | ||
| 473 | +.star-rate-data .rating-vote-once .button-bar a.disabled-button { | ||
| 474 | + cursor: not-allowed; | ||
| 475 | + opacity: 0.4; | ||
| 476 | +} | ||
| 477 | + | ||
| 478 | +.ratings-list .see-more { | ||
| 479 | + border-top: none; | ||
| 480 | +} | ||
| 481 | + | ||
| 482 | +.ratings-list a.icon-arrow-right-p { | ||
| 483 | + background: none; | ||
| 484 | + color: #172738 !important; | ||
| 485 | + font-family: 'Open Sans'; | ||
| 486 | + font-size: 11px; | ||
| 487 | + float: none; | ||
| 488 | + margin-top: 0px; | ||
| 489 | + padding-right: 0px; | ||
| 490 | + padding-top: 22px; | ||
| 491 | + padding-bottom: 20px; | ||
| 492 | + text-align: right; | ||
| 493 | + text-transform: uppercase; | ||
| 494 | +} | ||
| 495 | + | ||
| 496 | +.ratings-list a.icon-arrow-right-p:after { | ||
| 497 | + background-color: #3E67B1 !important; | ||
| 498 | + border-radius: 4px; | ||
| 499 | + content: url('images/right-arrow.png'); | ||
| 500 | + font-size: 15px; | ||
| 501 | + line-height: 20px; | ||
| 502 | + margin-left: 9px; | ||
| 503 | + padding-left: 8px; | ||
| 504 | + padding-right: 5px; | ||
| 505 | + text-align: center; | ||
| 506 | +} |
style.css
| @@ -24,6 +24,7 @@ | @@ -24,6 +24,7 @@ | ||
| 24 | @import url(css/software-catalog-page.css); | 24 | @import url(css/software-catalog-page.css); |
| 25 | @import url(css/tooltip.css); | 25 | @import url(css/tooltip.css); |
| 26 | @import url(css/popover.css); | 26 | @import url(css/popover.css); |
| 27 | +@import url(css/use-report.css); | ||
| 27 | 28 | ||
| 28 | @font-face{ | 29 | @font-face{ |
| 29 | font-weight: normal; | 30 | font-weight: normal; |
theme.js
| @@ -195,6 +195,8 @@ $('#link-buscar').click(function(e) { | @@ -195,6 +195,8 @@ $('#link-buscar').click(function(e) { | ||
| 195 | $('.star-tooltip').html("?"); | 195 | $('.star-tooltip').html("?"); |
| 196 | } | 196 | } |
| 197 | 197 | ||
| 198 | + // TODO: fix calls for this function below | ||
| 199 | + // TODO: comments-additional-information --> comments-display-fields | ||
| 198 | function set_arrow_direction() { | 200 | function set_arrow_direction() { |
| 199 | var additional_data_bar = $('#comments-additional-information'); | 201 | var additional_data_bar = $('#comments-additional-information'); |
| 200 | var arrow = $('.comments-arrow-down'); | 202 | var arrow = $('.comments-arrow-down'); |