first part of new theme integration

This commit is contained in:
2021-09-07 20:52:58 +02:00
parent 1c5350c8c6
commit 4ae9e36050
53 changed files with 4249 additions and 57 deletions

View File

@@ -27,7 +27,7 @@
<div class="d-grid gap-2">
<% wow_achievements.each do |achievement| %>
<div class="card">
<div class="card-header <% if achievement_completed(achievement.id, current_user) %>bg-success text-white<% else %>bg-secondary text-white<% end %>">
<div class="card-header <% if achievement_completed(achievement.id, current_user) %>bg-primary text-white<% else %>bg-secondary text-white<% end %>">
<%= achievement.name %><% if Rails.env.development? %> - ID: <%= achievement.achievement_id %><% end %>
</div>
<div class="card-body">

View File

@@ -0,0 +1,196 @@
<!-- NAVBAR START -->
<nav class="navbar navbar-expand-lg py-lg-3 navbar-dark">
<div class="container">
<!-- logo -->
<a href="/" class="navbar-brand me-lg-5">
<%= image_pack_tag 'media/images/logo.png', alt: 'logo', height: 18, class: 'logo-dark' %>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<i class="mdi mdi-menu"></i>
</button>
<!-- menus -->
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<!-- left menu -->
<ul class="navbar-nav me-auto align-items-center">
<li class="nav-item mx-lg-1">
<a class="nav-link active" href="">Home</a>
</li>
<li class="nav-item mx-lg-1">
<a class="nav-link" href="">Features</a>
</li>
<li class="nav-item mx-lg-1">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item mx-lg-1">
<a class="nav-link" href="">FAQs</a>
</li>
<li class="nav-item mx-lg-1">
<a class="nav-link" href="">Clients</a>
</li>
<li class="nav-item mx-lg-1">
<a class="nav-link" href="">Contact</a>
</li>
</ul>
<!-- right menu -->
<ul class="navbar-nav ms-auto align-items-center">
<li class="nav-item me-0">
<%= button_to user_bnet_omniauth_authorize_path, class: 'btn btn-primary nav-item', name: 'login', form: { 'data-turbo': false } do %>
Sign in with <i class="fab fa-battle-net"></i>
<% end %>
</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
<!-- START HERO -->
<section class="hero-section">
<div class="container">
<div class="row align-items-center">
<div class="col-md-5">
<div class="mt-md-4">
<div>
<span class="badge bg-danger rounded-pill">New</span>
<span class="text-white-50 ms-1">Welcome to new landing page</span>
</div>
<h2 class="text-white fw-normal mb-4 mt-3 hero-title">
Responsive Web UI Kit & Dashboard Template
</h2>
<p class="mb-4 font-16 text-white-50">Hyper is a fully featured dashboard and admin template
comes with tones of well designed UI elements, components, widgets and pages.</p>
<a href="" target="_blank" class="btn btn-success">Preview <i
class="mdi mdi-arrow-right ms-1"></i></a>
</div>
</div>
<div class="col-md-5 offset-md-2">
<div class="text-md-end mt-3 mt-md-0">
<%= image_pack_tag 'media/images/startup.svg', alt: 'startup', class: 'img-fluid' %>
</div>
</div>
</div>
</div>
</section>
<!-- END HERO -->
<!-- START FEATURES 1 -->
<section class="py-5 bg-light-lighten border-top border-bottom border-light">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<h3>Flexible <span class="text-primary">Layouts</span></h3>
<p class="text-muted mt-2">There are three different layout options available to cater need for
any <br /> modern web
application.</p>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-4">
<div class="demo-box text-center">
<%= image_pack_tag 'media/images/layouts/layout-1.png', alt: 'demo-img-1', class: 'img-fluid shadow-sm rounded' %>
<h5 class="mt-3 f-17">Vertical Layout</h5>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box text-center mt-3 mt-lg-0">
<%= image_pack_tag 'media/images/layouts/layout-2.png', alt: 'demo-img-2', class: 'img-fluid shadow-sm rounded' %>
<h5 class="mt-3 f-17">Horizontal Layout</h5>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box text-center mt-3 mt-lg-0">
<%= image_pack_tag 'media/images/layouts/layout-3.png', alt: 'demo-img-3', class: 'img-fluid shadow-sm rounded' %>
<h5 class="mt-3 f-17">Detached Layout</h5>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-4">
<div class="demo-box text-center">
<%= image_pack_tag 'media/images/layouts/layout-5.png', alt: 'demo-img-5', class: 'img-fluid shadow-sm rounded' %>
<h5 class="mt-3 f-17">Light Sidenav Layout</h5>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box text-center mt-3 mt-lg-0">
<%= image_pack_tag 'media/images/layouts/layout-6.png', alt: 'demo-img-6', class: 'img-fluid shadow-sm rounded' %>
<h5 class="mt-3 f-17">Boxed Layout</h5>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box text-center mt-3 mt-lg-0">
<%= image_pack_tag 'media/images/layouts/layout-4.png', alt: 'demo-img-4', class: 'img-fluid shadow-sm rounded' %>
<h5 class="mt-3 f-17">Semi Dark Layout</h5>
</div>
</div>
</div>
</div>
</section>
<!-- END FEATURES 1 -->
<!-- START FOOTER -->
<footer class="bg-dark py-5">
<div class="container">
<div class="row">
<div class="col-lg-6">
<%= image_pack_tag 'media/images/logo.png', alt: 'features-1', class: 'logo-dark', height: 18 %>
<p class="text-muted mt-4">Hyper makes it easier to build better websites with
<br> great speed. Save hundreds of hours of design
<br> and development by using it.</p>
<ul class="social-list list-inline mt-3">
<li class="list-inline-item text-center">
<a href="javascript: void(0);" class="social-list-item border-primary text-primary"><i class="mdi mdi-facebook"></i></a>
</li>
<li class="list-inline-item text-center">
<a href="javascript: void(0);" class="social-list-item border-danger text-danger"><i class="mdi mdi-google"></i></a>
</li>
<li class="list-inline-item text-center">
<a href="javascript: void(0);" class="social-list-item border-info text-info"><i class="mdi mdi-twitter"></i></a>
</li>
<li class="list-inline-item text-center">
<a href="javascript: void(0);" class="social-list-item border-secondary text-secondary"><i class="mdi mdi-github"></i></a>
</li>
</ul>
</div>
<div class="col-lg-2 mt-3 mt-lg-0">
<h5 class="text-light">Company</h5>
<ul class="list-unstyled ps-0 mb-0 mt-3">
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">About Us</a></li>
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Documentation</a></li>
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Blog</a></li>
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Affiliate Program</a></li>
</ul>
</div>
<div class="col-lg-2 mt-3 mt-lg-0">
<h5 class="text-light">Apps</h5>
<ul class="list-unstyled ps-0 mb-0 mt-3">
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Ecommerce Pages</a></li>
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Email</a></li>
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Social Feed</a></li>
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Projects</a></li>
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Tasks Management</a></li>
</ul>
</div>
<div class="col-lg-2 mt-3 mt-lg-0">
<h5 class="text-light">Discover</h5>
<ul class="list-unstyled ps-0 mb-0 mt-3">
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Help Center</a></li>
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Our Products</a></li>
<li class="mt-2"><a href="javascript: void(0);" class="text-muted">Privacy</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="mt-5">
<p class="text-muted mt-4 text-center mb-0">© 2018 - 2021 Hyper. Design and coded by
Coderthemes</p>
</div>
</div>
</div>
</div>
</footer>
<!-- END FOOTER -->

