Difference between revisions of "Template:Sidebar"
Adelo Vieira (talk | contribs) |
Adelo Vieira (talk | contribs) |
||
| Line 1: | Line 1: | ||
{{#tag:html| | {{#tag:html| | ||
| − | + | <style> | |
| − | + | /* MediaWiki page configurations */ | |
| − | + | #content { margin: -1px 0px 0px 180px; } | |
| − | + | #left-navigation { margin-left:180px } | |
| − | + | #footer { margin: 0 0 0 180px } | |
| − | + | #bodyContent { z-index: 10 } | |
| − | + | .mw-wiki-logo { margin: 20px 0px 0px 0.5px } | |
| − | + | /* TOC */ | |
| − | + | div#toc.toc { | |
| − | + | font-size: 12pt; | |
| − | + | margin-top: -4.5pt; | |
| − | + | background: rgba(255, 255, 255, 1); | |
| − | + | margin-right: 12pt; | |
| − | + | } | |
| − | + | .tocUl { | |
| − | + | overflow-y: scroll !important; | |
| − | + | overflow-x: scroll !important; | |
| − | + | max-height: calc(100vh - 150px); | |
| − | + | width: 350px !important; | |
| − | + | padding-bottom: 30px !important; | |
| − | + | white-space: nowrap !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; | |
| − | + | } | |
| − | + | #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 */ | |
| − | + | } | |
| − | + | .fa-atom { font-size: 21px; } | |
| − | + | .fa-info { font-size: 18px; } | |
| − | + | .fa-tools { font-size: 17px; } | |
| − | + | .fa-atom:hover { color:black; } | |
| − | + | .fa-info: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-info"> </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"> | |
| − | + | <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-info").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-info").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-info").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-info").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-info").css('font-size', '20px') | |
| − | + | }, function(){ | |
| − | + | if ( $(this).hasClass("bottom-selected") ) { | |
| − | + | $(".fa-info").css('font-size', '20px') | |
| − | + | }else{ | |
| − | + | $(".fa-info").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 «&», 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> | |
}} | }} | ||
| Line 728: | Line 728: | ||
</div> | </div> | ||
<html> | <html> | ||
| − | + | <script> | |
| − | + | document.getElementById("MediawikiHelp0-inter1").innerHTML = document.getElementById("MediawikiHelp0-inter0").innerHTML | |
| − | + | </script> | |
</html> | </html> | ||
Revision as of 13:06, 21 March 2021
