Ignore:
Timestamp:
09/02/26 05:22:09 (4 weeks ago)
Author:
mmilevski <markomilevski3@…>
Branches:
main
Children:
1dcdb2c
Parents:
d89d25b
Message:

Various UI bugfixes.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • KernelRecordsMVC.Web/Views/Shared/_Layout.cshtml

    rd89d25b r595d2e5  
    11@using Microsoft.AspNetCore.Http
     2@using Microsoft.EntityFrameworkCore
     3@using KernelRecordsMVC.Infrastructure.Data
     4@using KernelRecordsMVC.Domain.Enums
     5@inject KernelRecordsContext DbContext
     6
     7@{
     8    long cartCount = 0;
     9
     10    var sessionUserId = Context.Session.GetInt32("UserId");
     11
     12    if (sessionUserId.HasValue)
     13    {
     14        var userId = (long)sessionUserId.Value;
     15
     16        cartCount = await DbContext.OrderProducts
     17            .Where(op =>
     18                op.Order.UserId == userId &&
     19                op.Order.Status == OrderStatusType.PENDING)
     20            .SumAsync(op => (long?)op.Quantity) ?? 0;
     21    }
     22}
    223
    324<!DOCTYPE html>
    4 
    525<html lang="en">
    626<head>
    … …  
    828    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    929
    10 
    11 <title>@ViewData["Title"] - Kernel Records</title>
    12 
    13 <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    14 
    15 
     30    <title>@ViewData["Title"] - Kernel Records</title>
     31
     32    <link rel="stylesheet"
     33          href="~/css/site.css"
     34          asp-append-version="true" />
    1635</head>
    1736
    … …  
    2039<header class="site-header">
    2140
    22 
    23 <!-- =====================================================
    24      MAIN NAVBAR
    25      ===================================================== -->
    26 
    27 <nav class="navbar">
    28 
    29     <div class="navbar-container">
    30 
    31         <!-- LOGO -->
    32 
    33         <a asp-controller="Home"
    34            asp-action="Index"
    35            class="navbar-brand logo-brand">
    36 
    37             <img src="~/images/logo.png"
    38                  asp-append-version="true"
    39                  alt="Kernel Records"
    40                  class="site-logo" />
    41 
    42         </a>
    43 
    44 
    45         <!-- MOBILE MENU BUTTON -->
    46 
    47         <button class="mobile-menu-button"
    48                 type="button"
    49                 aria-label="Toggle navigation"
    50                 onclick="toggleMobileMenu()">
    51 
    52             ☰
    53 
    54         </button>
    55 
    56 
    57         <!-- NAVBAR CONTENT -->
    58 
    59         <div class="navbar-content"
    60              id="navbarContent">
    61 
    62 
    63             <!-- =================================================
    64                  MAIN NAVIGATION
    65                  ================================================= -->
    66 
    67             <ul class="nav-links">
    68 
    69                 <!-- Browse -->
    70 
    71                 <li>
    72 
    73                     <a asp-controller="Release"
    74                        asp-action="Index">
    75 
    76                         Browse
    77 
    78                     </a>
    79 
    80                 </li>
    81 
    82 
    83                 <!-- Top Sellers -->
    84 
    85                 <li>
    86 
    87                     <a asp-controller="TopSellers"
    88                        asp-action="Index">
    89 
    90                         Top Sellers
    91 
    92                     </a>
    93 
    94                 </li>
    95 
    96 
    97                 <!-- Artists -->
    98 
    99                 <li>
    100 
    101                     <a asp-controller="Artist"
    102                        asp-action="Index">
    103 
    104                         Artists
    105 
    106                     </a>
    107 
    108                 </li>
    109 
    110 
    111                 <!-- Genres -->
    112 
    113                 <li class="nav-dropdown">
    114 
    115                     <a href="#"
    116                        class="dropdown-toggle">
    117 
    118                         Genres
    119 
    120                         <span class="arrow">
    121                             ⌄
    122                         </span>
    123 
    124                     </a>
    125 
    126 
    127                     <div class="dropdown-menu">
    128 
    129                         <a asp-controller="Release"
    130                            asp-action="Index"
    131                            asp-route-genre="Rock">
    132 
    133                             Rock
    134 
    135                         </a>
    136 
    137                         <a asp-controller="Release"
    138                            asp-action="Index"
    139                            asp-route-genre="Pop">
    140 
    141                             Pop
    142 
    143                         </a>
    144 
    145                         <a asp-controller="Release"
    146                            asp-action="Index"
    147                            asp-route-genre="Hip-Hop">
    148 
    149                             Hip-Hop
    150 
    151                         </a>
    152 
    153                         <a asp-controller="Release"
    154                            asp-action="Index"
    155                            asp-route-genre="Jazz">
    156 
    157                             Jazz
    158 
    159                         </a>
    160 
    161                         <a asp-controller="Release"
    162                            asp-action="Index"
    163                            asp-route-genre="Electronic">
    164 
    165                             Electronic
    166 
    167                         </a>
    168 
     41    <!-- =====================================================
     42         MAIN NAVBAR
     43         ===================================================== -->
     44
     45    <nav class="navbar">
     46
     47        <div class="navbar-container">
     48
     49            <!-- LOGO -->
     50
     51            <a asp-controller="Home"
     52               asp-action="Index"
     53               class="navbar-brand logo-brand">
     54
     55                <img src="~/images/logo.png"
     56                     asp-append-version="true"
     57                     alt="Kernel Records"
     58                     class="site-logo" />
     59
     60            </a>
     61
     62
     63            <!-- MOBILE MENU BUTTON -->
     64
     65            <button class="mobile-menu-button"
     66                    type="button"
     67                    aria-label="Toggle navigation"
     68                    onclick="toggleMobileMenu()">
     69                ☰
     70            </button>
     71
     72
     73            <!-- NAVBAR CONTENT -->
     74
     75            <div class="navbar-content"
     76                 id="navbarContent">
     77
     78                <!-- =================================================
     79                     MAIN NAVIGATION
     80                     ================================================= -->
     81
     82                <ul class="nav-links">
     83
     84                    <li>
    16985                        <a asp-controller="Release"
    17086                           asp-action="Index">
    171 
    172                             All Genres
    173 
     87                            Browse
    17488                        </a>
    175 
    176                     </div>
    177 
    178                 </li>
    179 
    180 
    181                 <!-- Sale -->
    182 
    183                 <li>
    184 
    185                     <a asp-controller="Sale"
     89                    </li>
     90
     91                    <li>
     92                        <a asp-controller="TopSellers"
     93                           asp-action="Index">
     94                            Top Sellers
     95                        </a>
     96                    </li>
     97
     98                    <li>
     99                        <a asp-controller="Artist"
     100                           asp-action="Index">
     101                            Artists
     102                        </a>
     103                    </li>
     104
     105                    <li class="nav-dropdown">
     106
     107                        <a href="#"
     108                           class="dropdown-toggle">
     109                            Genres
     110                            <span class="arrow">⌄</span>
     111                        </a>
     112
     113                        <div class="dropdown-menu">
     114
     115                            <a asp-controller="Release"
     116                               asp-action="Index"
     117                               asp-route-genre="Rock">
     118                                Rock
     119                            </a>
     120
     121                            <a asp-controller="Release"
     122                               asp-action="Index"
     123                               asp-route-genre="Pop">
     124                                Pop
     125                            </a>
     126
     127                            <a asp-controller="Release"
     128                               asp-action="Index"
     129                               asp-route-genre="Hip-Hop">
     130                                Hip-Hop
     131                            </a>
     132
     133                            <a asp-controller="Release"
     134                               asp-action="Index"
     135                               asp-route-genre="Jazz">
     136                                Jazz
     137                            </a>
     138
     139                            <a asp-controller="Release"
     140                               asp-action="Index"
     141                               asp-route-genre="Electronic">
     142                                Electronic
     143                            </a>
     144
     145                            <a asp-controller="Release"
     146                               asp-action="Index">
     147                                All Genres
     148                            </a>
     149
     150                        </div>
     151
     152                    </li>
     153
     154                    <li>
     155                        <a asp-controller="Sale"
     156                           asp-action="Index"
     157                           class="nav-sale">
     158                            Sale
     159                        </a>
     160                    </li>
     161
     162                </ul>
     163
     164
     165                <!-- =================================================
     166                     SEARCH
     167                     ================================================= -->
     168
     169                <form class="navbar-search"
     170                      asp-controller="Release"
     171                      asp-action="Index"
     172                      method="get">
     173
     174                    <input type="text"
     175                           name="search"
     176                           placeholder="Search releases..."
     177                           autocomplete="off" />
     178
     179                    <button type="submit"
     180                            aria-label="Search">
     181                        <span>⌕</span>
     182                    </button>
     183
     184                </form>
     185
     186
     187                <!-- =================================================
     188                     RIGHT SIDE ACTIONS
     189                     ================================================= -->
     190
     191                <div class="navbar-actions">
     192
     193                    <!-- WISHLIST -->
     194
     195                    <a class="nav-icon"
     196                       asp-controller="Wishlist"
    186197                       asp-action="Index"
    187                        class="nav-sale">
    188 
    189                         Sale
     198                       title="Wishlist">
     199
     200                        <span class="icon">♡</span>
     201
     202                        <span class="icon-label">
     203                            Wishlist
     204                        </span>
    190205
    191206                    </a>
    192207
    193                 </li>
    194 
    195             </ul>
    196 
    197 
    198             <!-- =================================================
    199                  SEARCH
    200                  ================================================= -->
    201 
    202             <form class="navbar-search"
    203                   asp-controller="Release"
    204                   asp-action="Index"
    205                   method="get">
    206 
    207                 <input type="text"
    208                        name="search"
    209                        placeholder="Search releases..."
    210                        autocomplete="off" />
    211 
    212                 <button type="submit"
    213                         aria-label="Search">
    214 
    215                     <span>
    216                         ⌕
    217                     </span>
    218 
    219                 </button>
    220 
    221             </form>
    222 
    223 
    224             <!-- =================================================
    225                  RIGHT SIDE ACTIONS
    226                  ================================================= -->
    227 
    228             <div class="navbar-actions">
    229 
    230 
    231                 <!-- =================================================
    232                      WISHLIST
    233                      ================================================= -->
    234 
    235                 <a class="nav-icon"
    236                    asp-controller="Wishlist"
    237                    asp-action="Index"
    238                    title="Wishlist">
    239 
    240                     <span class="icon">
    241                         ♡
    242                     </span>
    243 
    244                     <span class="icon-label">
    245                         Wishlist
    246                     </span>
    247 
    248                 </a>
    249 
    250 
    251                 <!-- =================================================
    252                      CART
    253                      ================================================= -->
    254 
    255                 <a class="nav-icon"
    256                    asp-controller="Order"
    257                    asp-action="Cart"
    258                    title="Shopping Cart">
    259 
    260                     <span class="icon cart-icon">
    261                         🛒
    262                     </span>
    263 
    264                     <span class="icon-label">
    265                         Cart
    266                     </span>
    267 
    268                 </a>
    269 
    270 
    271                 <!-- =================================================
    272                      ACCOUNT
    273                      ================================================= -->
    274 
    275                 @if (Context.Session.GetInt32("UserId") != null)
    276                 {
    277 
    278                     <!-- LOGGED IN -->
    279 
    280                     <div class="account-dropdown">
    281 
    282 
    283                         <button class="account-button"
    284                                 type="button">
    285 
    286                             <span class="user-icon">
    287                                 ●
     208
     209                    <!-- CART -->
     210
     211                    <a class="nav-icon nav-cart-link"
     212                       asp-controller="Order"
     213                       asp-action="Cart"
     214                       title="Shopping Cart">
     215
     216                        <span class="nav-cart-icon-wrap">
     217
     218                            <span class="icon cart-icon">
     219                                🛒
    288220                            </span>
    289221
    290                             <span class="account-name">
    291 
    292                                 @Context.Session.GetString("Username")
    293 
    294                             </span>
    295 
    296                             <span class="arrow">
    297                                 ⌄
    298                             </span>
    299 
    300                         </button>
    301 
    302 
    303                         <!-- ACCOUNT MENU -->
    304 
    305                         <div class="account-menu">
    306 
    307 
    308                             <!-- PROFILE -->
     222                            @if (cartCount > 0)
     223                            {
     224                                <span class="nav-cart-count"
     225                                      aria-label="@cartCount item(s) in cart">
     226                                    @(cartCount > 99 ? "99+" : cartCount.ToString())
     227                                </span>
     228                            }
     229
     230                        </span>
     231
     232                        <span class="icon-label">
     233                            Cart
     234                        </span>
     235
     236                    </a>
     237
     238
     239                    <!-- ACCOUNT -->
     240
     241                    @if (Context.Session.GetInt32("UserId") != null)
     242                    {
     243                        <div class="account-dropdown">
     244
     245                            <button class="account-button"
     246                                    type="button">
     247
     248                                <span class="user-icon">●</span>
     249
     250                                <span class="account-name">
     251                                    @Context.Session.GetString("Username")
     252                                </span>
     253
     254                                <span class="arrow">⌄</span>
     255
     256                            </button>
     257
     258                            <div class="account-menu">
     259
     260                                <a asp-controller="Account"
     261                                   asp-action="Profile">
     262                                    <span>👤</span>
     263                                    My Profile
     264                                </a>
     265
     266                                <a asp-controller="Order"
     267                                   asp-action="Cart">
     268                                    <span>📦</span>
     269                                    My Orders
     270                                </a>
     271
     272                                <a asp-controller="Wishlist"
     273                                   asp-action="Index">
     274                                    <span>♡</span>
     275                                    My Wishlist
     276                                </a>
     277
     278                                @if (Context.Session.GetString("Role") == "Admin")
     279                                {
     280                                    <div class="menu-divider"></div>
     281
     282                                    <a asp-controller="Admin"
     283                                       asp-action="Index"
     284                                       class="admin-link">
     285                                        <span>⚙</span>
     286                                        Admin Dashboard
     287                                    </a>
     288                                }
     289
     290                                <div class="menu-divider"></div>
     291
     292                                <form asp-controller="Account"
     293                                      asp-action="Logout"
     294                                      method="post">
     295
     296                                    @Html.AntiForgeryToken()
     297
     298                                    <button type="submit"
     299                                            class="logout-button">
     300                                        <span>↪</span>
     301                                        Logout
     302                                    </button>
     303
     304                                </form>
     305
     306                            </div>
     307
     308                        </div>
     309                    }
     310                    else
     311                    {
     312                        <div class="auth-buttons">
    309313
    310314                            <a asp-controller="Account"
    311                                asp-action="Profile">
    312 
    313                                 <span>
    314                                     👤
    315                                 </span>
    316 
    317                                 My Profile
    318 
    319                             </a>
    320 
    321 
    322                             <!-- ORDERS -->
    323 
    324                             <a asp-controller="Order"
    325                                asp-action="Cart">
    326 
    327                                 <span>
    328                                     📦
    329                                 </span>
    330 
    331                                 My Orders
    332 
    333                             </a>
    334 
    335 
    336                             <!-- WISHLIST -->
    337 
    338                             <a asp-controller="Wishlist"
    339                                asp-action="Index">
    340 
    341                                 <span>
    342                                     ♡
    343                                 </span>
    344 
    345                                 My Wishlist
    346 
    347                             </a>
    348 
    349 
    350                             <!-- ADMIN -->
    351 
    352                             @if (Context.Session.GetString("Role") == "Admin")
    353                             {
    354 
    355                                 <div class="menu-divider"></div>
    356 
    357 
    358                                 <a asp-controller="Admin"
    359                                    asp-action="Index"
    360                                    class="admin-link">
    361 
    362                                     <span>
    363                                         ⚙
    364                                     </span>
    365 
    366                                     Admin Dashboard
    367 
    368                                 </a>
    369 
    370                             }
    371 
    372 
    373                             <div class="menu-divider"></div>
    374 
    375 
    376                             <!-- LOGOUT -->
    377 
    378                             <form asp-controller="Account"
    379                                   asp-action="Logout"
    380                                   method="post">
    381 
    382                                 @Html.AntiForgeryToken()
    383 
    384                                 <button type="submit"
    385                                         class="logout-button">
    386 
    387                                     <span>↪</span>
    388 
    389                                     Logout
    390 
    391                                 </button>
    392 
    393                             </form>
    394 
     315                               asp-action="Login"
     316                               class="login-button">
     317                                Login
     318                            </a>
     319
     320                            <a asp-controller="Account"
     321                               asp-action="Register"
     322                               class="register-button">
     323                                Register
     324                            </a>
    395325
    396326                        </div>
    397 
    398                     </div>
    399 
    400                 }
    401                 else
    402                 {
    403 
    404                     <!-- =================================================
    405                          NOT LOGGED IN
    406                          ================================================= -->
    407 
    408                     <div class="auth-buttons">
    409 
    410 
    411                         <a asp-controller="Account"
    412                            asp-action="Login"
    413                            class="login-button">
    414 
    415                             Login
    416 
    417                         </a>
    418 
    419 
    420                         <a asp-controller="Account"
    421                            asp-action="Register"
    422                            class="register-button">
    423 
    424                             Register
    425 
    426                         </a>
    427 
    428 
    429                     </div>
    430 
    431                 }
     327                    }
     328
     329                </div>
    432330
    433331            </div>
    … …  
    435333        </div>
    436334
     335    </nav>
     336
     337
     338    <!-- =====================================================
     339         ANNOUNCEMENT BAR
     340         ===================================================== -->
     341
     342    <div class="announcement-bar">
     343
     344        <span>
     345            FREE SHIPPING ON ORDERS OVER $100
     346        </span>
     347
    437348    </div>
    438 
    439 </nav>
    440 
    441 
    442 <!-- =====================================================
    443      ANNOUNCEMENT BAR
    444      ===================================================== -->
    445 
    446 <div class="announcement-bar">
    447 
    448     <span>
    449         FREE SHIPPING ON ORDERS OVER €50
    450     </span>
    451 
    452     <span class="announcement-separator">
    453         •
    454     </span>
    455 
    456     <span>
    457         NEW VINYL EVERY WEEK
    458     </span>
    459 
    460 </div>
    461 
     349   
    462350
    463351</header>
     352
    464353
    465354<!-- =========================================================
    … …  
    468357
    469358<main class="main-content">
    470 
    471 
    472 @RenderBody()
    473 
    474 
     359    @RenderBody()
    475360</main>
     361
    476362
    477363<!-- =========================================================
    … …  
    481367<footer class="site-footer">
    482368
    483 
    484 <div class="footer-container">
    485 
    486 
    487     <!-- BRAND -->
    488 
    489     <div class="footer-brand">
    490 
    491         <div class="footer-logo">
    492             KERNEL RECORDS
     369    <div class="footer-container">
     370
     371        <div class="footer-brand">
     372
     373            <div class="footer-logo">
     374                KERNEL RECORDS
     375            </div>
     376
     377            <p>
     378                Your destination for vinyl, CDs and cassettes.
     379            </p>
     380
    493381        </div>
    494382
    495         <p>
    496             Your destination for vinyl, CDs and cassettes.
    497         </p>
     383
     384        <div class="footer-column">
     385
     386            <h4>Shop</h4>
     387
     388            <a asp-controller="Release"
     389               asp-action="Index">
     390                Releases
     391            </a>
     392
     393            <a asp-controller="Release"
     394               asp-action="Index">
     395                New Releases
     396            </a>
     397
     398            <a asp-controller="Artist"
     399               asp-action="Index">
     400                Artists
     401            </a>
     402
     403        </div>
     404
     405
     406        <div class="footer-column">
     407
     408            <h4>Account</h4>
     409
     410            @if (Context.Session.GetInt32("UserId") != null)
     411            {
     412                <a asp-controller="Account"
     413                   asp-action="Profile">
     414                    My Profile
     415                </a>
     416
     417                <a asp-controller="Order"
     418                   asp-action="Cart">
     419                    My Orders
     420                </a>
     421
     422                <a asp-controller="Wishlist"
     423                   asp-action="Index">
     424                    Wishlist
     425                </a>
     426            }
     427            else
     428            {
     429                <a asp-controller="Account"
     430                   asp-action="Login">
     431                    Login
     432                </a>
     433
     434                <a asp-controller="Account"
     435                   asp-action="Register">
     436                    Register
     437                </a>
     438            }
     439
     440        </div>
     441
     442
     443        <div class="footer-column">
     444
     445            <h4>Help</h4>
     446
     447            <a href="#">
     448                Shipping
     449            </a>
     450
     451            <a href="#">
     452                Returns
     453            </a>
     454
     455            <a href="#">
     456                Contact
     457            </a>
     458
     459        </div>
    498460
    499461    </div>
    500462
    501463
    502     <!-- SHOP -->
    503 
    504     <div class="footer-column">
    505 
    506         <h4>
    507             Shop
    508         </h4>
    509 
    510 
    511         <a asp-controller="Release"
    512            asp-action="Index">
    513 
    514             Releases
    515 
    516         </a>
    517 
    518 
    519         <a asp-controller="Release"
    520            asp-action="Index">
    521 
    522             New Releases
    523 
    524         </a>
    525 
    526 
    527         <a asp-controller="Artist"
    528            asp-action="Index">
    529 
    530             Artists
    531 
    532         </a>
     464    <div class="footer-bottom">
     465
     466        <span>
     467            © @DateTime.Now.Year Kernel Records
     468        </span>
     469
     470        <span>
     471            All rights reserved.
     472        </span>
    533473
    534474    </div>
    535475
    536 
    537     <!-- ACCOUNT -->
    538 
    539     <div class="footer-column">
    540 
    541         <h4>
    542             Account
    543         </h4>
    544 
    545 
    546         @if (Context.Session.GetInt32("UserId") != null)
    547         {
    548 
    549             <a asp-controller="Account"
    550                asp-action="Profile">
    551 
    552                 My Profile
    553 
    554             </a>
    555 
    556 
    557             <a asp-controller="Order"
    558                asp-action="Cart">
    559 
    560                 My Orders
    561 
    562             </a>
    563 
    564 
    565             <a asp-controller="Wishlist"
    566                asp-action="Index">
    567 
    568                 Wishlist
    569 
    570             </a>
    571 
    572         }
    573         else
    574         {
    575 
    576             <a asp-controller="Account"
    577                asp-action="Login">
    578 
    579                 Login
    580 
    581             </a>
    582 
    583 
    584             <a asp-controller="Account"
    585                asp-action="Register">
    586 
    587                 Register
    588 
    589             </a>
    590 
    591         }
    592 
    593     </div>
    594 
    595 
    596     <!-- HELP -->
    597 
    598     <div class="footer-column">
    599 
    600         <h4>
    601             Help
    602         </h4>
    603 
    604         <a href="#">
    605             Shipping
    606         </a>
    607 
    608         <a href="#">
    609             Returns
    610         </a>
    611 
    612         <a href="#">
    613             Contact
    614         </a>
    615 
    616     </div>
    617 
    618 </div>
    619 
    620 
    621 <!-- FOOTER BOTTOM -->
    622 
    623 <div class="footer-bottom">
    624 
    625     <span>
    626         © @DateTime.Now.Year Kernel Records
    627     </span>
    628 
    629     <span>
    630         All rights reserved.
    631     </span>
    632 
    633 </div>
    634 
    635 
    636476</footer>
     477
    637478
    638479<!-- =========================================================
    … …  
    641482
    642483<script>
    643 
    644484    function toggleMobileMenu()
    645485    {
    … …  
    650490    }
    651491
    652 
    653     // Close mobile menu when clicking outside
    654 
    655492    document.addEventListener("click", function (event)
    656493    {
    … …  
    661498            document.querySelector(".mobile-menu-button");
    662499
     500        if (!menu || !button)
     501            return;
    663502
    664503        if (!menu.contains(event.target) &&
    … …  
    667506            menu.classList.remove("mobile-open");
    668507        }
    669 
    670508    });
    671 
    672509</script>
    673510
    674511@await RenderSectionAsync(
    675 "Scripts",
    676 required: false)
     512    "Scripts",
     513    required: false)
    677514
    678515</body>
Note: See TracChangeset for help on using the changeset viewer.