- Repo for opensource odoo website theme (since V13.0)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

93 lines
5.0 KiB

5 years ago
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <odoo>
  3. <template name="Timeline" id="s_timeline">
  4. <section class="s_timeline pt24 pb48">
  5. <div class="container s_timeline_line">
  6. <div class="s_timeline_row d-flex flex-row">
  7. <div class="s_timeline_content d-flex">
  8. <div class="s_card card bg-white w-100">
  9. <div class="card-body">
  10. <h5 class="card-title">Your title</h5>
  11. <p class="card-text">A timeline is a graphical representation on which important events are marked.</p>
  12. </div>
  13. <div class="card-footer">
  14. <i class="fa fa-info-circle mr-1"/> <small>An additional information</small>
  15. </div>
  16. </div>
  17. <i class="fa fa-1x fa-child bg-beta rounded-circle s_timeline_icon"/>
  18. </div>
  19. <div class="s_timeline_date"><span class="bg-white"><b>2019</b></span></div>
  20. <div class="s_timeline_content"/>
  21. </div>
  22. <div class="s_timeline_row d-flex flex-row">
  23. <div class="s_timeline_content d-flex">
  24. <div class="s_card card bg-white w-100">
  25. <div class="card-body">
  26. <p class="card-text">You can edit, duplicate...</p>
  27. </div>
  28. <div class="card-footer">
  29. <i class="fa fa-info-circle mr-1"/> <small>An additional information</small>
  30. </div>
  31. </div>
  32. <i class="fa fa-1x fa-graduation-cap bg-gamma rounded-circle s_timeline_icon"/>
  33. </div>
  34. <div class="s_timeline_date"><span class="bg-white"><b>2018</b></span></div>
  35. <div class="s_timeline_content d-flex">
  36. <i class="fa fa-1x fa-asterisk bg-alpha rounded-circle s_timeline_icon"/>
  37. <div class="s_card card bg-white w-100">
  38. <div class="card-body">
  39. <p class="card-text">...and switch the timeline contents to fit your needs.</p>
  40. </div>
  41. <div class="card-footer">
  42. <i class="fa fa-info-circle mr-1"/> <small>An additional information</small>
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47. <div class="s_timeline_row d-flex flex-row-reverse">
  48. <div class="s_timeline_content d-flex">
  49. <div class="s_card card bg-white w-100">
  50. <div class="card-body">
  51. <p class="card-text">Use this timeline as a part of your resume, to show your visitors what you've done in the past.</p>
  52. </div>
  53. </div>
  54. <i class="fa fa-1x fa-bolt bg-gamma rounded s_timeline_icon"/>
  55. </div>
  56. <div class="s_timeline_date"><span class="bg-white"><b>2015</b></span></div>
  57. <div class="s_timeline_content"/>
  58. </div>
  59. <div class="s_timeline_row d-flex flex-row">
  60. <div class="s_timeline_content d-flex">
  61. <div class="s_card card bg-white w-100">
  62. <div class="card-body">
  63. <p class="card-text">Edit this text and change it with your content.</p>
  64. </div>
  65. </div>
  66. </div>
  67. <div class="s_timeline_date"><i class="fa fa-1x fa-edit img-thumbnail text-primary"/></div>
  68. <div class="s_timeline_content d-flex">
  69. <div class="s_card card bg-white w-100">
  70. <div class="card-body">
  71. <p class="card-text" style="text-align: right;">Double-click an icon to change it.</p>
  72. </div>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </section>
  78. </template>
  79. <template id="options_s_timeline" inherit_id="website.snippet_options">
  80. <xpath expr="." position="inside">
  81. <div data-selector=".s_timeline_row" data-drop-near=".s_timeline_row">
  82. <we-collapse-area>
  83. <we-toggler><i class="fa fa-fw fa-align-left"/> Position</we-toggler>
  84. <we-collapse>
  85. <we-button data-select-class="flex-row">Left</we-button>
  86. <we-button data-select-class="flex-row-reverse">Right</we-button>
  87. </we-collapse>
  88. </we-collapse-area>
  89. </div>
  90. </xpath>
  91. </template>
  92. </odoo>