Difference between revisions of "Template:Sidebar"

From Sinfronteras
Jump to: navigation, search
 
(334 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{#tag:html|
 
{{#tag:html|
−
  <style>
+
    <script>
−
      /* MediaWiki page configurations */
+
        /* Some important variables */
−
      #content { margin: -1px 0px 0px 180px; }
+
        show_oculto = true
−
      #left-navigation { margin-left:180px }
+
    </script>
−
      #footer { margin: 0 0 0 180px }
+
    <style>
−
      #bodyContent { z-index: 10 }
+
        /* MediaWiki page configurations */
−
      .mw-wiki-logo { margin: 20px 0px 0px 0.5px }
+
        #content { margin: -1px 0px 0px 180px; }
−
      /* TOC */
+
        #left-navigation { margin-left:180px }
−
      div#toc.toc {
+
        #footer { margin: 0 0 0 180px }
−
          font-size: 12pt;
+
        #bodyContent { z-index: 10 }
−
          margin-top: -4.5pt;
+
        .mw-wiki-logo { margin: 20px 0px 0px 0.5px }
−
          background: rgba(255, 255, 255, 1);
+
        /* TOC */
−
          margin-right: 12pt;
+
        div#toc.toc {
−
      }
+
            font-size: 12pt;
−
      .tocUl {
+
            margin-top: -4.5pt;
−
          overflow-y: scroll  !important;
+
            background: rgba(255, 255, 255, 1);
−
          overflow-x: scroll  !important;
+
            margin-right: 12pt;
−
          max-height: calc(100vh - 150px);
+
        }
−
          width: 350px !important;
+
        .tocUl {
−
          padding-bottom: 30px !important;
+
            overflow-y: scroll  !important;
−
          white-space: nowrap !important;
+
            overflow-x: scroll  !important;
−
      }
+
            max-height: calc(100vh - 150px);
−
      .tocUl a {
+
            width: 350px !important;
−
          padding-right: 25px !important;
+
            padding-bottom: 30px !important;
−
      }
+
            white-space: nowrap !important;
−
      .tochidden {
+
        }
−
          height: 4pt !important;
+
        .tocUl a {
−
      }
+
            padding-right: 25px !important;
 +
        }
 +
        .tochidden {
 +
            height: 4pt !important;
 +
        }
 +
 
 +
 
 +
        /* This block manages the CSS changes between "Mis paginas" page and the "Sidebar" page CSS */
 +
        #menuToggle ul {
 +
            margin-top:    20px !important;
 +
            margin-bottom: 35px !important;
 +
        }
 +
        #menuToggle li {
 +
            font: 14px / 22.4px sans-serif;
 +
            margin-top:    0px  ;
 +
            margin-bottom:  15px ;
 +
        }
 +
        #menuToggle .entre-li {
 +
            margin-bottom:  -15px ;
 +
        }
 +
        #menuToggle .entre-li-n4 {
 +
            margin-bottom:  -30px ;
 +
        }
 +
        #menuToggle .entre-li-n4-first {
 +
            margin-top:  -25px ;
 +
        }
 +
        #menuToggle ul .first-li  {
 +
            margin-top: -15px  !important;
 +
        }
 +
        #menuToggle ul .first-mwhelp  {
 +
            margin-top: -7px  !important;
 +
        }
 +
        #menuToggle a {
 +
            color: #0645AD !important;
 +
            overflow-wrap: break-word;
 +
        }
 +
        #menuToggle pre {
 +
            overflow-wrap: break-word;
 +
        }
 +
        #menuToggle a:hover {
 +
            text-decoration: underline !important;
 +
        }
 +
        #menuToggle a{
 +
            font: 14px / 22.4px sans-serif;
 +
        }
 +
        #menuToggle li {
 +
            font: 14px / 22.4px sans-serif !important;
 +
        }
 +
        #menuToggle span {
 +
            font: 14px / 22.4px sans-serif;
 +
        }
 +
        #menuToggle .base-li-1 {
 +
            margin-bottom: -25px !important;
 +
        }
 +
        #menuToggle .base-text {
 +
            font-size:12pt !important;
 +
        }
 +
        #menuToggle .desplaza {
 +
            margin-top: -12px;
 +
            padding-right: 30px !important;
 +
        }
 +
        #menuToggle .desplaza-2 {
 +
            margin-top: -10px !important;
 +
        }
 +
        #menuToggle #space-end-pure {
 +
            margin-bottom: 80px;
 +
        }
 +
        #menuToggle #space-end-social {
 +
            margin-bottom: 30px;
 +
        }
 +
        #menuToggle #space-end-music {
 +
            margin-bottom: 40px;
 +
        }
 +
        #menuToggle ul:hover {
 +
            /* color:#2864c4; */
 +
        }
 +
        #menuToggle .titulo1-text {
 +
            font-size: 18px !important;
 +
        }
 +
        #menuToggle .titulo2-text {
 +
            font: 700 14px / 22.4px sans-serif !important;
 +
        }
 +
        #menuToggle .titulo1-text-marco {
 +
            padding-left: 10px !important;
 +
            padding-right: 40px !important;
 +
        }
 +
        #menuToggle .titulo1-marco-oneline {
 +
            padding-right: 0px  !important;
 +
            padding-left:  0px  !important;
 +
            margin-right: -5px  !important;
 +
            margin-left:  0px  !important;
 +
            min-height:    35pt !important;
 +
            margin-top:  -30pt !important;
 +
        }
 +
        #menuToggle .titulo1-marco-twolines {
 +
            padding-right: 0px  !important;
 +
            padding-left:  0px  !important;
 +
            margin-right: -5px  !important;
 +
            margin-left:  0px  !important;
 +
            min-height:    50pt !important;
 +
            margin-top:  -47pt !important;
 +
        }
 +
        #menuToggle .titulo1MarcoTwolines {
 +
            padding-right: 0px;
 +
        }
 +
        #menuToggle .titulo1-marco-color {
 +
            background: #9595ab !important;
 +
        }
 +
        #menuToggle .titulo1-color {
 +
            color: white !important;
 +
        }
 +
        #menuToggle .marco1-ext {
 +
            width: 100% !important;
 +
            padding: 0px 0px 0px 0px !important;
 +
            background: #e3e3e8 !important;
 +
        }
 +
        #menuToggle .marco1-int {
 +
            background: #e3e3e8 !important;
 +
        }
 +
        #menuToggle .marco1-ext .mw-editsection {
 +
            display: none !important;
 +
        }
 +
        #menuToggle .divline1 {
 +
            padding: 0;
 +
            border: 0;
 +
            display: block;
 +
            margin-top: -7px !important;
 +
            margin-bottom: 30px !important;
 +
            margin-right: 0px !important;
 +
            margin-left: 2px  !important;
 +
            background-color: white;
 +
            height:1.2pt
 +
        }
 +
        #menuToggle .mw-collapsible-toggle {
 +
            outline: none !important;
 +
            color: rgb(58, 58, 63) !important;
 +
        }
 +
        #menuToggle .mw-collapsible-text {
 +
            color: rgb(58, 58, 63) !important;
 +
        }
 +
        #menuToggle .mw-collapsible-text:hover {
 +
            color: red !important;
 +
        }
 +
        #menuToggle .mw-collapsible-toggle:hover {
 +
            color: red !important;
 +
        }
 +
        #menuToggle .resaltar:hover {background: #bdbdca}
 +
        #menuToggle .button-top {
 +
            color: #999191; font-size:20px
 +
        }
 +
        #menuToggle .button-top:hover {
 +
            color: #5c4444;
 +
        }
  
 +
 
 +
        /* Sidebar (Pure CSS) */
 +
        #menuToggle {
 +
            display: block;
 +
            position: relative;
 +
            top: -145px;
 +
            margin-left: -205px;
 +
            padding-left: 10px;
 +
            <!-- -webkit-user-select: none; -->
 +
            <!-- user-select: none; -->
 +
        }
 +
        #menuToggle a {
 +
            text-decoration: none;
 +
            color: #232323;
 +
            transition: color 0.3s ease;
 +
        }
 +
        #menuToggle a:hover { color: tomato; }
 +
        #menuToggle input {
 +
            display: block;
 +
            width: 40px;
 +
            height: 32px;
 +
            position: absolute;
 +
            top: -7px;
 +
            left: -5px;
 +
            cursor: pointer;
 +
            opacity: 0; /* hide this */
 +
            z-index: 12; /* and place it over the hamburger */
 +
            -webkit-touch-callout: none;
 +
        }
 +
        /* Just a quick hamburger */
 +
        #menuToggle .hamb {
 +
            display: block;
 +
            width: 26px;
 +
            height: 4.1px;
 +
            margin-bottom: 2.9px;
 +
            position: relative;
 +
            background: #837e7e;
 +
            border-radius: 3px;
 +
            z-index: 11;
 +
            transform-origin: 4px 0px;
 +
            transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
 +
                        background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
 +
                        opacity 0.55s ease;
 +
        }
 +
        /* #menuToggle #inputButton:hover + #hamb1 {
 +
            background: #5c4444 !important;
 +
        } */
 +
        #menuToggle span:first-child {
 +
            transform-origin: 0% 0%;
 +
        }
 +
        #menuToggle span:nth-last-child(2) {
 +
            transform-origin: 0% 100%;
 +
        }
 +
        /* Transform all the slices of hamburger into a crossmark */
 +
        #menuToggle input:checked ~ .hamb {
 +
            opacity: 1;
 +
            transform: rotate(45deg) translate(-2px, -1px);
 +
            background: #837e7e;
 +
        }
 +
        /* But let's hide the middle one */
 +
        #menuToggle input:checked ~ span:nth-last-child(3) {
 +
            opacity: 0;
 +
            transform: rotate(0deg) scale(0.2, 0.2);
 +
        }
 +
        /* Ohyeah and the last one should go the other direction */
 +
        #menuToggle input:checked ~ span:nth-last-child(2) {
 +
            transform: rotate(-45deg) translate(0, -1px);
 +
        }
 +
 
 +
        /* Make this absolute positioned at the top left of the screen */
 +
        #menu {
 +
            position: absolute;
 +
            width: 300px;
 +
            margin: -55px 0 0 -10px;
 +
            padding: 50px 0px 30px 0px;
 +
            background: #ededed;
 +
            list-style-type: none;
 +
            -webkit-font-smoothing: antialiased;
 +
            /* to stop flickering of text in safari */
 +
            transform-origin: 0% 0%;
 +
            <!-- transform: translate(-100%, 0); -->
 +
            display: none;
 +
            transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 +
        }
 +
        #menu li {
 +
            padding: 10px 0 0 0;
 +
            font-size: 22px;
 +
        }
 +
        /* And let's slide it in from the left */
 +
        #menuToggle input:checked ~ #menu {
 +
            <!-- transform: none; -->
 +
            display: block;
 +
        }
 +
 
 +
 
 +
        /* Tab Menu */
 +
        .button {
 +
            font-size: 22px;
 +
            color: inherit;
 +
            background-color :inherit;
 +
            padding: 6px 0px 6px 0px;
 +
            border: none;
 +
            outline: 0;
 +
            cursor: pointer;
 +
        }
 +
        .button:hover { }
 +
        .bottom-selected {
 +
            color:rgb(60, 60, 70);
 +
            background-color: #d1d1de !important;  /*  #f44336  rgb(60, 60, 70)  #3c4043  */
 +
        }
 +
        #menuToggle .fa-atom            { font-size: 21px; }
 +
        #menuToggle .fa-yin-yang        { font-size: 19px; }
 +
        #menuToggle .fa-tools            { font-size: 17px; }
 +
        #menuToggle .fa-atom:hover      { color:black; }
 +
        #menuToggle .fa-yin-yang:hover  { color:black; }
 +
        #menuToggle .fa-tools:hover      { color:black; }
 +
        #menuToggle .fa-ellipsis-v:hover { color:black; }
 +
        .area {
 +
            color: black;
 +
            padding: 5px 0px 5000px 3px;
 +
            border: 0px solid #ccc !important;
 +
        }
 +
        #container-button-tap {
 +
            width:100%;
 +
            color:rgb(97, 97, 114);
 +
            background-color: white;
 +
            border-top:    1px solid #bbbbca;
 +
            /* border-bottom : 38px solid red !important; */
 +
        }
 +
        .izquierda{
 +
            float:left;
 +
            width:25%;
 +
            text-align: center;
 +
        }
 +
        .derecha{
 +
            float:right;
 +
            width:25%;
 +
            text-align: center;
 +
        }
 +
        .centrar{
 +
            margin:0 auto;
 +
            width:25%;
 +
            text-align: center;
 +
        }
 +
    </style>
 +
 
 +
 
 +
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 +
    <script src="https://kit.fontawesome.com/423f4585a2.js" crossorigin="anonymous"></script>
 +
 
 +
 
 +
    <nav id="MySidebar" role="navigation" style="position: fixed; z-index: 1;">  <!-- class="oculto" -->
 +
        <div id="menuToggle">
 +
            <!--
 +
            A fake / hidden checkbox is used as click reciever,
 +
            so you can use the :checked selector on it.
 +
            -->
 +
            <input id="inputButton" type="checkbox" onclick="myFunction()"/>
 +
           
 +
            <!--
 +
            Some spans to act as a hamburger
 +
            # See this link for a Font Awesome Menu icon: https://www.w3resource.com/icon/font-awesome/web-application-icons/bars.php
 +
            -->
 +
            <!-- <div> -->
 +
            <span id="hamb1" class="hamb"></span>
 +
            <span id="hamb2" class="hamb"></span>
 +
            <span id="hamb3" class="hamb"></span>
 +
            <!-- </div> -->
 +
           
 +
            <!-- <i style="font-size: 30px"  class="fa fa-bars fa-w-14 fa-10x"></i> -->
 +
           
 +
            <!--
 +
            Too bad the menu has to be inside of the button
 +
            but hey, it's pure CSS magic.
 +
            -->
 +
            <div id="menu" style="border-right: 0px solid rgb(177, 177, 180);">
 +
               
 +
                <!--Tap Menu -->
 +
                <div style="padding: 10px 0px 0px 0px; border-right: 2px solid #ededed">
 +
 
 +
                    <div style="text-align:right; margin-top:-31px; margin-bottom: 15px; padding-right: 5px">
 +
                        <button onclick="expandSidebar()" style="cursor:pointer; outline: none; border-width:0px"> <i id="expandSidebar-icon" class="fa fa-arrow-right button-top" aria-hidden="true"></i>  </button>
 +
                    </div>
 +
 
 +
                    <div id="container-button-tap" style="margin-top:-9px;">
 +
                        <button id="button-pe"    class="button izquierda    tablink bottom-selected"  onclick="openCity(event,'PE')"    > <i class="fas fa-atom"> </i>      </button>
 +
                        <button id="button-menu"  class="button izquierda    tablink"                  onclick="openCity(event,'Menu')"  > <i class="fas fa-ellipsis-v"></i> </button>
 +
                        <button id="button-others" class="button izquierda    tablink"                  onclick="openCity(event,'Others')"> <i class="fas fa-yin-yang">  </i> </button>
 +
                        <button id="button-tools"  class="button izquierda    tablink"                  onclick="openCity(event,'Tools')" > <i class="fas fa-tools"></i>      </button>
 +
                        <!-- <button id="button-others" class="button derecha tablink"                  onclick="openCity(event,'Others')"> <i class="fas fa-info"> </i>      </button> -->
 +
                        <!-- <button id="button-menu" class="button centrar  tablink"                  onclick="openCity(event,'Menu')"  > <i class="fas fa-tools"></i>      </button> -->
 +
                    </div>
 +
                   
 +
                    <div id="PE" class="area city">
 +
                        <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:8px 5px 0px 0px;">
 +
                            <div id="sectionPure"    style="margin-bottom:73px;  margin-top:7.5px" > {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
 +
                            <div id="sectionSocial"  style="margin-bottom:55px;  margin-top:2px"  > {{#lst:Mis páginas|social_sciences0}}</div>
 +
                            <div id="sectionMusic"  style="margin-bottom:200px; margin-top:2px"  > {{#lst:Mis páginas|musica0}}</div>
 +
                        </div>
 +
                    </div>
 +
                   
 +
                    <div id="Menu"  class="area city" style="display:none">
 +
                        <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:8px 5px 0px 0px;">
 +
                            <div id="sectionBase"    style="margin-bottom: 30px; margin-top:12px"> {{#lst:Mis páginas|base}}      </div>
 +
                            <div id="sectionBase"    style="margin-bottom: 30px; margin-top: 2px"> {{#lst:Mis páginas|Resources0}} </div>
 +
                            <div id="sectionCarrera" style="margin-bottom:200px; margin-top: 2px"> {{#lst:Mis páginas|Carrera0}}  </div>
 +
                        </div>
 +
                    </div>
 +
 
 +
                    <div id="Tools"  class="area city" style="display:none">
 +
                        <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:8px 5px 0px 0px;">
 +
                            <div id="MediawikiHelp0-inter1" style="margin-bottom: 200px;  margin-top: 12px;" > </div>
 +
                            <!-- <div id="sectionBase" style="margin-bottom: 200px;  margin-top: 10px;" > {{#lst:My MediaWiki help|MediawikiHelp0}}</div> -->
 +
                        </div>               
 +
                    </div>
 +
                   
 +
                    <div id="Others"  class="area city" style="display:none;">
 +
                        <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; padding:0px 1px 0px 0px;">
 +
                            <div id="Desktop-inter1" >
 +
                                <div id="desktop-1-titulo-inter" class="text-1-1"> Here will be inserted the title... </div>
 +
                                <div id="Desktop-inter2" >
 +
                                    Here will be inserted the table...
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
               
 +
                <!-- <a href="#"><li>Home</li></a>
 +
                <a href="#"><li>About</li></a>
 +
                <a href="#"><li>Info</li></a>
 +
                <a href="#"><li>Contact</li></a>
 +
                <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a> -->
 +
               
 +
            </div>
 +
        </div>
 +
    </nav>
 +
 
 +
 
 +
    <script>
 +
 
 +
        function openCity(evt, cityName) {
 +
            var i, x, tablinks;
 +
            x = document.getElementsByClassName("city");
 +
            for (i = 0; i < x.length; i++) {
 +
                x[i].style.display = "none";
 +
            }
 +
            tablinks = document.getElementsByClassName("tablink");
 +
            for (i = 0; i < x.length; i++) {
 +
                tablinks[i].className = tablinks[i].className.replace(" bottom-selected", "");
 +
            }
 +
            document.getElementById(cityName).style.display = "block";
 +
            evt.currentTarget.className += " bottom-selected";
 +
 
 +
            if (cityName == "PE") {
 +
            $("#menuToggle .fa-atom").css('font-size',      '21px')
 +
            $("#menuToggle .fa-ellipsis-v").css('font-size','18px')
 +
            $("#menuToggle .fa-yin-yang").css('font-size',  '19px')
 +
            $("#menuToggle .fa-tools").css('font-size',    '17px')
 +
            }else if (cityName == "Menu") {
 +
            $("#menuToggle .fa-atom").css('font-size',      '19px')
 +
            $("#menuToggle .fa-ellipsis-v").css('font-size','20px')
 +
            $("#menuToggle .fa-yin-yang").css('font-size',  '19px')
 +
            $("#menuToggle .fa-tools").css('font-size',    '17px')
 +
            }else if (cityName == "Others") {
 +
            $("#menuToggle .fa-atom").css('font-size',      '19px')
 +
            $("#menuToggle .fa-ellipsis-v").css('font-size','18px')
 +
            $("#menuToggle .fa-yin-yang").css('font-size',  '21px')
 +
            $("#menuToggle .fa-tools").css('font-size',    '17px')
 +
            }else {
 +
            $("#menuToggle .fa-atom").css('font-size',      '19px')
 +
            $("#menuToggle .fa-ellipsis-v").css('font-size','18px')
 +
            $("#menuToggle .fa-yin-yang").css('font-size',  '19px')
 +
            $("#menuToggle .fa-tools").css('font-size',    '19px')
 +
            }
 +
        }
 +
 
 +
       
 +
        function myFunction() {
 +
            var checkBox = document.getElementById("inputButton");
 +
            if (checkBox.checked == true){
 +
                $('#content').css('margin-left', '300px')
 +
                $('#left-navigation').css({'cssText':'margin-left:300px'})
 +
                $('#menuToggle').css('margin-left', '-325px')
 +
                $('#footer').css('margin-left', '308px')
 +
            } else {
 +
                $('#content').css('margin-left', '180px')
 +
                $('#left-navigation').css({'cssText':'margin-left:180px'})
 +
                $('#menuToggle').css('margin-left', '-205px')
 +
                $('#footer').css('margin-left', '180px')
 +
            }
 +
        }
 +
 
 +
        function checkUser(){
 +
            if ( document.getElementById('pt-userpage') != null ) {
 +
                if ( document.getElementById('pt-userpage').getElementsByTagName('a')[0].innerText == "Adelo Vieira" ){
 +
                    if (show_oculto == true) {
 +
                        $('.oculto').css('display','block')
 +
                    }
 +
                    $('.link-hidden').css('pointer-events','auto')
 +
                    $('#p-logo a').attr('href','/view/Mis_páginas');
 +
                    // $('body').css('background','red');
 +
                }else{
 +
                    // $('body').css('background','blue');   
 +
                }
 +
            }else{
 +
                $("#menuToggle #button-others").css('pointer-events','none')
 +
                // $('body').css('background','blue');
 +
                // $('#hideThis').show();
 +
            }
 +
        }
 +
 
 +
        function removeCSS() {
 +
            $('#menuToggle li').css({'margin-bottom':'','margin-top':''})
 +
            $('#menuToggle p ').css({'margin-bottom':'','margin-top':''})
 +
            // $('#mis-paginas li').css({'margin-bottom':'','margin-top':''})
 +
            // $('#mis-paginas p ').css({'margin-bottom':'','margin-top':''})
 +
            // $('#mis-paginas ul ').css({'margin-bottom':'','margin-top':''})
 +
        }
 +
 
 +
        function collapseSome() {
 +
            $('#menuToggle .keep-abierto').removeClass("mw-collapsed");
 +
            $("#menuToggle .mw-collapsible").not('.keep-abierto').addClass("mw-collapsed");
 +
        }
 +
 
 +
        function expandSidebar() {
 +
            var menuWidth = parseInt(window.getComputedStyle(document.getElementById("menu")).width)
 +
            if (menuWidth < 400 ) {
 +
            $("#menu").css('width','600px')
 +
            $(".titulo1-marco-twolines").addClass("titulo1MarcoTwolines")
 +
            $(".titulo1-marco-twolines").addClass("titulo1-marco-oneline")
 +
            $(".titulo1MarcoTwolines").removeClass("titulo1-marco-twolines")
 +
            $("#sectionPure").css({'margin-bottom':  '30px', 'margin-top':'12px'})
 +
            $("#sectionSocial").css({'margin-bottom':'30px', 'margin-top':'2px'})
 +
            $("#space-end-pure").css({'margin-bottom':'85px'})
 +
            $("#space-end-social").css({'margin-bottom':'60px'})
 +
            $("#space-end-music").css({'margin-bottom':'45px'})
 +
            $("#expandSidebar-icon").removeClass("fa-arrow-right")
 +
            $("#expandSidebar-icon").addClass("fa-arrow-left")
 +
            }else{
 +
            $("#menu").css('width','300px')
 +
            $(".titulo1MarcoTwolines").addClass("titulo1-marco-twolines")
 +
            $(".titulo1-marco-twolines").removeClass("titulo1MarcoTwolines")
 +
            $(".titulo1-marco-twolines").removeClass("titulo1-marco-oneline")
 +
            $("#sectionPure").css({'margin-bottom':  '73px', 'margin-top':'7.5px'})
 +
            $("#sectionSocial").css({'margin-bottom':'55px', 'margin-top':' 2px'})
 +
            $("#space-end-pure").css({'margin-bottom':'80px'})
 +
            $("#space-end-social").css({'margin-bottom':'30px'})
 +
            $("#space-end-music").css({'margin-bottom':'40px'})
 +
            $("#expandSidebar-icon").removeClass("fa-arrow-left")
 +
            $("#expandSidebar-icon").addClass("fa-arrow-right")
 +
            }
 +
        }
 +
 
 +
       
 +
        $("#inputButton").hover(function(){
 +
            $(".hamb").css("background", "#5c4444");
 +
            }, function(){
 +
            $(".hamb").css("background", "#837e7e");
 +
        });
 +
       
 +
        $("#menuToggle #button-pe").hover(function(){
 +
            $("#menuToggle .fa-atom").css('font-size', '21px')
 +
            }, function(){
 +
            if ( $(this).hasClass("bottom-selected") ) {
 +
                $("#menuToggle .fa-atom").css('font-size', '21px')
 +
            }else{
 +
                $("#menuToggle .fa-atom").css('font-size', '19px')
 +
            }
 +
        });
 +
 
 +
        $("#menuToggle #button-menu").hover(function(){
 +
            $("#menuToggle .fa-ellipsis-v").css('font-size', '20px')
 +
            }, function(){
 +
            if ( $(this).hasClass("bottom-selected") ) {
 +
                $("#menuToggle .fa-ellipsis-v").css('font-size', '20px')
 +
            }else{
 +
                $("#menuToggle .fa-ellipsis-v").css('font-size', '18px')
 +
            }
 +
        });
 +
 
 +
        $("#menuToggle #button-others").hover(function(){
 +
            $("#menuToggle .fa-yin-yang").css('font-size', '21px')
 +
            }, function(){
 +
            if ( $(this).hasClass("bottom-selected") ) {
 +
                $("#menuToggle .fa-yin-yang").css('font-size', '21px')
 +
            }else{
 +
                $("#menuToggle .fa-yin-yang").css('font-size', '19px')
 +
            }
 +
        });
 +
 
 +
        $("#button-tools").hover(function() {
 +
            $("#menuToggle .fa-tools").css('font-size', '19px')
 +
            }, function() {
 +
            if ( $(this).hasClass("bottom-selected") ) {
 +
                $("#menuToggle .fa-tools").css('font-size', '19px')
 +
            }else{
 +
                $("#menuToggle .fa-tools").css('font-size', '17px')
 +
            }
 +
        });
 +
 
 +
        function resaltarSection() {
 +
            // $(".mw-collapsible-text").hover(function() {
 +
            //    $(this).parent().parent().children(".resaltar").first().css({'cssText':'background: grey !important'})
 +
            //    // $(".resaltar").first().css({'cssText':'background: red !important'})
 +
            //    }, function(){
 +
            //    $(this).parent().parent().children(".resaltar").first().css({'cssText':'background: reset'})
 +
            // });
 +
            $("#menuToggle .mw-collapsible-toggle").hover(function() {
 +
                $(this).parent().children(".resaltar").first().css({'cssText':'background: #bdbdca !important'})
 +
                // $(".resaltar").first().css({'cssText':'background: red !important'})
 +
                }, function(){
 +
                $(this).parent().children(".resaltar").first().css({'cssText':'background: reset'})
 +
            });
 +
            $(".resaltar").hover(function() {
 +
                $(this).parent().children(".mw-collapsible-toggle").css({'cssText':'color: red !important; font-weight:normal'})
 +
                $(this).parent().children(".mw-collapsible-toggle").children(".mw-collapsible-text").css({'cssText':'color: red !important; font-weight:normal !important'})
 +
                // $(".resaltar").first().css({'cssText':'background: red !important'})
 +
                }, function(){
 +
                $(this).parent().children(".mw-collapsible-toggle").css({'cssText':'color: reset; font-weight:reset'})
 +
                $(this).parent().children(".mw-collapsible-toggle").children(".mw-collapsible-text").css({'cssText':'color: reset !important; font-weight:reset !important'})
 +
            });
 +
        }
 +
 
 +
        // $(".mw-collapsible").hover(function(){
 +
        //    $(this).children(".resaltar").first().css({'cssText':'background: red !important'})
 +
        //    }, function(){
 +
        //    $(this).children(".resaltar").first().css({'cssText':'background: reset'})
 +
        // });
 +
 
 +
        // $(".mw-collapsible").hover(function(){
 +
        //    $(".resaltar").css({'cssText':'background: red !important'})
 +
        //    }, function(){
 +
        //    $(".resaltar").css('background', 'grey')
 +
        // });
 +
 
 +
 
 +
        // function collapseAll() {
 +
        //  $('.mw-collapsible').on( "click", "#aver", function() {
 +
        //    $(".mw-collapsible").addClass("mw-collapsed");
 +
        //  });
 +
        // }
 +
 
 +
        // function collapseAll() {
 +
        //  $(".mw-collapsible").addClass("mw-collapsed").reload();
 +
        //  $( ".mw-collapsible" ).load(window.location.href + " .mw-collapsible" );
 +
        // }
 +
 
 +
        // $(document).ready(function(){
 +
        //  $("button").click(function(){
 +
        //    $(".mw-collapsible").toggleClass("mw-collapsed");
 +
        //  });
 +
        // });
 +
 
 +
        // $(document).on('click', '.DoFirst', function() {
 +
        //  $('#totalItems, #enteredItems').keyup(function(){
 +
        //    collapseAll()
 +
        //  }); 
 +
        //  collapseAll()
 +
        // });
 +
 
 +
        // $(document).on( function() {
 +
        //  $('#totalItems, #enteredItems').keyup(function(){
 +
        //    collapseAll()
 +
        //  }); 
 +
        //  collapseAll()
 +
        // });
 +
 
 +
        // function moveSidebarToBody() {
 +
        //    $("#MySidebar").appendTo("#pt-userpage");
 +
        //    // document.body.appendChild(document.getElementById('MySidebar'))
 +
        // }
 +
 
 +
        // Shortkey: https://www.techiedelight.com/create-keyboard-shortcuts-with-javascript-jquery-hotkeys-mousetrap-library/
 +
        // For some reason, in MediaWiki pages, the && operator is not being interpreted by the web browser
 +
        // as such in «keydown» functions. The web browser is reading «&amp;», instead of «&&» which generates a systax error.
 +
        // To work around this problem I just broke the function using «2» if statements:
 +
 
 +
        // $(document).keydown(function(event) {
 +
        //  if ( (event.ctrlKey) && (event.which === 88) ) {
 +
        //    alert('Alt + X pressed!')
 +
        //    e.preventDefault()
 +
        //  }
 +
        // });
 +
 
 +
        $(document).keydown(function(event) {
 +
            if ( event.ctrlKey ) {
 +
            if ( event.which === 66 )  { // Check key codes here: https://css-tricks.com/snippets/javascript/javascript-keycodes/
 +
                // alert('Ctrl + B pressed!')
 +
                var checkBox = document.getElementById("inputButton");
 +
                if (checkBox.checked == true){
 +
                checkBox.checked = false
 +
                }else{
 +
                checkBox.checked = true
 +
                }
 +
                myFunction()
 +
                e.preventDefault()
 +
            }
 +
 
 +
            // if ( event.which === 89 )  {
 +
            //  $(document).on( function() {
 +
            //    $('#totalItems, #enteredItems').keyup(function(){
 +
            //      collapseAll()
 +
            //    }); 
 +
            //    collapseAll()
 +
            //  });
 +
            // }
 +
 
 +
            }
 +
           
 +
            if ( event.ctrlKey ) {
 +
            if ( event.which === 89 ) {
 +
                expandSidebar()
 +
            }
 +
            }
 +
 
 +
        });
 +
 
 +
        // Esta es otra forma de hacerlo
 +
        // document.addEventListener("keydown", function(event) {
 +
        //  if (event.ctrlKey && event.code === "KeyB") {
 +
        //    alert('Alt + X pressed!');
 +
        //    event.preventDefault();
 +
        //  }
 +
        // });
 +
 
 +
 
 +
        $(document).ready( function() {
 +
            $('#totalItems, #enteredItems').keyup(function(){
 +
                collapseSome()
 +
                checkUser()
 +
                removeCSS()
 +
 
 +
                // This functions involved mw-collapsible, which has some problems when adding JS functionalities. So, to make sure
 +
                // this function do what it has to do, we have to ensure that it runs when the DOM is ready.
 +
                // Even inside «.ready()» is not working as expected (when we refresh the page, sometimes it works, sometimes it doesn't work).
 +
                // So we needed to execute it after a delay:
 +
                setTimeout( function() { resaltarSection() }, 3000 );
 +
                // setTimeout( function() { collapseSome() },    5000 );
 +
            });
 +
            collapseSome()
 +
            checkUser()
 +
            removeCSS()
 +
            setTimeout( function() { resaltarSection() }, 3000 );
 +
            // setTimeout( function() { collapseSome() },    5000 );
 +
        });
 +
 
 +
        // $(document).ready( function() {
 +
        //    $('#totalItems, #enteredItems').keyup(function(){
 +
        //        resaltarSection()
 +
        //        // moveSidebarToBody()
 +
        //    }); 
 +
        //    resaltarSection()
 +
        //    // moveSidebarToBody()
 +
        // });
 +
 
 +
    </script>
 +
}}
 +
 
 +
 
 +
<!-- Transclusion of pages that contain MW tags -->
  
−
      /* This block manages the CSS changes between "Mis paginas" page and the "Sidebar" page CSS */
+
<div id="MediawikiHelp0-inter0" style="display:none">
−
      #menuToggle ul {
+
     {{#lst:My MediaWiki help|MediawikiHelp0}}
−
          margin-top:    20px !important;
+
</div>
−
          margin-bottom: 35px !important;
+
<html>
−
      }
+
    <script>
−
      #menuToggle li {
+
        document.getElementById("MediawikiHelp0-inter1").innerHTML = document.getElementById("MediawikiHelp0-inter0").innerHTML
−
          font: 14px / 22.4px sans-serif;
+
    </script>
−
          margin-top:     0px  ;
+
</html>
−
          margin-bottom:  15px ;
 
−
      }
 
−
      #menuToggle .entre-li {
 
−
          margin-bottom:  -15px ;
 
−
      }
 
−
      #menuToggle .entre-li-n4 {
 
−
          margin-bottom:  -30px ;
 
−
      }
 
−
      #menuToggle .entre-li-n4-first {
 
−
          margin-top: -25px ;
 
−
      }
 
−
      #menuToggle ul .first-li  {
 
−
          margin-top: -15px  !important;
 
−
      }
 
−
      #menuToggle ul .first-mwhelp  {
 
−
          margin-top: -7px  !important;
 
−
      }
 
−
      #menuToggle a {
 
−
          color: #0645AD !important;
 
−
          overflow-wrap: break-word;
 
−
      }
 
−
      #menuToggle pre {
 
−
          overflow-wrap: break-word;
 
−
      }
 
−
      #menuToggle a:hover {
 
−
          text-decoration: underline !important;
 
−
      }
 
−
      #menuToggle a{
 
−
          font: 14px / 22.4px sans-serif;
 
−
      }
 
−
      #menuToggle li{
 
−
          font: 14px / 22.4px sans-serif;
 
−
      }
 
−
      #menuToggle span {
 
−
          font: 14px / 22.4px sans-serif;
 
−
      }
 
