Project

General

Profile

« Previous | Next » 

Revision 8898d016

Added by Andreas Kohlbecker about 3 years ago

ref #7599 derivative tree view: collapsible unit tree layout improved

View differences:

modules/cdm_dataportal/includes/occurrences_new.inc
80 80
      '#suffix' => '</div>',
81 81
      '#type' => 'container',
82 82
      '#attributes' => ['class' => ['derived-unit-item derived-unit-tree-root',  html_class_attribute_ref($sob_dto)]],
83
      'div-container' => ['root-item-and-sub-tree' => [markup_to_render_array('<div class="unit-label">' . $sob_dto->label .'</div>'
83
      'div-container' => ['root-item-and-sub-tree' => [markup_to_render_array('<div class="unit-header"><div class="unit-label">' . $sob_dto->label .'</div></div>'
84 84
        .'<div class="unit-content-wrapper">' // allows to apply the borders between .derived-unit-tree-root and .unit-content
85 85
        .'<div class="unit-content">' . compose_cdm_specimen_or_observation_tree_entry($sob_dto) . '</div>'
86 86
      . '</div>')]],
......
135 135
    $item['class'] = ['derived-unit-item ',  html_class_attribute_ref($sob_dto)];
136 136
    // data" element of the array is used as the contents of the list item
137 137
    $item['data'] = [];
138
    $item['data'] = '<div class="unit-label">' . $sob_dto->label .'</div>'
138
    $item['data'] = '<div class="unit-header"><div class="unit-label">' . $sob_dto->label .'</div></div>'
139 139
      . '<div class="unit-content">' . compose_cdm_specimen_or_observation_tree_entry($sob_dto) . '</div>';
140 140
    if (isset($sob_dto->derivatives) && sizeof($sob_dto->derivatives) > 0){
141 141
      usort($sob_dto->derivatives, 'compare_specimen_or_observation_dtos');
modules/cdm_dataportal/js/derivation-tree.js
32 32
        var $element = $(this);
33 33
        $element.find(".derived-unit-item").each(function () {
34 34
            var $listItem = $(this);
35
            var unitLabel = $listItem.children('.unit-label');
35
            var unitLabel = $listItem.children('.unit-header');
36 36
            var unitContent = $listItem.children('.unit-content')
37 37
            if(unitContent.length == 0){
38 38
                // must be the root unit, we gonna dig one level deeper
themes/zen_dataportal/css/cdm.css
309 309
  clear: both;
310 310
}
311 311

  
312
/* line 235, ../sass/cdm.scss */
312
/* line 237, ../sass/cdm.scss */
313 313
div.derived-unit-tree,
314 314
ul.derived-unit-sub-tree,
315 315
ul.derived-unit-sub-tree ul {
......
317 317
  margin: 0 0 0 3.2px;
318 318
  padding: 0;
319 319
}
320
/* line 240, ../sass/cdm.scss */
320
/* line 242, ../sass/cdm.scss */
321
div.derived-unit-tree .unit-header,
322
ul.derived-unit-sub-tree .unit-header,
323
ul.derived-unit-sub-tree ul .unit-header {
324
  padding-top: 7px;
325
}
326
/* line 244, ../sass/cdm.scss */
327
div.derived-unit-tree .unit-header .unit-label,
328
ul.derived-unit-sub-tree .unit-header .unit-label,
329
ul.derived-unit-sub-tree ul .unit-header .unit-label {
330
  cursor: pointer;
331
  background-color: #dedede;
332
  padding-left: 5px;
333
}
334
/* line 249, ../sass/cdm.scss */
335
div.derived-unit-tree .unit-header .unit-label:hover,
336
ul.derived-unit-sub-tree .unit-header .unit-label:hover,
337
ul.derived-unit-sub-tree ul .unit-header .unit-label:hover {
338
  background-color: #f8f8f8;
339
}
340
/* line 253, ../sass/cdm.scss */
321 341
div.derived-unit-tree .unit-content,
322 342
ul.derived-unit-sub-tree .unit-content,
323 343
ul.derived-unit-sub-tree ul .unit-content {
324
  background-color: #dedede;
325
  margin-left: 1em;
344
  padding-left: 1em;
345
  background-color: #ebebeb;
326 346
}
327
/* line 244, ../sass/cdm.scss */
328
div.derived-unit-tree .unit-label,
329
ul.derived-unit-sub-tree .unit-label,
330
ul.derived-unit-sub-tree ul .unit-label {
331
  cursor: pointer;
347
/* line 256, ../sass/cdm.scss */
348
div.derived-unit-tree .unit-content dl,
349
ul.derived-unit-sub-tree .unit-content dl,
350
ul.derived-unit-sub-tree ul .unit-content dl {
351
  margin: 0;
332 352
}
333
/* line 247, ../sass/cdm.scss */
334
div.derived-unit-tree .unit-label:hover,
335
ul.derived-unit-sub-tree .unit-label:hover,
336
ul.derived-unit-sub-tree ul .unit-label:hover {
337
  background-color: #dedede;
353

  
354
/* line 261, ../sass/cdm.scss */
355
div.derived-unit-tree {
356
  margin-top: -3.2px;
338 357
}
339 358

  
340
/* line 253, ../sass/cdm.scss */
359
/* line 265, ../sass/cdm.scss */
341 360
div.derived-unit-tree-root .unit-content-wrapper {
342
  border-left: 3px solid #bbbbbb;
361
  border-left: 3px solid #dedede;
343 362
  margin-left: 3.2px;
344 363
}
345
/* line 257, ../sass/cdm.scss */
346
div.derived-unit-tree-root div.item-list {
347
  margin-top: 3.2px;
348
}
349 364

  
350
/* line 263, ../sass/cdm.scss */
365
/* line 275, ../sass/cdm.scss */
351 366
ul.derived-unit-sub-tree ul {
352 367
  margin-left: 1.0em;
353 368
}
354
/* line 266, ../sass/cdm.scss */
369
/* line 278, ../sass/cdm.scss */
355 370
ul.derived-unit-sub-tree li {
356 371
  position: relative;
357 372
  margin-left: 0;
358 373
  padding-left: 1em;
359 374
  margin-top: -3.2px;
360
  margin-bottom: 0;
361 375
  line-height: 22.4px;
362
  border-left: 3px solid #bbbbbb;
376
  border-left: 3px solid #dedede;
363 377
}
364
/* line 277, ../sass/cdm.scss */
378
/* line 288, ../sass/cdm.scss */
365 379
ul.derived-unit-sub-tree li:last-child {
366 380
  border-left: none;
367 381
}
368
/* line 280, ../sass/cdm.scss */
382
/* line 290, ../sass/cdm.scss */
383
ul.derived-unit-sub-tree li:last-child .unit-header, ul.derived-unit-sub-tree li:last-child .unit-content {
384
  margin-left: 3px;
385
}
386
/* line 294, ../sass/cdm.scss */
369 387
ul.derived-unit-sub-tree li:before {
370 388
  position: absolute;
371 389
  top: 3.2px;
372 390
  left: 0;
373
  width: 0.5em;
391
  width: 1em;
374 392
  /* width of horizontal line */
375
  height: 0.5em;
393
  height: 12.7px;
376 394
  /* vertical position of line */
377 395
  vertical-align: top;
378
  border-bottom: 3px solid #bbbbbb;
396
  border-bottom: 3px solid #dedede;
379 397
  content: "";
380 398
  display: inline-block;
381 399
}
382
/* line 292, ../sass/cdm.scss */
400
/* line 306, ../sass/cdm.scss */
383 401
ul.derived-unit-sub-tree li:last-child:before {
384
  border-left: 3px solid #bbbbbb;
402
  border-left: 3px solid #dedede;
385 403
}
386 404

  
387 405
/*
388 406
 * Map
389 407
 */
390
/* line 300, ../sass/cdm.scss */
408
/* line 314, ../sass/cdm.scss */
391 409
.openlayers-container {
392 410
  margin-top: 5px;
393 411
  margin-bottom: 5px;
......
396 414
/*
397 415
 * Registration page & items
398 416
 */
399
/* line 310, ../sass/cdm.scss */
417
/* line 324, ../sass/cdm.scss */
400 418
.registration .type-status {
401 419
  font-weight: bold;
402 420
}
403
/* line 314, ../sass/cdm.scss */
421
/* line 328, ../sass/cdm.scss */
404 422
.registration .registration-date-and-institute {
405 423
  color: #999;
406 424
}
407
/* line 320, ../sass/cdm.scss */
425
/* line 334, ../sass/cdm.scss */
408 426
.registration .published-name .TaxonName .name {
409 427
  font-weight: bold;
410 428
}
411
/* line 324, ../sass/cdm.scss */
429
/* line 338, ../sass/cdm.scss */
412 430
.registration .typified-name .cdm\:TaxonName {
413 431
  color: #999;
414 432
}
415
/* line 326, ../sass/cdm.scss */
433
/* line 340, ../sass/cdm.scss */
416 434
.registration .typified-name .cdm\:TaxonName a {
417 435
  color: #999;
418 436
}
419
/* line 329, ../sass/cdm.scss */
437
/* line 343, ../sass/cdm.scss */
420 438
.registration .typified-name .cdm\:TaxonName .TaxonName .name {
421 439
  font-weight: bold;
422 440
}
423
/* line 335, ../sass/cdm.scss */
441
/* line 349, ../sass/cdm.scss */
424 442
.registration .registration-summary .registered_name .name {
425 443
  font-weight: bold;
426 444
}
427
/* line 338, ../sass/cdm.scss */
445
/* line 352, ../sass/cdm.scss */
428 446
.registration .registration-summary .referenced_typified_name {
429 447
  color: #999;
430 448
}
431
/* line 341, ../sass/cdm.scss */
449
/* line 355, ../sass/cdm.scss */
432 450
.registration .registration-summary .label {
433 451
  font-weight: bold;
434 452
}
......
436 454
/*
437 455
 * Theme settings page
438 456
 */
439
/* line 352, ../sass/cdm.scss */
457
/* line 366, ../sass/cdm.scss */
440 458
#system-theme-settings .image-preview {
441 459
  width: 600px;
442 460
  max-height: 150px;
443 461
  overflow: auto;
444 462
}
445
/* line 356, ../sass/cdm.scss */
463
/* line 370, ../sass/cdm.scss */
446 464
#system-theme-settings .image-preview img {
447 465
  max-width: none;
448 466
  /* reset style in mormalize.scss */
......
453 471
 *
454 472
 * using the same media queries here as in layout/_responsive.scss
455 473
 *****************************************************************************************/
456
/* line 369, ../sass/cdm.scss */
474
/* line 383, ../sass/cdm.scss */
457 475
#classification-breadcrumbs {
458 476
  font-size: 1.5em;
459 477
  line-height: 1.5em;
460 478
}
461 479

  
462 480
@media all and (min-width: 960px) {
463
  /* line 380, ../sass/cdm.scss */
481
  /* line 394, ../sass/cdm.scss */
464 482
  #classification-breadcrumbs {
465 483
    font-size: 1em;
466 484
  }
......
468 486
/***************************
469 487
 * TESTING ONLY 2020-02-20
470 488
 */
471
/* line 388, ../sass/cdm.scss */
489
/* line 402, ../sass/cdm.scss */
472 490
.font-noto {
473 491
  font-family: "Noto Sans", sans-serif !important;
474 492
}
themes/zen_dataportal/css/styles.css
2370 2370
  clear: both;
2371 2371
}
2372 2372

  
2373
/* line 235, ../sass/cdm.scss */
2373
/* line 237, ../sass/cdm.scss */
2374 2374
div.derived-unit-tree,
2375 2375
ul.derived-unit-sub-tree,
2376 2376
ul.derived-unit-sub-tree ul {
......
2378 2378
  margin: 0 0 0 3.2px;
2379 2379
  padding: 0;
2380 2380
}
2381
/* line 240, ../sass/cdm.scss */
2381
/* line 242, ../sass/cdm.scss */
2382
div.derived-unit-tree .unit-header,
2383
ul.derived-unit-sub-tree .unit-header,
2384
ul.derived-unit-sub-tree ul .unit-header {
2385
  padding-top: 7px;
2386
}
2387
/* line 244, ../sass/cdm.scss */
2388
div.derived-unit-tree .unit-header .unit-label,
2389
ul.derived-unit-sub-tree .unit-header .unit-label,
2390
ul.derived-unit-sub-tree ul .unit-header .unit-label {
2391
  cursor: pointer;
2392
  background-color: #dedede;
2393
  padding-left: 5px;
2394
}
2395
/* line 249, ../sass/cdm.scss */
2396
div.derived-unit-tree .unit-header .unit-label:hover,
2397
ul.derived-unit-sub-tree .unit-header .unit-label:hover,
2398
ul.derived-unit-sub-tree ul .unit-header .unit-label:hover {
2399
  background-color: #f8f8f8;
2400
}
2401
/* line 253, ../sass/cdm.scss */
2382 2402
div.derived-unit-tree .unit-content,
2383 2403
ul.derived-unit-sub-tree .unit-content,
2384 2404
ul.derived-unit-sub-tree ul .unit-content {
2385
  background-color: #dedede;
2386
  margin-left: 1em;
2405
  padding-left: 1em;
2406
  background-color: #ebebeb;
2387 2407
}
2388
/* line 244, ../sass/cdm.scss */
2389
div.derived-unit-tree .unit-label,
2390
ul.derived-unit-sub-tree .unit-label,
2391
ul.derived-unit-sub-tree ul .unit-label {
2392
  cursor: pointer;
2408
/* line 256, ../sass/cdm.scss */
2409
div.derived-unit-tree .unit-content dl,
2410
ul.derived-unit-sub-tree .unit-content dl,
2411
ul.derived-unit-sub-tree ul .unit-content dl {
2412
  margin: 0;
2393 2413
}
2394
/* line 247, ../sass/cdm.scss */
2395
div.derived-unit-tree .unit-label:hover,
2396
ul.derived-unit-sub-tree .unit-label:hover,
2397
ul.derived-unit-sub-tree ul .unit-label:hover {
2398
  background-color: #dedede;
2414

  
2415
/* line 261, ../sass/cdm.scss */
2416
div.derived-unit-tree {
2417
  margin-top: -3.2px;
2399 2418
}
2400 2419

  
2401
/* line 253, ../sass/cdm.scss */
2420
/* line 265, ../sass/cdm.scss */
2402 2421
div.derived-unit-tree-root .unit-content-wrapper {
2403
  border-left: 3px solid #bbbbbb;
2422
  border-left: 3px solid #dedede;
2404 2423
  margin-left: 3.2px;
2405 2424
}
2406
/* line 257, ../sass/cdm.scss */
2407
div.derived-unit-tree-root div.item-list {
2408
  margin-top: 3.2px;
2409
}
2410 2425

  
2411
/* line 263, ../sass/cdm.scss */
2426
/* line 275, ../sass/cdm.scss */
2412 2427
ul.derived-unit-sub-tree ul {
2413 2428
  margin-left: 1.0em;
2414 2429
}
2415
/* line 266, ../sass/cdm.scss */
2430
/* line 278, ../sass/cdm.scss */
2416 2431
ul.derived-unit-sub-tree li {
2417 2432
  position: relative;
2418 2433
  margin-left: 0;
2419 2434
  padding-left: 1em;
2420 2435
  margin-top: -3.2px;
2421
  margin-bottom: 0;
2422 2436
  line-height: 22.4px;
2423
  border-left: 3px solid #bbbbbb;
2437
  border-left: 3px solid #dedede;
2424 2438
}
2425
/* line 277, ../sass/cdm.scss */
2439
/* line 288, ../sass/cdm.scss */
2426 2440
ul.derived-unit-sub-tree li:last-child {
2427 2441
  border-left: none;
2428 2442
}
2429
/* line 280, ../sass/cdm.scss */
2443
/* line 290, ../sass/cdm.scss */
2444
ul.derived-unit-sub-tree li:last-child .unit-header, ul.derived-unit-sub-tree li:last-child .unit-content {
2445
  margin-left: 3px;
2446
}
2447
/* line 294, ../sass/cdm.scss */
2430 2448
ul.derived-unit-sub-tree li:before {
2431 2449
  position: absolute;
2432 2450
  top: 3.2px;
2433 2451
  left: 0;
2434
  width: 0.5em;
2452
  width: 1em;
2435 2453
  /* width of horizontal line */
2436
  height: 0.5em;
2454
  height: 12.7px;
2437 2455
  /* vertical position of line */
2438 2456
  vertical-align: top;
2439
  border-bottom: 3px solid #bbbbbb;
2457
  border-bottom: 3px solid #dedede;
2440 2458
  content: "";
2441 2459
  display: inline-block;
2442 2460
}
2443
/* line 292, ../sass/cdm.scss */
2461
/* line 306, ../sass/cdm.scss */
2444 2462
ul.derived-unit-sub-tree li:last-child:before {
2445
  border-left: 3px solid #bbbbbb;
2463
  border-left: 3px solid #dedede;
2446 2464
}
2447 2465

  
2448 2466
/*
2449 2467
 * Map
2450 2468
 */
2451
/* line 300, ../sass/cdm.scss */
2469
/* line 314, ../sass/cdm.scss */
2452 2470
.openlayers-container {
2453 2471
  margin-top: 10px;
2454 2472
  margin-bottom: 10px;
......
2457 2475
/*
2458 2476
 * Registration page & items
2459 2477
 */
2460
/* line 310, ../sass/cdm.scss */
2478
/* line 324, ../sass/cdm.scss */
2461 2479
.registration .type-status {
2462 2480
  font-weight: bold;
2463 2481
}
2464
/* line 314, ../sass/cdm.scss */
2482
/* line 328, ../sass/cdm.scss */
2465 2483
.registration .registration-date-and-institute {
2466 2484
  color: #999;
2467 2485
}
2468
/* line 320, ../sass/cdm.scss */
2486
/* line 334, ../sass/cdm.scss */
2469 2487
.registration .published-name .TaxonName .name {
2470 2488
  font-weight: bold;
2471 2489
}
2472
/* line 324, ../sass/cdm.scss */
2490
/* line 338, ../sass/cdm.scss */
2473 2491
.registration .typified-name .cdm\:TaxonName {
2474 2492
  color: #999;
2475 2493
}
2476
/* line 326, ../sass/cdm.scss */
2494
/* line 340, ../sass/cdm.scss */
2477 2495
.registration .typified-name .cdm\:TaxonName a {
2478 2496
  color: #999;
2479 2497
}
2480
/* line 329, ../sass/cdm.scss */
2498
/* line 343, ../sass/cdm.scss */
2481 2499
.registration .typified-name .cdm\:TaxonName .TaxonName .name {
2482 2500
  font-weight: bold;
2483 2501
}
2484
/* line 335, ../sass/cdm.scss */
2502
/* line 349, ../sass/cdm.scss */
2485 2503
.registration .registration-summary .registered_name .name {
2486 2504
  font-weight: bold;
2487 2505
}
2488
/* line 338, ../sass/cdm.scss */
2506
/* line 352, ../sass/cdm.scss */
2489 2507
.registration .registration-summary .referenced_typified_name {
2490 2508
  color: #999;
2491 2509
}
2492
/* line 341, ../sass/cdm.scss */
2510
/* line 355, ../sass/cdm.scss */
2493 2511
.registration .registration-summary .label {
2494 2512
  font-weight: bold;
2495 2513
}
......
2497 2515
/*
2498 2516
 * Theme settings page
2499 2517
 */
2500
/* line 352, ../sass/cdm.scss */
2518
/* line 366, ../sass/cdm.scss */
2501 2519
#system-theme-settings .image-preview {
2502 2520
  width: 600px;
2503 2521
  max-height: 150px;
2504 2522
  overflow: auto;
2505 2523
}
2506
/* line 356, ../sass/cdm.scss */
2524
/* line 370, ../sass/cdm.scss */
2507 2525
#system-theme-settings .image-preview img {
2508 2526
  max-width: none;
2509 2527
  /* reset style in mormalize.scss */
......
2514 2532
 *
2515 2533
 * using the same media queries here as in layout/_responsive.scss
2516 2534
 *****************************************************************************************/
2517
/* line 369, ../sass/cdm.scss */
2535
/* line 383, ../sass/cdm.scss */
2518 2536
#classification-breadcrumbs {
2519 2537
  font-size: 1.5em;
2520 2538
  line-height: 1.5em;
2521 2539
}
2522 2540

  
2523 2541
@media all and (min-width: 960px) {
2524
  /* line 380, ../sass/cdm.scss */
2542
  /* line 394, ../sass/cdm.scss */
2525 2543
  #classification-breadcrumbs {
2526 2544
    font-size: 1em;
2527 2545
  }
......
2529 2547
/***************************
2530 2548
 * TESTING ONLY 2020-02-20
2531 2549
 */
2532
/* line 388, ../sass/cdm.scss */
2550
/* line 402, ../sass/cdm.scss */
2533 2551
.font-noto {
2534 2552
  font-family: "Noto Sans", sans-serif !important;
2535 2553
}
themes/zen_dataportal/sass/cdm.scss
226 226
  }
227 227

  
228 228
  // derivatives tree view (see also derivation-tree.js)
229
  $tree-entry-vspace: 0; //$base-font-size / 10; TODO remove
230
  $tree-line-style: 3px solid $tabs-border;
231
  $tree-lines-top-offset: $base-line-height / 7;
229
  $tree-entry-vspace: 7px; //$base-font-size / 2 ???
230
  $tree-line-width: 3px;
231
  $tree-line-style: $tree-line-width solid $menu-bar-background-color;
232
  $tree-hline-length: 1em; // 5px;
233
  $tree-lines-top-offset: ($base-line-height / 7) ;
232 234
  $tree-lines-left-offset: $base-line-height / 7;
233 235
  div.derived-unit-tree,
234 236
  ul.derived-unit-sub-tree,
......
237 239
    margin: 0 0 0 $tree-lines-left-offset;
238 240
    padding: 0;
239 241

  
240
    .unit-content {
241
      background-color: $menu-bar-background-color;
242
      margin-left: 1em;
243
    }
244
   .unit-label {
245
      cursor: pointer;
242
   .unit-header {
243
     padding-top: $tree-entry-vspace;
244
     .unit-label {
245
       cursor: pointer;
246
       background-color: $menu-bar-background-color;
247
       padding-left: 5px;
248
     }
249
      .unit-label:hover {
250
        background-color: lighten($menu-bar-background-color, 10%)
251
      }
246 252
    }
247
    .unit-label:hover {
248
      background-color: $menu-bar-background-color;
253
    .unit-content {
254
      padding-left: 1em;
255
      background-color: lighten($menu-bar-background-color, 5%);
256
      dl {
257
        margin: 0;
258
      }
249 259
    }
250 260
  }
251

  
261
  div.derived-unit-tree {
262
    margin-top: -$tree-lines-top-offset; // needed for consistent spacing, see below
263
  }
252 264
  div.derived-unit-tree-root {
253 265
    .unit-content-wrapper {
254 266
      border-left: $tree-line-style;
255 267
      margin-left: $tree-lines-left-offset;
256 268
    }
257 269
    div.item-list { // class .item-list is defined by drupal theme function
258
      margin-top: $tree-lines-top-offset;
270
      // margin-top: $tree-lines-top-offset;
259 271
    }
260 272
  }
261 273

  
......
269 281
      margin-left: 0;
270 282
      padding-left: 1em;
271 283
      margin-top: -$tree-lines-top-offset;
272
      margin-bottom: $tree-entry-vspace;
273 284
      line-height: $base-line-height;
274 285

  
275 286
      border-left: $tree-line-style;
276 287
    }
277 288
    li:last-child {
278 289
      border-left: none;
290
      .unit-header, .unit-content {
291
        margin-left: $tree-line-width;
292
      }
279 293
    }
280 294
    li:before {
281 295
      position: absolute;
282 296
      top: $tree-lines-top-offset;
283 297
      left: 0;
284 298

  
285
      width: 0.5em; /* width of horizontal line */
286
      height: 0.5em; /* vertical position of line */
299
      width: $tree-hline-length; /* width of horizontal line */
300
      height: $base-line-height / 2 + $tree-line-width / 2; /* vertical position of line */
287 301
      vertical-align: top;
288 302
      border-bottom: $tree-line-style;
289 303
      content: "";

Also available in: Unified diff