Add some CSS to status page
This commit is contained in:
@ -4,14 +4,27 @@ const style = `
|
||||
<style>
|
||||
.column {
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
width: 24%;
|
||||
height: 100%;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.137);
|
||||
border-radius: 3%;
|
||||
transition: 0.3s;
|
||||
margin: 15px 3.33%;
|
||||
padding: 12px 16px;
|
||||
background-color: #282c34;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.column:hover {
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.795);
|
||||
}
|
||||
|
||||
/* Clear floats after the columns */
|
||||
.row:after {
|
||||
.row {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
@ -67,53 +80,52 @@ ${style}
|
||||
|
||||
configStatus.innerHTML = `
|
||||
${style}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h4><p>Status</p></h4>
|
||||
<p>Uptime: <slot name="uptime" /></p>
|
||||
<p>Last Bump was <slot name="lastbump" /></p>
|
||||
<p>by <slot id="lastbumper" name="lastbumper" /></p>
|
||||
<div class="column">
|
||||
<h4><p>Status</p></h4>
|
||||
<p>Uptime: <slot name="uptime" /></p>
|
||||
<p>Last Bump was <slot name="lastbump" /></p>
|
||||
<p>by <slot id="lastbumper" name="lastbumper" /></p>
|
||||
</div>
|
||||
<br>
|
||||
<div class="column">
|
||||
<h4><p>Config</p></h4>
|
||||
<form>
|
||||
<label for="Guild">Guild: </label>
|
||||
<input type="text" id="Guild" name="Guild" readonly/>
|
||||
<label for="AdminChannel">Admin Channel: </label>
|
||||
<input type="select" id="AdminChannel" name="AdminChannel"/>
|
||||
<label for="AdminRole">Admin Role: </label>
|
||||
<input type="select" id="AdminRole" name="AdminRole"/>
|
||||
<label for="MonitorChannel">Monitor Channel: </label>
|
||||
<input type="select" id="MonitorChannel" name="MonitorChannel"/>
|
||||
<label for="MonitorRole">Monitor Role: </label>
|
||||
<input type="select" id="MonitorRole" name="MonitorRole"/>
|
||||
<label for="IntroChannel">Intro Channel: </label>
|
||||
<input type="select" id="IntroChannel" name="IntroChannel"/>
|
||||
<label for="VerifiedRole">Verified Role: </label>
|
||||
<input type="select" id="VerifiedRole" name="VerifiedRole"/>
|
||||
<label for="OutFile">Logging OutFile: </label>
|
||||
<input type="text" id="OutFile" name="OutFile" />
|
||||
<label for="KBTeam">KB Team: </label>
|
||||
<input type="text" id="KBTeam" name="KBTeam" />
|
||||
<label for="KBChann">KB Channel: </label>
|
||||
<input type="text" id="KBChann" name="KBChann" />
|
||||
<label for="level">Logging Level: </label>
|
||||
<input type="number" id="Level" name="Level" />
|
||||
<label for="ProgName">Program Name: </label>
|
||||
<input type="text" id="ProgName" name="ProgName" />
|
||||
<label for="UseStdout">Use stdout: </label>
|
||||
<input type="checkbox" id="UseStdout" name="UseStdout"/>
|
||||
<label for="submitchanges"></label>
|
||||
<input style="width: 100%;" type="submit" id="submitchanges" name="submitchanges" onClick="alert('Post blocked.')">
|
||||
</form>
|
||||
</div>
|
||||
<br>
|
||||
<div id="admin-stats" class="column">
|
||||
<h4><p>Admin Stats</p></h4>
|
||||
</div>
|
||||
</div>
|
||||
<div id="admin-stats" class="column">
|
||||
|
||||
<h4><p>Admin Stats</p></h4>
|
||||
</div>
|
||||
<div class="column">
|
||||
|
||||
<h4><p>Config</p></h4>
|
||||
<form>
|
||||
<label for="Guild">Guild: </label>
|
||||
<input type="text" id="Guild" name="Guild" readonly/>
|
||||
<label for="AdminChannel">Admin Channel: </label>
|
||||
<input type="select" id="AdminChannel" name="AdminChannel"/>
|
||||
<label for="AdminRole">Admin Role: </label>
|
||||
<input type="select" id="AdminRole" name="AdminRole"/>
|
||||
<label for="MonitorChannel">Monitor Channel: </label>
|
||||
<input type="select" id="MonitorChannel" name="MonitorChannel"/>
|
||||
<label for="MonitorRole">Monitor Role: </label>
|
||||
<input type="select" id="MonitorRole" name="MonitorRole"/>
|
||||
<label for="IntroChannel">Intro Channel: </label>
|
||||
<input type="select" id="IntroChannel" name="IntroChannel"/>
|
||||
<label for="VerifiedRole">Verified Role: </label>
|
||||
<input type="select" id="VerifiedRole" name="VerifiedRole"/>
|
||||
<label for="OutFile">Logging OutFile: </label>
|
||||
<input type="text" id="OutFile" name="OutFile" />
|
||||
<label for="KBTeam">KB Team: </label>
|
||||
<input type="text" id="KBTeam" name="KBTeam" />
|
||||
<label for="KBChann">KB Channel: </label>
|
||||
<input type="text" id="KBChann" name="KBChann" />
|
||||
<label for="level">Logging Level: </label>
|
||||
<input type="number" id="Level" name="Level" />
|
||||
<label for="ProgName">Program Name: </label>
|
||||
<input type="text" id="ProgName" name="ProgName" />
|
||||
<label for="UseStdout">Use stdout: </label>
|
||||
<input type="checkbox" id="UseStdout" name="UseStdout"/>
|
||||
<label for="submitchanges"></label>
|
||||
<input style="width: 100%;" type="submit" id="submitchanges" name="submitchanges" onClick="alert('Post blocked.')">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
class ConfigStatusClass extends HTMLElement {
|
||||
|
||||
Reference in New Issue
Block a user