Projekt

Allgemein

Profil

« Zurück | Weiter » 

Revision 1b0dd518

Von Sven Schöling vor mehr als 2 Jahren hinzugefügt

  • ID 1b0dd51860d2456208f794c494ef451c99cdfcfd
  • Vorgänger 7885c4d0
  • Nachfolger 6d8575c6

design40: fix html menü

Im design4.0 branch war das dom für split layout und das html menü
massiv geändert. diese Änderungen sind wieder kompatibel zum Standard.

Genauer:

- Im SplitLayout sind linke und rechte Seite wieder div mit Klassen
statt ids (ermöglicht es mehrere zu schachteln)
- html Menü enthält wieder die icons und hint-Klassen für die alten
layouts. Im Design4.0 werdne die icons dann ignoriert

Unterschiede anzeigen:

css/design40/less/menu.less
228 228 
// --------------------
229 229 

  		




  230
  230
  
    
// LEFT (Menu) area/column


  		




  231
  
  
    
body > #layout-split-left {


  		




  
  231
  
    
body > div.layout-split-left {


  		




  232
  232
  
    
  display: block;


  		




  233
  233
  
    
  position:         fixed !important;


  		




  234
  234
  
    
  top:               0 ;


  		




  ......




  244
  244
  
    
}


  		




  245
  245
  
    

  		




  246
  246
  
    
// RIGHT (Content) area/column


  		




  247
  
  
    
body > div#layout-split-right {


  		




  
  247
  
    
body > div.layout-split-right {


  		




  248
  248
  
    
  margin-left:   200px;


  		




  249
  249
  
    
  //margin-top:   70px;


  		




  250
  250
  
    
  padding-top: 28px;


  		




  ......




  316
  316
  
    
// HTML-JS-MENU


  		




  317
  317
  
    
// --------------------


  		




  318
  318
  
    

  		




  319
  
  
    
#layout-split-left #html-menu {


  		




  
  319
  
    
div.layout-split-left #html-menu {


  		




  320
  320
  
    
  display:            block;


  		




  321
  321
  
    
  overflow-y:         scroll;


  		




  322
  322
  
    
  overflow-x:         hidden;


  		




  ......




  328
  328
  
    
  font-size:          @font-size-small;


  		




  329
  329
  
    
  border-bottom:      20px @menu_border_color solid ; // PENDENT: Rand unten sollte vorhanden sein


  		




  330
  330
  
    

  		




  
  331
  
    
  // menu item icons (mii) ausblenden


  		




  
  332
  
    
  .mii {


  		




  
  333
  
    
    display: none;


  		




  
  334
  
    
  }


  		




  
  335
  
    

  		




  331
  336
  
    
  // scrollbars can be invisible only on Webkit-Browsers


  		




  332
  337
  
    
  &::-webkit-scrollbar {


  		




  333
  338
  
    
    display: none;


  		












  

    
      css/design40/less/print.less
    
  





  34
  34
  
    
  #frame-header,


  		




  35
  35
  
    
  #main_menu_div,


  		




  36
  36
  
    
  #js-header,


  		




  37
  
  
    
  body>#layout-split-left,


  		




  
  37
  
    
  body>div.layout-split-left,


  		




  38
  38
  
    
  #tree-column,


  		




  39
  39
  
    
  ul.ui-tabs-nav,


  		




  40
  40
  
    
  div.layout-actionbar,


  		




  ......




  45
  45
  
    
  }


  		




  46
  46
  
    

  		




  47
  47
  
    
  // Layout adjustments


  		




  48
  
  
    
  body>#layout-split-right{


  		




  
  48
  
    
  body>div.layout-split-right{


  		




  49
  49
  
    
    margin-left: 0 !important;


  		




  50
  50
  
    
  }


  		




  51
  51
  
    
  //#content.html-menu { margin-left: 0; }


  		












  

    
      css/design40/style.css
    
  





  502
  502
  
    
  top: 0px;


  		




  503
  503
  
    
  background-color: #FFFFFF;


  		




  504
  504
  
    
}


  		




  505
  
  
    
body > #layout-split-left {


  		




  
  505
  
    
body > div.layout-split-left {


  		




  506
  506
  
    
  display: block;


  		




  507
  507
  
    
  position: fixed !important;


  		




  508
  508
  
    
  top: 0 ;


  		




  ......




  514
  514
  
    
  border-right: 1px #888888 solid;


  		




  515
  515
  
    
  background-color: #666666;


  		




  516
  516
  
    
}


  		




  517
  
  
    