View File

@@ -1,5 +1,7 @@
<% if user_signed_in? %>
<h1>Welcome <%= current_user.battletag %></h1>
<% unless user_signed_in? %>
<%= render 'home/landing' %>
<% else %>
<h1>Welcome guest</h1>
<body class="loading" data-layout-config='{"darkMode":false}'>
<%= yield %>
</body>
<% end %>

View File

@@ -0,0 +1,72 @@
<!-- ========== Left Sidebar Start ========== -->
<div class="leftside-menu">
<!-- LOGO -->
<a href="index.html" class="logo text-center logo-light">
<span class="logo-lg">
<%= image_pack_tag 'media/images/logo.png', alt: 'startup', height: 16 %>
</span>
<span class="logo-sm">
<%= image_pack_tag 'media/images/logo_sm.png', alt: 'startup', height: 16 %>
</span>
</a>
<div class="h-100" id="leftside-menu-container" data-simplebar>
<!--- Sidemenu -->
<ul class="side-nav">
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarCollection" aria-expanded="false" aria-controls="sidebarCollection" class="side-nav-link">
<i class="fas fa-layer-group"></i>
<span> Collections </span>
<span class="fas fa-chevron-right"></span>
</a>
<div class="collapse" id="sidebarCollection">
<ul class="side-nav-second-level">
<li>
<a class="<%= 'active' if current_page?(wow_mounts_path) %>" aria-current="page" href="<%= wow_mounts_path %>"><%= t('layouts.navbar.mounts') %></a>
</li>
<li>
<a class="<%= 'active' if current_page?(wow_pets_path) %>" aria-current="page" href="<%= wow_pets_path %>"><%= t('layouts.navbar.pets') %></a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a data-bs-toggle="collapse" href="#sidebarEmail" aria-expanded="false" aria-controls="sidebarEmail" class="side-nav-link">
<i class="fas fa-gamepad"></i>
<span> Games </span>
<span class="fas fa-chevron-right"></span>
</a>
<div class="collapse" id="sidebarEmail">
<ul class="side-nav-second-level">
<li>
<a class="<%= 'active' if current_page?(wow_characters_path) %>" aria-current="page" href="<%= wow_characters_path %>"><%= t('layouts.navbar.characters') %></a>
</li>
<li>
<a class="<%= 'active' if current_page?(wow_reputations_path) %>" aria-current="page" href="<%= wow_reputations_path %>"><%= t('layouts.navbar.reputations') %></a>
</li>
</ul>
</div>
</li>
<li class="side-nav-item">
<a class="side-nav-link <%= 'active' if current_page?(achievements_path) %>" aria-current="page" href="<%= achievements_path %>">
<i class="fas fa-book"></i>
<span> <%= t('layouts.navbar.achievements') %> </span>
</a>
</li>
</ul>
<!-- End Sidebar -->
<div class="clearfix"></div>
</div>
<!-- Sidebar -left -->
</div>
<!-- Left Sidebar End -->

