Difference between revisions of "Template:Sidebar"
Adelo Vieira (talk | contribs) |
Adelo Vieira (talk | contribs) |
||
| Line 287: | Line 287: | ||
background-color: #d1d1de !important; /* #f44336 rgb(60, 60, 70) #3c4043 */ | background-color: #d1d1de !important; /* #f44336 rgb(60, 60, 70) #3c4043 */ | ||
} | } | ||
| − | .fa-atom { font-size: 21px; } | + | #menuToggle .fa-atom { font-size: 21px; } |
| − | .fa-yin-yang { font-size: 19px; } | + | #menuToggle .fa-yin-yang { font-size: 19px; } |
| − | .fa-tools { font-size: 17px; } | + | #menuToggle .fa-tools { font-size: 17px; } |
| − | .fa-atom:hover { color:black; } | + | #menuToggle .fa-atom:hover { color:black; } |
| − | .fa-yin-yang:hover { color:black; } | + | #menuToggle .fa-yin-yang:hover { color:black; } |
| − | .fa-tools:hover { color:black; } | + | #menuToggle .fa-tools:hover { color:black; } |
| − | .fa-ellipsis-v:hover { color:black; } | + | #menuToggle .fa-ellipsis-v:hover { color:black; } |
.area { | .area { | ||
color: black; | color: black; | ||
| Line 335: | Line 335: | ||
<!-- | <!-- | ||
| − | Some spans to act as a hamburger. | + | 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> --> | <!-- <div> --> | ||
| Line 355: | Line 356: | ||
<div style="text-align:right; margin-top:-31px; margin-bottom: 15px; padding-right: 5px"> | <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> | + | <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> | ||
| Line 363: | Line 364: | ||
<button id="button-others" class="button izquierda tablink" onclick="openCity(event,'Others')"> <i class="fas fa-yin-yang"> </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-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- | + | <!-- <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> --> | <!-- <button id="button-menu" class="button centrar tablink" onclick="openCity(event,'Menu')" > <i class="fas fa-tools"></i> </button> --> | ||
</div> | </div> | ||
| Line 422: | Line 423: | ||
if (cityName == "PE") { | if (cityName == "PE") { | ||
| − | $(".fa-atom").css('font-size', '21px') | + | $("#menuToggle .fa-atom").css('font-size', '21px') |
| − | $(".fa-ellipsis-v").css('font-size','18px') | + | $("#menuToggle .fa-ellipsis-v").css('font-size','18px') |
| − | $(".fa-yin-yang").css('font-size', '19px') | + | $("#menuToggle .fa-yin-yang").css('font-size', '19px') |
| − | $(".fa-tools").css('font-size', '17px') | + | $("#menuToggle .fa-tools").css('font-size', '17px') |
}else if (cityName == "Menu") { | }else if (cityName == "Menu") { | ||
| − | $(".fa-atom").css('font-size', '19px') | + | $("#menuToggle .fa-atom").css('font-size', '19px') |
| − | $(".fa-ellipsis-v").css('font-size','20px') | + | $("#menuToggle .fa-ellipsis-v").css('font-size','20px') |
| − | $(".fa-yin-yang").css('font-size', '19px') | + | $("#menuToggle .fa-yin-yang").css('font-size', '19px') |
| − | $(".fa-tools").css('font-size', '17px') | + | $("#menuToggle .fa-tools").css('font-size', '17px') |
}else if (cityName == "Others") { | }else if (cityName == "Others") { | ||
| − | $(".fa-atom").css('font-size', '19px') | + | $("#menuToggle .fa-atom").css('font-size', '19px') |
| − | $(".fa-ellipsis-v").css('font-size','18px') | + | $("#menuToggle .fa-ellipsis-v").css('font-size','18px') |
| − | $(".fa-yin-yang").css('font-size', '21px') | + | $("#menuToggle .fa-yin-yang").css('font-size', '21px') |
| − | $(".fa-tools").css('font-size', '17px') | + | $("#menuToggle .fa-tools").css('font-size', '17px') |
}else { | }else { | ||
| − | $(".fa-atom").css('font-size', '19px') | + | $("#menuToggle .fa-atom").css('font-size', '19px') |
| − | $(".fa-ellipsis-v").css('font-size','18px') | + | $("#menuToggle .fa-ellipsis-v").css('font-size','18px') |
| − | $(".fa-yin-yang").css('font-size', '19px') | + | $("#menuToggle .fa-yin-yang").css('font-size', '19px') |
| − | $(".fa-tools").css('font-size', '19px') | + | $("#menuToggle .fa-tools").css('font-size', '19px') |
} | } | ||
} | } | ||
| Line 524: | Line 525: | ||
}); | }); | ||
| − | $("#button-pe").hover(function(){ | + | $("#menuToggle #button-pe").hover(function(){ |
| − | $(".fa-atom").css('font-size', '21px') | + | $("#menuToggle .fa-atom").css('font-size', '21px') |
}, function(){ | }, function(){ | ||
if ( $(this).hasClass("bottom-selected") ) { | if ( $(this).hasClass("bottom-selected") ) { | ||
| − | $(".fa-atom").css('font-size', '21px') | + | $("#menuToggle .fa-atom").css('font-size', '21px') |
}else{ | }else{ | ||
| − | $(".fa-atom").css('font-size', '19px') | + | $("#menuToggle .fa-atom").css('font-size', '19px') |
} | } | ||
}); | }); | ||
| − | $("#button-menu").hover(function(){ | + | $("#menuToggle #button-menu").hover(function(){ |
| − | $(".fa-ellipsis-v").css('font-size', '20px') | + | $("#menuToggle .fa-ellipsis-v").css('font-size', '20px') |
}, function(){ | }, function(){ | ||
if ( $(this).hasClass("bottom-selected") ) { | if ( $(this).hasClass("bottom-selected") ) { | ||
| − | $(".fa-ellipsis-v").css('font-size', '20px') | + | $("#menuToggle .fa-ellipsis-v").css('font-size', '20px') |
}else{ | }else{ | ||
| − | $(".fa-ellipsis-v").css('font-size', '18px') | + | $("#menuToggle .fa-ellipsis-v").css('font-size', '18px') |
} | } | ||
}); | }); | ||
| − | $("#button-others").hover(function(){ | + | $("#menuToggle #button-others").hover(function(){ |
| − | $(".fa-yin-yang").css('font-size', '21px') | + | $("#menuToggle .fa-yin-yang").css('font-size', '21px') |
}, function(){ | }, function(){ | ||
if ( $(this).hasClass("bottom-selected") ) { | if ( $(this).hasClass("bottom-selected") ) { | ||
| − | $(".fa-yin-yang").css('font-size', '21px') | + | $("#menuToggle .fa-yin-yang").css('font-size', '21px') |
}else{ | }else{ | ||
| − | $(".fa-yin-yang").css('font-size', '19px') | + | $("#menuToggle .fa-yin-yang").css('font-size', '19px') |
} | } | ||
}); | }); | ||
$("#button-tools").hover(function() { | $("#button-tools").hover(function() { | ||
| − | $(".fa-tools").css('font-size', '19px') | + | $("#menuToggle .fa-tools").css('font-size', '19px') |
}, function() { | }, function() { | ||
if ( $(this).hasClass("bottom-selected") ) { | if ( $(this).hasClass("bottom-selected") ) { | ||
| − | $(".fa-tools").css('font-size', '19px') | + | $("#menuToggle .fa-tools").css('font-size', '19px') |
}else{ | }else{ | ||
| − | $(".fa-tools").css('font-size', '17px') | + | $("#menuToggle .fa-tools").css('font-size', '17px') |
} | } | ||
}); | }); | ||
Revision as of 16:07, 21 March 2021