body > div#layout-split-right {


  		




  
  517
  
    
body > div.layout-split-right {


  		




  518
  518
  
    
  margin-left: 200px;


  		




  519
  519
  
    
  padding-top: 28px;


  		




  520
  520
  
    
  display: block;


  		




  ......




  523
  523
  
    
  min-height: 800px;


  		




  524
  524
  
    
  height: auto;


  		




  525
  525
  
    
}


  		




  526
  
  
    
body > div#layout-split-right .layout-actionbar {


  		




  
  526
  
    
body > div.layout-split-right .layout-actionbar {


  		




  527
  527
  
    
  top: 36px;


  		




  528
  528
  
    
}


  		




  529
  
  
    
body > div#layout-split-right > #content {


  		




  
  529
  
    
body > div.layout-split-right > #content {


  		




  530
  530
  
    
  top: 68px;


  		




  531
  531
  
    
  padding-top: 40px;


  		




  532
  532
  
    
}


  		




  533
  
  
    
body > div#layout-split-right > #content h1 {


  		




  
  533
  
    
body > div.layout-split-right > #content h1 {


  		




  534
  534
  
    
  top: 28px !important;


  		




  535
  535
  
    
}


  		




  536
  
  
    
body > div#layout-split-right > #content > .wrapper {


  		




  
  536
  
    
body > div.layout-split-right > #content > .wrapper {


  		




  537
  537
  
    
  padding-top: 2em ;


  		




  538
  538
  
    
}


  		




  539
  
  
    
body > div#layout-split-right > #content + div.wrapper {


  		




  
  539
  
    
body > div.layout-split-right > #content + div.wrapper {


  		




  540
  540
  
    
  padding-top: 4em ;


  		




  541
  541
  
    
}


  		




  542
  
  
    
body > div#layout-split-right > #content > form {


  		




  
  542
  
    
body > div.layout-split-right > #content > form {


  		




  543
  543
  
    
  margin-top: 0.6em;


  		




  544
  544
  
    
}


  		




  545
  
  
    
body > div#layout-split-right > #content > form + div.wrapper {


  		




  
  545
  
    
body > div.layout-split-right > #content > form + div.wrapper {


  		




  546
  546
  
    
  padding-top: 4em ;


  		




  547
  547
  
    
}


  		




  548
  
  
    
body > div#layout-split-right > #content > form > .tabwidget > ui-tabs-panel .wrapper {


  		




  
  548
  
    
body > div.layout-split-right > #content > form > .tabwidget > ui-tabs-panel .wrapper {


  		




  549
  549
  
    
  margin-top: 2em;


  		




  550
  550
  
    
}


  		




  551
  
  
    
body > div#layout-split-right > #content > form > .tabwidget > ui-tabs-panel .tabwidget ul.ui-tabs-nav {


  		




  
  551
  
    
body > div.layout-split-right > #content > form > .tabwidget > ui-tabs-panel .tabwidget ul.ui-tabs-nav {


  		




  552
  552
  
    
  position: relative;


  		




  553
  553
  
    
}


  		




  554
  
  
    
body > div#layout-split-right > #content > form > .tabwidget > ul.ui-tabs-nav {


  		




  
  554
  
    
body > div.layout-split-right > #content > form > .tabwidget > ul.ui-tabs-nav {


  		




  555
  555
  
    
  top: 69px;


  		




  556
  556
  
    
  width: calc(100% - 200px);


  		




  557
  557
  
    
}


  		




  558
  
  
    
body > div#layout-split-right > #content > #requirement_spec_tabs.tabwidget > ul.ui-tabs-nav {


  		




  
  558
  
    
body > div.layout-split-right > #content > #requirement_spec_tabs.tabwidget > ul.ui-tabs-nav {


  		




  559
  559
  
    
  top: 69px !important ;


  		




  560
  560
  
    
}


  		




  561
  
  
    
body > div#layout-split-right.folded {


  		




  
  561
  
    
body > div.layout-split-right.folded {


  		




  562
  562
  
    
  margin-left: 40px;


  		




  563
  563
  
    
}


  		




  564
  564
  
    
div.layout-split-right.folded {


  		




  565
  565
  
    
  margin-left: 40px;


  		




  566
  566
  
    
}


  		




  567
  
  
    
#layout-split-left #html-menu {


  		




  
  567
  
    
