mirror of
https://github.com/hkalexling/Mango.git
synced 2025-08-02 10:55:30 -04:00
Use component templates
This commit is contained in:
Alex Ling
parent
8b04f2c96b
commit
1ddcabcc12
@ -143,3 +143,7 @@ def set_token_cookie(env, token)
|
||||
cookie.expires = Time.local.shift years: 1
|
||||
env.response.cookies << cookie
|
||||
end
|
||||
|
||||
macro render_component(filename)
|
||||
render "src/views/components/#{{{filename}}}.ecr"
|
||||
end
|
||||
|
||||
35
src/views/components/card.ecr
Normal file
35
src/views/components/card.ecr
Normal file
@ -0,0 +1,35 @@
|
||||
<div class="item" data-mtime="<%= item.mtime.to_unix %>" data-progress="<%= progress || 0.0 %>"
|
||||
<% if item.is_a? Entry %>
|
||||
id="<%= item.id %>"
|
||||
<% end %>>
|
||||
|
||||
<a class="acard"
|
||||
<% unless item.is_a? Entry %>
|
||||
href="<%= base_url %>book/<%= item.id %>"
|
||||
<% end %>>
|
||||
|
||||
<div class="uk-card uk-card-default"
|
||||
<% if item.is_a? Entry %>
|
||||
onclick="showModal("<%= item.encoded_path %>", '<%= item.pages %>', <%= (progress.not_nil! * 100).round(1) %>, "<%= item.book.encoded_display_name %>", "<%= item.encoded_display_name %>", '<%= item.title_id %>', '<%= item.id %>')"
|
||||
<% end %>>
|
||||
|
||||
<div class="uk-card-media-top">
|
||||
<img data-src="<%= item.cover_url %>" data-width data-height alt="" uk-img>
|
||||
</div>
|
||||
|
||||
<div class="uk-card-body">
|
||||
<% unless (item.is_a? Title && item.entries.size == 0) || progress.nil? %>
|
||||
<div class="uk-card-badge uk-label"><%= (progress * 100).round(1) %>%</div>
|
||||
<% end %>
|
||||
|
||||
<h3 class="uk-card-title break-word" data-title="<%= item.display_name.gsub("\"", """) %>"><%= item.display_name %></h3>
|
||||
<% if item.is_a? Entry %>
|
||||
<p><%= item.pages %> pages</p>
|
||||
<% end %>
|
||||
<% if item.is_a? Title %>
|
||||
<p><%= item.size %> entries</p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
8
src/views/components/sort-form.ecr
Normal file
8
src/views/components/sort-form.ecr
Normal file
@ -0,0 +1,8 @@
|
||||
<div class="uk-form-horizontal">
|
||||
<select class="uk-select" id="sort-select">
|
||||
<% hash.each do |k, v| %>
|
||||
<option id="<%= k %>-up">▲ <%= v %></option>
|
||||
<option id="<%= k %>-down">▼ <%= v %></option>
|
||||
<% end %>
|
||||
</select>
|
||||
</div>
|
||||
@ -8,37 +8,19 @@
|
||||
</form>
|
||||
</div>
|
||||
<div class="uk-margin-bottom uk-width-1-4@s">
|
||||
<div class="uk-form-horizontal">
|
||||
<select class="uk-select" id="sort-select">
|
||||
<option id="name-up">▲ Name</option>
|
||||
<option id="name-down">▼ Name</option>
|
||||
<option id="date-up">▲ Date Modified</option>
|
||||
<option id="date-down">▼ Date Modified</option>
|
||||
<option id="progress-up">▲ Progress</option>
|
||||
<option id="progress-down">▼ Progress</option>
|
||||
</select>
|
||||
</div>
|
||||
<% hash = {
|
||||
"name" => "Name",
|
||||
"date" => "Date Modified",
|
||||
"progress" => "Progress"
|
||||
} %>
|
||||
<%= render_component "sort-form" %>
|
||||
</div>
|
||||
</div>
|
||||
<div id="item-container" class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
|
||||
<%- titles.each_with_index do |t, i| -%>
|
||||
<div class="item" data-mtime="<%= t.mtime.to_unix %>" data-progress="<%= percentage[i] %>">
|
||||
<a class="acard" href="<%= base_url %>book/<%= t.id %>">
|
||||
<div class="uk-card uk-card-default">
|
||||
<div class="uk-card-media-top">
|
||||
<img data-src="<%= t.cover_url %>" data-width data-height alt="" uk-img>
|
||||
</div>
|
||||
<div class="uk-card-body">
|
||||
<%- if t.entries.size > 0 -%>
|
||||
<div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
|
||||
<%- end -%>
|
||||
<h3 class="uk-card-title break-word" data-title="<%= t.display_name.gsub("\"", """) %>"><%= t.display_name %></h3>
|
||||
<p><%= t.size %> entries</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<%- end -%>
|
||||
<% titles.each_with_index do |item, i| %>
|
||||
<% progress = percentage[i] %>
|
||||
<%= render_component "card" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% content_for "script" do %>
|
||||
@ -46,4 +28,4 @@
|
||||
<script src="<%= base_url %>js/dots.js"></script>
|
||||
<script src="<%= base_url %>js/search.js"></script>
|
||||
<script src="<%= base_url %>js/sort-items.js"></script>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
@ -22,52 +22,24 @@
|
||||
</form>
|
||||
</div>
|
||||
<div class="uk-margin-bottom uk-width-1-4@s">
|
||||
<div class="uk-form-horizontal">
|
||||
<select class="uk-select" id="sort-select">
|
||||
<option id="auto-up">▲ Auto</option>
|
||||
<option id="auto-down">▼ Auto</option>
|
||||
<option id="name-up">▲ Name</option>
|
||||
<option id="name-down">▼ Name</option>
|
||||
<option id="date-up">▲ Date Modified</option>
|
||||
<option id="date-down">▼ Date Modified</option>
|
||||
<option id="progress-up">▲ Progress</option>
|
||||
<option id="progress-down">▼ Progress</option>
|
||||
</select>
|
||||
</div>
|
||||
<% hash = {
|
||||
"auto" => "Auto",
|
||||
"name" => "Name",
|
||||
"date" => "Date Modified",
|
||||
"progress" => "Progress"
|
||||
} %>
|
||||
<%= render_component "sort-form" %>
|
||||
</div>
|
||||
</div>
|
||||
<div id="item-container" class="uk-child-width-1-4@m uk-child-width-1-2" uk-grid>
|
||||
<%- title.titles.each_with_index do |t, i| -%>
|
||||
<div class="item" data-mtime="<%= t.mtime.to_unix %>" data-progress="0.0">
|
||||
<a class="acard" href="<%= base_url %>book/<%= t.id %>">
|
||||
<div class="uk-card uk-card-default">
|
||||
<div class="uk-card-media-top">
|
||||
<img data-src="<%= t.cover_url %>" data-width data-height alt="" uk-img>
|
||||
</div>
|
||||
<div class="uk-card-body">
|
||||
<h3 class="uk-card-title break-word" data-title="<%= t.display_name.gsub("\"", """) %>"><%= t.display_name %></h3>
|
||||
<p><%= t.size %> entries</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<%- end -%>
|
||||
<%- title.entries.each_with_index do |e, i| -%>
|
||||
<div class="item" data-mtime="<%= e.mtime.to_unix %>" data-progress="<%= percentage[i] %>" id="<%= e.id %>">
|
||||
<a class="acard">
|
||||
<div class="uk-card uk-card-default" onclick="showModal("<%= e.encoded_path %>", '<%= e.pages %>', <%= (percentage[i] * 100).round(1) %>, "<%= title.encoded_display_name %>", "<%= e.encoded_display_name %>", '<%= e.title_id %>', '<%= e.id %>')">
|
||||
<div class="uk-card-media-top">
|
||||
<img data-src="<%= e.cover_url %>" alt="" data-width data-height uk-img>
|
||||
</div>
|
||||
<div class="uk-card-body">
|
||||
<div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
|
||||
<h3 class="uk-card-title break-word" data-title="<%= e.display_name.gsub("\"", """) %>"><%= e.display_name %></h3>
|
||||
<p><%= e.pages %> pages</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<%- end -%>
|
||||
<% title.titles.each_with_index do |item, i| %>
|
||||
<% progress = nil %>
|
||||
<%= render_component "card" %>
|
||||
<% end %>
|
||||
<% title.entries.each_with_index do |item, i| %>
|
||||
<% progress = percentage[i] %>
|
||||
<%= render_component "card" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div id="modal" class="uk-flex-top" uk-modal>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user