Project

General

Profile

« Previous | Next » 

Revision 863bbef2

Added by Andreas Kohlbecker about 3 years ago

ref #7599 ref #6866 specimen details tables - generalizing details grid styling

View differences:

modules/cdm_dataportal/includes/occurrences_new.inc
157 157
    $item['data'] = [];
158 158
    $units_render_array = compose_cdm_specimen_or_observation_dto_details_grid($sob_dto);
159 159
    $item['data'] = derived_units_tree_node_header($sob_dto)
160
      . '<div class="unit-content">' . drupal_render($units_render_array) . '</div>';
160
      . '<div class="unit-content derived-unit-details-grid">' . drupal_render($units_render_array) . '</div>';
161 161
    if (isset($sob_dto->derivatives) && sizeof($sob_dto->derivatives) > 0) {
162 162
      usort($sob_dto->derivatives, 'compare_specimen_or_observation_dtos');
163 163
      // children are displayed in a nested list.
themes/zen_dataportal/css/cdm.css
358 358
ul.derived-unit-sub-tree ul .unit-content {
359 359
  padding: 11.2px;
360 360
  background-color: #ebebeb;
361
  display: grid;
362
  grid-column-gap: 11.2px;
363
  grid-row-gap: 11.2px;
364
}
365
@media all and (max-width: 659px) {
366
  /* line 264, ../sass/cdm.scss */
367
  div.derived-unit-tree .unit-content,
368
  ul.derived-unit-sub-tree .unit-content,
369
  ul.derived-unit-sub-tree ul .unit-content {
370
    grid-template-columns: repeat(1, 1fr);
371
  }
372
}
373
@media all and (min-width: 660px) {
374
  /* line 264, ../sass/cdm.scss */
375
  div.derived-unit-tree .unit-content,
376
  ul.derived-unit-sub-tree .unit-content,
377
  ul.derived-unit-sub-tree ul .unit-content {
378
    grid-template-columns: repeat(2, 1fr);
379
  }
380 361
}
381
/* line 277, ../sass/cdm.scss */
382
div.derived-unit-tree .unit-content dl,
383
ul.derived-unit-sub-tree .unit-content dl,
384
ul.derived-unit-sub-tree ul .unit-content dl {
385
  margin: 0;
386
}
387
/* line 281, ../sass/cdm.scss */
362
/* line 268, ../sass/cdm.scss */
388 363
div.derived-unit-tree .derivation-event,
389 364
ul.derived-unit-sub-tree .derivation-event,
390 365
ul.derived-unit-sub-tree ul .derivation-event {
......
393 368
  color: #7c7c7c;
394 369
}
395 370

  
396
/* line 288, ../sass/cdm.scss */
397
div.derived-unit-tree table.details-table {
398
  margin: 0;
399
  width: 100%;
400
  vertical-align: top;
401
  font-size: smaller;
402
  background-color: white;
403
}
404
/* line 294, ../sass/cdm.scss */
405
div.derived-unit-tree table.details-table thead {
406
  border-bottom: thin solid #dedede;
407
}
408
/* line 297, ../sass/cdm.scss */
409
div.derived-unit-tree table.details-table tbody {
410
  background-color: white;
411
}
412
/* line 299, ../sass/cdm.scss */
413
div.derived-unit-tree table.details-table tbody .label {
414
  text-align: right;
415
  white-space: nowrap;
416
  border-right: thin solid #dedede;
417
  width: 50%;
418
}
419
/* line 306, ../sass/cdm.scss */
420
div.derived-unit-tree table.details-table td, div.derived-unit-tree table.details-table th {
421
  padding-right: 11.2px;
422
  padding-left: 11.2px;
423
}
424

  
425
/* line 313, ../sass/cdm.scss */
371
/* line 275, ../sass/cdm.scss */
426 372
div.derived-unit-tree-root .unit-content-wrapper {
427 373
  border-left: 3px dotted #dedede;
428 374
  margin-left: 3.2px;
429 375
}
430 376

  
431
/* line 320, ../sass/cdm.scss */
377
/* line 281, ../sass/cdm.scss */
432 378
ul.derived-unit-sub-tree ul {
433 379
  margin-left: 1.0em;
434 380
}
435
/* line 323, ../sass/cdm.scss */
381
/* line 284, ../sass/cdm.scss */
436 382
ul.derived-unit-sub-tree li {
437 383
  position: relative;
438 384
  margin-left: 0;
......
441 387
  line-height: 22.4px;
442 388
  border-left: 3px dotted #dedede;
443 389
}
444
/* line 333, ../sass/cdm.scss */
390
/* line 294, ../sass/cdm.scss */
445 391
ul.derived-unit-sub-tree li:last-child {
446 392
  border-left: none;
447 393
}
448
/* line 335, ../sass/cdm.scss */
394
/* line 296, ../sass/cdm.scss */
449 395
ul.derived-unit-sub-tree li:last-child .unit-header, ul.derived-unit-sub-tree li:last-child .unit-content {
450 396
  margin-left: 3px;
451 397
}
452
/* line 339, ../sass/cdm.scss */
398
/* line 300, ../sass/cdm.scss */
453 399
ul.derived-unit-sub-tree li:before {
454 400
  position: absolute;
455 401
  top: 3.2px;
......
463 409
  content: "";
464 410
  display: inline-block;
465 411
}
466
/* line 351, ../sass/cdm.scss */
412
/* line 312, ../sass/cdm.scss */
467 413
ul.derived-unit-sub-tree li:last-child:before {
468 414
  border-left: 3px dotted #dedede;
469 415
}
470 416

  
417
/* line 318, ../sass/cdm.scss */
418
.derived-unit-details-grid table.details-table {
419
  margin: 0;
420
  width: 100%;
421
  vertical-align: top;
422
  font-size: smaller;
423
  background-color: white;
424
}
425
/* line 324, ../sass/cdm.scss */
426
.derived-unit-details-grid table.details-table thead {
427
  border-bottom: thin solid #dedede;
428
}
429
/* line 327, ../sass/cdm.scss */
430
.derived-unit-details-grid table.details-table tbody {
431
  background-color: white;
432
}
433
/* line 329, ../sass/cdm.scss */
434
.derived-unit-details-grid table.details-table tbody .label {
435
  text-align: right;
436
  white-space: nowrap;
437
  border-right: thin solid #dedede;
438
  width: 50%;
439
}
440
/* line 336, ../sass/cdm.scss */
441
.derived-unit-details-grid table.details-table td, .derived-unit-details-grid table.details-table th {
442
  padding-right: 11.2px;
443
  padding-left: 11.2px;
444
}
445

  
446
/* line 342, ../sass/cdm.scss */
447
.derived-unit-details-grid {
448
  display: grid;
449
  grid-column-gap: 11.2px;
450
  grid-row-gap: 11.2px;
451
}
452
@media all and (max-width: 659px) {
453
  /* line 342, ../sass/cdm.scss */
454
  .derived-unit-details-grid {
455
    grid-template-columns: repeat(1, 1fr);
456
  }
457
}
458
@media all and (min-width: 660px) {
459
  /* line 342, ../sass/cdm.scss */
460
  .derived-unit-details-grid {
461
    grid-template-columns: repeat(2, 1fr);
462
  }
463
}
464
/* line 352, ../sass/cdm.scss */
465
.derived-unit-details-grid dl {
466
  margin: 0;
467
}
468

  
471 469
/*
472 470
 * Map
473 471
 */
474
/* line 359, ../sass/cdm.scss */
472
/* line 361, ../sass/cdm.scss */
475 473
.openlayers-container {
476 474
  margin-top: 5px;
477 475
  margin-bottom: 5px;
......
480 478
/*
481 479
 * Registration page & items
482 480
 */
483
/* line 369, ../sass/cdm.scss */
481
/* line 371, ../sass/cdm.scss */
484 482
.registration .type-status {
485 483
  font-weight: bold;
486 484
}
487
/* line 373, ../sass/cdm.scss */
485
/* line 375, ../sass/cdm.scss */
488 486
.registration .registration-date-and-institute {
489 487
  color: #999;
490 488
}
491
/* line 379, ../sass/cdm.scss */
489
/* line 381, ../sass/cdm.scss */
492 490
.registration .published-name .TaxonName .name {
493 491
  font-weight: bold;
494 492
}
495
/* line 383, ../sass/cdm.scss */
493
/* line 385, ../sass/cdm.scss */
496 494
.registration .typified-name .cdm\:TaxonName {
497 495
  color: #999;
498 496
}
499
/* line 385, ../sass/cdm.scss */
497
/* line 387, ../sass/cdm.scss */
500 498
.registration .typified-name .cdm\:TaxonName a {
501 499
  color: #999;
502 500
}
503
/* line 388, ../sass/cdm.scss */
501
/* line 390, ../sass/cdm.scss */
504 502
.registration .typified-name .cdm\:TaxonName .TaxonName .name {
505 503
  font-weight: bold;
506 504
}
507
/* line 394, ../sass/cdm.scss */
505
/* line 396, ../sass/cdm.scss */
508 506
.registration .registration-summary .registered_name .name {
509 507
  font-weight: bold;
510 508
}
511
/* line 397, ../sass/cdm.scss */
509
/* line 399, ../sass/cdm.scss */
512 510
.registration .registration-summary .referenced_typified_name {
513 511
  color: #999;
514 512
}
515
/* line 400, ../sass/cdm.scss */
513
/* line 402, ../sass/cdm.scss */
516 514
.registration .registration-summary .label {
517 515
  font-weight: bold;
518 516
}
......
520 518
/*
521 519
 * Theme settings page
522 520
 */
523
/* line 411, ../sass/cdm.scss */
521
/* line 413, ../sass/cdm.scss */
524 522
#system-theme-settings .image-preview {
525 523
  width: 600px;
526 524
  max-height: 150px;
527 525
  overflow: auto;
528 526
}
529
/* line 415, ../sass/cdm.scss */
527
/* line 417, ../sass/cdm.scss */
530 528
#system-theme-settings .image-preview img {
531 529
  max-width: none;
532 530
  /* reset style in mormalize.scss */
......
537 535
 *
538 536
 * using the same media queries here as in layout/_responsive.scss
539 537
 *****************************************************************************************/
540
/* line 428, ../sass/cdm.scss */
538
/* line 430, ../sass/cdm.scss */
541 539
#classification-breadcrumbs {
542 540
  font-size: 1.5em;
543 541
  line-height: 1.5em;
544 542
}
545 543

  
546 544
@media all and (min-width: 960px) {
547
  /* line 439, ../sass/cdm.scss */
545
  /* line 441, ../sass/cdm.scss */
548 546
  #classification-breadcrumbs {
549 547
    font-size: 1em;
550 548
  }
