Difference between revisions of "Template:Sidebar"
Adelo Vieira (talk | contribs) |
Adelo Vieira (talk | contribs) |
||
| Line 1: | Line 1: | ||
{{#tag:html| | {{#tag:html| | ||
| − | <style> | + | <style> |
| − | /* MediaWiki page configurations */ | + | /* MediaWiki page configurations */ |
| − | #content { margin: -1px 0px 0px 180px; } | + | #content { margin: -1px 0px 0px 180px; } |
| − | #left-navigation { margin-left:180px } | + | #left-navigation { margin-left:180px } |
| − | #footer { margin: 0 0 0 180px } | + | #footer { margin: 0 0 0 180px } |
| − | #bodyContent { z-index: 10 } | + | #bodyContent { z-index: 10 } |
| − | .mw-wiki-logo { margin: 20px 0px 0px 0.5px } | + | .mw-wiki-logo { margin: 20px 0px 0px 0.5px } |
| − | /* TOC */ | + | /* TOC */ |
| − | div#toc.toc { | + | div#toc.toc { |
| − | + | font-size: 12pt; | |
| − | + | margin-top: -4.5pt; | |
| − | + | background: rgba(255, 255, 255, 1); | |
| − | + | margin-right: 12pt; | |
| − | } | + | } |
| − | .tocUl { | + | .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 { | + | .tocUl a { |
| − | + | padding-right: 25px !important; | |
| − | } | + | } |
| − | .tochidden { | + | .tochidden { |
| − | + | height: 4pt !important; | |
| − | } | + | } |
| − | /* This block manages the CSS changes between "Mis paginas" page and the "Sidebar" page CSS */ | + | /* This block manages the CSS changes between "Mis paginas" page and the "Sidebar" page CSS */ |
| − | #menuToggle ul { | + | #menuToggle ul { |
| − | + | margin-top: 20px !important; | |
| − | + | margin-bottom: 35px !important; | |
| − | } | + | } |
| − | #menuToggle li { | + | #menuToggle li { |
| − | + | font: 14px / 22.4px sans-serif; | |
| − | + | margin-top: 0px ; | |
| − | + | margin-bottom: 15px ; | |
| − | } | + | } |
| − | #menuToggle .entre-li { | + | #menuToggle .entre-li { |
| − | + | margin-bottom: -15px ; | |
| − | } | + | } |
| − | #menuToggle .entre-li-n4 { | + | #menuToggle .entre-li-n4 { |
| − | + | margin-bottom: -30px ; | |
| − | } | + | } |
| − | #menuToggle .entre-li-n4-first { | + | #menuToggle .entre-li-n4-first { |
| − | + | margin-top: -25px ; | |
| − | } | + | } |
| − | #menuToggle ul .first-li { | + | #menuToggle ul .first-li { |
| − | + | margin-top: -15px !important; | |
| − | } | + | } |
| − | #menuToggle a { | + | #menuToggle a { |
| − | + | color: #0645AD !important; | |
| − | + | overflow-wrap: break-word; | |
| − | } | + | } |
| − | #menuToggle pre { | + | #menuToggle pre { |
| − | + | overflow-wrap: break-word; | |
| − | } | + | } |
| − | #menuToggle a:hover { | + | #menuToggle a:hover { |
| − | + | text-decoration: underline !important; | |
| − | } | + | } |
| − | #menuToggle a{ | + | #menuToggle a{ |
| − | + | font: 14px / 22.4px sans-serif; | |
| − | } | + | } |
| − | #menuToggle li{ | + | #menuToggle li{ |
| − | + | font: 14px / 22.4px sans-serif; | |
| − | } | + | } |
| − | #menuToggle span { | + | #menuToggle span { |
| − | + | font: 14px / 22.4px sans-serif; | |
| − | } | + | } |
| − | #menuToggle .base-li-1 { | + | #menuToggle .base-li-1 { |
| − | + | margin-bottom: -5px !important; | |
| − | } | + | } |
| − | #menuToggle .desplaza { | + | #menuToggle .desplaza { |
| − | + | margin-top: -12px; | |
| − | + | padding-right: 30px !important; | |
| − | } | + | } |
| − | #menuToggle .desplaza-2 { | + | #menuToggle .desplaza-2 { |
| − | + | margin-top: -10px !important; | |
| − | } | + | } |
| − | #menuToggle #space-end-pure { | + | #menuToggle #space-end-pure { |
| − | + | margin-bottom: 80px; | |
| − | } | + | } |
| − | #menuToggle #space-end-social { | + | #menuToggle #space-end-social { |
| − | + | margin-bottom: 30px; | |
| − | } | + | } |
| − | #menuToggle #space-end-music { | + | #menuToggle #space-end-music { |
| − | + | margin-bottom: 40px; | |
| − | } | + | } |
| − | #menuToggle ul:hover { | + | #menuToggle ul:hover { |
| − | + | /* color:#2864c4; */ | |
| − | } | + | } |
| − | #menuToggle .titulo1-text { | + | #menuToggle .titulo1-text { |
| − | + | font-size: 18px !important; | |
| − | } | + | } |
| − | #menuToggle .titulo2-text { | + | #menuToggle .titulo2-text { |
| − | + | font: 700 14px / 22.4px sans-serif !important; | |
| − | } | + | } |
| − | #menuToggle .titulo1-text-marco { | + | #menuToggle .titulo1-text-marco { |
| − | + | padding-left: 10px !important; | |
| − | + | padding-right: 40px !important; | |
| − | } | + | } |
| − | #menuToggle .titulo1-marco-oneline { | + | #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 { | + | #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 { | + | #menuToggle .titulo1MarcoTwolines { |
| − | + | padding-right: 0px; | |
| − | } | + | } |
| − | #menuToggle .titulo1-marco-color { | + | #menuToggle .titulo1-marco-color { |
| − | + | background: #9595ab !important; | |
| − | } | + | } |
| − | #menuToggle .titulo1-color { | + | #menuToggle .titulo1-color { |
| − | + | color: white !important; | |
| − | } | + | } |
| − | #menuToggle .marco1-ext { | + | #menuToggle .marco1-ext { |
| − | + | width: 100% !important; | |
| − | + | padding: 0px 0px 0px 0px !important; | |
| − | + | background: #e3e3e8 !important; | |
| − | } | + | } |
| − | #menuToggle .marco1-int { | + | #menuToggle .marco1-int { |
| − | + | background: #e3e3e8 !important; | |
| − | } | + | } |
| − | #menuToggle .marco1-ext .mw-editsection { | + | #menuToggle .marco1-ext .mw-editsection { |
| − | + | display: none !important; | |
| − | } | + | } |
| − | #menuToggle .divline1 { | + | #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 { | + | #menuToggle .mw-collapsible-toggle { |
| − | + | outline: none !important; | |
| − | } | + | } |
| − | #menuToggle .mw-collapsible-text:hover { | + | #menuToggle .mw-collapsible-text:hover { |
| − | + | color: red !important; | |
| − | } | + | } |
| − | #menuToggle .mw-collapsible-toggle:hover { | + | #menuToggle .mw-collapsible-toggle:hover { |
| − | + | color: red !important; | |
| − | } | + | } |
| − | #menuToggle .button-top { | + | #menuToggle .button-top { |
| − | + | color: #999191; font-size:20px | |
| − | } | + | } |
| − | #menuToggle .button-top:hover { | + | #menuToggle .button-top:hover { |
| − | + | color: #5c4444; | |
| − | } | + | } |
| − | /* Sidebar (Pure CSS) */ | + | /* Sidebar (Pure CSS) */ |
| − | #menuToggle { | + | #menuToggle { |
| − | + | display: block; | |
| − | + | position: relative; | |
| − | + | top: -145px; | |
| − | + | margin-left: -205px; | |
| − | + | padding-left: 10px; | |
| − | + | <!-- -webkit-user-select: none; --> | |
| − | + | <!-- user-select: none; --> | |
| − | } | + | } |
| − | #menuToggle a { | + | #menuToggle a { |
| − | + | text-decoration: none; | |
| − | + | color: #232323; | |
| − | + | transition: color 0.3s ease; | |
| − | } | + | } |
| − | #menuToggle a:hover { color: tomato; } | + | #menuToggle a:hover { color: tomato; } |
| − | #menuToggle input { | + | #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 */ | + | /* Just a quick hamburger */ |
| − | #menuToggle .hamb { | + | #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 { | + | /* #menuToggle #inputButton:hover + #hamb1 { |
| − | + | background: #5c4444 !important; | |
| − | } */ | + | } */ |
| − | #menuToggle span:first-child { | + | #menuToggle span:first-child { |
| − | + | transform-origin: 0% 0%; | |
| − | } | + | } |
| − | #menuToggle span:nth-last-child(2) { | + | #menuToggle span:nth-last-child(2) { |
| − | + | transform-origin: 0% 100%; | |
| − | } | + | } |
| − | /* Transform all the slices of hamburger into a crossmark */ | + | /* Transform all the slices of hamburger into a crossmark */ |
| − | #menuToggle input:checked ~ .hamb { | + | #menuToggle input:checked ~ .hamb { |
| − | + | opacity: 1; | |
| − | + | transform: rotate(45deg) translate(-2px, -1px); | |
| − | + | background: #837e7e; | |
| − | } | + | } |
| − | /* But let's hide the middle one */ | + | /* But let's hide the middle one */ |
| − | #menuToggle input:checked ~ span:nth-last-child(3) { | + | #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 */ | + | /* Ohyeah and the last one should go the other direction */ |
| − | #menuToggle input:checked ~ span:nth-last-child(2) { | + | #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 */ | + | /* Make this absolute positioned at the top left of the screen */ |
| − | #menu { | + | #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 { | + | #menu li { |
| − | + | padding: 10px 0 0 0; | |
| − | + | font-size: 22px; | |
| − | } | + | } |
| − | /* And let's slide it in from the left */ | + | /* And let's slide it in from the left */ |
| − | #menuToggle input:checked ~ #menu { | + | #menuToggle input:checked ~ #menu { |
| − | + | <!-- transform: none; --> | |
| − | + | display: block; | |
| − | } | + | } |
| − | /* Tab Menu */ | + | /* Tab Menu */ |
| − | .button { | + | .button { |
| − | + | font-size: 22px; | |
| − | + | color: inherit; | |
| − | + | background-color :inherit; | |
| − | + | padding: 6px 0px 6px 0px; | |
| − | + | border: none; | |
| − | + | outline: 0; | |
| − | + | cursor: pointer; | |
| − | } | + | } |
| − | .button:hover { } | + | .button:hover { } |
| − | .bottom-selected { | + | .bottom-selected { |
| − | + | color:rgb(60, 60, 70); | |
| − | + | background-color: #d1d1de !important; /* #f44336 rgb(60, 60, 70) #3c4043 */ | |
| − | } | + | } |
| − | .fa-atom { font-size: 21px; } | + | .fa-atom { font-size: 21px; } |
| − | .fa-info { font-size: 18px; } | + | .fa-info { font-size: 18px; } |
| − | .fa-tools { font-size: 17px; } | + | .fa-tools { font-size: 17px; } |
| − | .fa-atom:hover { color:black; } | + | .fa-atom:hover { color:black; } |
| − | .fa-info:hover { color:black; } | + | .fa-info:hover { color:black; } |
| − | .fa-tools:hover { color:black; } | + | .fa-tools:hover { color:black; } |
| − | .fa-ellipsis-v:hover { color:black; } | + | .fa-ellipsis-v:hover { color:black; } |
| − | .area { | + | .area { |
| − | + | color: black; | |
| − | + | padding: 5px 0px 5000px 3px; | |
| − | + | border: 0px solid #ccc !important; | |
| − | } | + | } |
| − | #container-button-tap { | + | #container-button-tap { |
| − | width:100%; | + | width:100%; |
| − | color:rgb(97, 97, 114); | + | color:rgb(97, 97, 114); |
| − | background-color: white; | + | background-color: white; |
| − | } | + | } |
| − | .izquierda{ | + | .izquierda{ |
| − | float:left; | + | float:left; |
| − | width:25%; | + | width:25%; |
| − | text-align: center; | + | text-align: center; |
| − | } | + | } |
| − | .derecha{ | + | .derecha{ |
| − | float:right; | + | float:right; |
| − | width:25%; | + | width:25%; |
| − | text-align: center; | + | text-align: center; |
| − | } | + | } |
| − | .centrar{ | + | .centrar{ |
| − | margin:0 auto; | + | margin:0 auto; |
| − | width:25%; | + | width:25%; |
| − | text-align: center; | + | 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" --> | |
| − | <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> --> | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | <!--Tap Menu --> | + | <!-- |
| − | + | 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-tools" class="button izquierda tablink" onclick="openCity(event,'Tools')" > <i class="fas fa-tools"></i> </button> | |
| − | + | <button id="button-others" class="button izquierda tablink" onclick="openCity(event,'Others')"> <i class="fas fa-info"> </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="sectionBase" style="margin-bottom: 30px; margin-top: 10px" > {{#lst:Mis páginas|base}}</div> | |
| − | + | <div id="sectionPure" style="margin-bottom: 73px; margin-top:-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: 30px; margin-top: 2px" > {{#lst:Mis páginas|musica0}}</div> | |
| − | + | <div id="sectionCarrera" style="margin-bottom: 800px; margin-top: 2px" > {{#lst:Mis páginas|Carrera0}}</div> | |
| + | </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: 200px; margin-top: 10px" > {{#lst:Mis páginas|Resources0}}</div> | |
| − | + | </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"></div> | |
| − | + | <!-- <div id="sectionBase" style="margin-bottom: 200px; margin-top: 10px;" > {{#lst:My MediaWiki help|MediawikiHelp0}}</div> --> | |
| − | </div> | + | </div> |
| + | </div> | ||
| + | |||
| + | <div id="Others" class="area city" style="display:none"> | ||
| + | <p>Under construction...</p> | ||
| + | </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> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| − | + | </nav> | |
| − | </nav> | ||
| − | <script> | + | <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',' | + | // $('body').css('background','red'); |
| + | }else{ | ||
| + | // $('body').css('background','blue'); | ||
| + | } | ||
}else{ | }else{ | ||
| − | // $('body').css('background','blue'); | + | // $('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':'2px'}) | |
| − | + | $("#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':'-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') | $(".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') | $(".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') | $(".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') | $(".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 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(){ | |
| + | checkUser() | ||
| + | collapseSome() | ||
| + | removeCSS() | ||
| + | // moveSidebarToBody() | ||
| + | }); | ||
checkUser() | checkUser() | ||
collapseSome() | collapseSome() | ||
removeCSS() | removeCSS() | ||
// moveSidebarToBody() | // moveSidebarToBody() | ||
| − | }); | + | }); |
| − | + | ||
| − | + | </script> | |
| − | |||
| − | |||
| − | |||
| − | </script> | ||
}} | }} | ||
| − | + | <!-- Transclusion of pages that contain MW tags --> | |
| − | + | <div id="MediawikiHelp0-inter0"> | |
| − | + | {{#lst:My MediaWiki help|MediawikiHelp0}} | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | <!-- | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<html> | <html> | ||
| − | <script> | + | <script> |
| − | + | document.getElementById("MediawikiHelp0-inter1").innerHTML = document.getElementById("MediawikiHelp0-inter0").innerHTML | |
| − | </script> | + | </script> |
</html> | </html> | ||
Revision as of 23:47, 17 March 2021
-
CSS & JS - MediaWiki:Common.*
-
Some HTML/Wiki tags
-
Figures
[[File:.jpg|950px|thumb|center|Título]]
<figure id="fig:nombre">
[[File:Text_classification1.png|600px|thumb|center|
<caption>Supervised Learning...</caption>
]]
</figure>
In <xr id="fig:nombre" /> we show...
-
MW Tables
-
Tablas centradas:
{| class="wikitable" style="width: 20px; height: 20px; margin: 0 auto;"
-
Vertial align:
|- style="vertical-align:top;"
-
Tablas con líneas tranparentes y 100% width:
{| style="border-spacing: 2px; width: 100%;"
-
Collapsible sections
<div class="mw-collapsible mw-collapsed" data-expandtext="+/-" data-collapsetext="+/-">
Título
<div class="mw-collapsible-content">
* Punto uno
* ...
</div>
</div>
-
Hidden content
<div class="oculto mw-collapsible mw-collapsed" data-expandtext="Expand hidden content" data-collapsetext="Collapse hidden content">
-
Syntax highlighting code
<syntaxhighlight lang="html"> < /syntaxhighlight>
<i class="fa fa-envelope"></i>
-
MW Sidebar