View File

@@ -1,19 +1,32 @@
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-globe-europe"></i>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-de"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'de-de', only_path: true)) %></li>
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-gb"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'en-gb', only_path: true)) %></li>
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-us"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'en-us', only_path: true)) %></li>
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-mx"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'es-mx', only_path: true)) %></li>
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-br"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'pt-br', only_path: true)) %></li>
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-es"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'es-es', only_path: true)) %></li>
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-fr"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'fr-fr', only_path: true)) %></li>
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-it"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'it', only_path: true)) %></li>
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-ru"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'ru-ru', only_path: true)) %></li>
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-kr"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'ko', only_path: true)) %></li>
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-tw"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'zh-tw', only_path: true)) %></li>
<li class="dropdown-item"><%= link_to '<span class="flag-icon flag-icon-cn"></span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'zh-cn', only_path: true)) %></li>
</ul>
<li class="dropdown notification-list topbar-dropdown" id="locales">
<a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="fas fa-globe-europe align-middle"></i>
<i class="fas fa-chevron-down d-none d-sm-inline-block align-middle"></i>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animated topbar-dropdown-menu">
<%= link_to '<span class="flag-icon flag-icon-de align-middle">German</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'de-de', only_path: true)), class: "dropdown-item notify-item" %>
<%= link_to '<span class="flag-icon flag-icon-gb align-middle">English</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'en-gb', only_path: true)), class: "dropdown-item notify-item" %>
<%= link_to '<span class="flag-icon flag-icon-us align-middle">American</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'en-us', only_path: true)), class: "dropdown-item notify-item" %>
<%= link_to '<span class="flag-icon flag-icon-mx align-middle">Mexicano</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'es-mx', only_path: true)), class: "dropdown-item notify-item" %>
<%= link_to '<span class="flag-icon flag-icon-br align-middle">Portugués</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'pt-br', only_path: true)), class: "dropdown-item notify-item" %>
<%= link_to '<span class="flag-icon flag-icon-es align-middle">Español</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'es-es', only_path: true)), class: "dropdown-item notify-item" %>
<%= link_to '<span class="flag-icon flag-icon-fr align-middle">Français</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'fr-fr', only_path: true)), class: "dropdown-item notify-item" %>
<%= link_to '<span class="flag-icon flag-icon-it align-middle">Italiano</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'it', only_path: true)), class: "dropdown-item notify-item" %>
<%= link_to '<span class="flag-icon flag-icon-ru align-middle">Pусский</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'ru-ru', only_path: true)), class: "dropdown-item notify-item" %>
<%= link_to '<span class="flag-icon flag-icon-kr align-middle">한국인</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'ko', only_path: true)), class: "dropdown-item notify-item" %>
<%= link_to '<span class="flag-icon flag-icon-tw align-middle">台湾</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'zh-tw', only_path: true)), class: "dropdown-item notify-item" %>
<%= link_to '<span class="flag-icon flag-icon-cn align-middle">中国人</span>'.html_safe, url_for(params.clone.permit!.merge(locale: 'zh-cn', only_path: true)), class: "dropdown-item notify-item" %>
</div>
</li>