......
552 550
/***************************
553 551
 * TESTING ONLY 2020-02-20
554 552
 */
555
/* line 447, ../sass/cdm.scss */
553
/* line 449, ../sass/cdm.scss */
556 554
.font-noto {
557 555
  font-family: "Noto Sans", sans-serif !important;
558 556
}
themes/zen_dataportal/css/styles.css
2419 2419
ul.derived-unit-sub-tree ul .unit-content {
2420 2420
  padding: 11.2px;
2421 2421
  background-color: #ebebeb;
2422
  display: grid;
2423
  grid-column-gap: 11.2px;
2424
  grid-row-gap: 11.2px;
2425
}
2426
@media all and (max-width: 659px) {
2427
  /* line 264, ../sass/cdm.scss */
2428
  div.derived-unit-tree .unit-content,
2429
  ul.derived-unit-sub-tree .unit-content,
2430
  ul.derived-unit-sub-tree ul .unit-content {
2431
    grid-template-columns: repeat(1, 1fr);
2432
  }
2433
}
2434
@media all and (min-width: 660px) {
2435
  /* line 264, ../sass/cdm.scss */
2436
  div.derived-unit-tree .unit-content,
2437
  ul.derived-unit-sub-tree .unit-content,
2438
  ul.derived-unit-sub-tree ul .unit-content {
2439
    grid-template-columns: repeat(2, 1fr);
2440
  }
2441 2422
}
2442
/* line 277, ../sass/cdm.scss */
2443
div.derived-unit-tree .unit-content dl,
2444
ul.derived-unit-sub-tree .unit-content dl,
2445
ul.derived-unit-sub-tree ul .unit-content dl {
2446
  margin: 0;
2447
}
2448
/* line 281, ../sass/cdm.scss */
2423
/* line 268, ../sass/cdm.scss */
2449 2424
div.derived-unit-tree .derivation-event,
2450 2425
ul.derived-unit-sub-tree .derivation-event,
2451 2426
ul.derived-unit-sub-tree ul .derivation-event {
......
2454 2429
  color: #7c7c7c;
2455 2430
}
2456 2431

  
2457
/* line 288, ../sass/cdm.scss */
2458
div.derived-unit-tree table.details-table {
2459
  margin: 0;
2460
  width: 100%;
2461
  vertical-align: top;
2462
  font-size: smaller;
2463
  background-color: white;
2464
}
2465
/* line 294, ../sass/cdm.scss */
2466
div.derived-unit-tree table.details-table thead {
2467
  border-bottom: thin solid #dedede;
2468
}
2469
/* line 297, ../sass/cdm.scss */
2470
div.derived-unit-tree table.details-table tbody {
2471
  background-color: white;
2472
}
2473
/* line 299, ../sass/cdm.scss */
2474
div.derived-unit-tree table.details-table tbody .label {
2475
  text-align: right;
2476
  white-space: nowrap;
2477
  border-right: thin solid #dedede;
2478
  width: 50%;
2479
}
2480
/* line 306, ../sass/cdm.scss */
2481
div.derived-unit-tree table.details-table td, div.derived-unit-tree table.details-table th {
2482
  padding-right: 11.2px;
2483
  padding-left: 11.2px;
2484
}
2485

  
2486
/* line 313, ../sass/cdm.scss */
2432
/* line 275, ../sass/cdm.scss */
2487 2433
div.derived-unit-tree-root .unit-content-wrapper {
2488 2434
  border-left: 3px dotted #dedede;
2489 2435
  margin-left: 3.2px;
2490 2436
}
2491 2437

  
2492
/* line 320, ../sass/cdm.scss */
2438
/* line 281, ../sass/cdm.scss */
2493 2439
ul.derived-unit-sub-tree ul {
2494 2440
  margin-left: 1.0em;
2495 2441
}
2496
/* line 323, ../sass/cdm.scss */
2442
/* line 284, ../sass/cdm.scss */
2497 2443
ul.derived-unit-sub-tree li {
2498 2444
  position: relative;
2499 2445
  margin-left: 0;
......
2502 2448
  line-height: 22.4px;
2503 2449
  border-left: 3px dotted #dedede;
2504 2450
}
2505
/* line 333, ../sass/cdm.scss */
2451
/* line 294, ../sass/cdm.scss */
2506 2452
ul.derived-unit-sub-tree li:last-child {
2507 2453
  border-left: none;
2508 2454
}
2509
/* line 335, ../sass/cdm.scss */
2455
/* line 296, ../sass/cdm.scss */
2510 2456
ul.derived-unit-sub-tree li:last-child .unit-header, ul.derived-unit-sub-tree li:last-child .unit-content {
2511 2457
  margin-left: 3px;
2512 2458
}
2513
/* line 339, ../sass/cdm.scss */
2459
/* line 300, ../sass/cdm.scss */
2514 2460
ul.derived-unit-sub-tree li:before {
2515 2461
  position: absolute;
2516 2462
  top: 3.2px;
......
2524 2470
  content: "";
2525 2471
  display: inline-block;
2526 2472
}
2527
/* line 351, ../sass/cdm.scss */
2473
/* line 312, ../sass/cdm.scss */
2528 2474
ul.derived-unit-sub-tree li:last-child:before {
2529 2475
  border-left: 3px dotted #dedede;
2530 2476
}
2531 2477

  
2478
/* line 318, ../sass/cdm.scss */
2479
.derived-unit-details-grid table.details-table {
2480
  margin: 0;
2481
  width: 100%;
2482
  vertical-align: top;
2483
  font-size: smaller;
2484
  background-color: white;
2485
}
2486
/* line 324, ../sass/cdm.scss */
2487
.derived-unit-details-grid table.details-table thead {
2488
  border-bottom: thin solid #dedede;
2489
}
2490
/* line 327, ../sass/cdm.scss */
2491
.derived-unit-details-grid table.details-table tbody {
2492
  background-color: white;
2493
}
2494
/* line 329, ../sass/cdm.scss */
2495
.derived-unit-details-grid table.details-table tbody .label {
2496
  text-align: right;
2497
  white-space: nowrap;
2498
  border-right: thin solid #dedede;
2499
  width: 50%;
2500
}
2501
/* line 336, ../sass/cdm.scss */
2502
.derived-unit-details-grid table.details-table td, .derived-unit-details-grid table.details-table th {
2503
  padding-right: 11.2px;
2504
  padding-left: 11.2px;
2505
}
2506

  
2507
/* line 342, ../sass/cdm.scss */
2508
.derived-unit-details-grid {
2509
  display: grid;
2510
  grid-column-gap: 11.2px;
2511
  grid-row-gap: 11.2px;
2512
}
2513
@media all and (max-width: 659px) {
2514
  /* line 342, ../sass/cdm.scss */
2515
  .derived-unit-details-grid {
2516
    grid-template-columns: repeat(1, 1fr);
2517
  }
2518
}
2519
@media all and (min-width: 660px) {
2520
  /* line 342, ../sass/cdm.scss */
2521
  .derived-unit-details-grid {
2522
    grid-template-columns: repeat(2, 1fr);
2523
  }
2524
}
2525
/* line 352, ../sass/cdm.scss */
2526
.derived-unit-details-grid dl {
2527
  margin: 0;
2528
}
2529

  
2532 2530
/*
2533 2531
 * Map
2534 2532
 */
