layout_fullwidth.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!-- hbox layout -->
  2. <div class="hbox hbox-auto-xs bg-light " ng-controller="JVectorMapDemoCtrl" ng-init="
  3. app.settings.asideFolded = true;
  4. app.settings.asideDock = false;
  5. app.settings.container = false;
  6. app.hideAside = true"
  7. >
  8. <!-- column -->
  9. <div class="col item">
  10. <div ui-jq="vectorMap" class="h-full" style="min-height:240px;" ui-options="{
  11. map: 'us_aea_en',
  12. markers: {{usa_markers}},
  13. normalizeFunction: 'polynomial',
  14. backgroundColor: 'transparent',
  15. zoomMin: 0.5,
  16. regionsSelectable: true,
  17. markersSelectable: true,
  18. regionsSelectableOne: true,
  19. markersSelectableOne: true,
  20. focusOn: {
  21. x:0,
  22. y:0,
  23. scale: 0.6
  24. },
  25. series: {
  26. markers: [{
  27. attribute: 'r',
  28. scale: [5, 15],
  29. values: [
  30. 100.70,
  31. 255.16,
  32. 310.69,
  33. 605.17,
  34. 248.31,
  35. 107.35,
  36. 217.22
  37. ]
  38. }]
  39. },
  40. regionStyle: {
  41. initial: {
  42. fill: '#dde6e9',
  43. stroke: '#edf1f2',
  44. 'stroke-width': 2,
  45. 'stroke-opacity': 1
  46. },
  47. hover: {
  48. fill: '#fff'
  49. },
  50. selected: {
  51. fill: '{{app.color.info}}'
  52. },
  53. },
  54. markerStyle: {
  55. initial: {
  56. fill: '{{app.color.info}}',
  57. stroke: '#fff',
  58. r: 10
  59. },
  60. hover: {
  61. stroke: '#fff'
  62. },
  63. selected: {
  64. fill: '{{app.color.warning}}'
  65. }
  66. }
  67. }">
  68. </div>
  69. <div class="top" style="top:20px;left:60px">
  70. <div class="panel no-border w-md">
  71. <div class="panel-heading ">
  72. <a href class="pull-right" ng-click="isCollapsed = !isCollapsed" ui-toggle-class>
  73. <i class="fa fa-angle-up text"></i>
  74. <i class="fa fa-angle-down text-active"></i>
  75. </a>
  76. <span class="font-bold">Mark Detail</span>
  77. </div>
  78. <div collapse="isCollapsed">
  79. <div class="panel-body bg-light lter">
  80. <div class="scrollable" style="max-height:110px" ui-jq="slimScroll" ui-options="{height:'110px', size:'6px'}">
  81. <p>
  82. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat.
  83. </p>
  84. <p>
  85. Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat.
  86. </p>
  87. </div>
  88. </div>
  89. <div class="panel-footer">
  90. <i class="fa fa-fw m-r-xs text-info fa-bookmark"></i><span class="font-bold">37</span>
  91. <i class="fa fa-fw m-r-xs text-info fa-star m-l"></i><span class="font-bold">120</span>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. <div class="bottom text-right w-full">
  97. <small class="text-muted wrapper-sm block">Data @ naturalearthdata.com.</small>
  98. </div>
  99. </div>
  100. <!-- /column -->
  101. <!-- column -->
  102. <div class="col w-md lter b-l">
  103. <div class="vbox">
  104. <div class="wrapper b-b b-light">Map</div>
  105. <div class="row-row">
  106. <div class="cell">
  107. <div class="cell-inner">
  108. <div class="wrapper-md">
  109. This is the scrollable content
  110. <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
  111. You got the bottom
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. <div class="wrapper b-t b-light text-center">
  117. <p>Footer with fluid height</p>
  118. <a href class="btn btn-info">Create Marker</a>
  119. </div>
  120. </div>
  121. </div>
  122. <!-- /column -->
  123. </div>
  124. <!-- /hbox layout -->