bhouse_backstage/backstage/templates/collections.html

{% extends "layout.html" %}
{% block main %}
<h1 class="h3"><i class="fas fa-ruler-combined mr-2"></i>{{ title }}</h1>
<table id="example" class="table" cellspacing="0" width="60%">
  <thead>
    <tr>
      <th>數量</th>
      <th>標題</th>
      <th>順序</th>
      <th>顯示</th>
      <th style="text-align:center;width:100px;">
        <button type="button" class="btn btn-primary btn-sm m-1" data-toggle="modal" data-target="#createModal">新增</button>
      </th>
    </tr>
  </thead>
  {% for idx in range(0, length) %}
    <tbody>
      <tr>
        <td>{{ idx }}</td>
        <td>{{ collections[idx].title }}</td>
        <td>1</td>
        <td>on</td>
        <td>
          <div>
            <a class="btn btn-secondary btn-sm m-1" href="{{ url_for('editor.editor', url=collections[idx].url) }}">編輯</a>
            <form action="{{ url_for('collections.remove', url=collections[idx].url) }}" method="POST">
              <input class="btn btn-danger" type="submit" value="Delete">
            </form>
          </div>
        </td>
      </tr>
    </tbody>
=======
      <th style="text-align:center;width:140px;">新增 <button type="button" data-func="dt-add" class="btn btn-success btn-xs dt-add">
          <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
        </button></th>
    </tr>
  </thead>
  {% for idx in range(0, length) %}
  <tbody>
    <tr>
      <td class="table__data">{{ idx }}</td>
      <td class="table__data">{{ collections[idx].title }}</td>
      <td class="table__data">1</td>
      <td class="table__data">on</td>
      <td>
        <div class="d-flex justify-content-center">
          <a class="m-1 btn__edit" href="{{ url_for('editor.editor', url=collections[idx].url) }}"><i class="fas fa-edit"></i></a>
          <form action="{{ url_for('editor.remove', url=collections[idx].url) }}" method="POST" class="m-1 inline_block">
            <button class="btn__delete" type="submit" value="delete"><i class="fas fa-trash-alt"></i></button>
          </form>
        </div>
      </td>
    </tr>
  </tbody>
>>>>>>> adjust table layout in collections
  {% endfor %}
</table>
<!-- Modal -->
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="createModalLabel">Create new content</h5>
      </div>
      <form action="{{ url_for('collections.create') }}" method="POST" enctype="multipart/form-data">
        <div class="form-group">
          {{ form.title.label(class="form-control-label") }}
          {{ form.title(class="form-control form-control-lg") }}
          {{ form.image.label(class="form-control-label") }}
          {{ form.image(class="form-control form-control-lg") }}
          {{ form.description.label(class="form-control-label") }}
          {{ form.description(class="form-control form-control-lg") }}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <input class="btn btn-primary" type="submit" value="Create">
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock main %}