2535
/* line 359, ../sass/cdm.scss */
2533
/* line 361, ../sass/cdm.scss */
2536 2534
.openlayers-container {
2537 2535
  margin-top: 10px;
2538 2536
  margin-bottom: 10px;
......
2541 2539
/*
2542 2540
 * Registration page & items
2543 2541
 */
2544
/* line 369, ../sass/cdm.scss */
2542
/* line 371, ../sass/cdm.scss */
2545 2543
.registration .type-status {
2546 2544
  font-weight: bold;
2547 2545
}
2548
/* line 373, ../sass/cdm.scss */
2546
/* line 375, ../sass/cdm.scss */
2549 2547
.registration .registration-date-and-institute {
2550 2548
  color: #999;
2551 2549
}
2552
/* line 379, ../sass/cdm.scss */
2550
/* line 381, ../sass/cdm.scss */
2553 2551
.registration .published-name .TaxonName .name {
2554 2552
  font-weight: bold;
2555 2553
}
2556
/* line 383, ../sass/cdm.scss */
2554
/* line 385, ../sass/cdm.scss */
2557 2555
.registration .typified-name .cdm\:TaxonName {
2558 2556
  color: #999;
2559 2557
}
2560
/* line 385, ../sass/cdm.scss */
2558
/* line 387, ../sass/cdm.scss */
2561 2559
.registration .typified-name .cdm\:TaxonName a {
2562 2560
  color: #999;
2563 2561
}
2564
/* line 388, ../sass/cdm.scss */
2562
/* line 390, ../sass/cdm.scss */
2565 2563
.registration .typified-name .cdm\:TaxonName .TaxonName .name {
2566 2564
  font-weight: bold;
2567 2565
}
2568
/* line 394, ../sass/cdm.scss */
2566
/* line 396, ../sass/cdm.scss */
2569 2567
.registration .registration-summary .registered_name .name {
2570 2568
  font-weight: bold;
2571 2569
}
2572
/* line 397, ../sass/cdm.scss */
2570
/* line 399, ../sass/cdm.scss */
2573 2571
.registration .registration-summary .referenced_typified_name {
2574 2572
  color: #999;
2575 2573
}
2576
/* line 400, ../sass/cdm.scss */
2574
/* line 402, ../sass/cdm.scss */
2577 2575
.registration .registration-summary .label {
2578 2576
  font-weight: bold;
2579 2577
}
......
2581 2579
/*
2582 2580
 * Theme settings page
2583 2581
 */
2584
/* line 411, ../sass/cdm.scss */
2582
/* line 413, ../sass/cdm.scss */
2585 2583
#system-theme-settings .image-preview {
2586 2584
  width: 600px;
2587 2585
  max-height: 150px;
2588 2586
  overflow: auto;
2589 2587
}
2590
/* line 415, ../sass/cdm.scss */
2588
/* line 417, ../sass/cdm.scss */
2591 2589
#system-theme-settings .image-preview img {
2592 2590
  max-width: none;