div.layout-split-left #html-menu {


  		




  568
  568
  
    
  display: block;


  		




  569
  569
  
    
  overflow-y: scroll;


  		




  570
  570
  
    
  overflow-x: hidden;


  		




  ......




  576
  576
  
    
  font-size: 10pt;


  		




  577
  577
  
    
  border-bottom: 20px #666633 solid;


  		




  578
  578
  
    
}


  		




  579
  
  
    
#layout-split-left #html-menu::-webkit-scrollbar {


  		




  
  579
  
    
div.layout-split-left #html-menu .mii {


  		




  580
  580
  
    
  display: none;


  		




  581
  581
  
    
}


  		




  582
  
  
    
#layout-split-left #html-menu > div:last-of-type {


  		




  
  582
  
    
div.layout-split-left #html-menu::-webkit-scrollbar {


  		




  
  583
  
    
  display: none;


  		




  
  584
  
    
}


  		




  
  585
  
    
div.layout-split-left #html-menu > div:last-of-type {


  		




  583
  586
  
    
  border-bottom: 1px #666633 solid;


  		




  584
  587
  
    
}


  		




  585
  
  
    
#layout-split-left #html-menu .mi {


  		




  
  588
  
    
div.layout-split-left #html-menu .mi {


  		




  586
  589
  
    
  display: block ;


  		




  587
  590
  
    
}


  		




  588
  
  
    
#layout-split-left #html-menu .mi a {


  		




  
  591
  
    
div.layout-split-left #html-menu .mi a {


  		




  589
  592
  
    
  display: block;


  		




  590
  593
  
    
  word-wrap: break-word;


  		




  591
  594
  
    
  text-decoration: none;


  		




  592
  595
  
    
  font-weight: normal;


  		




  593
  596
  
    
}


  		




  594
  
  
    
#layout-split-left #html-menu .mi:first-child {


  		




  
  597
  
    
div.layout-split-left #html-menu .mi:first-child {


  		




  595
  598
  
    
  border-top: 2px #666633 solid;


  		




  596
  599
  
    
}


  		




  597
  
  
    
#layout-split-left #html-menu .mi:last-child {


  		




  
  600
  
    
div.layout-split-left #html-menu .mi:last-child {


  		




  598
  601
  
    
  border-bottom: 1px #666633 solid;


  		




  599
  602
  
    
}


  		




  600
  
  
    
#layout-split-left #html-menu .s0 {


  		




  
  603
  
    
div.layout-split-left #html-menu .s0 {


  		




  601
  604
  
    
  padding: 0 ;


  		




  602
  605
  
    
  background-color: #ccccbb;


  		




  603
  606
  
    
  color: #1b1b0e;


  		




  ......




  605
  608
  
    
  font-size: 90% ;


  		




  606
  609
  
    
  text-transform: uppercase;


  		




  607
  610
  
    
}


  		




  608
  
  
    
#layout-split-left #html-menu .s0 a {


  		




  
  611
  
    
div.layout-split-left #html-menu .s0 a {


  		




  609
  612
  
    
  padding: 5px 0 6px 8px ;


  		




  610
  613
  
    
  cursor: pointer ;


  		




  611
  614
  
    
}


  		




  612
  
  
    
#layout-split-left #html-menu .s0 a:hover,


  		




  613
  
  
    
#layout-split-left #html-menu .s0 a:active {


  		




  
  615
  
    
div.layout-split-left #html-menu .s0 a:hover,


  		




  
  616
  
    
div.layout-split-left #html-menu .s0 a:active {


  		




  614
  617
  
    
  background-color: #548360;


  		




  615
  618
  
    
  color: #fff;


  		




  616
  619
  
    
  text-decoration: none;


  		




  617
  620
  
    
}


  		




  618
  
  
    
#layout-split-left #html-menu .s0 a:link,


  		




  619
  
  
    
#layout-split-left #html-menu .s0 a:visited {


  		




  
  621
  
    
div.layout-split-left #html-menu .s0 a:link,


  		




  
  622
  
    
div.layout-split-left #html-menu .s0 a:visited {


  		




  620
  623
  
    
  color: #1b1b0e;


  		




  621
  624
  
    
}


  		




  622
  
  
    
#layout-split-left #html-menu .s0.menu-open {


  		




  
  625
  
    