−
      #menuToggle .base-li-1 {
 
−
          margin-bottom: -25px !important;
 
−
      }
 
−
      #menuToggle .base-text {
 
−
          font-size:12pt !important;
 
−
      }
 
−
      #menuToggle .desplaza {
 
−
          margin-top: -12px;
 
−
          padding-right: 30px !important;
 
−
      }
 
−
      #menuToggle .desplaza-2 {
 
−
          margin-top: -10px !important;
 
−
      }
 
−
      #menuToggle #space-end-pure {
 
−
          margin-bottom: 80px;
 
−
      }
 
−
      #menuToggle #space-end-social {
 
−
          margin-bottom: 30px;
 
−
      }
 
−
      #menuToggle #space-end-music {
 
−
          margin-bottom: 40px;
 
−
      }
 
−
      #menuToggle ul:hover {
 
−
          /* color:#2864c4; */
 
−
      }
 
−
      #menuToggle .titulo1-text {
 
−
          font-size: 18px !important;
 
−
      }
 
−
      #menuToggle .titulo2-text {
 
−
          font: 700 14px / 22.4px sans-serif !important;
 
−
      }
 
−
      #menuToggle .titulo1-text-marco {
 
−
          padding-left: 10px !important;
 
−
          padding-right: 40px !important;
 
