TDvorak/MyClub
1
0
Fork 0
mirror of https://github.com/Dvorinka/MyClubServer.git synced 2026-06-03 18:22:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
e9a63073e53d04d0d3a360756c7922883b23e1e4
MyClub/DOCS/REC_TO_MYUIBRIX_CONVERSION.md
T
Tomáš Dvořák 12cba639b9 upload
2025-10-16 13:32:05 +02:00

19 KiB
Raw Blame History

🎨 REC Directory to MyUIbrix Conversion Guide

📋 Overview

This document describes the conversion of HTML/CSS elements from the rec directory into MyUIbrix page element structure.

🔍 Identified Elements from splitted.html

1. Navigation / Header

HTML Classes: layout_NavbarContainer__R81Mg, Navbar_Container__zz5qI CSS Files: 1.css (Shaka player), 2.css (fonts + AnnounceBar), 3.css (general layout) Element Name: header Variant: sparta_navbar

Features:

  • Logo with image (AC Sparta Praha)
  • Burger menu button with animated icon
  • Navigation links with buttons (Tickets, Fanzone)
  • Separator between links
  • Search functionality
  • User authentication area

CSS Styling:

.Navbar_Container__zz5qI {
  /* Main navbar styling */
}
.Navbar_Toggle__cO4vN {
  /* Burger button */
}
.Navbar_Brand__mfC75 {
  /* Logo area */
}
.Navbar_Links__Ce4_T {
  /* Navigation links */
}

2. Hero Section - Homepage Header

HTML Classes: HomepageHeader_Container__8kG2y CSS Files: 6.css (HomepageHeader) Element Name: hero Variant: sparta_featured_carousel

Features:

  • Full-width background image (absolute positioned)
  • Article with categories badges
  • H2 title and description text
  • Primary button with "Play" action and chevron icon
  • Navigation carousel at bottom with thumbnails
  • Active state indicators
  • Responsive design (mobile/desktop)

Structure:

<header class="HomepageHeader_Container__8kG2y">
  <picture> [Background Image] </picture>
  <article>
    <span class="HomepageHeader_Categories__QbuVC">
      [Category badges with separators]
    </span>
    <h2>HIGHLIGHTS: Sparta - Slavia</h2>
    <p>Key moments from the 315th derby</p>
    <a [Button]>Play</a>
  </article>
  <nav>
    [Thumbnail carousel with pagination]
  </nav>
</header>

CSS Styling:

  • Height: 42.375rem (mobile), 50rem (tablet), 53rem (desktop)
  • Flexbox layout with flex-end alignment
  • Gradient overlay at bottom
  • Article animation: animateInArticle 0.5s cubic-bezier
  • Responsive font sizes

3. Videos Section - Sparta TV

HTML Classes: Container_Container__Hb4bC, page_Tv__iWJ5P, HorizontalSlider_Container__fAULW, HomepageTvSlider_Slider__VQQkt CSS Files: 3.css (Container), 8.css (page styles), 10.css (Headline) Element Name: videos Variant: sparta_horizontal_slider

Features:

  • Section heading with link and arrow icon
  • Horizontal scrolling slider with controls
  • Prev/Next buttons
  • Article preview cards with:
    • Picture with responsive images
    • Meta info (UNLIMITED badge, categories)
    • Video duration
    • Play button overlay
  • Draggable slides
  • Transform-based animation

Structure:

<section class="Container_Container__Hb4bC page_Tv__iWJ5P">
  <h2 class="Headline_Container__4_M_i">
    <a href="/en/sparta-tv">Videos <i [arrow-right]></i></a>
  </h2>
  <div class="HorizontalSlider_Container__fAULW">
    <div data-context="controls">
      [Prev/Next buttons]
    </div>
    <div>
      <div class="HorizontalSlider_DataContainer__6Yydh" style="transform: translate3d(...)">
        [Slide items with articles]
      </div>
    </div>
  </div>
</section>

CSS Highlights:

  • Gap: 2.5rem (mobile), 3rem (desktop)
  • Slider buttons with disabled states
  • Transform3d for smooth scrolling
  • Responsive image sizing

4. Teams Section with Tabs

HTML Classes: Container_Container__Hb4bC, HomepageTeams_Container__hklP0, TabsList_Container__0GSWS, TeamStatsTabs_Content__eEnaR CSS Files: 9.css (TeamStatsTabs) Element Name: team Variant: sparta_tabs_stats

