Added small UI tweaks

index.html

@@ -94,7 +94,7 @@
         'Dark': 'Sötét',
         'Dark with bright map': 'Sötét, világos térképpel'
       },
-      'updateDate': 'Az útvonal legutóbbi felderítésének ideje.',
+      'updateDate': 'Az útvonal legutóbbi felderítésének ideje',
       'rating': 'Az útvonal értékelése vezethetőség, változatosság, izgalom szempontjaiból.',
       'navToPoi': ' Navigáció <span class="nav-start">ehhez a helyhez</span>.',
       'sharePoi': 'Hely <span class="share">megosztása</span>.',
@@ -149,7 +149,7 @@
       const future = initMenu('huroutes-tab', `
         <ul id="navbarSocial" class="navbar-nav mt-5 mt-sm-0 ms-sm-auto py-sm-2 pe-sm-3">
           <li class="nav-item">
-            <a href="https://github.com/Sp3EdeR/huroutes" target="_blank" rel="noopener noreferrer" class="social-ico" title="Github"><i class="fa-brands fa-github"></i></a>
+            <a href="https://github.com/Sp3EdeR/huroutes" target="_blank" rel="noopener noreferrer" class="social-ico" title="GitHub"><i class="fa-brands fa-github"></i></a>
             <div class="language-select d-inline-block position-relative overflow-visible mx-2">
               <a href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false" title="Nyelv kiválasztása"></a>
               <div class="dropdown-menu dropdown-menu-end position-absolute p-2"><!-- Filled up by Javascript --></div>
@@ -165,9 +165,9 @@
     <div id="main-content" class="flex-fill position-relative w-100">
       <!-- The sidebar panel -->
       <nav id="sidebar" class="sidebar d-block position-absolute top-0 h-100 col-11 col-md-4 col-xl-3 overflow-x-hidden">
-        <div class="sidebar-header">
+        <div class="sidebar-header my-2">
           <div class="options-button d-block text-end px-3"><a href="#" data-bs-toggle="modal" data-bs-target="#options-dialog"><span class="fa-solid fa-gear" title="Beállítások"></span></a></div>
-          <p class="text-center my-2">huroutes: magyar utak vezetésre</p>
+          <p class="text-center text-truncate my-2">huroutes: magyar utak vezetésre</p>
         </div>
         <div id="menubox" class="menubox border-top border-bottom"></div>
         <div class="contrib p-2" style="font-size: 0.8em;">

res/huroutes.css

@@ -10,13 +10,19 @@
 .huroutes-light, .huroutes-light #sidebar {
   background: #fff;
 }
-.huroutes-dark, .huroutes-dark #menu, .huroutes-dark #sidebar, .huroutes-dark .modal-content {
+.huroutes-dark, .huroutes-dark #sidebar, .huroutes-dark .modal-content {
   background: #13192e;
   background:
     linear-gradient(90deg,#00000000 93%, #00000034 99%),
     linear-gradient(80deg, #13192e00 60%, #070c149d 100%),
     linear-gradient(0deg, #13192e, #152a33, #0f1926);
 }
+.huroutes-dark #menu {
+  background: #13192e;
+  background:
+    linear-gradient(67deg,#0f1926 0%, #0f1825 100%),
+    linear-gradient(192deg,#080e16 0%, #0f182500 100%);
+}
 
 p {
   margin: 0 0 10px;
@@ -243,18 +249,8 @@ ul ul ul ul ul a.dropdown-toggle {
 .route-header {
   font-size: 1.1em;
 }
-.route-header::after {
-  clear: both;
-  content: "";
-  display: table;
-}
-
-.update-date {
-  float: left;
-}
 
 .stars-outer {
-  float: right;
   position: relative;
 }
 .stars-inner {

res/huroutes.js

@@ -590,28 +590,28 @@ function createInfoPanel(elem, data)
     // Creating the route heading with rating and date
     if (data.rat || data.upd)
     {
-        let elemHeader = $('<p class="route-header"/>');
+        let elemHeader = $('<p class="route-header d-flex flex-nowrap"/>');
         if (data.upd)
         {
             let eUpd = $('\
-<span class="update-date" title="{0}">\
+<span class="update-date text-truncate d-inline-block flex-grow-1" title="{0}: {1}">\
     <i class="fa-regular fa-clock"></i> {1}\
 </span>'.format(langDict.updateDate, data.upd)).initTooltip();
             elemHeader.append(eUpd);
         }
         if (data.rat)
         {
-            let starsOutter = $('<span class="stars-outer" title="{0}"/>'.format(
+            let starsOuter = $('<span class="stars-outer flex-shrink-0" title="{0}"/>'.format(
                 langDict.rating
             )).initTooltip();
             for (let i = 0; i < 5; ++i)
-                starsOutter.append($('<i class="fa-regular fa-star"></i>'));
+                starsOuter.append($('<i class="fa-regular fa-star"></i>'));
             let rating = normRating(data.rat);
             let starsInner = $('<span class="stars-inner" style="width:{0};" />'.format(rating * 10 + '%'));
             for (let i = 0; i < 5; ++i)
                 starsInner.append($('<i class="fa-solid fa-star"></i>'));
-            starsOutter.append(starsInner);
-            elemHeader.append(starsOutter);
+            starsOuter.append(starsInner);
+            elemHeader.append(starsOuter);
         }
         elem.append(elemHeader);
     }