div.layout-split-left #html-menu .s0.menu-open {


  		




  623
  626
  
    
  font-weight: normal;


  		




  624
  627
  
    
  background-color: #406449;


  		




  625
  628
  
    
  color: #fff;


  		




  626
  629
  
    
  border-bottom: 0 ;


  		




  627
  630
  
    
}


  		




  628
  
  
    
#layout-split-left #html-menu .s0.menu-open a {


  		




  
  631
  
    
div.layout-split-left #html-menu .s0.menu-open a {


  		




  629
  632
  
    
  padding: 5px 0 6px 8px ;


  		




  630
  633
  
    
  cursor: auto ;


  		




  631
  634
  
    
}


  		




  632
  
  
    
#layout-split-left #html-menu .s0.menu-open a:hover,


  		




  633
  
  
    
#layout-split-left #html-menu .s0.menu-open a:active {


  		




  
  635
  
    
div.layout-split-left #html-menu .s0.menu-open a:hover,


  		




  
  636
  
    
div.layout-split-left #html-menu .s0.menu-open a:active {


  		




  634
  637
  
    
  background-color: #406449;


  		




  635
  638
  
    
  color: #fff;


  		




  636
  639
  
    
  text-decoration: none;


  		




  637
  640
  
    
}


  		




  638
  
  
    
#layout-split-left #html-menu .s0.menu-open a:link,


  		




  639
  
  
    
#layout-split-left #html-menu .s0.menu-open a:visited {


  		




  
  641
  
    
div.layout-split-left #html-menu .s0.menu-open a:link,


  		




  
  642
  
    
div.layout-split-left #html-menu .s0.menu-open a:visited {


  		




  640
  643
  
    
  color: #fff;


  		




  641
  644
  
    
}


  		




  642
  
  
    
#layout-split-left #html-menu .s1 {


  		




  
  645
  
    
div.layout-split-left #html-menu .s1 {


  		




  643
  646
  
    
  font-size: 80% ;


  		




  644
  647
  
    
  padding: 0 ;


  		




  645
  648
  
    
  background-color: #e0e0d6;


  		




  646
  649
  
    
  border-top: 1px #666633 solid;


  		




  647
  650
  
    
}


  		




  648
  
  
    
#layout-split-left #html-menu .s1 a {


  		




  
  651
  
    
div.layout-split-left #html-menu .s1 a {


  		




  649
  652
  
    
  padding: 4px 0 3px 8px ;


  		




  650
  653
  
    
}


  		




  651
  
  
    
#layout-split-left #html-menu .s1 a:hover,


  		




  652
  
  
    
#layout-split-left #html-menu .s1 a:active {


  		




  
  654
  
    
div.layout-split-left #html-menu .s1 a:hover,


  		




  
  655
  
    
div.layout-split-left #html-menu .s1 a:active {


  		




  653
  656
  
    
  background-color: #ccccbb;


  		




  654
  657
  
    
  color: #000000;


  		




  655
  658
  
    
  text-decoration: none;


  		




  656
  659
  
    
}


  		




  657
  
  
    
#layout-split-left #html-menu .s1 a:link,


  		




  658
  
  
    
#layout-split-left #html-menu .s1 a:visited {


  		




  
  660
  
    
div.layout-split-left #html-menu .s1 a:link,


  		




  
  661
  
    
div.layout-split-left #html-menu .s1 a:visited {


  		




  659
  662
  
    
  color: #1b1b0e;


  		




  660
  663
  
    
}


  		




  661
  
  
    
#layout-split-left #html-menu .s1.sm:after {


  		




  
  664
  
    
div.layout-split-left #html-menu .s1.sm:after {


  		




  662
  665
  
    
  content: "▼";


  		




  663
  666
  
    
  color: #888888;


  		




  664
  667
  
    
  font-size: 80% ;


  		




  665
  668
  
    
}


  		




  666
  
  
    
#layout-split-left #html-menu .s1.sm a {


  		




  
  669
  
    
div.layout-split-left #html-menu .s1.sm a {


  		




  667
  670
  
    
  display: inline-block;


  		




  668
  671
  
    
  width: 162px;


  		




  669
  672
  
    
  color: #1b1b0e;


  		




  670
  673
  
    
}


  		




  671
  
  
    
#layout-split-left #html-menu .s1.sm a:hover,


  		




  672
  
  
    
#layout-split-left #html-menu .s1.sm a:active {


  		




  
  674
  
    
div.layout-split-left #html-menu .s1.sm a:hover,


  		




  
  675
  
    