Features:

  • Tablist with team categories (Men A, Women A, Men B)
  • Tab selection indicator with animation
  • Team stats content area with:
    • Team photo
    • Call-to-action buttons ("Buy jersey", "Team details")
    • Squad tables
    • Statistics display
  • Responsive column layout

Structure:

<section class="Container_Container__Hb4bC">
  <h2 class="Headline_Container__4_M_i">
    <a href="/en/tymy">Teams <i [arrow-right]></i></a>
  </h2>
  <div class="HomepageTeams_Container__hklP0">
    <main>
      <div class="TabsList_Container__0GSWS">
        <div class="TabsList_TablistContainer__vFD4P">
          <span class="TabsList_TabSelection__1FqGJ" [moving indicator]></span>
          <div role="tablist">
            <div role="tab">Men A</div>
            <div role="tab">Women A</div>
            <div role="tab">Men B</div>
          </div>
        </div>
        <div role="tabpanel">
          <div class="TeamStatsTabs_Content__eEnaR">
            [Team image and buttons]
          </div>
        </div>
      </div>
    </main>
  </div>
</section>

CSS Highlights:

  • Background: var(--colorBgSecondary, #1e1e1e)
  • Padding: 1.625rem 1.25rem (mobile), 2.5rem (desktop)
  • Flexbox: column (mobile), row (desktop)
  • Tab selection animation with transform

5. Fanshop Section - Product Slider

HTML Classes: Container_Container__Hb4bC, page_Fanshop__7Bwng, HorizontalSlider_Container__fAULW, ShopSlider_Item__aRdi2 CSS Files: Similar to Videos section Element Name: merch Variant: sparta_product_slider

Features:

  • Section heading with external link and arrow-up-right icon
  • Horizontal slider similar to Videos
  • Product cards with:
    • Product image
    • Product name (bold)
    • Price display
    • "Buy" button with external link icon
  • Prev/Next navigation
  • Draggable slides

Structure:

<section class="Container_Container__Hb4bC page_Fanshop__7Bwng">
  <h2 class="Headline_Container__4_M_i">
    <a target="_blank" href="https://...">Fanshop <i [arrow-up-right]></i></a>
  </h2>
  <div class="HorizontalSlider_Container__fAULW">
    [Similar structure to Videos slider]
    <a class="ShopSlider_Item__aRdi2" href="...">
      <picture>[Product image]</picture>
      <div>
        <strong>Product name</strong>
        <div>
          <div class="ShopSlider_Prices__BJZI_">
            <var>1 999 Kč</var>
          </div>
          <button>Buy <i [arrow-up-right]></i></button>
        </div>
      </div>
    </a>
  </div>
</section>

6. Footer with Partners Pyramid

HTML Classes: Footer_Container__nn9Ow, Footer_Partners__yESEU, Footer_PyramindTop__YcpaB, Footer_PyramindMid__ohJGg, Footer_PyramindDown__PDpgx CSS Files: 3.css, 8.css Element Name: footer Variant: sparta_partners_pyramid

Features:

  • Three-tier pyramid structure for partners:
    • Top tier: 1 main partner (Betano)
    • Middle tier: 4 medium partners (EPET, Adidas, T-Mobile, Chance Liga)
    • Bottom tier: Multiple smaller partners
  • Each partner with:
    • Logo image (SVG)
    • External link
    • Hover effects
  • Footer sections with:
    • Navigation links
    • Social media
    • Newsletter signup
    • Legal information

Structure:

<footer class="Footer_Container__nn9Ow" data-full="true">
  <section class="Footer_Partners__yESEU">
    <div class="Container_Container__Hb4bC Footer_PyramindTop__YcpaB">
      [Main partner logo]
    </div>
    <div class="Container_Container__Hb4bC Footer_PyramindMid__ohJGg">
      [4 medium partner logos]
    </div>
    <div class="Container_Container__Hb4bC Footer_PyramindDown__PDpgx">
      [Multiple smaller partner logos]
    </div>
  </section>
  [Additional footer content sections]
</footer>

🎨 Common Design Patterns

Color Variables

--colorAccent: [Accent color]
--colorBgSecondary: #1e1e1e
--colorBgSemiTransparent8: hsla(0,0%,100%,.08)
--colorTextSecondary: [Secondary text color]

Typography

  • Font Family: __zeleznaFont_39190a (Custom Zelezna font)
  • Weights: 100, 400, 500
  • Heading Sizes:
    • H1: 2.25rem (mobile), 4rem (desktop)
    • H2: 1.75rem (mobile), 2.25rem (desktop)
    • H2 Headline: 1.75rem (mobile), 2rem (desktop)

Responsive Breakpoints

  • Mobile: < 1024px
  • Tablet: 1024px - 1279px
  • Desktop: ≥ 1280px

Common Animations

  • Cubic-bezier transitions: cubic-bezier(.4,0,.6,1)
  • Transform3d for hardware acceleration
  • Opacity fade-ins: 0 → 1 over 0.6s

Icons

  • Material Icons Round: font-family: Material Icons Round
  • Custom icon implementation with <i> tags
  • Icon sizes: 24px (default), 2rem (headlines)

📦 MyUIbrix Element Mappings

Suggested New Elements/Variants

  1. header → sparta_navbar

    • Full navigation bar with burger menu
    • Logo, links, search, authentication

  2. hero → sparta_featured_carousel

    • Hero header with background image
    • Featured article with categories
    • Thumbnail navigation carousel

  3. videos → sparta_horizontal_slider

    • Horizontal scrolling video cards
    • Prev/Next controls
    • UNLIMITED badges

  4. team → sparta_tabs_stats

    • Tabbed team selector
    • Team photos and stats
    • CTA buttons for jersey and details

  5. merch → sparta_product_slider

    • Product carousel
    • Price display
    • Buy buttons with external links

  6. footer → sparta_partners_pyramid

    • Three-tier partner pyramid
    • Footer navigation
    • Newsletter and social

🛠️ Implementation Steps

Step 1: Create Element Configurations

Add to defaultElements.ts:

export const SPARTA_STYLE_ELEMENTS: PageElementConfig[] = [
  {
    page_type: 'homepage',
    element_name: 'header',
    variant: 'sparta_navbar',
    visible: true,
    display_order: 0,
    settings: {
      logo: '/images/sparta-logo.svg',
      searchEnabled: true,
      authEnabled: true,
    },
  },
  {
    page_type: 'homepage',
    element_name: 'hero',
    variant: 'sparta_featured_carousel',
    visible: true,
    display_order: 1,
    settings: {
      autoSwap: true,
      swapInterval: 5000,
      showThumbnails: true,
    },
  },
  {
    page_type: 'homepage',
    element_name: 'videos',
    variant: 'sparta_horizontal_slider',
    visible: true,
    display_order: 2,
    settings: {
      itemsPerView: 3,
      showUnlimitedBadge: true,
    },
  },
  {
    page_type: 'homepage',
    element_name: 'team',
    variant: 'sparta_tabs_stats',
    visible: true,
    display_order: 3,
    settings: {
      tabs: ['Men A', 'Women A', 'Men B'],
      showBuyJersey: true,
    },
  },
  {
    page_type: 'homepage',
    element_name: 'merch',
    variant: 'sparta_product_slider',
    visible: true,
    display_order: 4,
    settings: {
      itemsPerView: 4,
      currency: 'Kč',
    },
  },
  {
    page_type: 'homepage',
    element_name: 'footer',
    variant: 'sparta_partners_pyramid',
    visible: true,
    display_order: 5,
    settings: {
      pyramidTiers: 3,
      showNewsletter: true,
    },
  },
];

Step 2: Add Variants to pageElements.ts

export const ELEMENT_VARIANTS: Record<string, ElementVariant[]> = {
  // ... existing variants ...
  
  header: [
    // ... existing variants ...
    { 
      value: 'sparta_navbar', 
      label: 'Sparta Navbar', 
      description: 'AC Sparta Praha style navigation with burger menu, logo, links, and search' 
    },
  ],
  
  hero: [
    // ... existing variants ...
    { 
      value: 'sparta_featured_carousel', 
      label: 'Sparta Featured Carousel', 
      description: 'Hero header with background image, featured article, and thumbnail navigation' 
    },
  ],
  
  videos: [
    // ... existing variants ...
    { 
      value: 'sparta_horizontal_slider', 
      label: 'Sparta Horizontal Slider', 
      description: 'Horizontal scrolling video cards with UNLIMITED badges and controls' 
    },
  ],
  
  team: [
    // ... existing variants ...
    { 
      value: 'sparta_tabs_stats', 
      label: 'Sparta Tabs & Stats', 
      description: 'Tabbed team selector with photos, stats, and CTA buttons' 
    },
  ],
  
  merch: [
    // ... existing variants ...
    { 
      value: 'sparta_product_slider', 
      label: 'Sparta Product Slider', 
      description: 'Product carousel with prices and buy buttons' 
    },
  ],
  
  footer: [
    // ... existing variants ...
    { 
      value: 'sparta_partners_pyramid', 
      label: 'Sparta Partners Pyramid', 
      description: 'Three-tier partner pyramid layout with footer sections' 
    },
  ],
};

Step 3: Create Component Files

Create the following React component files:

  1. frontend/src/components/elements/SpartaNavbar.tsx
  2. frontend/src/components/elements/SpartaFeaturedCarousel.tsx
  3. frontend/src/components/elements/SpartaHorizontalSlider.tsx
  4. frontend/src/components/elements/SpartaTabsStats.tsx
  5. frontend/src/components/elements/SpartaProductSlider.tsx
  6. frontend/src/components/elements/SpartaPartnersFooter.tsx

Step 4: Extract and Convert CSS

Create modular CSS files for each component:

  1. frontend/src/styles/sparta-navbar.css
  2. frontend/src/styles/sparta-hero.css
  3. frontend/src/styles/sparta-slider.css
  4. frontend/src/styles/sparta-team-tabs.css
  5. frontend/src/styles/sparta-product-slider.css
  6. frontend/src/styles/sparta-footer.css

Step 5: Copy Assets

Copy required assets from rec directory:

  • Fonts (Zelezna font family)
  • Icons (Material Icons Round)
  • Any SVG/image assets

📝 CSS Classes Reference

Navigation Classes

  • layout_NavbarContainer__R81Mg - Container wrapper
  • Navbar_Container__zz5qI - Main navbar
  • Navbar_Toggle__cO4vN - Burger button
  • Navbar_Brand__mfC75 - Logo area
  • Navbar_Links__Ce4_T - Navigation links
  • BurgerButton_Container__0gYhA - Burger icon container
  • Button_Button__qQTgU - Generic button
  • Separator_Container__x7nNU - Separator element

Hero Classes

  • HomepageHeader_Container__8kG2y - Hero container
  • HomepageHeader_Categories__QbuVC - Category badges area
  • Icon_Icon__uZZKy - Icon base class
  • Icon_chevron-right__6riuc - Chevron right icon
  • Icon_arrow-right__eVJh7 - Arrow right icon
  • Icon_arrow-up-right__tiMr_ - Arrow up-right icon

Slider Classes

  • Container_Container__Hb4bC - Generic container
  • HorizontalSlider_Container__fAULW - Slider container
  • HorizontalSlider_Buttons__PsOev - Button controls
  • HorizontalSlider_DataContainer__6Yydh - Slide data container
  • HorizontalSlider_Slide__rALdW - Individual slide
  • ArticlePreviewItem_Container__uRp20 - Article preview card
  • ArticlePreviewItem_MetaInfo__5gcGd - Meta info overlay

Team Tab Classes

  • HomepageTeams_Container__hklP0 - Teams container
  • TabsList_Container__0GSWS - Tabs list container
  • TabsList_TablistContainer__vFD4P - Tab list wrapper
  • TabsList_TabSelection__1FqGJ - Active tab indicator
  • TeamStatsTabs_Content__eEnaR - Tab content area
  • TeamStatsTabs_ContentButtons___3Q2j - CTA buttons area

Product/Shop Classes

  • page_Fanshop__7Bwng - Fanshop section
  • ShopSlider_Item__aRdi2 - Product item
  • ShopSlider_Prices__BJZI_ - Price display

Footer Classes

  • Footer_Container__nn9Ow - Footer container
  • Footer_Partners__yESEU - Partners section
  • Footer_PyramindTop__YcpaB - Top tier (1 partner)
  • Footer_PyramindMid__ohJGg - Middle tier (4 partners)
  • Footer_PyramindDown__PDpgx - Bottom tier (multiple)

Common Classes

  • Headline_Container__4_M_i - Section headline
  • page_Container__ey6AU - Generic page container
  • page_Tv__iWJ5P - TV/Video page specific
  • page_Wrapper__UbSC1 - Page wrapper

🎯 Key Features to Implement

1. Horizontal Sliders

  • Transform3d-based scrolling
  • Prev/Next button controls
  • Disabled state handling
  • Drag support with data-dragging attribute
  • Smooth animations

2. Tabs System

  • Active tab indicator with transform animation
  • ARIA-compliant tablist/tabpanel
  • Keyboard navigation support
  • Tab selection animation

3. Category Badges

  • Inline badges with separators
  • Different types: category, sparta-id, etc.
  • Responsive sizing

4. Button System

  • Multiple variants: primary, secondary, tertiary
  • Icon support (left/right)
  • Size options: default, small, large
  • Square variant for icon-only buttons
  • Pressed and disabled states

5. Responsive Images

  • <picture> element with sources
  • Loading strategies (lazy, eager, high priority)
  • Decoding: async
  • Object-fit: cover
  • Responsive srcset

6. Animations

  • Fade in/out with cubic-bezier
  • Transform-based movements
  • Backdrop-filter blur effects
  • Hover transitions

🔗 Integration with MyUIbrix

Using in MyUIbrix Editor

  1. Open MyUIbrix Editor (/?myuibrix=edit)
  2. Click "Add Element" (A key)
  3. Select element category
  4. Choose Sparta-style variant
  5. Configure settings in Style Panel
  6. Save changes (Ctrl+S)

Customization Options

Each Sparta element should support:

  • Visibility toggle - Show/hide element
  • Display order - Change position in page
  • Settings object - Element-specific configuration
  • Color scheme - Match club colors
  • Responsive behavior - Mobile/tablet/desktop

Settings Schema Examples

sparta_navbar settings:

{
  "logo": "/images/club-logo.svg",
  "logoWidth": 48,
  "logoHeight": 48,
  "searchEnabled": true,
  "authEnabled": true,
  "links": [
    { "label": "Tickets", "url": "/vstupenky", "variant": "tertiary" },
    { "label": "Fanzone", "url": "/fanzone", "variant": "tertiary" }
  ]
}

sparta_featured_carousel settings:

{
  "autoSwap": true,
  "swapInterval": 5000,
  "showThumbnails": true,
  "thumbnailCount": 4,
  "showCategories": true,
  "buttonLabel": "Play",
  "buttonVariant": "primary"
}

sparta_horizontal_slider settings:

{
  "itemsPerView": { "mobile": 1, "tablet": 2, "desktop": 3 },
  "gap": 16,
  "showControls": true,
  "enableDrag": true,
  "showUnlimitedBadge": true
}

✅ Testing Checklist

  • All elements render correctly
  • Responsive behavior works on mobile/tablet/desktop
  • Animations are smooth (60fps)
  • Hover effects work as expected
  • Click/touch interactions function properly
  • Keyboard navigation is accessible
  • ARIA attributes are correct
  • Images load with proper lazy loading
  • Sliders scroll smoothly
  • Tab system switches correctly
  • External links open in new tabs
  • Icons display properly
  • Fonts load correctly
  • Colors match design
  • Settings are saved and loaded
  • Element visibility toggle works
  • Element reordering works
  • MyUIbrix editor integration complete

📚 Additional Resources

CSS Files Breakdown

  • 1.css - Shaka Player (video player library)
  • 2.css - Fonts (@font-face for Zelezna) + AnnounceBar
  • 3.css - General page layout, Container, Footer base
  • 4.css - (Not analyzed - likely more components)
  • 5.css - (Not analyzed - likely more components)
  • 6.css - HomepageHeader (Hero section)
  • 7.css - LastMatches, PosessionProgressBar
  • 8.css - Page specific styles, matches, versus, stats
  • 9.css - TeamStatsTabs
  • 10.css - ContestsCarousel, Headline

Key Dependencies

  • React - Component framework
  • Chakra UI - UI component library (used in MyUIbrix)
  • Material Icons Round - Icon font
  • Custom Zelezna Font - Typography

Browser Support

Ensure compatibility with:

  • Chrome/Edge (latest)
  • Firefox (latest)
  • Safari (latest)
  • Mobile browsers (iOS Safari, Chrome Mobile)

Created: October 15, 2025
Version: 1.0.0
Status: ✅ Documentation Complete - Ready for Implementation

Reference in New Issue View Git Blame Copy Permalink