Fixed css issues

mod/disk/raid/handler.go

@@ -20,6 +20,12 @@ import (
 	This module handle api call to the raid module
 */
 
+// Handle stopping a RAID array for maintaince
+func (m *Manager) HandleStopRAIDArray(w http.ResponseWriter, r *http.Request) {
+
+}
+
+// Handle remove a member disk (sdX) from RAID volume (mdX)
 func (m *Manager) HandleRemoveDiskFromRAIDVol(w http.ResponseWriter, r *http.Request) {
 	//mdadm --remove /dev/md0 /dev/sdb1
 	mdDev, err := utils.PostPara(r, "raidDev")
@@ -75,6 +81,7 @@ func (m *Manager) HandleRemoveDiskFromRAIDVol(w http.ResponseWriter, r *http.Req
 	utils.SendOK(w)
 }
 
+// Handle adding a disk (mdX) to RAID volume (mdX)
 func (m *Manager) HandleAddDiskToRAIDVol(w http.ResponseWriter, r *http.Request) {
 	//mdadm --add /dev/md0 /dev/sdb1
 	mdDev, err := utils.PostPara(r, "raidDev")

web/SystemAO/disk/raid/index.html

@@ -250,18 +250,31 @@
                         <div style="width: 100%; text-align:  center; margin-bottom: 1em;">
                             <p><i class="yellow exclamation triangle icon"></i> Danger Zone <i class="yellow exclamation triangle icon"></i></p>
                         </div>
-                        
-                        <button onclick="" class="circular basic red ui button">
-                            <i class="red stop icon"></i> Stop RAID
-                        </button>
-                        <button onclick="RAIDRemove();" class="circular red ui button">
-                            <i class="trash icon"></i> Remove RAID
-                        </button>
+                        <div style="width: 100%;" align="center">
+                            <button onclick="" class="circular basic red ui button">
+                                <i class="red stop icon"></i> Stop RAID
+                            </button>
+                            <button onclick="RAIDRemove();" class="circular red ui button">
+                                <i class="trash icon"></i> Remove RAID
+                            </button>
+                        </div>
+                       
                         
                        
                        
                         <br><br><br><br>
                     </div>
+                    <div id="noRAIDVolumeWarning" style="display:none;">
+                        <div class="ui basic segment">
+                            <h4 class="ui header">
+                                <img src="../disk/raid/img/drive-notfound.svg">
+                                <div class="content">
+                                    <span>No RAID Volume</span>
+                                    <div class="sub header">Create a new RAID volume by pressing the <i class="ui green circle add icon" style="margin-right: 0;"></i> button</div>
+                                </div>
+                            </h4>
+                        </div>
+                    </div>
                 </div>
             </div>
 
@@ -713,7 +726,11 @@
 
                     if (data.length == 0){
                         $("#raidVolList").html(`<div><i class="ui green check circle icon"></i> No RAID Volumes</div>`);
+                        $("#volumeDetail").hide();
+                        $("#noRAIDVolumeWarning").show();
                     }else{
+                        $("#volumeDetail").show();
+                        $("#noRAIDVolumeWarning").hide();
                         //Load the first RAID vol info
                         if (selectMDName){
                             loadRAIDVolDetail(selectMDName);

web/SystemAO/file_system/defaultOpener.html

@@ -25,24 +25,26 @@
                 border: 1px solid #cccccc;
                 height:330px;
                 overflow-y:auto;
+                margin-left: -1px;
+                margin-right: -1px;
             }
-            .item{
+            .moduleSelector .item{
                 padding:12px;
                 cursor: pointer;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
-            .item.hidden{
+            .moduleSelector .item.hidden{
                 display:none;
             }
-            .item.selected{
+            .moduleSelector .item.selected{
                 background-color: var(--theme_color);
             }
-            .item:hover{
-                background-color:var(--body_background_active);
+            .moduleSelector .item:hover{
+                background-color:var(--body_background_active) !important;
             }
-            .item img{
+            .moduleSelector .item img{
                 vertical-align: middle;
                 height:26px;
                 margin-right:12px;
@@ -65,7 +67,7 @@
             <div id="moduleList" class="moduleSelector">
                 
             </div>
-            <button id="showallbtn" class="ui fluid basic tiny button" onclick="showAllModules();" locale="button/showAll">Show All</button>
+            <button id="showallbtn" class="ui bottom attached fluid basic tiny button" onclick="showAllModules();" locale="button/showAll">Show All</button>
         </div>
         <div class="bottomControls" align="right">
             <button class="ui basic small button" onclick="cancel();" locale="button/cancel">Cancel</button>

web/SystemAO/file_system/file_properties.html

@@ -31,7 +31,6 @@
             }
 
             .small.basic.white.fluid.button{
-                border: 1px solid var(--text_color_secondary);
                 color: var(--text_color_secondary) !important;
             }
 

web/script/ao.css

@@ -5,7 +5,7 @@ body.whiteTheme {
     --body_text: black;
     --body_background: rgb(250, 250, 250);
     --body_background_secondary: #fcfcfc;
-    --body_background_active: #fcfcfce1;
+    --body_background_active: #eeeeee;
     --divider: #f0f0f0;
     --theme_color: #92cfe7;
     --text_color: rgb(29, 29, 29);