Skip to content

Commit 50035d6

Browse files
committed
polish tag browser header on small screens
1 parent 37e5647 commit 50035d6

File tree

1 file changed

+108
-34
lines changed

1 file changed

+108
-34
lines changed

app/views/browse/tag.html.erb

Lines changed: 108 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -48,55 +48,56 @@
4848
creators_count = @tagged_content.flat_map { |group| group[:content].map(&:user_id) }.uniq.count
4949
%>
5050

51-
<!-- Enhanced hero header -->
51+
<!-- Enhanced hero header with improved responsive design -->
5252
<div class="card z-depth-2" style="border-radius: 8px; overflow: hidden; margin-bottom: 30px;">
53-
<div class="<%= @accent_color %> darken-1" style="position: relative; background: url('<%= pattern_url %>') center center; background-size: cover; height: 220px;">
53+
<div class="artfight-header <%= @accent_color %> darken-1" style="position: relative; background: url('<%= pattern_url %>') center center; background-size: cover; min-height: 220px;">
5454
<!-- Gradient overlay for better text contrast -->
55-
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);"></div>
55+
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.2) 100%);"></div>
5656

57-
<!-- Help button for how to join -->
58-
<div class="help-tooltip-container" style="position: absolute; top: 20px; right: 20px; z-index: 10;">
57+
<!-- Help button for how to join - fixed position for all screen sizes -->
58+
<div class="help-tooltip-container" style="position: absolute; top: 16px; right: 16px; z-index: 10;">
5959
<button class="btn-floating white z-depth-2 pulse modal-trigger" id="how-to-join-btn" style="height: 42px; width: 42px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none;" data-target="how-to-join-modal" onclick="this.classList.remove('pulse');">
6060
<i class="material-icons <%= @accent_color %>-text">help_outline</i>
6161
</button>
6262
</div>
6363

64-
<!-- Art Fight 2025 header info -->
65-
<div style="position: absolute; top: 40px; left: 40px; z-index: 1; max-width: 60%;">
66-
<div>
67-
<h1 style="font-size: 38px; font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,0.4); line-height: 1.2; margin: 0 0 8px 0; color: white;">
64+
<!-- Header content container with proper padding -->
65+
<div class="header-content" style="position: relative; z-index: 5; padding: 32px 24px; min-height: 220px; display: flex; flex-direction: column;">
66+
<!-- Main header section with responsive text -->
67+
<div class="header-text" style="max-width: 100%; margin-bottom: 16px;">
68+
<h1 class="artfight-title" style="font-size: clamp(28px, 5vw, 38px); font-weight: 600; text-shadow: 0 2px 4px rgba(0,0,0,0.4); line-height: 1.2; margin: 0 0 8px 0; color: white;">
6869
Art Fight 2025
6970
</h1>
70-
<h2 style="font-size: 18px; text-shadow: 0 1px 3px rgba(0,0,0,0.4); font-weight: 400; margin: 0; color: white; margin-top: 8px; margin-bottom: 15px;">
71+
<h2 class="artfight-subtitle" style="font-size: clamp(14px, 3vw, 18px); text-shadow: 0 1px 3px rgba(0,0,0,0.4); font-weight: 400; margin: 0; color: white; margin-top: 8px;">
7172
A showcase of creators' public content across Notebook.ai
7273
</h2>
74+
</div>
75+
76+
<!-- Stats chips with improved layout and properly aligned icons -->
77+
<div class="stats-container" style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; margin-bottom: 16px;">
78+
<div class="chip z-depth-1 white artfight-stat-chip" style="border: none; margin: 0; font-weight: 500; height: 32px; line-height: 32px; display: flex; align-items: center;">
79+
<i class="material-icons <%= @accent_color %>-text" style="margin-right: 8px; font-size: 20px;"><%= PageTag.icon %></i>
80+
<span style="white-space: nowrap;"><%= pluralize(total_items, 'page') %></span>
81+
</div>
7382

