Use CSS to show/hide elements in default view

This commit is contained in:
Carsten Grohmann 2019-11-13 20:48:44 +01:00
parent 824e8365e6
commit 138022beae
2 changed files with 30 additions and 18 deletions

View File

@ -6,6 +6,7 @@
<title>OOM Analyser</title>
<style>
/* Use BEM naming convention */
.text--append-suffix-kbytes {
text-align: right;
@ -25,15 +26,19 @@
text-align: right;
}
.js-text--display-none {
display: none;
}
.text__superscript {
vertical-align: super;
font-size: 0.83em;
}
.text--default-hide {
/* empty just used to hide elements in the default view */
}
.text--default-show {
/* empty just used to show elements in the default view */
}
svg {
display: block;
max-height: 200px;
@ -82,6 +87,9 @@
color: #D8000C;
background-color: #FFD2D2;
}
.js-text--display-none {
display: none;
}
.license__text {
font-size: small;
@ -117,9 +125,9 @@ function goBack() {
</p>
<p>
<div class="terminal notify_box js-text--display-none" id="notify_box"></div>
<div class="terminal notify_box text--default-hide js-text--display-none" id="notify_box"></div>
<div id="input">
<div class="text--default-show" id="input">
<h2>Step 1 - Enter your OOM message</h2>
<textarea autocomplete="off" cols="100" id="textarea_oom" onfocusin="OOMAnalyser.OOMDisplayInstance.empty_textarea_oom()" rows="20" title="OOM input field">Add your OOMhere</textarea>
<br/>
@ -128,7 +136,7 @@ function goBack() {
<button onclick="OOMAnalyser.OOMDisplayInstance.copy_example_to_form()" title="Copy an example OOM into the input area">Insert example</button>
</div>
<div id="analysis">
<div class="text--default-hide js-text--display-none" id="analysis">
<h2>Step 2 - Results</h2>
<p>
@ -598,7 +606,7 @@ function goBack() {
title="Show / hide installation guide">(click to show / hide)</a>
</h2>
<div class="js-text--display-none" id="installation">
<div class="text--default-hide js-text--display-none" id="installation">
Installing OOMAnalyser is quite easy since OOMAnalyser consists only of two files, a
HTML file and a JavaScript file. Both can be stored locally to use OOMAnalyser
without an Internet connection.

View File

@ -843,8 +843,13 @@ Killed process 6576 (java) total-vm:33914892kB, anon-rss:20629004kB, file-rss:0k
if clean_oom:
document.getElementById('textarea_oom').value = self.paste_note
hide_element('analysis')
show_element('input')
# hide all elements marked to be hidden by default
for element in document.querySelectorAll('.text--default-hide'):
element.classList.add('js-text--display-none')
# show all elements marked to be shown by default
for element in document.querySelectorAll('.text--default-show'):
element.classList.remove('js-text--display-none')
# show hidden rows
for element in document.querySelectorAll('table .js-text--display-none'):
@ -858,7 +863,6 @@ Killed process 6576 (java) total-vm:33914892kB, anon-rss:20629004kB, file-rss:0k
element = document.getElementById('notify_box')
while element.firstChild:
element.removeChild(element.firstChild)
hide_element('notify_box')
# remove svg charts
for element_id in ('svg_swap', 'svg_ram'):