Skip to content

Commit ef77c00

Browse files
nblasdnblasd
authored
Refactor ayah preview and phrase verse components for improved styling and structure (#537)
- Updated the layout of the ayah preview to enhance visual hierarchy and spacing.
1 parent d915fd3 commit ef77c00

File tree

3 files changed

+44
-52
lines changed

3 files changed

+44
-52
lines changed

‎app/views/morphology_phrases/_ayah_preview.html.erb‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,41 +24,41 @@
2424
end
2525
%>
2626

27-
<div class="page-section">
28-
<div class="tw-flex flex-column tw-items-end">
29-
<div class="badge tw-bg-green-500">
27+
<div class="tw-space-y-6">
28+
<div class="tw-flex tw-flex-col tw-items-end">
29+
<span class="tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded tw-text-xs tw-font-medium tw-bg-green-600 tw-text-white">
3030
<%= verse.verse_key %>
31-
</div>
32-
33-
<div class="quran-text qpc-hafs tw-flex flex-wrap">
31+
</span>
32+
<div class="quran-text qpc-hafs tw-flex tw-flex-wrap tw-gap-x-1 tw-mt-3 tw-text-2xl tw-leading-relaxed tw-text-right tw-justify-end">
3433
<% phrase_groups.each do |key, group| %>
3534
<% if key.is_a?(Morphology::Phrase) %>
3635
<%
3736
title = key.phrase_verses.approved.map &:text
3837
title = title.join("<br/>").html_safe
3938
%>
40-
<div title="(<%= key.id %>: <%= key.source_verse.verse_key %>)<%= key.text_qpc_hafs %> <span class='badge badge-info'><%= key.occurrence %></span> <%= title %>"
41-
class="mx-1 phrase tw-inline-flex"
42-
data-controller="tooltip"
43-
style="color: <%= key.get_color %>">
39+
<span title="(<%= key.id %>: <%= key.source_verse.verse_key %>)<%= key.text_qpc_hafs %> <span class='tw-bg-blue-100 tw-text-blue-800 tw-px-1 tw-rounded tw-text-xs'><%= key.occurrence %></span> <%= title %>"
40+
class="phrase tw-inline-flex tw-mr-1"
41+
data-controller="tooltip"
42+
style="color: <%= key.get_color %>">
4443
<% group.each do |w| %>
4544
<span><%= w.text_qpc_hafs %></span>
4645
<% end %>
47-
</div>
46+
</span>
4847
<% else %>
49-
<span>
48+
<span class="tw-text-gray-900">
5049
<%= group.text_qpc_hafs %>
51-
</span>
50+
</span>
5251
<% end %>
5352
<% end %>
5453
</div>
5554
</div>
5655

57-
<div class="tw-flex flex-column tw-items-end">
58-
<span class="badge tw-bg-green-500 tw-mt-3">
59-
Phrases
60-
</span>
61-
62-
<%= render partial: 'phrase_verse', collection: ayah_phrases.sort_by { |s| -s.score }, as: :phrase_verse %>
56+
<div class="tw-border-t tw-border-gray-200 tw-pt-6">
57+
<h3 class="tw-text-lg tw-font-semibold tw-text-gray-800 tw-mb-4 tw-flex tw-items-center tw-gap-2">
58+
<span class="tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded tw-text-xs tw-font-medium tw-bg-green-600 tw-text-white">Phrases</span>
59+
</h3>
60+
<div class="tw-space-y-3">
61+
<%= render partial: 'phrase_verse', collection: ayah_phrases.sort_by { |s| -s.score }, as: :phrase_verse %>
62+
</div>
6363
</div>
6464
</div>

‎app/views/morphology_phrases/_phrase_verse.html.erb‎

Lines changed: 21 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,34 @@
11
<%
22
phrase = phrase_verse.phrase
3-
43
approved_count = phrase.phrase_verses.approved.size
54
not_approved_count = phrase.phrase_verses.not_approved.size
65
%>
76

8-
<div id="<%= dom_id phrase_verse %>" class="tw-flex tw-items-center" style="flex-direction: row-reverse;">
9-
<div class="tw-flex">
10-
<%= link_to "/cms/morphology_phrases/#{phrase.id}", target: :_blank, class: 'ms-2' do %>
11-
<span style="display:inline-block;width: 20px; height: 20px; background: <%= phrase.get_color %>"></span>
12-
<span class="<%= 'text-danger' if !phrase.approved? %>"><%= phrase.verses_count %>(<%= phrase.review_status %>
13-
)</span>
7+
<div id="<%= dom_id phrase_verse %>" class="tw-flex tw-flex-row-reverse tw-items-center tw-gap-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200 hover:tw-bg-gray-100 tw-transition-colors">
8+
<div class="tw-flex tw-items-center tw-gap-3 tw-flex-wrap">
9+
<%= link_to "/cms/morphology_phrases/#{phrase.id}", target: :_blank, class: 'tw-flex tw-items-center tw-gap-2 tw-no-underline hover:tw-opacity-80' do %>
10+
<span class="tw-inline-block tw-w-4 tw-h-4 tw-rounded-sm tw-flex-shrink-0" style="background: <%= phrase.get_color %>"></span>
11+
<span class="tw-text-sm tw-font-medium <%= 'tw-text-red-600' if !phrase.approved? %>"><%= phrase.verses_count %> (<%= phrase.review_status %>)</span>
1412
<% end %>
15-
1613
<% if @access %>
17-
<div class="tw-ms-4">
18-
<%= form_with model: phrase_verse, url: "/morphology_phrases/#{phrase_verse.id}", method: :put, html: { class: 'form-inline' } do |form| %>
19-
<div class="tw-flex tw-my-2">
20-
<div class="tw-me-2">
21-
<small>p: <%= phrase.id %> s: <%= phrase_verse.score %></small>
22-
23-
<span class="badge tw-bg-green-500"
24-
type="button"
25-
data-controller="collapse" data-action="click->collapse#toggle"
26-
data-bs-target="#phrase-<%= phrase.id %>-related"
27-
aria-expanded="false"
28-
aria-controls="phrase-<%= phrase.id %>-related">
29-
<%= approved_count %>
30-
</span>
31-
<span class="badge tw-bg-red-500"><%= not_approved_count %></span>
32-
</div>
33-
<%= form.button("<i class='fas fa-times'></i>".html_safe, name: 'disabled', type: :submit, title: 'Disable', class: "tw-mr-2 tw-px-3 tw-py-1.5 tw-text-xs tw-font-medium tw-rounded tw-transition-colors #{phrase_verse.phrase.approved? && phrase_verse.approved? ? 'tw-bg-transparent tw-text-red-600 tw-border tw-border-red-600 hover:tw-bg-red-600 hover:tw-text-white' : 'tw-bg-red-600 hover:tw-bg-red-700 tw-text-white'}", data: { controller: 'tooltip' }) %>
34-
<%= form.button("<i class='fas fa-check'></i>".html_safe, name: 'approved', type: :submit, title: 'Approve', class: "tw-px-3 tw-py-1.5 tw-text-sm tw-font-medium tw-rounded tw-transition-colors #{phrase_verse.phrase.approved? && phrase_verse.approved? ? 'tw-bg-green-600 hover:tw-bg-green-700 tw-text-white' : 'tw-border tw-border-green-600 tw-text-green-600 hover:tw-bg-green-600 hover:tw-text-white'}", data: { controller: 'tooltip' }) %>
35-
</div>
36-
<% end %>
37-
</div>
14+
<%= form_with model: phrase_verse, url: "/morphology_phrases/#{phrase_verse.id}", method: :put do |form| %>
15+
<div class="tw-flex tw-items-center tw-gap-2 tw-flex-wrap">
16+
<span class="tw-text-xs tw-text-gray-500">p: <%= phrase.id %> s: <%= phrase_verse.score %></span>
17+
<span class="tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800"
18+
type="button"
19+
data-controller="collapse"
20+
data-action="click->collapse#toggle"
21+
data-bs-target="#phrase-<%= phrase.id %>-related"
22+
aria-expanded="false"
23+
aria-controls="phrase-<%= phrase.id %>-related"><%= approved_count %></span>
24+
<span class="tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-800"><%= not_approved_count %></span>
25+
<%= form.button("<i class='fas fa-times'></i>".html_safe, name: 'disabled', type: :submit, title: 'Disable', class: "tw-px-2.5 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors #{phrase_verse.phrase.approved? && phrase_verse.approved? ? 'tw-bg-transparent tw-text-red-600 tw-border tw-border-red-300 hover:tw-bg-red-50' : 'tw-bg-red-600 hover:tw-bg-red-700 tw-text-white'}", data: { controller: 'tooltip', tooltip_placement_value: 'top' }) %>
26+
<%= form.button("<i class='fas fa-check'></i>".html_safe, name: 'approved', type: :submit, title: 'Approve', class: "tw-px-2.5 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors #{phrase_verse.phrase.approved? && phrase_verse.approved? ? 'tw-bg-green-600 hover:tw-bg-green-700 tw-text-white' : 'tw-border tw-border-green-600 tw-text-green-600 hover:tw-bg-green-50'}", data: { controller: 'tooltip', tooltip_placement_value: 'top' }) %>
27+
</div>
28+
<% end %>
3829
<% end %>
3930
</div>
40-
41-
<div class="quran-text qpc-hafs">
31+
<div class="quran-text qpc-hafs tw-text-xl tw-font-medium" style="<%= phrase.get_color.present? ? "color: #{phrase.get_color}" : 'color: #111827' %>">
4232
<%= phrase.text_qpc_hafs %>
4333
</div>
4434
</div>

‎app/views/morphology_phrases/show.html.erb‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,13 @@
1818
key: 'ayah_mutashabihat',
1919
actions: actions
2020
%>
21-
<div class="page-wrapper tw-container tw-max-w-7xl tw-mx-auto tw-px-4">
22-
<%= render 'ayah_preview', mapping: {
21+
<div class="page-wrapper tw-container tw-max-w-7xl tw-mx-auto tw-px-4 tw-mt-4 tw-relative tw-z-10">
22+
<div class="tw-bg-white tw-rounded-xl tw-shadow-sm tw-border tw-border-gray-200 tw-p-6 tw-mb-6">
23+
<%= render 'ayah_preview', mapping: {
2324
verse: @verse,
2425
phrase_verses: @verse.verse_phrases,
2526
} %>
27+
</div>
2628
</div>
2729
<% else %>
2830
<%= render 'suggestions' %>

0 commit comments

Comments
 (0)