−
      }
 
−
      #menuToggle .titulo1-marco-oneline {
 
−
          padding-right: 0px  !important;
 
−
          padding-left:  0px  !important;
 
−
          margin-right: -5px  !important;
 
−
          margin-left:  0px  !important;
 
−
          min-height:    35pt !important;
 
−
          margin-top:  -30pt !important;
 
−
      }
 
−
      #menuToggle .titulo1-marco-twolines {
 
−
          padding-right: 0px  !important;
 
−
          padding-left:  0px  !important;
 
−
          margin-right: -5px  !important;
 
−
          margin-left:  0px  !important;
 
−
          min-height:    50pt !important;
 
−
          margin-top:  -47pt !important;
 
−
      }
 
−
      #menuToggle .titulo1MarcoTwolines {
 
−
          padding-right: 0px;
 
−
      }
 
−
      #menuToggle .titulo1-marco-color {
 
−
          background: #9595ab !important;
 
−
      }
 
−
      #menuToggle .titulo1-color {
 
−
          color: white !important;
 
−
      }
 
−
      #menuToggle .marco1-ext {
 
−
          width: 100% !important;
 
−
          padding: 0px 0px 0px 0px !important;
 
−
          background: #e3e3e8 !important;
 
−
      }
 
−
      #menuToggle .marco1-int {
 
