index.njk 4.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. {% import './macros/icon.njk' as icon %}
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>Title of the document</title>
  6. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/orbitcss/css/orbit.min.css"/>
  7. <link
  8. rel="stylesheet"
  9. href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css"
  10. integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ=="
  11. crossorigin="anonymous"
  12. referrerpolicy="no-referrer"/>
  13. <link rel="stylesheet" href="/stylesheets/main.css">
  14. </head>
  15. <body>
  16. <div class="grid full-height has-no-col-padding">
  17. <div class="column is-1 dark-blue-bg">
  18. <div class="box ">
  19. <div class="row header">
  20. <div class="container has-text-center">
  21. <img class="pd10 is-inline" src="/images/logo.png"/>
  22. </div>
  23. <div class="has-text-center">
  24. <button id="new" class="button is-primary">
  25. <span class="icon">{{ icon.svg('plus-circle') }}</span>
  26. <span>New</span>
  27. </button>
  28. </div>
  29. <nav class="menu">
  30. <h5 class="menu__title has-text-info">LANGUAGES</h5>
  31. <ul class="menu__list">
  32. {% for language in languages %}
  33. <li class="{% if selected.language === language.code %}is-active{% endif %}">
  34. <a href="/{{ language.code }}" class="has-text-light">{{ language.name }}</a>
  35. </li>
  36. {% endfor %}
  37. </ul>
  38. </nav>
  39. </div>
  40. </div>
  41. </div>
  42. <div class="column is-2 full-height has-bg-light">
  43. <div class="box">
  44. <div class="row header">
  45. <form id="post" class="border-bottom pd10" method="post">
  46. <input type="text" name="id" value="">
  47. </form>
  48. </div>
  49. <div class="row content autoscroll-y">
  50. {% for row in rows %}
  51. <div id="{{ row.id }}" class="item grid{% if row.id == selected.id %} item-selected{% endif %}">
  52. <div class="column is-11">
  53. <div class="is-small-heading">{{ row.title }}</div>
  54. <div>{{ row.tags }}</div>
  55. </div>
  56. <div class="column is-1">
  57. {% if row.status == 'DRAFT' %}
  58. <div>{{ icon.svg('slash-circle') }}</div>
  59. {% elseif row.status == 'PUBLISHED' %}
  60. <div>{{ icon.svg('check2-circle') }}</div>
  61. {% elseif row.status == 'SYNCHRONIZED' %}
  62. <div>{{ icon.svg('arrow-left-right') }}</div>
  63. {% endif %}
  64. {% if row.translations_count > 1 %}
  65. <div>{{ icon.svg('translate') }}</div>
  66. {% endif %}
  67. </div>
  68. </div>
  69. {% endfor %}
  70. </div>
  71. <div class="row footer">
  72. <p>footer (fixed height)</p>
  73. </div>
  74. </div>
  75. </div>
  76. <div class="column is-9 full-height">
  77. <div id="main" class="box">
  78. {% include "./partial/view.njk" %}
  79. </div>
  80. </div>
  81. </div>
  82. <script type="text/javascript" src="/javascripts/main.js"></script>
  83. <script type="text/javascript" src="/javascripts/view.js"></script>
  84. </body>
  85. </html>