navbar.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <style>
  2. div.flex-container {
  3. display: flex;
  4. }
  5. div.thumbnail {
  6. position: relative;
  7. overflow: hidden;
  8. display: block;
  9. width: 40px;
  10. height: 40px;
  11. background-size: cover;
  12. background-position: center;
  13. border-radius: 20px;
  14. margin: 0 10px;
  15. }
  16. div.title-container {
  17. flex-direction: column;
  18. display: flex;
  19. justify-content: space-between;
  20. }
  21. span.model-title {
  22. font-size: 125%;
  23. }
  24. span.model-subtitle {
  25. font-size: 90%;
  26. }
  27. div.button-container {
  28. align-items: center;
  29. display: flex;
  30. }
  31. div.button {
  32. cursor: pointer;
  33. height: 30px;
  34. margin: 0 10px;
  35. }
  36. div.button img {
  37. height: 100%;
  38. }
  39. </style>
  40. <div class="flex-container" id="model-metadata">
  41. <!-- holding the description -->
  42. <div class="thumbnail">
  43. <!-- holding the thumbnail
  44. <img src="{{thumbnail}}" alt="{{title}}">-->
  45. </div>
  46. <div class="title-container">
  47. <span class="model-title">{{#if title}}{{title}}{{/if}}</span>
  48. <span class="model-subtitle"> {{#if subtitle}}{{subtitle}} {{/if}}</span>
  49. </div>
  50. </div>
  51. <div class="button-container">
  52. <!-- holding the buttons -->
  53. {{#each buttons}}
  54. <div id="{{id}}" class="button">
  55. {{#if text}}
  56. <span>{{text}}</span>> {{/if}} {{#if image}}
  57. <img src="{{image}}" alt="{{altText}}"> {{/if}}
  58. </div>
  59. {{/each}}
  60. </div>