View File

@@ -0,0 +1,30 @@
<!-- Topbar Start -->
<div class="navbar-custom">
<ul class="list-unstyled topbar-menu float-end mb-0">
<%= render 'layouts/locales' %>
<li class="dropdown notification-list">
<a class="nav-link dropdown-toggle nav-user arrow-none me-0" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<span class="account-user-name"><%= current_user.battletag %></span>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-animated topbar-dropdown-menu profile-dropdown">
<!-- item-->
<div class=" dropdown-header noti-title">
<h6 class="text-overflow m-0">Account</h6>
</div>
<%= link_to '<i class="fas fa-sign-out-alt"> Logout</i>'.html_safe, destroy_user_session_path, method: :delete, class: "dropdown-item notify-item" %>
</div>
</li>
</ul>
<button class="button-menu-mobile open-left">
<i class="fas fa-bars"></i>
</button>
</div>
<!-- end Topbar -->

View File

@@ -11,11 +11,26 @@
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render 'layouts/navbar' %>
<%= render partial: 'layouts/flash', flash: flash %>
<div class="container-fluid">
<%= yield %>
</div>
<% if user_signed_in? %>
<body class="loading" data-layout-config='{"leftSideBarTheme":"dark","layoutBoxed":false, "leftSidebarCondensed":false, "leftSidebarScrollable":false,"darkMode":false, "showRightSidebarOnStart": true}' style="visibility: visible;" data-leftbar-theme="dark">
<!-- Begin page -->
<div class="wrapper">
<%= render 'layouts/left-sidebar' %>
<div class="content-page">
<div class="content">
<%= render 'layouts/topbar' %>
<div class="container-fluid">
<%= yield %>
</div>
</div>
</div>
</div>
</body>
<% else %>
<body class="loading" data-layout-config='{"darkMode":false}'>
<%= yield %>
</body>
<% end %>
</html>