div.layout-split-left #html-menu .s1.sm a:active {


  		




  673
  676
  
    
  background-color: #e0e0d6;


  		




  674
  677
  
    
  color: #1b1b0e;


  		




  675
  678
  
    
  text-decoration: none ;


  		




  676
  679
  
    
}


  		




  677
  
  
    
#layout-split-left #html-menu .s1.sm a:link,


  		




  678
  
  
    
#layout-split-left #html-menu .s1.sm a:visited {


  		




  
  680
  
    
div.layout-split-left #html-menu .s1.sm a:link,


  		




  
  681
  
    
div.layout-split-left #html-menu .s1.sm a:visited {


  		




  679
  682
  
    
  color: #1b1b0e;


  		




  680
  683
  
    
}


  		




  681
  
  
    
#layout-split-left #html-menu .s1.sm a.ml:link,


  		




  682
  
  
    
#layout-split-left #html-menu .s1.sm a.ml:visited {


  		




  
  684
  
    
div.layout-split-left #html-menu .s1.sm a.ml:link,


  		




  
  685
  
    
div.layout-split-left #html-menu .s1.sm a.ml:visited {


  		




  683
  686
  
    
  color: #1b1b0e;


  		




  684
  687
  
    
}


  		




  685
  
  
    
#layout-split-left #html-menu .s1 > .s2:last-child {


  		




  
  688
  
    
div.layout-split-left #html-menu .s1 > .s2:last-child {


  		




  686
  689
  
    
  border-bottom: 1px #666633 solid;


  		




  687
  690
  
    
}


  		




  688
  
  
    
#layout-split-left #html-menu .s2 {


  		




  
  691
  
    
div.layout-split-left #html-menu .s2 {


  		




  689
  692
  
    
  padding: 0 ;


  		




  690
  693
  
    
  font-size: 80% ;


  		




  691
  694
  
    
  background-color: #e0e0d6;


  		




  692
  695
  
    
}


  		




  693
  
  
    
#layout-split-left #html-menu .s2 a {


  		




  
  696
  
    
div.layout-split-left #html-menu .s2 a {


  		




  694
  697
  
    
  padding: 2px 0 3px 20px ;


  		




  695
  698
  
    
}


  		




  696
  
  
    
#layout-split-left #html-menu .s2 a:hover,


  		




  697
  
  
    
#layout-split-left #html-menu .s2 a:active {


  		




  
  699
  
    
div.layout-split-left #html-menu .s2 a:hover,


  		




  
  700
  
    
div.layout-split-left #html-menu .s2 a:active {


  		




  698
  701
  
    
  background-color: #ccccbb;


  		




  699
  702
  
    
  color: #000000;


  		




  700
  703
  
    
  text-decoration: none;


  		




  701
  704
  
    
}


  		




  702
  
  
    
#layout-split-left #html-menu .s2 a:link,


  		




  703
  
  
    
#layout-split-left #html-menu .s2 a:visited {


  		




  
  705
  
    
div.layout-split-left #html-menu .s2 a:link,


  		




  
  706
  
    
div.layout-split-left #html-menu .s2 a:visited {


  		




  704
  707
  
    
  color: #1b1b0e;


  		




  705
  708
  
    
}


  		




  706
  709
  
    
#main_menu_div .DHTMLSuite_menuBar_top {


  		




  ......




  7611
  7614
  
    
  #frame-header,


  		




  7612
  7615
  
    
  #main_menu_div,


  		




  7613
  7616
  
    
  #js-header,


  		




  7614
  
  
    
  body > #layout-split-left,


  		




  
  7617
  
    
  body > div.layout-split-left,


  		




  7615
  7618
  
    
  #tree-column,


  		




  7616
  7619
  
    
  ul.ui-tabs-nav,


  		




  7617
  7620
  
    
  div.layout-actionbar,


  		




  ......




  7620
  7623
  
    
  .toggles {


  		




  7621
  7624
  
    
    display: none !important;


  		




  7622
  7625
  
    
  }


  		




  7623
  
  
    
  body > #layout-split-right {


  		




  
  7626
  
    
  body > div.layout-split-right {


  		




  7624
  7627
  
    
    margin-left: 0 !important;


  		




  7625
  7628
  
    
  }


  		




  7626
  7629
  
    
  .wrapper.toggled > table.tbl-horizontal,


  		












Auch abrufbar als:  Unified diff