fmt: css ids/classes to use kebab-case

OliveTin · Feb 23, 2022 · 420105e · 420105e
1 parent 10e380a
commit 420105e
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 50 deletions.
diff --git a/integration-tests/cypress/integration/general/defaultHomepageRender.spec.js b/integration-tests/cypress/integration/general/defaultHomepageRender.spec.js
@@ -8,11 +8,11 @@ describe('Homepage rendering', () => {
   })
 
   it('Default buttons are rendered', () => {
-    cy.get("#rootGroup button").should('have.length', 6)
+    cy.get("#root-group button").should('have.length', 6)
   })
 
   it('Switcher navigation is visible', () => {
-    cy.get('#sectionSwitcher').then($el => {
+    cy.get('#section-switcher').then($el => {
       expect(Cypress.dom.isHidden($el)).to.be.false
     })
   })

diff --git a/integration-tests/cypress/integration/hiddenNav/hiddenNav.spec.js b/integration-tests/cypress/integration/hiddenNav/hiddenNav.spec.js
@@ -9,7 +9,7 @@ describe('Hidden Nav', () => {
   })
 
   it('Switcher navigation is hidden', () => {
-    cy.get('#sectionSwitcher').then($el => {
+    cy.get('#section-switcher').then($el => {
       expect(Cypress.dom.isHidden($el)).to.be.true
     })
   })

diff --git a/webui/index.html b/webui/index.html
@@ -16,7 +16,7 @@
 
 	<body>
 		<main title = "main content">
-			<fieldset id = "sectionSwitcher" title = "Sections">
+			<fieldset id = "section-switcher" title = "Sections">
 				<button id = "showActions">Actions</button>
 				<button id = "showLogs">Logs</button>
 			</fieldset>
@@ -35,7 +35,7 @@
 			</section>
 
 			<section id = "contentActions" title = "Actions" hidden >
-				<fieldset id = "rootGroup" title = "Dashboard of buttons">
+				<fieldset id = "root-group" title = "Dashboard of buttons">
 				</fieldset>
 			</section>
 
@@ -50,12 +50,12 @@
 				<a href = "https://docs.olivetin.app" target = "_new">Documentation</a> | 
 				<a href = "https://github.com/OliveTin/OliveTin/issues/new/choose" target = "_new">Raise an issue on GitHub</a> | 
 				<span id = "currentVersion">Version: ?</p>  
-				<a id = "availableVersion" href = "http://olivetin.app" target = "_blank" hidden>?</a>
+				<a id = "available-version" href = "http://olivetin.app" target = "_blank" hidden>?</a>
 			</p>
 		</footer>
 
 		<template id = "tplArgumentForm">
-			<form class = "actionArguments">
+			<form class = "action-arguments">
 				<div class = "wrapper">
 					<div>
 						<span class = "icon" role = "icon"></span>
@@ -80,7 +80,7 @@ <h2>Argument form</h2>
 		</template>
 
 		<template id = "tplLogRow">
-			<tr class = "logRow">
+			<tr class = "log-row">
 				<td class = "timestamp">?</td> 
 				<td>
 					<span class = "icon" role = "icon"></span>
@@ -101,7 +101,7 @@ <h2>Argument form</h2>
 					</details>
 
 				</td>
-				<td class = "exitCode">?</td>
+				<td class = "exit-code">?</td>
 			</tr>
 		</template>
 
@@ -119,7 +119,7 @@ <h2>Argument form</h2>
 			  domErr.classList.add('error')
 			  domErr.innerHTML = '<h1>Error ' + friendlyType + '</h1><p>' + message + "</p><p><a href = 'http://docs.olivetin.app/troubleshooting.html' target = 'blank'/>OliveTin Documentation</a></p>"
 
-			  document.getElementById('rootGroup').appendChild(domErr)
+			  document.getElementById('root-group').appendChild(domErr)
 			}
 		</script>
 

diff --git a/webui/js/ActionButton.js b/webui/js/ActionButton.js
@@ -84,13 +84,13 @@ class ActionButton extends window.HTMLElement {
       marshalLogsJsonToHtml({ logs: [json.logEntry] })
 
       if (json.logEntry.timedOut) {
-        this.onActionResult('actionTimeout', 'Timed out')
+        this.onActionResult('action-timeout', 'Timed out')
       } else if (json.logEntry.exitCode === -1337) {
         this.onActionError('Error')
       } else if (json.logEntry.exitCode !== 0) {
-        this.onActionResult('actionNonZeroExit', 'Exit code ' + json.logEntry.exitCode)
+        this.onActionResult('action-nonzero-exit', 'Exit code ' + json.logEntry.exitCode)
       } else {
-        this.onActionResult('actionSuccess', 'Success!')
+        this.onActionResult('action-success', 'Success!')
       }
     }).catch(err => {
       this.onActionError(err)
@@ -113,10 +113,10 @@ class ActionButton extends window.HTMLElement {
     this.btn.disabled = false
     this.isWaiting = false
     this.updateDom()
-    this.btn.classList.add('actionFailed')
+    this.btn.classList.add('action-failed')
 
     setTimeout(() => {
-      this.btn.classList.remove('actionFailed')
+      this.btn.classList.remove('action-failed')
     }, 1000)
   }
 
@@ -139,13 +139,13 @@ class ActionButton extends window.HTMLElement {
   updateDom () {
     if (this.temporaryStatusMessage != null) {
       this.domTitle.innerText = this.temporaryStatusMessage
-      this.domTitle.classList.add('temporaryStatusMessage')
+      this.domTitle.classList.add('temporary-status-message')
       this.isWaiting = false
       this.disabled = false
 
       setTimeout(() => {
         this.temporaryStatusMessage = null
-        this.domTitle.classList.remove('temporaryStatusMessage')
+        this.domTitle.classList.remove('temporary-status-message')
         this.updateDom()
       }, 2000)
     } else if (this.isWaiting) {

diff --git a/webui/js/ArgumentForm.js b/webui/js/ArgumentForm.js
@@ -1,7 +1,7 @@
 
 class ArgumentForm extends window.HTMLElement {
   setup (json, callback) {
-    this.setAttribute('class', 'actionArguments')
+    this.setAttribute('class', 'action-arguments')
 
     this.constructTemplate()
     this.domTitle.innerText = json.title

diff --git a/webui/js/marshaller.js b/webui/js/marshaller.js
@@ -10,7 +10,7 @@ export function marshalActionButtonsJsonToHtml (json) {
       htmlButton = document.createElement('action-button')
       htmlButton.constructFromJson(jsonButton)
 
-      document.getElementById('rootGroup').appendChild(htmlButton)
+      document.getElementById('root-group').appendChild(htmlButton)
     } else {
       htmlButton.updateFromJson(jsonButton)
       htmlButton.updateDom()
@@ -55,7 +55,7 @@ export function marshalLogsJsonToHtml (json) {
     row.querySelector('.icon').innerHTML = logEntry.actionIcon
     row.querySelector('pre.stdout').innerText = logEntry.stdout
     row.querySelector('pre.stderr').innerText = logEntry.stderr
-    row.querySelector('.exitCode').innerText = logTableExitCode
+    row.querySelector('.exit-code').innerText = logTableExitCode
 
     document.querySelector('#logTableBody').prepend(row)
   }

diff --git a/webui/main.js b/webui/main.js
@@ -58,11 +58,11 @@ function processWebuiSettingsJson (settings) {
   document.querySelector('#currentVersion').innerText = 'Version: ' + settings.CurrentVersion
 
   if (settings.ShowNewVersions && settings.AvailableVersion !== 'none') {
-    document.querySelector('#availableVersion').innerText = 'New Version Available: ' + settings.AvailableVersion
-    document.querySelector('#availableVersion').hidden = false
+    document.querySelector('#available-version').innerText = 'New Version Available: ' + settings.AvailableVersion
+    document.querySelector('#available-version').hidden = false
   }
 
-  document.querySelector('#sectionSwitcher').hidden = settings.HideNavigation
+  document.querySelector('#section-switcher').hidden = settings.HideNavigation
 }
 
 function main () {

diff --git a/webui/style.css b/webui/style.css
@@ -11,7 +11,7 @@ fieldset {
   padding: 0;
 }
 
-fieldset#rootGroup {
+fieldset#root-group {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   grid-template-rows: auto auto auto auto;
@@ -53,7 +53,7 @@ span[role="icon"] {
 }
 
 form span[role="icon"],
-tr.logRow span[role="icon"] {
+tr.log-row span[role="icon"] {
   display: inline-block;
   padding-right: 0.2em;
 }
@@ -63,7 +63,7 @@ tr.logRow span[role="icon"] {
   padding: 1em;
 }
 
-.title.temporaryStatusMessage {
+.title.temporary-status-message {
   color: gray;
 }
 
@@ -117,13 +117,13 @@ input[type="submit"]:disabled {
   cursor: not-allowed;
 }
 
-fieldset#sectionSwitcher {
+fieldset#section-switcher {
   border: 0;
   text-align: right;
   margin-bottom: 1em;
 }
 
-fieldset#sectionSwitcher button {
+fieldset#section-switcher button {
   padding: 1em;
   color: black;
   display: table-cell;
@@ -135,60 +135,60 @@ fieldset#sectionSwitcher button {
   cursor: pointer;
 }
 
-fieldset#rootGroup action-button button {
+fieldset#root-group action-button button {
   width: 100%;
   height: 100%;
 }
 
-fieldset#sectionSwitcher button:first-child {
+fieldset#section-switcher button:first-child {
   border-radius: 1em 0 0 1em;
 }
 
-fieldset#sectionSwitcher button:last-child {
+fieldset#section-switcher button:last-child {
   border-radius: 0 1em 1em 0;
 }
 
-button.activeSection {
+button.active-section {
   font-weight: bold;
 }
 
 /* Button animations */
 
-.actionFailed {
-  animation: kfActionFailed 1s;
+.action-failed {
+  animation: kf-action-failed 1s;
 }
 
-@keyframes kfActionFailed {
+@keyframes kf-action-failed {
   0% { background-color: black; }
   20% { background-color: red; }
   0% { background-color: inherit; }
 }
 
-.actionSuccess {
-  animation: kfActionSuccess 1s;
+.action-success {
+  animation: kf-action-success 1s;
 }
 
-@keyframes kfActionSuccess {
+@keyframes kf-action-success {
   0% { background-color: black; }
   20% { background-color: limegreen; }
   0% { background-color: inherit; }
 }
 
-.actionNonZeroExit {
-  animation: kfActionNonZeroExit 1s;
+.action-nonzero-exit {
+  animation: kf-action-nonzero-exit 1s;
 }
 
-@keyframes kfActionNonZeroExit {
+@keyframes kf-action-nonzero-exit {
   0% { background-color: black; }
   20% { background-color: orange; }
   0% { background-color: inherit; }
 }
 
-.actionTimeout {
-  animation: kfActionTimeout 1s;
+.action-timeout {
+  animation: kf-action-timeout 1s;
 }
 
-@keyframes kfActionTimeout {
+@keyframes kf-action-timeout {
   0% { background-color: black; }
   20% { background-color: cyan; }
   0% { background-color: inherit; }
@@ -230,7 +230,7 @@ details[open] {
   display: block;
 }
 
-form.actionArguments {
+form.action-arguments {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -274,11 +274,11 @@ form input[type="submit"]:first-child {
   margin-right: 1em;
 }
 
-button[name=cancel]:hover {
+button[name="cancel"]:hover {
   background-color: salmon;
 }
 
-input[name=start]:hover {
+input[name="start"]:hover {
   background-color: #aceaac;
 }
 
@@ -292,15 +292,15 @@ pre {
   min-height: 1em;
 }
 
-td.exitCode {
+td.exit-code {
   text-align: center;
 }
 
 input.invalid {
   background-color: salmon;
 }
 
-#availableVersion {
+#available-version {
   background-color: #aceaac;
   padding: 0.2em;
   border-radius: 1em;
@@ -312,7 +312,7 @@ input.invalid {
     color: white;
   }
 
-  form.actionArguments {
+  form.action-arguments {
     background-color: #333;
   }