2593 2591
  /* reset style in mormalize.scss */
......
2598 2596
 *
2599 2597
 * using the same media queries here as in layout/_responsive.scss
2600 2598
 *****************************************************************************************/
2601
/* line 428, ../sass/cdm.scss */
2599
/* line 430, ../sass/cdm.scss */
2602 2600
#classification-breadcrumbs {
2603 2601
  font-size: 1.5em;
2604 2602
  line-height: 1.5em;
2605 2603
}
2606 2604

  
2607 2605
@media all and (min-width: 960px) {
2608
  /* line 439, ../sass/cdm.scss */
2606
  /* line 441, ../sass/cdm.scss */
2609 2607
  #classification-breadcrumbs {
2610 2608
    font-size: 1em;
2611 2609
  }
......
2613 2611
/***************************
2614 2612
 * TESTING ONLY 2020-02-20
2615 2613
 */
2616
/* line 447, ../sass/cdm.scss */
2614
/* line 449, ../sass/cdm.scss */
2617 2615
.font-noto {
2618 2616
  font-family: "Noto Sans", sans-serif !important;
2619 2617
}
themes/zen_dataportal/sass/cdm.scss
264 264
    .unit-content {
265 265
      padding: $derived-unit-details-table-gutter;
266 266
      background-color: lighten($menu-bar-background-color, 5%);
267

  
268
      display: grid;
269
      grid-column-gap: $derived-unit-details-table-gutter;
270
      grid-row-gap: $derived-unit-details-table-gutter;
271
      @media all and (max-width: 659px) {
272
        grid-template-columns : repeat(1, 1fr);
273
      }
274
      @media all and (min-width: 660px) {
275
        grid-template-columns: repeat(2, 1fr);
276
      }
277
      dl {
278
        margin: 0;
279
      }
280 267
    }
