AtCoder Navbar Restrictor

restricts navbar width

As of 2024-07-27. See the latest version.

  1. // ==UserScript==
  2. // @name AtCoder Navbar Restrictor
  3. // @namespace https://twitter.com/KakurenboUni
  4. // @version 0.0.1
  5. // @description restricts navbar width
  6. // @author uni_kakurenbo
  7. // @match https://atcoder.jp/contests/**
  8. // @license MIT
  9. // @supportURL https://twitter.com/KakurenboUni
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. 'use strict';
  14.  
  15. const $navbar =document.getElementById("navbar-collapse");
  16.  
  17. if(!$navbar) return;
  18.  
  19.  
  20. const $contestTitle = document.getElementsByClassName("contest-title")[0];
  21.  
  22. $contestTitle.style["text-overflow"] = "ellipsis"
  23. $contestTitle.style["text-wrap"] = "nowrap"
  24. $contestTitle.style["overflow-x"] = "clip"
  25.  
  26. const observer = new ResizeObserver(() => {
  27. const $navbarBrand = document.getElementsByClassName("navbar-brand")[0];
  28. const $navbarRight = document.getElementsByClassName("navbar-right")[0];
  29.  
  30. if(!$navbarBrand || !$navbarRight) return;
  31.  
  32. const width = $navbar.offsetWidth - ($navbarRight.offsetWidth + $navbarBrand.offsetWidth);
  33.  
  34. Array.from(document.getElementsByClassName("contest-title")).forEach(($e) => {
  35. $contestTitle.style["max-width"] = `${width}px`;
  36. })
  37. });
  38.  
  39. observer.observe($navbar);
  40. })();