−
          background: #e3e3e8 !important;
 
−
      }
 
−
      #menuToggle .marco1-ext .mw-editsection {
 
−
          display: none !important;
 
−
      }
 
−
      #menuToggle .divline1 {
 
−
          padding: 0;
 
−
          border: 0;
 
−
          display: block;
 
−
          margin-top: -7px !important;
 
−
          margin-bottom: 30px !important;
 
−
          margin-right: 0px !important;
 
−
          margin-left: 2px  !important;
 
−
          background-color: white;
 
−
          height:1.2pt
 
−
      }
 
−
      #menuToggle .mw-collapsible-toggle {
 
−
          outline: none !important;
 
−
          color: rgb(58, 58, 63) !important;
 
−
      }
 
−
      #menuToggle .mw-collapsible-text {
 
−
          color: rgb(58, 58, 63) !important;
 
−
      }
 
−
      #menuToggle .mw-collapsible-text:hover {
 
−
          color: red !important;
 
−
      }
 
−
      #menuToggle .mw-collapsible-toggle:hover {
 
−
          color: red !important;
 
−
      }
 
−
      #menuToggle .resaltar:hover {background: #bdbdca}
 
−
      #menuToggle .button-top {
 
−
          color: #999191; font-size:20px
 
−
      }
 
−
      #menuToggle .button-top:hover {
 