281 268
    .derivation-event {
282 269
      font-size: smaller;
......
284 271
      color: $link-color-synonym;
285 272
    }
286 273
  }
287
  div.derived-unit-tree {
288
    table.details-table {
289
      margin: 0;
290
      width: 100%;
291
      vertical-align: top;
292
      font-size: smaller;
293
      background-color: $page-background-color;
294
      thead {
295
        border-bottom: thin solid $menu-bar-background-color;
296
      }
297
      tbody {
298
        background-color: $page-background-color;
299
        .label {
300
          text-align: right;
301
          white-space: nowrap;
302
          border-right: thin solid $menu-bar-background-color;
303
          width: 50%;
304
        }
305
      }
306
      td, th {
307
        padding-right: $derived-unit-details-table-gutter;
308
        padding-left: $derived-unit-details-table-gutter;
309
      }
310
    }
311
  }
312 274
  div.derived-unit-tree-root {
313 275
    .unit-content-wrapper {
314 276
      border-left: $tree-line-style;
315 277
      margin-left: $tree-lines-left-offset;
316 278
    }
317 279
  }
318

  
319 280
  ul.derived-unit-sub-tree{
320 281
    ul {
321 282
      margin-left: 1.0em;
......
353 314
    }
354 315
  }
355 316

  
317
  .derived-unit-details-grid {
318
    table.details-table {
319
      margin: 0;
320
      width: 100%;
321
      vertical-align: top;
322
      font-size: smaller;
323
      background-color: $page-background-color;
324
      thead {
325
        border-bottom: thin solid $menu-bar-background-color;
326
      }
327
      tbody {
328
        background-color: $page-background-color;
329
        .label {
330
          text-align: right;
331
          white-space: nowrap;
332
          border-right: thin solid $menu-bar-background-color;
333
          width: 50%;
334
        }
335
      }
336
      td, th {
337
        padding-right: $derived-unit-details-table-gutter;
338
        padding-left: $derived-unit-details-table-gutter;
339
      }
340
    }
341
  }
342
  .derived-unit-details-grid {
343
    display: grid;
344
    grid-column-gap: $derived-unit-details-table-gutter;
345
    grid-row-gap: $derived-unit-details-table-gutter;
346
    @media all and (max-width: 659px) {
347
      grid-template-columns : repeat(1, 1fr);
348
    }
349
    @media all and (min-width: 660px) {
350
      grid-template-columns: repeat(2, 1fr);
351
    }
352
    dl {
353
      margin: 0;
354
    }
355
  }
356

  
357

  
356 358
  /*
357 359
   * Map
358 360
   */

Also available in: Unified diff