Mango/src/views/title.html.ecr

<div>
  <div id="select-bar" class="uk-card uk-card-body uk-card-default uk-margin-bottom" uk-sticky="offset:10" x-data="{count: 0}" @add.window="count++; $dispatch('count', {count: count})" @remove.window="count--; $dispatch('count', {count: count})" x-show="count > 0" style="border:orange;border-style:solid;" x-cloak data-id="<%= title.id %>">
    <div class="uk-child-width-1-3" uk-grid>
      <div>
        <p x-text="count + ' items selected'" style="color:orange"></p>
      </div>
      <div class="uk-text-center" id="select-bar-controls">
        <a class="uk-icon uk-margin-right" uk-tooltip="title: Mark selected as read" href="" @click.prevent="bulkProgress('read', $el)">
          <i class="fas fa-check-circle"></i>
        </a>
        <a class="uk-icon" uk-tooltip="title: Mark selected as unread" href="" @click.prevent="bulkProgress('unread', $el)">
          <i class="fas fa-times-circle"></i>
        </a>
      </div>
      <div class="uk-text-right">
        <a @click="selectAll()" uk-tooltip="title: Select all"><i class="fas fa-check-double uk-margin-small-right"></i></a>
        <a @click="deselectAll();" uk-tooltip="title: Deselect all"><i class="fas fa-times"></i></a>
      </div>
    </div>
  </div>
  <h2 class=uk-title><span><%= title.display_name %></span>
    &nbsp;
    <% if is_admin %>
      <a onclick="edit()" class="uk-icon-button" uk-icon="icon:pencil"></a>
    <% end %>
  </h2>
</div>
<ul class="uk-breadcrumb">
  <li><a href="<%= base_url %>library">Library</a></li>
  <%- title.parents.each do |t| -%>
    <li><a href="<%= base_url %>book/<%= t.id %>"><%= t.display_name %></a></li>
  <%- end -%>
  <li class="uk-disabled"><a><%= title.display_name %></a></li>
</ul>
<p class="uk-text-meta"><%= title.content_label %> found</p>

<div class="uk-margin" x-data="tagsComponent()" x-cloak x-init="load(<%= is_admin %>)" x-show="!loading">
  <select class="tag-select" multiple="multiple" style="width:100%">
  </select>
</div>

<div class="uk-grid-small" uk-grid>
  <div class="uk-margin-bottom uk-width-3-4@s">
    <form class="uk-search uk-search-default">
      <span uk-search-icon></span>
      <input class="uk-search-input" type="search" placeholder="Search">
    </form>
  </div>
  <div class="uk-margin-bottom uk-width-1-4@s">
    <% hash = {
      "auto" => "Auto",
      "title" => "Name",
      "time_modified" => "Date Modified",
      "time_added" => "Date Added",
      "progress" => "Progress"
    } %>
    <%= render_component "sort-form" %>
  </div>
</div>

<div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
  <% title.titles.each_with_index do |item, i| %>
    <% progress = title_percentage[i] %>
    <%= render_component "card" %>
  <% end %>
</div>
<div class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
  <% entries.each_with_index do |item, i| %>
    <% progress = percentage[i] %>
    <%= render_component "card" %>
  <% end %>
</div>

<%= render_component "entry-modal" %>

<div id="edit-modal" class="uk-flex-top" uk-modal>
  <div class="uk-modal-dialog uk-margin-auto-vertical">
    <button class="uk-modal-close-default" type="button" uk-close></button>
    <div class="uk-modal-header">
      <div>
        <h3 class="uk-modal-title break-word">Edit</h3>
      </div>
    </div>
    <div class="uk-modal-body">
      <div class="uk-margin">
        <label class="uk-form-label" for="display-name">Display Name</label>
        <div class="uk-inline">
          <a class="uk-form-icon uk-form-icon-flip" uk-icon="icon:check"></a>
          <input class="uk-input" type="text" name="display-name" id="display-name-field">
        </div>
      </div>
      <div class="uk-margin">
        <label class="uk-form-label">Cover Image</label>
        <div class="uk-grid">
          <div class="uk-width-1-2@s">
            <img id="cover" data-title-cover="<%= title.cover_url %>" alt="" data-width data-height uk-img>
          </div>
          <div class="uk-width-1-2@s">
            <div id="cover-upload" class="upload-field uk-placeholder uk-text-center uk-flex uk-flex-middle" data-title-id="<%= title.id %>">
              <div>
                <span uk-icon="icon: cloud-upload"></span>
                <span class="uk-text-middle">Upload a cover image by dropping it here or</span>
                <div uk-form-custom>
                  <input type="file" accept="<%= SUPPORTED_IMG_TYPES.join ", " %>">
                  <span class="uk-link">selecting one</span>
                </div>
              </div>
            </div>

          </div>
        </div>
        <progress id="upload-progress" class="uk-progress" value="0" max="100" hidden></progress>
      </div>
      <div id="title-progress-control" hidden>
        <label class="uk-form-label">Progress</label>
        <p class="uk-margin-remove-vertical">
        <button id="read-btn" class="uk-button uk-button-default" onclick="updateProgress('<%= title.id %>', null, 1)">Mark all as read (100%)</button>
        <button id="unread-btn" class="uk-button uk-button-default" onclick="updateProgress('<%= title.id %>', null, 0)">Mark all as unread (0%)</button>
        </p>
      </div>
    </div>
  </div>
</div>

<% content_for "script" do %>
  <%= render_component "dots" %>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
  <link href="<%= base_url %>css/tags.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
  <script src="<%= base_url %>js/alert.js"></script>
  <script src="<%= base_url %>js/title.js"></script>
  <script src="<%= base_url %>js/search.js"></script>
  <script src="<%= base_url %>js/sort-items.js"></script>
<% end %>