Browse Source

Add some CSS to status page

hkremer/rebranding
Gregory Rudolph 3 years ago
parent
commit
961f2f32b0
Signed by: rudi
GPG Key ID: EF64F3CBD1A1EBDD
  1. 108
      static/components.js

108
static/components.js

@ -4,14 +4,27 @@ const style = ` @@ -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} @@ -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>
<div id="admin-stats" class="column">
<h4><p>Admin Stats</p></h4>
<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 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 {

Loading…
Cancel
Save