webui: Add FA icons for sections/headers; Adjust header styles

5 files changed, 22 insertions, 24 deletions

diff --git a/fg21sim/webui/static/css/main.css b/fg21sim/webui/static/css/main.css
index 7951286..4dcffb8 100644
--- a/fg21sim/webui/static/css/main.css
+++ b/fg21sim/webui/static/css/main.css
@@ -133,13 +133,10 @@ header.masthead {
 }
 .navigation .navigation-link {
     display: inline;
-    font-size: 1.6rem;
+    font-size: 1.2rem;
     line-height: 5.2rem;
-    padding: 0;
-    text-decoration: none;
-}
-.navigation .navigation-link .active {
-    color: #606c76;
+    padding: 0.3rem 0.5rem;
+    margin-top: 1.5rem;
 }
 
 
diff --git a/fg21sim/webui/templates/configs.html b/fg21sim/webui/templates/configs.html
index 8828e6d..b86a72c 100644
--- a/fg21sim/webui/templates/configs.html
+++ b/fg21sim/webui/templates/configs.html
@@ -5,7 +5,7 @@
  # Configuration part
  #}
 <section id="configs">
-  <h2>Configurations</h2>
+  <h2><span class="fa fa-wrench" aria-hidden="true"></span> Configurations</h2>
   <hr />
 
   <!-- Configuration Form -->
@@ -34,7 +34,7 @@
 
     <!-- Configuration section "[common]" -->
     <fieldset id="conf-common">
-      <h4>Common</h4>
+      <h4><span class="fa fa-asterisk" aria-hidden="true"></span> Common</h4>
       <hr class="hr-thin hr-condensed hr-dashed" />
       <div class="row">
         <div class="column column-30 form-group">
@@ -76,7 +76,7 @@
 
     <!-- Configuration section "[frequency]" -->
     <fieldset id="conf-frequency">
-      <h4>Frequency</h4>
+      <h4><span class="fa fa-asterisk" aria-hidden="true"></span> Frequency</h4>
       <hr class="hr-thin hr-condensed hr-dashed" />
       <div class="row">
         <div class="column column-30 form-group">
@@ -126,7 +126,7 @@
 
     <!-- Configuration section "[output]" -->
     <fieldset id="conf-output">
-      <h4>Output</h4>
+      <h4><span class="fa fa-asterisk" aria-hidden="true"></span> Output</h4>
       <hr class="hr-thin hr-condensed hr-dashed" />
       <div class="row">
         <div class="column column-30 form-group">
@@ -190,7 +190,7 @@
 
     <!-- Configuration section "[cosmology]" -->
     <fieldset id="conf-cosmology">
-      <h4>Cosmology</h4>
+      <h4><span class="fa fa-asterisk" aria-hidden="true"></span> Cosmology</h4>
       <hr class="hr-thin hr-condensed hr-dashed" />
       <div class="row">
         <div class="column column-50 form-group">
@@ -206,7 +206,7 @@
 
     <!-- Configuration section "[logging]" -->
     <fieldset id="conf-logging">
-      <h4>Logging</h4>
+      <h4><span class="fa fa-asterisk" aria-hidden="true"></span> Logging</h4>
       <hr class="hr-thin hr-condensed hr-dashed" />
       <div class="row">
         <fieldset id="conf-logging-level" class="column radios">
@@ -262,12 +262,12 @@
 
     <!-- Configuration section "[galactic]" -->
     <fieldset id="conf-g">
-      <h4>Galactic Components</h4>
+      <h4><span class="fa fa-asterisk" aria-hidden="true"></span> Galactic Components</h4>
       <hr class="hr-thin hr-condensed hr-dashed" />
 
       <!-- Configuration sub-section "[galactic][synchrotron]" -->
       <fieldset id="conf-g-synchrotron">
-        <h5>Synchrotron Emission</h5>
+        <h5><span class="fa fa-circle-o" aria-hidden="true"></span> Synchrotron Emission</h5>
         <div class="row">
           <div class="column column-40 form-group">
             <label for="conf-g-synchrotron-template">Template Map:</label>
@@ -316,7 +316,7 @@
 
       <!-- Configuration sub-section "[galactic][freefree]" -->
       <fieldset id="conf-g-freefree">
-        <h5>Free-free Emission</h5>
+        <h5><span class="fa fa-circle-o" aria-hidden="true"></span> Free-free Emission</h5>
         <div class="row">
           <div class="column column-40 form-group">
             <label for="conf-g-freefree-halphamap">Hα Template Map:</label>
