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> <title>OOM Analyser</title>
<style> <style>
/* Use BEM naming convention */
.text--append-suffix-kbytes { .text--append-suffix-kbytes {
text-align: right; text-align: right;
@ -25,15 +26,19 @@
text-align: right; text-align: right;
} }
.js-text--display-none {
display: none;
}
.text__superscript { .text__superscript {
vertical-align: super; vertical-align: super;
font-size: 0.83em; 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 { svg {
display: block; display: block;
max-height: 200px; max-height: 200px;
@ -75,13 +80,16 @@
} }
.js-notify_box__msg--warning { .js-notify_box__msg--warning {
color: #9F6000; color: #9F6000;
background-color: #FEEFB3; background-color: #FEEFB3;
} }
.js-notify_box__msg--error { .js-notify_box__msg--error {
color: #D8000C; color: #D8000C;
background-color: #FFD2D2; background-color: #FFD2D2;
} }
.js-text--display-none {
display: none;
}
.license__text { .license__text {
font-size: small; font-size: small;
@ -117,9 +125,9 @@ function goBack() {
</p> </p>
<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> <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> <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/> <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> <button onclick="OOMAnalyser.OOMDisplayInstance.copy_example_to_form()" title="Copy an example OOM into the input area">Insert example</button>
</div> </div>
<div id="analysis"> <div class="text--default-hide js-text--display-none" id="analysis">
<h2>Step 2 - Results</h2> <h2>Step 2 - Results</h2>
<p> <p>
@ -598,7 +606,7 @@ function goBack() {
title="Show / hide installation guide">(click to show / hide)</a> title="Show / hide installation guide">(click to show / hide)</a>
</h2> </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 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 HTML file and a JavaScript file. Both can be stored locally to use OOMAnalyser
without an Internet connection. 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: if clean_oom:
document.getElementById('textarea_oom').value = self.paste_note document.getElementById('textarea_oom').value = self.paste_note
hide_element('analysis') # hide all elements marked to be hidden by default
show_element('input') 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 # show hidden rows
for element in document.querySelectorAll('table .js-text--display-none'): 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') element = document.getElementById('notify_box')
while element.firstChild: while element.firstChild:
element.removeChild(element.firstChild) element.removeChild(element.firstChild)
hide_element('notify_box')
# remove svg charts # remove svg charts
for element_id in ('svg_swap', 'svg_ram'): for element_id in ('svg_swap', 'svg_ram'):