−
          color: #5c4444;
 
−
      }
 
  
  
−
      /* Sidebar (Pure CSS) */
+
<div id="Desktop-inter0" style="display:none">
−
      #menuToggle {
+
    {{#lst:Desktop|Desktop0}}
−
          display: block;
+
</div>
−
          position: relative;
+
<html>
−
          top: -145px;
+
    <style>
−
          margin-left: -205px;
+
        #Desktop-inter1 .desktop-1-1 {
−
          padding-left: 10px;
+
            border: 0px solid red;
−
          <!-- -webkit-user-select: none; -->
+
        }
−
          <!-- user-select: none; -->
+
        #Desktop-inter1 .desktop-2-1 {
−
      }
+
            background-color: #e3e3e8 !important;  
−
      #menuToggle a {
+
            border: 0px solid green !important;  
−
          text-decoration: none;
+
            padding-top: 0px !important;
−
          color: #232323;  
+
            padding-bottom: 40px;
−
          transition: color 0.3s ease;
+
        }
−
      }
+
        #Desktop-inter1 .desktop-cuadro {
−
      #menuToggle a:hover { color: tomato; }
+
            border: 0px solid white !important;
−
      #menuToggle input {
+
            background-color: white !important;  
−
          display: block;
+
        }
−
          width: 40px;
+
        #Desktop-inter1 .text-2-1 {
−
          height: 32px;
+
            margin-bottom: -50px;
−
          position: absolute;
+
        }
−
          top: -7px;
+
        #Desktop-inter1 .nivel-3 li {
−
          left: -5px;
+
            margin-bottom: -3px !important;
−
          cursor: pointer;
+
        }
−
          opacity: 0; /* hide this */
+
        #Desktop-inter1 .nivel-3 ul {
−
          z-index: 12; /* and place it over the hamburger */
+
            margin-bottom: -20px !important;
−
          -webkit-touch-callout: none;
+
        }
−
      }
+
        #Desktop-inter1 .nivel-3 .first-li {
−
      /* Just a quick hamburger */
+
            margin-top: 15px !important;
−
      #menuToggle .hamb {
+
        }
−
          display: block;
+
        #Desktop-inter1  a {
−
          width: 26px;
+
            overflow-wrap: break-word !important;
−
          height: 4.1px;
+
        }
−
          margin-bottom: 2.9px;
+
        #Desktop-inter1 .text-1-1 {
−
          position: relative;
+
            font: 700 18px / 27.3px "Linux Libertine", Georgia, Times, serif;
−
          background: #837e7e;
+
            background-color: #4081de;  
−
          border-radius: 3px;
+
            vertical-align: center;
−
          z-index: 11;
+
            height: 46.6667px;
−
          transform-origin: 4px 0px;
+
            line-height: 53px;
−
          transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+
            margin: 7px -1px 50px 0px !important;
−
                      background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+
            padding-left: 10px;
−
                      opacity 0.55s ease;
+
        }
−
      }
+
        #Desktop-inter1 .desktop-2-1-area {
−
      /* #menuToggle #inputButton:hover + #hamb1 {
+
            margin-left: -5px;
−
          background: #5c4444 !important;
+
        }
−
      } */
+
        #Desktop-inter2 {
−
      #menuToggle span:first-child {
+
            margin-top:   -27px  !important;
−
          transform-origin: 0% 0%;
+
            margin-bottom: 200px;
−
      }
+
            padding-left:  4px;
−
      #menuToggle span:nth-last-child(2) {
+
            padding-right: 5px;
−
          transform-origin: 0% 100%;
+
        }
−
      }
+
        #Desktop-inter2 .antes-collapsible {
−
      /* Transform all the slices of hamburger into a crossmark */
+
            margin-bottom: 30px !important;
−
      #menuToggle input:checked ~ .hamb {
+
        }
−
          opacity: 1;
+
        #Desktop-inter2 .espacio {
−
          transform: rotate(45deg) translate(-2px, -1px);
+
            margin-left: -20px !important;