@@ -359,7 +359,7 @@
 
       <!-- Configuration sub-section "[galactic][snr]" -->
       <fieldset id="conf-g-snr">
-        <h5>Supernova Remnants Emission</h5>
+        <h5><span class="fa fa-circle-o" aria-hidden="true"></span> Supernova Remnants Emission</h5>
         <div class="row">
           <div class="column column-50 form-group">
             <label for="conf-g-snr-catalog">Input Catalog:</label>
@@ -399,12 +399,12 @@
 
     <!-- Configuration section "[extragalactic]" -->
     <fieldset id="conf-eg">
-      <h4>Extragalactic Components</h4>
+      <h4><span class="fa fa-asterisk" aria-hidden="true"></span> Extragalactic Components</h4>
       <hr class="hr-thin hr-condensed hr-dashed" />
 
       <!-- Configuration sub-section "[extragalactic][clusters]" -->
       <fieldset id="conf-eg-clusters">
-        <h5>Clusters of Galaxies Emission</h5>
+        <h5><span class="fa fa-circle-o" aria-hidden="true"></span> Clusters of Galaxies Emission</h5>
         <div class="row">
           <div class="column column-50 form-group">
             <label for="conf-eg-clusters-catalog">Input Catalog:</label>
diff --git a/fg21sim/webui/templates/console.html b/fg21sim/webui/templates/console.html
index 5516242..00a2b02 100644
--- a/fg21sim/webui/templates/console.html
+++ b/fg21sim/webui/templates/console.html
@@ -5,10 +5,11 @@
  # Console part
  #}
 <section id="console">
-  <h2>Console</h2>
+  <h2><span class="fa fa-gamepad" aria-hidden="true"></span> Console</h2>
   <hr />
 
   <p class="status"><strong>
+      <span class="fa fa-dashboard" aria-hidden="true"></span>
       Simulation status:
       <span id="fg21sim-status" class="label label-default">N/A</span>
   </strong></p>
@@ -20,7 +21,7 @@
 
   <div id="log-messages" class="panel panel-default">
     <div class="panel-heading">
-      <span class="panel-title">Logging Messages</span>
+      <span class="panel-title"><span class="fa fa-comments" aria-hidden="true"></span> Logging Messages</span>
     </div>
     <div class="panel-body">
       <p>messages ...</p>
diff --git a/fg21sim/webui/templates/header.html b/fg21sim/webui/templates/header.html
index 8b7734f..6309b50 100644
--- a/fg21sim/webui/templates/header.html
+++ b/fg21sim/webui/templates/header.html
@@ -13,9 +13,9 @@
     <span class="description">Foregrounds Simulation for EoR 21cm Signal Detection</span>
 
     <ul class="navigation-list float-right">
-      <li class="navigation-item"><a class="navigation-link" href="#configs" title="Configurations">Configurations</a></li>
-      <li class="navigation-item"><a class="navigation-link" href="#console" title="Console">Console</a></li>
-      <li class="navigation-item"><a class="navigation-link" href="#results" title="Results">Results</a></li>
+      <li class="navigation-item"><a class="navigation-link button button-outline" href="#configs" title="Configurations"><span class="fa fa-wrench" aria-hidden="true"></span> Configurations</a></li>
+      <li class="navigation-item"><a class="navigation-link button button-outline" href="#console" title="Console"><span class="fa fa-gamepad" aria-hidden="true"></span> Console</a></li>
+      <li class="navigation-item"><a class="navigation-link button button-outline" href="#results" title="Results"><span class="fa fa-files-o aria-hidden="true"></span> Results</a></li>
     </ul>
 
     <a class="hidden-xs github" href="https://github.com/liweitianux/fg21sim" title="fg21sim on Github" target="_blank">
diff --git a/fg21sim/webui/templates/results.html b/fg21sim/webui/templates/results.html
index 4935f28..f605f03 100644
--- a/fg21sim/webui/templates/results.html
+++ b/fg21sim/webui/templates/results.html
@@ -5,7 +5,7 @@
  # Results part
  #}
 <section id="results">
-  <h2>Results</h2>
+  <h2><span class="fa fa-files-o" aria-hidden="true"></span> Results</h2>
   <hr />
 
   <p>Simulation results go here :)</p>