sticky topnav updates for latest PR feedback

lichess-org · Mar 17, 2024 · 22b3470 · 22b3470
1 parent 1a37cfd
commit 22b3470
Show file tree

Hide file tree

Showing 32 changed files with 413 additions and 142 deletions.
diff --git a/app/views/base/layout.scala b/app/views/base/layout.scala
@@ -121,6 +121,14 @@ object layout:
       div(id := "dasher_app", cls := "dropdown")
     )
 
+  private def anonDasher(using ctx: PageContext) =
+    val prefs = trans.preferences.preferences.txt()
+    div(cls := "dasher")(
+      a(href := s"${routes.Auth.login.url}?referrer=${ctx.req.path}", cls := "signin")(trans.signIn.txt()),
+      button(cls := "toggle anon link", title := prefs, aria.label := prefs, dataIcon := licon.Gear),
+      div(id     := "dasher_app", cls         := "dropdown")
+    )
+
   private def allNotifications(using ctx: PageContext) =
     val challengeTitle = trans.challenge.challengesX.txt(ctx.nbChallenges)
     val notifTitle     = trans.notificationsX.txt(ctx.nbNotifications.value)
@@ -138,17 +146,6 @@ object layout:
   <div id="notify-app" class="dropdown"></div>
 </div>"""
 
-  private def anonDasher(using ctx: PageContext) =
-    val preferences = trans.preferences.preferences.txt()
-    spaceless:
-      s"""<div class="dasher">
-  <button class="toggle link anon">
-    <span title="$preferences" aria-label="$preferences" data-icon="${licon.Gear}"></span>
-  </button>
-  <div id="dasher_app" class="dropdown"></div>
-</div>
-<a href="/login?referrer=${ctx.req.path}" class="signin button button-empty">${trans.signIn.txt()}</a>"""
-
   private val clinputLink = a(cls := "link")(span(dataIcon := licon.Search))
 
   private def clinput(using ctx: PageContext) =
@@ -423,22 +420,23 @@ object layout:
       header(id := "top")(
         div(cls := "site-title-nav")(
           (!ctx.isAppealUser).option(topnavToggle),
-          h1(cls := "site-title")(
+          a(cls := "site-title", href := langHref("/"))(
             if ctx.kid.yes then span(title := trans.kidMode.txt(), cls := "kiddo")(":)")
             else ctx.isBot.option(botImage),
-            a(href := langHref("/"))(siteNameFrag)
+            div(cls := "site-icon", dataIcon := licon.Logo),
+            div(cls := "site-name")(siteNameFrag)
           ),
-          ctx.blind.option(h2("Navigation")),
           (!ctx.isAppealUser).option(
             frag(
               topnav(),
-              (ctx.kid.no && ctx.me.exists(!_.isPatron) && !zenable).option(
+              (ctx.kid.no && !ctx.me.exists(_.isPatron) && !zenable).option(
                 a(cls := "site-title-nav__donate")(
                   href := routes.Plan.index
                 )(trans.patron.donate())
               )
             )
-          )
+          ),
+          ctx.blind.option(h2("Navigation"))
         ),
         div(cls := "site-buttons")(
           warnNoAutoplay,

diff --git a/modules/common/src/main/Licon.scala b/modules/common/src/main/Licon.scala
@@ -135,3 +135,5 @@ object licon:
   val Move: Icon            = "" // e075
   val OneHalf: Icon         = "" // e076
   val Mute: Icon            = "" // e077
+  val AccountCircle: Icon   = "" // e078
+  val Logo: Icon            = "" // e079
diff --git a/public/font/lichess.sfd b/public/font/lichess.sfd
@@ -21,7 +21,7 @@ OS2Version: 3
 OS2_WeightWidthSlopeOnly: 0
 OS2_UseTypoMetrics: 0
 CreationTime: 1554434404
-ModificationTime: 1709542054
+ModificationTime: 1707797129
 PfmFamily: 17
 TTFWeight: 400
 TTFWidth: 5
@@ -87,8 +87,8 @@ NameList: AGL For New Fonts
 DisplaySize: -128
 AntiAlias: 1
 FitToEm: 0
-WinInfo: 57302 14 14
-BeginChars: 65539 123
+WinInfo: 57402 9 8
+BeginChars: 65539 125
 
 StartChar: .notdef
 Encoding: 65536 -1 0
@@ -2612,13 +2612,14 @@ SplineSet
  395 283 l 2,21,22
  405 273 405 273 405 257 c 0,0,1
 EndSplineSet
+Validated: 513
 EndChar
 
 StartChar: less-than
 Encoding: 57404 57404 41
 Width: 512
 GlyphClass: 2
-Flags: WO
+Flags: W
 LayerCount: 2
 Fore
 SplineSet
@@ -2640,6 +2641,7 @@ SplineSet
  344 35 344 35 329 35 c 128,-1,22
  314 35 314 35 303 46 c 2,0,-1
 EndSplineSet
+Validated: 513
 EndChar
 
 StartChar: disc-big
@@ -5457,42 +5459,41 @@ StartChar: search
 Encoding: 57452 57452 89
 Width: 512
 GlyphClass: 2
-Flags: W
+Flags: WO
 LayerCount: 2
 Fore
 SplineSet
-347 274 m 0,0,1
- 347 328 347 328 310 365 c 128,-1,2
- 273 402 273 402 219 402 c 0,3,4
- 166 402 166 402 129 365 c 0,5,6
- 91 327 91 327 91 274 c 0,7,8
- 91 222 91 222 129 184 c 128,-1,9
- 167 146 167 146 219 146 c 0,10,11
- 272 146 272 146 310 184 c 0,12,13
- 347 221 347 221 347 274 c 0,0,1
-494 37 m 0,14,15
- 494 22 494 22 483 11 c 128,-1,16
- 472 0 472 0 457 0 c 128,-1,17
- 442 0 442 0 431 11 c 2,18,-1
- 333 109 l 1,19,20
- 282 73 282 73 219 73 c 0,21,22
- 177 73 177 73 141 89 c 0,23,24
- 104 105 104 105 77 132 c 0,25,26
- 50 158 50 158 34 196 c 0,27,28
- 18 236 18 236 18 274 c 0,29,30
- 18 314 18 314 34 352 c 0,31,32
- 51 391 51 391 77 417 c 128,-1,33
- 103 443 103 443 141 460 c 0,34,35
- 178 475 178 475 219 475 c 256,36,37
- 260 475 260 475 298 460 c 0,38,39
- 337 442 337 442 362 417 c 0,40,41
- 388 391 388 391 405 352 c 0,42,43
- 421 314 421 314 421 274 c 0,44,45
- 421 211 421 211 385 160 c 1,46,-1
- 483 62 l 2,47,48
- 494 51 494 51 494 37 c 0,14,15
+363.8671875 297.895507812 m 0,0,1
+ 363.8671875 358.111328125 363.8671875 358.111328125 322.606445312 399.368164062 c 128,-1,2
+ 281.350585938 440.62890625 281.350585938 440.62890625 221.1328125 440.62890625 c 0,3,4
+ 162.033203125 440.62890625 162.033203125 440.62890625 120.7734375 399.368164062 c 0,5,6
+ 78.3994140625 356.995117188 78.3994140625 356.995117188 78.3994140625 297.895507812 c 0,7,8
+ 78.3994140625 239.911132812 78.3994140625 239.911132812 120.7734375 197.534179688 c 128,-1,9
+ 163.1484375 155.161132812 163.1484375 155.161132812 221.1328125 155.161132812 c 0,10,11
+ 280.234375 155.161132812 280.234375 155.161132812 322.606445312 197.534179688 c 0,12,13
+ 363.8671875 238.794921875 363.8671875 238.794921875 363.8671875 297.895507812 c 0,0,1
+492.274414062 62.5625 m 0,14,15
+ 492 48 492 48 481.909179688 38.0625 c 128,-1,16
+ 472 28 472 28 457.408203125 27.6962890625 c 0,17,18
+ 442.970168472 28.0006288197 442.970168472 28.0006288197 432.908203125 38.0625 c 2,19,-1
+ 328.559570312 142.41015625 l 1,20,21
+ 282 109 282 109 221.1328125 108.486328125 c 0,22,23
+ 182 108 182 108 147.631835938 123.563476562 c 0,24,25
+ 113 139 113 139 87.3232421875 164.083984375 c 0,26,27
+ 60 191 60 191 46.802734375 224.393554688 c 0,28,29
+ 32 262 32 262 31.7255859375 297.895507812 c 0,30,31
+ 32 336 32 336 46.802734375 371.396484375 c 0,32,33
+ 63 408 63 408 87.3232421875 432.6484375 c 0,34,35
+ 115 460 115 460 147.631835938 473.168945312 c 0,36,37
+ 182 487 182 487 221.1328125 487.303710938 c 256,38,39
+ 263 487 263 487 295.577148438 473.168945312 c 0,40,41
+ 330 458 330 458 355.887695312 432.6484375 c 0,42,43
+ 382 406 382 406 396.407226562 371.396484375 c 0,44,45
+ 411 336 411 336 411.484375 297.895507812 c 0,46,47
+ 411 239 411 239 377.560546875 190.469726562 c 1,48,-1
+ 481.909179688 86.12109375 l 2,49,50
+ 492 76 492 76 492.274414062 62.5625 c 0,14,15
 EndSplineSet
-Validated: 513
 EndChar
 
 StartChar: forward
@@ -7509,5 +7510,117 @@ SplineSet
  475 303 475 303 475 256 c 128,-1,1
 EndSplineSet
 EndChar
+
+StartChar: account-circle
+Encoding: 57464 57464 123
+Width: 512
+Flags: W
+LayerCount: 2
+Fore
+SplineSet
+191.587890625 318.44921875 m 132,-1,1
+ 191.587890625 345.430664062 191.587890625 345.430664062 210.666015625 364.508789062 c 132,-1,2
+ 229.744140625 383.586914062 229.744140625 383.586914062 256.7265625 383.586914062 c 132,-1,3
+ 283.706054688 383.586914062 283.706054688 383.586914062 302.784179688 364.508789062 c 132,-1,4
+ 321.862304688 345.430664062 321.862304688 345.430664062 321.862304688 318.44921875 c 132,-1,5
+ 321.862304688 291.46875 321.862304688 291.46875 302.784179688 272.390625 c 132,-1,6
+ 283.706054688 253.3125 283.706054688 253.3125 256.7265625 253.3125 c 132,-1,7
+ 229.744140625 253.3125 229.744140625 253.3125 210.666015625 272.390625 c 132,-1,0
+ 191.587890625 291.46875 191.587890625 291.46875 191.587890625 318.44921875 c 132,-1,1
+307.3046875 241.509765625 m 0,8,9
+ 308 242 308 242 321.013671875 233.077148438 c 0,10,11
+ 333 226 333 226 336.963867188 222.762695312 c 0,12,13
+ 341 220 341 220 350.873046875 212.11328125 c 0,14,15
+ 361 204 361 204 365.239257812 197.948242188 c 0,16,17
+ 375 186 375 186 375.333007812 185.126953125 c 0,18,19
+ 383 172 383 172 383.653320312 169.469726562 c 0,20,21
+ 386 158 386 158 385.919921875 145.525390625 c 1,22,-1
+ 355 121 l 0,23,24
+ 355 121 355 121 301 97 c 0,25,26
+ 301 97 301 97 256 91 c 1,27,-1
+ 210 97 l 0,28,29
+ 210 97 210 97 167 115 c 0,30,31
+ 167 115 167 115 127.530273438 145.525390625 c 1,32,33
+ 128.080021608 165.976936907 128.080021608 165.976936907 129.80078125 169.471679688 c 0,34,35
+ 133 177 133 177 138.119140625 185.126953125 c 0,36,37
+ 139.700242243 189.087634918 139.700242243 189.087634918 148.219726562 197.948242188 c 0,38,39
+ 156 205 156 205 162.583984375 212.11328125 c 0,40,41
+ 173 220 173 220 176.495117188 222.764648438 c 0,42,43
+ 180 226 180 226 192.440429688 233.077148438 c 0,44,45
+ 206 242 206 242 206.149414062 241.509765625 c 0,46,47
+ 243 226 243 226 256.7265625 226.619140625 c 0,48,49
+ 290 229 290 229 307.3046875 241.509765625 c 0,8,9
+255.307617188 451.638671875 m 0,50,51
+ 202 452 202 452 156.487304688 425.116210938 c 0,52,53
+ 112 399 112 399 85.90625 354.551757812 c 0,54,55
+ 59 309 59 309 59.361328125 255.61328125 c 0,56,57
+ 59 202 59 202 85.8779296875 156.830078125 c 0,58,59
+ 112 112 112 112 156.451171875 86.2373046875 c 0,60,61
+ 202 60 202 60 255.384765625 59.6943359375 c 0,62,63
+ 309 60 309 60 354.170898438 86.2119140625 c 0,64,65
+ 399 112 399 112 424.762695312 156.784179688 c 0,66,67
+ 451 202 451 202 451.305664062 255.719726562 c 0,68,69
+ 451 309 451 309 424.788085938 354.504882812 c 0,70,71
+ 399 399 399 399 354.19140625 425.110351562 c 0,72,73
+ 309 452 309 452 255.307617188 451.638671875 c 0,50,51
+256.362758049 479.890625 m 128,-1,75
+ 317.209960938 479.890625 317.209960938 479.890625 369.427369406 449.546669437 c 0,76,77
+ 420.521484375 419.85546875 420.521484375 419.85546875 450.186767035 368.806785212 c 0,78,79
+ 480.557617188 316.543945312 480.557617188 316.543945312 480.557617188 255.606266778 c 128,-1,80
+ 480.557617188 194.790039062 480.557617188 194.790039062 450.218012035 142.58096626 c 0,81,82
+ 420.521484375 91.478515625 420.521484375 91.478515625 369.470294112 61.8117762635 c 0,83,84
+ 317.209960938 31.4423828125 317.209960938 31.4423828125 256.273100817 31.4423828125 c 128,-1,85
+ 195.456054688 31.4423828125 195.456054688 31.4423828125 143.246974178 61.781992444 c 0,86,87
+ 92.14453125 91.478515625 92.14453125 91.478515625 62.4780524979 142.530087843 c 0,88,89
+ 32.109375 194.790039062 32.109375 194.790039062 32.109375 255.726405208 c 128,-1,90
+ 32.109375 316.543945312 32.109375 316.543945312 62.4494392854 368.753314682 c 0,91,92
+ 92.1455078125 419.854492188 92.1455078125 419.854492188 143.222454993 449.536479916 c 0,93,74
+ 195.456054688 479.890625 195.456054688 479.890625 256.362758049 479.890625 c 128,-1,75
+EndSplineSet
+EndChar
+
+StartChar: logo
+Encoding: 57465 57465 124
+Width: 512
+Flags: W
+LayerCount: 2
+Fore
+SplineSet
+234.564453125 360.79296875 m 4,0,1
+ 233.342773438 354.517578125 233.342773438 354.517578125 233.342773438 351.731445312 c 4,2,3
+ 233.342773438 323.291015625 233.342773438 323.291015625 316.509765625 263.745117188 c 132,-1,4
+ 399.677734375 204.19921875 399.677734375 204.19921875 416.55078125 170.764648438 c 4,5,6
+ 447.163085938 179.071289062 447.163085938 179.071289062 451.126953125 213.532226562 c 6,7,8
+ 451.126953125 213.532226562 451.126953125 213.532226562 337.862304688 403.340820312 c 6,9,10
+ 335.717773438 406.944335938 335.717773438 406.944335938 347.477539062 440.685546875 c 5,11,12
+ 333.178710938 436.63671875 333.178710938 436.63671875 296.474609375 415.223632812 c 4,13,14
+ 293.640625 413.568359375 293.640625 413.568359375 282.456054688 415.373046875 c 4,15,16
+ 262.638671875 418.572265625 262.638671875 418.572265625 244.329101562 418.572265625 c 4,17,18
+ 159.837890625 418.572265625 159.837890625 418.572265625 110.922851562 362.500976562 c 132,-1,19
+ 62.0087890625 306.430664062 62.0087890625 306.430664062 62.0087890625 242.7734375 c 4,20,21
+ 62.0087890625 167.692382812 62.0087890625 167.692382812 119.903320312 110.987304688 c 132,-1,22
+ 177.797851562 54.283203125 177.797851562 54.283203125 259.516601562 54.283203125 c 4,23,24
+ 300.270507812 54.283203125 300.270507812 54.283203125 333.65625 69.298828125 c 132,-1,25
+ 367.041992188 84.3154296875 367.041992188 84.3154296875 384.185546875 99.3310546875 c 132,-1,26
+ 401.329101562 114.34765625 401.329101562 114.34765625 402.637695312 114.34765625 c 5,27,28
+ 374.916992188 39.7509765625 374.916992188 39.7509765625 256.879882812 26.2900390625 c 4,29,30
+ 164.747070312 26.2900390625 164.747070312 26.2900390625 95.470703125 87.1708984375 c 132,-1,31
+ 26.193359375 148.051757812 26.193359375 148.051757812 26.193359375 242.360351562 c 4,32,33
+ 26.193359375 331.78125 26.193359375 331.78125 91.69140625 399.500976562 c 132,-1,34
+ 157.190429688 467.220703125 157.190429688 467.220703125 295.094726562 458.483398438 c 4,35,36
+ 308.6015625 467.890625 308.6015625 467.890625 331.690429688 475.840820312 c 132,-1,37
+ 354.779296875 483.791015625 354.779296875 483.791015625 371.561523438 484.672851562 c 132,-1,38
+ 388.34375 485.5546875 388.34375 485.5546875 390.280273438 476.149414062 c 4,39,40
+ 390.280273438 475.103515625 390.280273438 475.103515625 376.833007812 417.4296875 c 5,41,42
+ 376.833007812 417.4296875 376.833007812 417.4296875 482.512695312 225.705078125 c 6,43,44
+ 493.880859375 205.080078125 493.880859375 205.080078125 473.04296875 174.091796875 c 132,-1,45
+ 452.205078125 143.103515625 452.205078125 143.103515625 406.399414062 132.321289062 c 4,46,47
+ 401.401367188 130.991210938 401.401367188 130.991210938 391.509765625 144.359375 c 4,48,49
+ 362.5859375 183.447265625 362.5859375 183.447265625 316.25 219.227539062 c 4,50,51
+ 214.604492188 297.696289062 214.604492188 297.696289062 214.604492188 346.791992188 c 4,52,53
+ 214.604492188 367.096679688 214.604492188 367.096679688 223.119140625 369.756835938 c 4,54,55
+ 234.564453125 373.333984375 234.564453125 373.333984375 234.564453125 360.79296875 c 4,0,1
+EndSplineSet
+EndChar
 EndChars
 EndSplineFont
diff --git a/public/font/lichess.ttf b/public/font/lichess.ttf
diff --git a/public/font/lichess.woff b/public/font/lichess.woff
diff --git a/public/font/lichess.woff2 b/public/font/lichess.woff2
diff --git a/ui/.build/src/clean.ts b/ui/.build/src/clean.ts
@@ -20,7 +20,7 @@ export async function clean() {
     'public/npm',
     'public/css/*.css*',
   ];
-  if (env.cleanTheme) globs.push('**/css/build/gen'); // will blow away mod.inquiry.scss
+  if (env.cleanTheme) globs.push('**/css/build/gen');
 
   for (const glob of globs) {
     env.log(`Cleaning '${c.cyan(glob)}'...`);

diff --git a/ui/common/css/abstract/_all.scss b/ui/common/css/abstract/_all.scss
@@ -1,7 +1,7 @@
 @import 'functions';
 @import 'z-index';
-@import 'media-queries';
 @import 'variables';
+@import 'media-queries';
 @import 'licon';
 @import 'uniboard';
 @import 'mixins';

diff --git a/ui/common/css/abstract/_extends.scss b/ui/common/css/abstract/_extends.scss
@@ -250,8 +250,8 @@
   position: fixed;
   top: 0;
   #{$start-direction}: 0;
-  bottom: 0;
-  #{$end-direction}: 0;
+  width: 100vw; // escape from bounding box of any fixed position parent
+  height: 100vh;
   background: $c-page-mask;
   z-index: z('fullscreen-mask');
 }

diff --git a/ui/common/css/abstract/_licon.scss b/ui/common/css/abstract/_licon.scss
@@ -130,3 +130,5 @@ $licon-Mask: ''; // e074
 $licon-Move: ''; // e075
 $licon-OneHalf: ''; // e076
 $licon-Mute: ''; // e077
+$licon-AccountCircle: ''; // e078
+$licon-Logo: ''; // e079
diff --git a/ui/common/css/abstract/_mixins.scss b/ui/common/css/abstract/_mixins.scss
@@ -86,6 +86,31 @@
   -webkit-backdrop-filter: blur($size);
 }
 
+@mixin topnav-unsticky {
+  #top {
+    position: relative;
+    max-width: 1800px;
+    top: unset;
+    padding: 0;
+    width: unset;
+    background: unset;
+    border-bottom: unset;
+    transform: unset;
+    --site-header-sticky-padding: 0px;
+
+    #topnav,
+    .dropdown {
+      opacity: unset;
+      visibility: unset;
+      pointer-events: unset;
+      transition: unset;
+    }
+  }
+  #main-wrap {
+    margin-top: $site-header-margin;
+  }
+}
+
 @mixin broken-img($aspect-ratio) {
   display: block;
   position: relative;