−
          background: #837e7e;
+
        }
−
      }
+
    </style>
−
      /* But let's hide the middle one */
+
    <script>
−
      #menuToggle input:checked ~ span:nth-last-child(3) {
+
        // This allows using the whole table by using «display: none» on the sections that won't be shown:
−
          opacity: 0;
+
        // document.getElementById("Desktop-inter2").innerHTML = document.getElementById("Desktop-inter0").innerHTML
−
          transform: rotate(0deg) scale(0.2, 0.2);
+
        // $(".invisible").not('.desktop-1').css('display','none')
−
      }
+
        // $("#Desktop-inter1 #container-desktop-menu").css('display','none')
−
      /* Ohyeah and the last one should go the other direction */
+
        // $("#Desktop-inter1 #desktop p").addClass("desplaza-2")
−
      #menuToggle input:checked ~ span:nth-last-child(2) {
+
        // $("#Desktop-inter1 .desktop-1-1").addClass("desplaza-2")
−
          transform: rotate(-45deg) translate(0, -1px);
+
        // $("#Desktop-inter1 .text-1-1").removeClass("desplaza-2")
−
      }
 
−
 
 
−
      /* Make this absolute positioned at the top left of the screen */
 
−
      #menu {
 
−
          position: absolute;
 
−
          width: 300px;
 
−
          margin: -55px 0 0 -10px;
 
−
          padding: 50px 0px 30px 0px;
 
−
          background: #ededed;
 
−
          list-style-type: none;
 
−
          -webkit-font-smoothing: antialiased;
 
−
          /* to stop flickering of text in safari */
 
−
          transform-origin: 0% 0%;
 
−
          <!-- transform: translate(-100%, 0); -->
 
−
          display: none;
 
−
          transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 
−
      }
 
−
      #menu li {
 
−
          padding: 10px 0 0 0;
 
−
          font-size: 22px;
 
−
      }
 
−
      /* And let's slide it in from the left */
 
−
      #menuToggle input:checked ~ #menu {
 
−
          <!-- transform: none; -->
 
−
          display: block;
 
−
      }
 
−
 
 
−
 
 
−
      /* Tab Menu */
 
−
      .button {
 
−
          font-size: 22px;
 
−
          color: inherit;
 
−
          background-color :inherit;
 
−
          padding: 6px 0px 6px 0px;
 
−
          border: none;
 
−
          outline: 0;
 
−
          cursor: pointer;
 
−
      }
 
−
      .button:hover { }
 
−
      .bottom-selected {
 
−
          color:rgb(60, 60, 70);
 
−
          background-color: #d1d1de !important;  /*  #f44336  rgb(60, 60, 70)  #3c4043  */
 
−
      }
 
−
      .fa-atom        { font-size: 21px; }
 
−
      .fa-yin-yang        { font-size: 18px; }
 
−
      .fa-tools      { font-size: 17px; }
 
−
      .fa-atom:hover  { color:black; }
 
−
      .fa-yin-yang:hover  { color:black; }
 
−
      .fa-tools:hover { color:black; }
 
−
      .fa-ellipsis-v:hover { color:black; }
 
−
      .area {
 
−
          color: black;
 
−
          padding: 5px 0px 5000px 3px;
 
−
          border: 0px solid #ccc !important;
 
−
      }
 
−
      #container-button-tap {
 
−
      width:100%;
 
−
      color:rgb(97, 97, 114);
 
−
      background-color: white;
 
−
      }
 
−
      .izquierda{
 
−
      float:left;
 
−
      width:25%;
 
−
      text-align: center;
 
−
      }
 
−
      .derecha{
 
−
      float:right;
 
−
      width:25%;
 
−
      text-align: center;
 
−
      }
 
−
      .centrar{
 
−
      margin:0 auto;
 
−
      width:25%;
 
−
      text-align: center;
 
−
      }
 
−
  </style>
 
−
 
 
−
 
 
−
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
−
  <script src="https://kit.fontawesome.com/423f4585a2.js" crossorigin="anonymous"></script>
 
−
 
 
−
 
 
−
  <nav id="MySidebar" role="navigation" style="position: fixed; z-index: 1;">  <!-- class="oculto" -->
 
−
      <div id="menuToggle">
 
−
          <!--
 
−
          A fake / hidden checkbox is used as click reciever,
 
−
          so you can use the :checked selector on it.
 
−
          -->
 
−
          <input id="inputButton" type="checkbox" onclick="myFunction()"/>
 
−
         
 
−
          <!--
 
−
          Some spans to act as a hamburger.
 
−
          -->
 
−
          <!-- <div> -->
 
−
          <span id="hamb1" class="hamb"></span>
 
−
          <span id="hamb2" class="hamb"></span>
 
−
          <span id="hamb3" class="hamb"></span>
 
−
          <!-- </div> -->
 
−
         
 
−
          <!-- <i style="font-size: 30px"  class="fa fa-bars fa-w-14 fa-10x"></i> -->
 
−
         
 
−
          <!--
 
−
          Too bad the menu has to be inside of the button
 
−
          but hey, it's pure CSS magic.
 
−
          -->
 
−
          <div id="menu" style="border-right: 0px solid rgb(177, 177, 180);">
 
−
             
 
−
              <!--Tap Menu -->
 
−
              <div style="padding: 10px 0px 0px 0px; border-right: 2px solid #ededed">
 
−
 
 
−
                  <div style="text-align:right; margin-top:-31px; margin-bottom: 15px; padding-right: 5px">
 
−
                      <button onclick="expandSidebar()" style="cursor:pointer; outline: none; border-width:0px"> <i id="expandSidebar-icon" class="fa fa-arrow-right button-top" aria-hidden="true"></i>  </button>
 
−
                  </div>
 
−
 
 
−
                  <div id="container-button-tap" style="margin-top:-9px;">
 
−
                      <button id="button-pe"    class="button izquierda    tablink bottom-selected"  onclick="openCity(event,'PE')"    > <i class="fas fa-atom"> </i>      </button>
 
−
                      <button id="button-menu"  class="button izquierda    tablink"                  onclick="openCity(event,'Menu')"  > <i class="fas fa-ellipsis-v"></i> </button>
 
−
                      <button id="button-others" class="button izquierda    tablink"                  onclick="openCity(event,'Others')"> <i class="fas fa-yin-yang">  </i> </button>
 
−
                      <button id="button-tools"  class="button izquierda    tablink"                  onclick="openCity(event,'Tools')" > <i class="fas fa-tools"></i>      </button>
 
−
                      <!-- <button id="button-others" class="button derecha tablink"                  onclick="openCity(event,'Others')"> <i class="fas fa-yin-yang"> </i>      </button> -->
 
−
                      <!-- <button id="button-menu" class="button centrar  tablink"                  onclick="openCity(event,'Menu')"  > <i class="fas fa-tools"></i>      </button> -->
 
−
                  </div>
 
−
                 
 
−
                  <div id="PE" class="area city">
 
−
                      <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:8px 5px 0px 0px;">
 
