SoylentNews

New Wikipedia Layout Released

posted by janrinok on Monday January 23 2023, @10:57AM   
from the we-need-more-whitespace dept.

tangomargarine writes:

Wikipedia has released their new layout, which unsurprisingly includes whitespace bars on either side, justified by the claim "most people prefer a column 60-80 characters wide" (although it's not that extreme).

The changes being introduced are not very dramatic — in fact, they may not even be immediately noticed by some users. The organization, however, says the update was necessary in order to meet the needs of the next generation of internet users, including those who are more newly coming online and may have less familiarity with the internet.

To develop the new interface, the foundation engaged with more than 30 different volunteer groups from around the world, with users in places like India, Indonesia, Ghana and Argentina, among others, all helping to test the update and provide insights into the product development. The goal for the update was to make Wikipedia more of a modern web platform, it said, and to remove clutter, while also making it easier for users to contribute. It additionally aimed to make the desktop web version more consistent with Wikipedia's mobile counterpart.

It is possible to go back to the old layout, if you log in to the site and set it in your preferences.

---

Original Submission

• Version 2.1 (Score: 0) by Anonymous Coward on Tuesday January 24 2023, @10:41PM

  by Anonymous Coward on Tuesday January 24 2023, @10:41PM (#1288444)

  And Version 2.1 fixes the layout for pages that have no table of contents. I'm getting bored of this so not sure how many more updates there will be. I might be persuaded to post more if someone tells me they're actually using this script.

  *SPOILER* (click to show) *SPOILER* (click to hide)

  // ==UserScript==
  // @name        Wikipedia
  // @namespace   soylentnews_greasemonkey
  // @description De-yuckify the 2023 Wikipedia overhaul
  // @include     https://en.wikipedia.org/wiki/*
  // @version     2.1
  // @grant       GM_addStyle
  // @grant       GM_getResourceText
  // @grant       GM_getResourceURL
  // ==/UserScript==

  //--- Add some custom style tweaks.
  GM_addStyle ( '                 \
      div.mw-page-container {     \
          min-width: 100% !important; \
      }                           \
  ' );

  GM_addStyle ( '                 \
      div.mw-content-container {     \
          min-width: 100% !important; \
          width: 100% !important; \
          max-width: 100% !important; \
      }                           \
  ' );

  GM_addStyle ('                \
  #mw-sidebar-button::before {   \
      background-image: none !important; \
      content: "Menu"; \
      color: black;  \
      font-size: 11px; \
      font-stretch: ultra-condensed; \
      overflow: visible !important; \
      display: block !important; \
      #margin-left: -40px !important; \
      left: -6px !important; \
      position: relative !important; \
  }                    \
               ');

  GM_addStyle ('                \
  #mw-sidebar-button: {   \
      overflow: visible !important; \
      #width: 95px !important; \
      min-width: 26px !important; \
      #margin-left: -40px !important; \
  }                    \
               ');

  GM_addStyle ('                \
  .mu-ui-icon: {   \
      overflow: visible !important; \
  }                    \
               ');

  GM_addStyle ('  \
  .vector-search-box > div {  \
      max-width: 100% !important; \
  }                               \
               ');

  GM_addStyle ('  \
  .vector-search-box-inner {  \
      float: right !important; \
      min-width: 284px;        \
  }                            \
               ');

  GM_addStyle (' \
  #mw-panel-toc, \
  #vector-toc, \
  .vector-main-menu-container, \
  .mw-table-of-contents-container { \
      max-width: 168px !important; \
  } \
               ');

  GM_addStyle (' \
  .mw-page-container { \
  padding-left: 28px !important; \
  padding-right: 28px !important; \
  max-width: 100% !important; \
               } \
               ');

  if (window.location.href.indexOf('Main_Page') < 0)
  {
  var navNode = document.getElementById('mw-navigation');
  var navContainer = navNode.parentNode;
  if (navContainer.getAttribute('class').indexOf('vector-sidebar-container-no-toc') >= 0)
  {
  GM_addStyle (' \
  .mw-body { \
  position: relative; \
  padding-bottom: 24px; \
  padding-left: 24px; \
  padding-right: 24px; \
  padding-top: 20px; \
               } \
               ');
  }
  else
  {
  GM_addStyle (' \
  .mw-body { \
  position: relative; \
  left: -68px; \
  margin-right: -68px; \
  padding-bottom: 24px; \
  padding-left: 24px; \
  padding-right: 24px; \
  padding-top: 20px; \
               } \
               ');
  }

  GM_addStyle (' \
  .mw-body { \
      margin-top: -1px; \
      border: 1px solid #a7d7f9; \
      border-right-width: 0; \
      background-color: rgb(255, 255, 255); \
  } \
  .mw-page-container, .vector-toc { \
  background-color: inherit !important; \
               } \
               ');

  GM_addStyle (' \
  body { \
  background-color: rgb(246, 246, 246); \
  } \
               ');

  GM_addStyle (' \
  #p-logo a { \
      background-position: center center; \
      background-repeat: no-repeat; \
      display: block; \
      width: 10em; \
      height: 160px; \
      text-decoration: none; \
  } \
  .mw-wiki-logo { \
      background-image: url(/static/images/project-logos/enwiki.png); \
  } \
  .mw-logo { \
  display: none !important; \
  height: 1px !important; \
  } \
  .vector-header-start { \
  height: 50px; \
               } \
               ');

  GM_addStyle (' \
  #mw-panel-toc { \
  margin-top: -48px; \
  } \
  #vector-main-menu, #vector-toc { \
  margin-top: 75px;}  \
  #mw-sidebar-button { \
  position: relative; \
  left: 185px; \
  top: 8px; \
  } \
               ');

  if (navContainer.getAttribute('class').indexOf('vector-sidebar-container-no-toc') >= 0)
  {
  //Add the old logo to the top when there's no table of contents
  var logoNode         = document.createElement ('div');
  logoNode.id = 'logo-container';
  logoNode.style.cssText = 'width: 135px; height: 155px; display: block; position: relative; top: 5px; left: -30px;';
  logoNode.innerHTML   = '             \
  <div id="p-logo" role="banner">       \
          <a class="mw-wiki-logo" style="background-image: url(/static/images/project-logos/enwiki.png); width: 135px; height: 155px; background-size: 80px; display: block;" href="/wiki/Main_Page" title="Visit the main page"></a> \
      </div> \
  ';
  }
  else
  {
  //Add the old, big logo to the top of the left sidebar
  var logoNode         = document.createElement ('div');
  logoNode.id = 'logo-container';
  logoNode.style.cssText = 'width: 135px; height: 155px; display: block; position: relative; top: 50px; left: -30px;';
  logoNode.innerHTML   = '             \
  <div id="p-logo" role="banner">       \
          <a class="mw-wiki-logo" style="background-image: url(/static/images/project-logos/enwiki.png); width: 135px; height: 155px; display: block;" href="/wiki/Main_Page" title="Visit the main page"></a> \
      </div> \
  ';
  }

  var menuButtonNode = document.getElementById('mw-sidebar-button');
  var headerStartNode = menuButtonNode.parentNode;
  headerStartNode.insertBefore(logoNode, menuButtonNode.nextElementSibling);
  }

  Parent