74-
<!-- Stats chips in header instead of below -->
75-
<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px;">
76-
<div class="chip z-depth-1 white" style="border: none; margin: 0; font-weight: 500;">
77-
<i class="material-icons left <%= @accent_color %>-text"><%= PageTag.icon %></i>
78-
<%= pluralize(total_items, 'page') %>
79-
</div>
80-
81-
<div class="chip z-depth-1 white" style="border: none; margin: 0; font-weight: 500;">
82-
<i class="material-icons left <%= @accent_color %>-text">category</i>
83-
<%= pluralize(content_types_count, 'page type') %>
84-
</div>
85-
86-
<div class="chip z-depth-1 white" style="border: none; margin: 0; font-weight: 500;">
87-
<i class="material-icons left <%= @accent_color %>-text">people</i>
88-
<%= pluralize(creators_count, 'creator') %>
89-
</div>
83+
<div class="chip z-depth-1 white artfight-stat-chip" style="border: none; margin: 0; font-weight: 500; height: 32px; line-height: 32px; display: flex; align-items: center;">
84+
<i class="material-icons <%= @accent_color %>-text" style="margin-right: 8px; font-size: 20px;">category</i>
85+
<span style="white-space: nowrap;"><%= pluralize(content_types_count, 'page type') %></span>
86+
</div>
87+
88+
<div class="chip z-depth-1 white artfight-stat-chip" style="border: none; margin: 0; font-weight: 500; height: 32px; line-height: 32px; display: flex; align-items: center;">
89+
<i class="material-icons <%= @accent_color %>-text" style="margin-right: 8px; font-size: 20px;">people</i>
90+
<span style="white-space: nowrap;"><%= pluralize(creators_count, 'creator') %></span>
9091
</div>
9192
</div>
92-
</div>
93-
94-
<!-- Tag floating badge moved to right side -->
95-
<div style="position: absolute; bottom: 30px; right: 40px; z-index: 2;">
96-
<div style="display: inline-block; background-color: white; padding: 14px 22px; border-radius: 8px; box-shadow: 0 4px 15px 0 rgba(0,0,0,0.3);">
97-
<div style="display: flex; align-items: center;">
98-
<i class="material-icons <%= @accent_color %>-text" style="font-size: 32px; margin-right: 12px;"><%= PageTag.icon %></i>
99-
<span style="font-size: 28px; font-weight: 600;" class="<%= @accent_color %>-text"><%= @tag %></span>
93+
94+
<!-- Tag floating badge - responsive positioning with perfect alignment -->
95+
<div class="artfight-tag-badge" style="margin-top: auto; align-self: flex-end;">
96+
<div style="display: inline-block; background-color: white; padding: 12px 18px; border-radius: 8px; box-shadow: 0 4px 15px 0 rgba(0,0,0,0.3);">
97+
<div style="display: flex; align-items: center;">
98+
<i class="material-icons <%= @accent_color %>-text" style="font-size: clamp(24px, 4vw, 32px); margin-right: 10px; display: flex;"><%= PageTag.icon %></i>
99+
<span style="font-size: clamp(20px, 4vw, 28px); font-weight: 600; line-height: 1;" class="<%= @accent_color %>-text"><%= @tag %></span>
100+
</div>
100101
</div>
101102
</div>
102103
</div>
@@ -566,6 +567,79 @@
566567
}
567568
}
568569

570+
/* Responsive ArtFight header styles */
571+
.artfight-header {
572+
transition: min-height 0.3s ease;
573+
}
574+
575+
.header-content {
576+
transition: padding 0.3s ease;
577+
}
578+
579+
.artfight-stat-chip {
580+
padding: 0 12px !important;
581+
transition: all 0.2s ease;
582+
}
583+
584+
/* Fix icon alignment in chips */
585+
.artfight-stat-chip i.material-icons {
586+
vertical-align: middle;
587+
display: flex;
588+
align-items: center;
589+
justify-content: center;
590+
}
591+
592+
@media only screen and (max-width: 768px) {
593+
.artfight-header {
594+
min-height: 260px !important;
595+
}
596+
597+
.header-content {
598+
padding: 16px !important;
599+
padding-top: 24px !important;
600+
}
601+
602+
.artfight-stat-chip {
603+
padding: 0 10px !important;
604+
margin-bottom: 4px !important;
605+
}
606+
607+
.artfight-tag-badge {
608+
margin-top: 8px !important;
609+
}
610+
}
611+
612+
@media only screen and (max-width: 480px) {
613+
.artfight-header {
614+
min-height: 300px !important;
615+
}
616+
617+
.stats-container {
618+
justify-content: flex-start !important;
619+
width: 100% !important;
620+
margin-bottom: 12px !important;
621+
}
622+
623+
.artfight-tag-badge {
624+
align-self: center !important;
625+
margin-top: 16px !important;
626+
}
627+
628+
.artfight-tag-badge > div {
629+
padding: 10px 14px !important;
630+
}
631+
632+
.header-text {
633+
max-width: 100% !important;
634+
text-align: center !important;
635+
margin-bottom: 8px !important;
636+
}
637+
638+
.stats-container {
639+
justify-content: center !important;
640+
}
641+
}
642+
569643
/* Category filters styling */
570644
.category-filters {
571645
background-color: #fff;

0 commit comments

Comments
 (0)