−
                          <div id="sectionPure"    style="margin-bottom:73px;  margin-top:7.5px" > {{#lst:Mis páginas|formal_natural_and_applied_sciences0}}</div>
 
−
                          <div id="sectionSocial"  style="margin-bottom:55px;  margin-top:2px"  > {{#lst:Mis páginas|social_sciences0}}</div>
 
−
                          <div id="sectionMusic"  style="margin-bottom:200px; margin-top:2px"  > {{#lst:Mis páginas|musica0}}</div>
 
−
                      </div>
 
−
                  </div>
 
−
                 
 
−
                  <div id="Menu"  class="area city" style="display:none">
 
−
                      <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:8px 5px 0px 0px;">
 
−
                          <div id="sectionBase"    style="margin-bottom: 30px; margin-top:12px"> {{#lst:Mis páginas|base}}      </div>
 
−
                          <div id="sectionBase"    style="margin-bottom: 30px; margin-top: 2px"> {{#lst:Mis páginas|Resources0}} </div>
 
−
                          <div id="sectionCarrera" style="margin-bottom:200px; margin-top: 2px"> {{#lst:Mis páginas|Carrera0}}  </div>
 
−
                      </div>
 
−
                  </div>
 
−
 
 
−
                  <div id="Tools"  class="area city" style="display:none">
 
−
                      <div style="overflow-y: scroll; height: 100vh !important; background: #e3e3e8; margin-top:0px; padding:8px 5px 0px 0px;">
 
−
                          <div id="MediawikiHelp0-inter1" style="margin-bottom: 200px;  margin-top: 12px;" > </div>
 
−
                          <!-- <div id="sectionBase" style="margin-bottom: 200px;  margin-top: 10px;" > {{#lst:My MediaWiki help|MediawikiHelp0}}</div> -->
 
−
                      </div>               
 
−
                  </div>
 
−
                 
 
−
                  <div id="Others"  class="area city" style="display:none">
 
−
                      <p>Under construction...</p>
 
−
                  </div>
 
−
              </div>
 
−
             
 
−
              <!-- <a href="#"><li>Home</li></a>
 
−
              <a href="#"><li>About</li></a>
 
−
              <a href="#"><li>Info</li></a>
 
−
              <a href="#"><li>Contact</li></a>
 
−
              <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li></a> -->
 
−
             
 
−
          </div>
 
−
      </div>
 
−
  </nav>
 
−
 
 
−
 
 
−
  <script>
 
−
 
 
−
      function openCity(evt, cityName) {
 
−
          var i, x, tablinks;
 
−
          x = document.getElementsByClassName("city");
 
−
          for (i = 0; i < x.length; i++) {
 
−
              x[i].style.display = "none";
 
−
          }
 
−
          tablinks = document.getElementsByClassName("tablink");
 
−
          for (i = 0; i < x.length; i++) {
 
−
              tablinks[i].className = tablinks[i].className.replace(" bottom-selected", "");
 
−
          }
 
−
          document.getElementById(cityName).style.display = "block";
 
−
          evt.currentTarget.className += " bottom-selected";
 
−
 
 
−
          if (cityName == "PE") {
 
−
          $(".fa-atom").css('font-size',      '21px')
 
−
          $(".fa-ellipsis-v").css('font-size','18px')
 
−
          $(".fa-yin-yang").css('font-size',      '18px')
 
−
          $(".fa-tools").css('font-size',    '17px')
 
−
          }else if (cityName == "Menu") {
 
−
          $(".fa-atom").css('font-size',      '19px')
 
−
          $(".fa-ellipsis-v").css('font-size','20px')
 
−
          $(".fa-yin-yang").css('font-size',      '20px')
 
−
          $(".fa-tools").css('font-size',    '17px')
 
−
          }else if (cityName == "Others") {
 
−
          $(".fa-atom").css('font-size',      '19px')
 
−
          $(".fa-ellipsis-v").css('font-size','18px')
 
−
          $(".fa-yin-yang").css('font-size',      '20px')
 
−
          $(".fa-tools").css('font-size',    '17px')
 
−
          }else {
 
−
          $(".fa-atom").css('font-size',      '19px')
 
−
          $(".fa-ellipsis-v").css('font-size','18px')
 
−
          $(".fa-yin-yang").css('font-size',      '18px')
 
−
          $(".fa-tools").css('font-size',    '19px')
 
−
          }
 
−
      }
 
−
 
 
−
     
 
−
      function myFunction() {
 
−
          var checkBox = document.getElementById("inputButton");
 
−
          if (checkBox.checked == true){
 
−
              $('#content').css('margin-left', '300px')
 
−
              $('#left-navigation').css({'cssText':'margin-left:300px'})
 
−
              $('#menuToggle').css('margin-left', '-325px')
 
−
              $('#footer').css('margin-left', '308px')
 
−
          } else {
 
−
              $('#content').css('margin-left', '180px')
 
−
              $('#left-navigation').css({'cssText':'margin-left:180px'})
 
−
              $('#menuToggle').css('margin-left', '-205px')
 
−
              $('#footer').css('margin-left', '180px')
 
−
          }
 
−
      }
 
−
 
 
−
      function checkUser(){
 
−
          if ( document.getElementById('pt-userpage') != null ) {
 
−
              if ( document.getElementById('pt-userpage').getElementsByTagName('a')[0].innerText == "Adelo Vieira" ){
 
−
                  $('.oculto').css('display','block')
 
−
                  $('.link-hidden').css('pointer-events','auto')
 
−
                  // $('body').css('background','red');
 
−
              }else{
 
−
                  // $('body').css('background','blue');   
 
−
              }
 
−
          }else{
 
−
              // $('body').css('background','blue');
 
−
              // $('#hideThis').show();
 
−
          }
 
−
      }
 
−
 
 
−
      function removeCSS() {
 
−
          $('#menuToggle li').css({'margin-bottom':'','margin-top':''})
 
−
          $('#menuToggle p ').css({'margin-bottom':'','margin-top':''})
 
−
          // $('#mis-paginas li').css({'margin-bottom':'','margin-top':''})
 
−
          // $('#mis-paginas p ').css({'margin-bottom':'','margin-top':''})
 
−
          // $('#mis-paginas ul ').css({'margin-bottom':'','margin-top':''})
 
−
      }
 
−
 
 
−
      function collapseSome() {
 
−
          $('#menuToggle .keep-abierto').removeClass("mw-collapsed");
 
−
          $("#menuToggle .mw-collapsible").not('.keep-abierto').addClass("mw-collapsed");
 
−
      }
 
−
 
 
−
      function expandSidebar() {
 
−
          var menuWidth = parseInt(window.getComputedStyle(document.getElementById("menu")).width)
 
−
          if (menuWidth < 400 ) {
 
−
          $("#menu").css('width','600px')
 
−
          $(".titulo1-marco-twolines").addClass("titulo1MarcoTwolines")
 
−
          $(".titulo1-marco-twolines").addClass("titulo1-marco-oneline")
 
−
          $(".titulo1MarcoTwolines").removeClass("titulo1-marco-twolines")
 
−
          $("#sectionPure").css({'margin-bottom':  '30px', 'margin-top':'12px'})
 
−
          $("#sectionSocial").css({'margin-bottom':'30px', 'margin-top':'2px'})
 
−
          $("#space-end-pure").css({'margin-bottom':'85px'})
 
−
          $("#space-end-social").css({'margin-bottom':'60px'})
 
−
          $("#space-end-music").css({'margin-bottom':'45px'})
 
−
          $("#expandSidebar-icon").removeClass("fa-arrow-right")
 
−
          $("#expandSidebar-icon").addClass("fa-arrow-left")
 
−
          }else{
 
−
          $("#menu").css('width','300px')
 
−
          $(".titulo1MarcoTwolines").addClass("titulo1-marco-twolines")
 
−
          $(".titulo1-marco-twolines").removeClass("titulo1MarcoTwolines")
 
−
          $(".titulo1-marco-twolines").removeClass("titulo1-marco-oneline")
 
−
          $("#sectionPure").css({'margin-bottom':  '73px', 'margin-top':'7.5px'})
 
−
          $("#sectionSocial").css({'margin-bottom':'55px', 'margin-top':' 2px'})
 
−
          $("#space-end-pure").css({'margin-bottom':'80px'})
 
−
          $("#space-end-social").css({'margin-bottom':'30px'})
 
−
          $("#space-end-music").css({'margin-bottom':'40px'})
 
−
          $("#expandSidebar-icon").removeClass("fa-arrow-left")
 
−
          $("#expandSidebar-icon").addClass("fa-arrow-right")
 
−
          }
 
−
      }
 
−
 
 
−
     
 
−
      $("#inputButton").hover(function(){
 
−
          $(".hamb").css("background", "#5c4444");
 
−
          }, function(){
 
−
          $(".hamb").css("background", "#837e7e");
 
−
      });
 
−
     
 
−
      $("#button-pe").hover(function(){
 
−
          $(".fa-atom").css('font-size', '21px')
 
−
          }, function(){
 
−
          if ( $(this).hasClass("bottom-selected") ) {
 
−
              $(".fa-atom").css('font-size', '21px')
 
−
          }else{
 
−
              $(".fa-atom").css('font-size', '19px')
 
−
          }
 
−
      });
 
−
 
 
−
      $("#button-menu").hover(function(){
 
−
          $(".fa-ellipsis-v").css('font-size', '20px')
 
−
          }, function(){
 
−
          if ( $(this).hasClass("bottom-selected") ) {
 
−
              $(".fa-ellipsis-v").css('font-size', '20px')
 
−
          }else{
 
−
              $(".fa-ellipsis-v").css('font-size', '18px')
 
−
          }
 
−
      });
 
−
 
 
−
      $("#button-others").hover(function(){
 
−
          $(".fa-yin-yang").css('font-size', '20px')
 
−
          }, function(){
 
−
          if ( $(this).hasClass("bottom-selected") ) {
 
−
              $(".fa-yin-yang").css('font-size', '20px')
 
−
          }else{
 
−
              $(".fa-yin-yang").css('font-size', '18px')
 
−
          }
 
−
      });
 
−
 
 
−
      $("#button-tools").hover(function() {
 
−
          $(".fa-tools").css('font-size', '19px')
 
−
          }, function() {
 
−
          if ( $(this).hasClass("bottom-selected") ) {
 
−
              $(".fa-tools").css('font-size', '19px')
 
−
          }else{
 
−
              $(".fa-tools").css('font-size', '17px')
 
−
          }
 
−
      });
 
−
 
 
−
      function resaltarSection() {
 
−
          // $(".mw-collapsible-text").hover(function() {
 
−
          //    $(this).parent().parent().children(".resaltar").first().css({'cssText':'background: grey !important'})
 
−
          //    // $(".resaltar").first().css({'cssText':'background: red !important'})
 
−
          //    }, function(){
 
−
          //    $(this).parent().parent().children(".resaltar").first().css({'cssText':'background: reset'})
 
−
          // });
 
−
          $("#menuToggle .mw-collapsible-toggle").hover(function() {
 
−
              $(this).parent().children(".resaltar").first().css({'cssText':'background: #bdbdca !important'})
 
−
              // $(".resaltar").first().css({'cssText':'background: red !important'})
 
−
              }, function(){
 
−
              $(this).parent().children(".resaltar").first().css({'cssText':'background: reset'})
 
−
          });
 
−
          $(".resaltar").hover(function() {
 
−
              $(this).parent().children(".mw-collapsible-toggle").css({'cssText':'color: red !important; font-weight:normal'})
 
−
              $(this).parent().children(".mw-collapsible-toggle").children(".mw-collapsible-text").css({'cssText':'color: red !important; font-weight:normal !important'})
 
−
              // $(".resaltar").first().css({'cssText':'background: red !important'})
 
−
              }, function(){
 
−
              $(this).parent().children(".mw-collapsible-toggle").css({'cssText':'color: reset; font-weight:reset'})
 
−
              $(this).parent().children(".mw-collapsible-toggle").children(".mw-collapsible-text").css({'cssText':'color: reset !important; font-weight:reset !important'})
 
−
          });
 
−
      }
 
−
 
 
−
      // $(".mw-collapsible").hover(function(){
 
−
      //    $(this).children(".resaltar").first().css({'cssText':'background: red !important'})
 
−
      //    }, function(){
 
−
      //    $(this).children(".resaltar").first().css({'cssText':'background: reset'})
 
−
      // });
 
−
 
 
−
      // $(".mw-collapsible").hover(function(){
 
−
      //    $(".resaltar").css({'cssText':'background: red !important'})
 
−
      //    }, function(){
 
−
      //    $(".resaltar").css('background', 'grey')
 
−
      // });
 
−
 
 
−
 
 
−
      // function collapseAll() {
 
−
      //  $('.mw-collapsible').on( "click", "#aver", function() {
 
−
      //    $(".mw-collapsible").addClass("mw-collapsed");
 
−
      //  });
 
−
      // }
 
−
 
 
−
      // function collapseAll() {
 
−
      //  $(".mw-collapsible").addClass("mw-collapsed").reload();
 
−
      //  $( ".mw-collapsible" ).load(window.location.href + " .mw-collapsible" );
 
−
      // }
 
−
 
 
−
      // $(document).ready(function(){
 
−
      //  $("button").click(function(){
 
−
      //    $(".mw-collapsible").toggleClass("mw-collapsed");
 
−
      //  });
 
−
      // });
 
−
 
 
−
      // $(document).on('click', '.DoFirst', function() {
 
−
      //  $('#totalItems, #enteredItems').keyup(function(){
 
−
      //    collapseAll()
 
−
      //  }); 
 
−
      //  collapseAll()
 
−
      // });
 
−
 
 
−
      // $(document).on( function() {
 
−
      //  $('#totalItems, #enteredItems').keyup(function(){
 
−
      //    collapseAll()
 
−
      //  }); 
 
−
      //  collapseAll()
 
−
      // });
 
−
 
 
−
      // function moveSidebarToBody() {
 
−
      //    $("#MySidebar").appendTo("#pt-userpage");
 
−
      //    // document.body.appendChild(document.getElementById('MySidebar'))
 
−
      // }
 
−
 
 
−
      // Shortkey: https://www.techiedelight.com/create-keyboard-shortcuts-with-javascript-jquery-hotkeys-mousetrap-library/
 
−
      // For some reason, in MediaWiki pages, the && operator is not being interpreted by the web browser
 
−
      // as such in «keydown» functions. The web browser is reading «&amp;», instead of «&&» which generates a systax error.
 
−
      // To work around this problem I just broke the function using «2» if statements:
 
−
 
 
−
      // $(document).keydown(function(event) {
 
−
      //  if ( (event.ctrlKey) && (event.which === 88) ) {
 
−
      //    alert('Alt + X pressed!')
 
−
      //    e.preventDefault()
 
−
      //  }
 
−
      // });
 
−
 
 
−
      $(document).keydown(function(event) {
 
−
          if ( event.ctrlKey ) {
 
−
          if ( event.which === 66 )  { // Check key codes here: https://css-tricks.com/snippets/javascript/javascript-keycodes/
 
−
              // alert('Ctrl + B pressed!')
 
−
              var checkBox = document.getElementById("inputButton");
 
−
              if (checkBox.checked == true){
 
−
              checkBox.checked = false
 
−
              }else{
 
−
              checkBox.checked = true
 
−
              }
 
−
              myFunction()
 
−
              e.preventDefault()
 
−
          }
 
−
 
 
−
          // if ( event.which === 89 )  {
 
−
          //  $(document).on( function() {
 
−
          //    $('#totalItems, #enteredItems').keyup(function(){
 
−
          //      collapseAll()
 
−
          //    }); 
 
−
          //    collapseAll()
 
−
          //  });
 
−
          // }
 
−
 
 
−
          }
 
−
         
 
−
          if ( event.ctrlKey ) {
 
−
          if ( event.which === 89 ) {
 
−
              expandSidebar()
 
−
          }
 
−
          }
 
−
 
 
−
      });
 
−
 
 
−
      // Esta es otra forma de hacerlo
 
−
      // document.addEventListener("keydown", function(event) {
 
−
      //  if (event.ctrlKey && event.code === "KeyB") {
 
−
      //    alert('Alt + X pressed!');
 
−
      //    event.preventDefault();
 
−
      //  }
 
−
      // });
 
−
 
 
−
 
 
−
      $(document).ready( function() {
 
−
          $('#totalItems, #enteredItems').keyup(function(){
 
−
              collapseSome()
 
−
              checkUser()
 
−
              removeCSS()
 
−
 
 
−
              // This functions involved mw-collapsible, which has some problems when adding JS functionalities. So, to make sure
 
−
              // this function do what it has to do, we have to ensure that it runs when the DOM is ready.
 
−
              // Even inside «.ready()» is not working as expected (when we refresh the page, sometimes it works, sometimes it doesn't work).
 
−
              // So we needed to execute it after a delay:
 
−
              setTimeout( function() { resaltarSection() }, 3000 );
 
−
              // setTimeout( function() { collapseSome() },    5000 );
 
−
          });
 
−
          collapseSome()
 
−
          checkUser()
 
−
          removeCSS()
 
−
          setTimeout( function() { resaltarSection() }, 3000 );
 
−
          // setTimeout( function() { collapseSome() },    5000 );
 
−
      });
 
−
 
 
−
      // $(document).ready( function() {
 
−
      //    $('#totalItems, #enteredItems').keyup(function(){
 
−
      //        resaltarSection()
 
−
      //        // moveSidebarToBody()
 
−
      //    }); 
 
−
      //    resaltarSection()
 
−
      //    // moveSidebarToBody()
 
−
      // });
 
  
−
  </script>
+
        // This is by taking only the section I need:
−
}}
+
        document.getElementById("desktop-1-titulo-inter").innerHTML = document.getElementById("desktop-1-titulo").innerHTML
 +
        document.getElementById("Desktop-inter2").innerHTML = document.getElementById("desktop-main").innerHTML
  
 +
        $("#Desktop-inter1 p").addClass("desplaza-2")
 +
        $("#Desktop-inter1 .desktop-1-1").addClass("desplaza-2")
 +
        $("#Desktop-inter1 .text-1-1").removeClass("desplaza-2")
  
−
<!-- Transclusion of pages that contain MW tags -->
+
        $("#desktop-1-titulo-inter").wrap('<a href="Desktop" />');
−
<div id="MediawikiHelp0-inter0" style="display:none">
+
    </script>
−
{{#lst:My MediaWiki help|MediawikiHelp0}}
 
−
</div>
 
−
<html>
 
−
  <script>
 
−
      document.getElementById("MediawikiHelp0-inter1").innerHTML = document.getElementById("MediawikiHelp0-inter0").innerHTML
 
−
  </script>
 
 
</html>
 
</html>

Latest revision as of 17:58, 26 June 2022



Retrieved from "http://wiki.sinfronteras.ws/index.php?title=Template:Sidebar&oldid=23632"