tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve responsive scaling with medium screens

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-04-12 22:59:57 +00:00
parent ce18b94ea1
commit 16be63e98f
2 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
scripts/index.js
View File

@ -35,25 +35,25 @@ async function populateInstances () {
instanceContainer.innerHTML = ` instanceContainer.innerHTML = `
<div class="w3-row w3-hide-small w3-border-bottom"> <div class="w3-row w3-hide-small w3-border-bottom">
<div class="w3-col s1"> <div class="w3-col l1 m2">
<p>VM ID</p> <p>VM ID</p>
</div> </div>
<div class="w3-col s2"> <div class="w3-col l2 m3">
<p>VM Name</p> <p>VM Name</p>
</div> </div>
<div class="w3-col s1"> <div class="w3-col l1 m2">
<p>VM Type</p> <p>VM Type</p>
</div> </div>
<div class="w3-col s2"> <div class="w3-col l2 m3">
<p>VM Status</p> <p>VM Status</p>
</div> </div>
<div class="w3-col s2"> <div class="w3-col l2 w3-hide-medium">
<p>Host Name</p> <p>Host Name</p>
</div> </div>
<div class="w3-col s2"> <div class="w3-col l2 w3-hide-medium">
<p>Host Status</p> <p>Host Status</p>
</div> </div>
<div class="w3-col s2"> <div class="w3-col l2 m2">
<p>Actions</p> <p>Actions</p>
</div> </div>
</div> </div>

14
scripts/instance.js
View File

@ -10,27 +10,27 @@ export class Instance extends HTMLElement {
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<div class="w3-row w3-border-bottom"> <div class="w3-row w3-border-bottom">
<div class="w3-col m1 s6"> <div class="w3-col l1 m2 s6">
<p id="instance-id"></p> <p id="instance-id"></p>
</div> </div>
<div class="w3-col m2 s6"> <div class="w3-col l2 m3 s6">
<p id="instance-name"></p> <p id="instance-name"></p>
</div> </div>
<div class="w3-col m1 w3-hide-small"> <div class="w3-col l1 m2 w3-hide-small">
<p id="instance-type"></p> <p id="instance-type"></p>
</div> </div>
<div class="w3-col m2 s6 flex-row-nowrap"> <div class="w3-col l2 m3 s6 flex-row-nowrap">
<img id="instance-status-icon"> <img id="instance-status-icon">
<p id="instance-status"></p> <p id="instance-status"></p>
</div> </div>
<div class="w3-col m2 w3-hide-small"> <div class="w3-col l2 w3-hide-medium w3-hide-small">
<p id="node-name"></p> <p id="node-name"></p>
</div> </div>
<div class="w3-col m2 flex-row-nowrap w3-hide-small"> <div class="w3-col l2 w3-hide-medium w3-hide-small flex-row-nowrap">
<img id="node-status-icon"> <img id="node-status-icon">
<p id="node-status"></p> <p id="node-status"></p>
</div> </div>
<div class="w3-col m2 s6 flex-row-nowrap" style="padding-top: 15px;"> <div class="w3-col l2 m2 s6 flex-row-nowrap" style="padding-top: 15px;">
<img id="power-btn" class="clickable"> <img id="power-btn" class="clickable">
<img id="console-btn" class="clickable"> <img id="console-btn" class="clickable">
<img id="configure-btn" class="clickable"> <img id="configure-btn" class="clickable">