Dolphin Emulator Wiki

MediaWiki talk:Common.css: Difference between revisions

Message Discussion

MediaWiki talk:Common.css (view source)

Revision as of 03:27, 7 February 2022

573 bytes added ,  7 February 2022
m
no edit summary
mNo edit summary
Line 26: Line 26:
::::: Thank you, it is fixed for me. I have CSS and JS knowledge so I could help you with creating dropdown versions of them. I think the viewport check should be dropped eventually to create consistency and can be helpful on long pages for users on limited window size.
::::: Thank you, it is fixed for me. I have CSS and JS knowledge so I could help you with creating dropdown versions of them. I think the viewport check should be dropped eventually to create consistency and can be helpful on long pages for users on limited window size.


<pre>
:::::Update: see [[#JavaScript]]
window.onload = () => {
 
  function ex_sb_tools(){
::::: <s>Pure JS currently targeting "Tools" in the sidebar as the items under Virtual Console is less feasible to capture. The button styling could be tweaked a bit.</s> [[User:Lucario|Lucario]] ([[User talk:Lucario|talk]]) 01:11, 2 February 2022 (CET)
    if(sb_tools_expanded){
      sb_tools_bu.style.webkitTransform = "rotate(45deg)";
      sb_tools_expanded = false;
      col_sb_tools.style.display = "none";
    } else {
      sb_tools_bu.style.webkitTransform = "rotate(225deg)";
      sb_tools_expanded = true;
      col_sb_tools.style.display = "block";
    };
  }
  var sb_tools_expanded = false;
  var sb_tools = document.getElementById("p-tb-label");
  var col_sb_tools = document.getElementById("p-tb").getElementsByTagName("div")[0];
  col_sb_tools.style.display = "none"
  var sb_tools_bu = document.createElement("button");
  sb_tools_bu.style = "background-color:inherit; border:1px solid #666; border-width:0 2px 2px 0; padding:3px; margin-left:16px; position:absolute; -webkit-transform: rotate(45deg);"
  sb_tools_bu.addEventListener ("click", ex_sb_tools, false);
  sb_tools.appendChild(sb_tools_bu);
}
</pre>
::::: Pure JS currently targeting "Tools" in the sidebar as the items under Virtual Console is less feasible to capture. The button styling could be tweaked a bit. [[User:Lucario|Lucario]] ([[User talk:Lucario|talk]]) 01:11, 2 February 2022 (CET)


:::::: I moved away from the collapsible idea because doing that via code on Common.css/Common.js is prone to breaking when the list changes. The "official" way to do that is via the [https://www.mediawiki.org/wiki/Extension:CollapsibleVector CollapsibleVector extension], but that requires server-side access and will probably require updating our MediaWiki install as well (last time this didn't go as smooth as we expected and current MediaWiki versions seems to be incompatible with a few extensions we heavily rely on, like Variables). I'm a bit busy at the moment but what I plan to do is to remove the CSS for the fixed sidebar altogether and dynamically add or remove the <tt>position: fixed</tt> attribute via a resize event listener in Common.js - [[User:mbc07|mbc07]] ([[User talk:mbc07|talk]]) 02:31, 2 February 2022 (CET)
:::::: I moved away from the collapsible idea because doing that via code on Common.css/Common.js is prone to breaking when the list changes. The "official" way to do that is via the [https://www.mediawiki.org/wiki/Extension:CollapsibleVector CollapsibleVector extension], but that requires server-side access and will probably require updating our MediaWiki install as well (last time this didn't go as smooth as we expected and current MediaWiki versions seems to be incompatible with a few extensions we heavily rely on, like Variables). I'm a bit busy at the moment but what I plan to do is to remove the CSS for the fixed sidebar altogether and dynamically add or remove the <tt>position: fixed</tt> attribute via a resize event listener in Common.js - [[User:mbc07|mbc07]] ([[User talk:mbc07|talk]]) 02:31, 2 February 2022 (CET)
Line 59: Line 38:
Deleted comment <pre>/*This doesn't work well on Mobile Firefox, where it causes the menu text to overlap content when horizontal scrolling occurs.*/</pre>
Deleted comment <pre>/*This doesn't work well on Mobile Firefox, where it causes the menu text to overlap content when horizontal scrolling occurs.*/</pre>
<div style="position:relative; width:4000px;">Exactly what it says, it's not exclusive to Firefox app, you can see the same thing on any browser on this page. Here I used the 4000px width div wide enough to stretch the page beyond most monitors. There are several pages with wide contents that can be a problematic for mobile browsers, such as visiting [[Mario Kart Wii]] on mobile browser then expand to see all test entries. (Safari in my case, and surprisingly the updated number for using postition:fixed did not affect my iPhone 12 Mini despite of the small screen, although thankfully there's no sidebar cutoff issue). [[User:Lucario|Lucario]] ([[User talk:Lucario|talk]]) 06:07, 6 February 2022 (CET)</div>
<div style="position:relative; width:4000px;">Exactly what it says, it's not exclusive to Firefox app, you can see the same thing on any browser on this page. Here I used the 4000px width div wide enough to stretch the page beyond most monitors. There are several pages with wide contents that can be a problematic for mobile browsers, such as visiting [[Mario Kart Wii]] on mobile browser then expand to see all test entries. (Safari in my case, and surprisingly the updated number for using postition:fixed did not affect my iPhone 12 Mini despite of the small screen, although thankfully there's no sidebar cutoff issue). [[User:Lucario|Lucario]] ([[User talk:Lucario|talk]]) 06:07, 6 February 2022 (CET)</div>
== JavaScript ==
<pre>
function ex_sb(e, bu){
  if (e.style.display == "block"){
    bu.style.webkitTransform = "rotate(45deg)";
    e.style.display = "none";
  } else {
    bu.style.webkitTransform = "rotate(225deg)";
    e.style.display = "block";
  };
}
function collapsible_obj(sb_obj){
  var sb_label = document.getElementById(sb_obj + "-label");
  if (sb_label) {
    var obj = document.getElementById(sb_obj).getElementsByTagName("div")[0];
    obj.style.display = "none"
    var sb_bu = document.createElement("div");
    sb_bu.style = "display:inline-block; border:1px solid #666; border-width:0 2px 2px 0; padding:3px; margin-left:16px; position:absolute; -webkit-transform: rotate(45deg);"
    function ex_sb_obj(){
      ex_sb(obj, sb_bu);
    }
    sb_label.addEventListener ("click", ex_sb_obj, false);
    sb_label.appendChild(sb_bu);
  };
}
function collapsible_sidebar(){
  collapsible_obj("p-Tutorials");
  collapsible_obj("p-tb");
}
window.onload = () => {
  collapsible_sidebar();
}
</pre>
If you aren't working on it already [[User:mbc07|mbc07]], I updated JavaScript and the button is better now. Currently targeting "Tools" and "Tutorials" but indeed it would be good to also target Virtual Console to collapse systems too but not my priority. Please be sure to make the button not too close to the hyperlinked text or it'll be a problem for mobile users. [[User:Lucario|Lucario]] ([[User talk:Lucario|talk]]) 02:27, 7 February 2022 (CET)
Lucario
6,576

edits

Retrieved from "https://wiki.dolphin-emu.org/index.php?title=Special:MobileDiff/180739"