|
48 | 48 | creators_count = @tagged_content.flat_map { |group| group[:content].map(&:user_id) }.uniq.count
|
49 | 49 | %>
|
50 | 50 |
|
51 |
| - <!-- Enhanced hero header --> |
| 51 | + <!-- Enhanced hero header with improved responsive design --> |
52 | 52 | <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;"> |
54 | 54 | <!-- 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> |
56 | 56 |
|
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;"> |
59 | 59 | <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');">
|
60 | 60 | <i class="material-icons <%= @accent_color %>-text">help_outline</i>
|
61 | 61 | </button>
|
62 | 62 | </div>
|
63 | 63 |
|
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;"> |
68 | 69 | Art Fight 2025
|
69 | 70 | </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;"> |
71 | 72 | A showcase of creators' public content across Notebook.ai
|
72 | 73 | </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> |
73 | 82 |
|
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> |
90 | 91 | </div>
|
91 | 92 | </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> |
100 | 101 | </div>
|
101 | 102 | </div>
|
102 | 103 | </div>
|
|
566 | 567 | }
|
567 | 568 | }
|
568 | 569 |
|
| 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 | + |
569 | 643 | /* Category filters styling */
|
570 | 644 | .category-filters {
|
571 | 645 | background-color: #fff;
|
|
0 commit comments