DodoApp: Style create-app form dropdowns
Change-Id: I3a1102f965d66950b58f7f20c878a38fd412544b
diff --git a/core/installer/server/dodo-app/static/main.css b/core/installer/server/dodo-app/static/main.css
index 454fb33..58e639c 100644
--- a/core/installer/server/dodo-app/static/main.css
+++ b/core/installer/server/dodo-app/static/main.css
@@ -11,6 +11,10 @@
--pico-form-element-background-color: #d6d6d6;
--pico-form-element-active-background-color: #d6d6d6;
--pico-form-element-selected-background-color: #d6d6d6;
+ --pico-dropdown-color: #3a3a3a;
+ --pico-dropdown-background-color: #d6d6d6;
+ --pico-dropdown-border-color: #7f9f7f;
+ --pico-dropdown-hover-background-color: #7f9f7f;
--pico-primary: #7f9f7f;
--pico-primary-background: #7f9f7f;
--pico-primary-hover: #d4888d;
@@ -105,3 +109,11 @@
.app-actions button {
width: 150px;
}
+
+details.dropdown summary:not([role]) {
+ color: var(--pico-color);
+}
+
+details[open] > summary:not([role]):not(:focus) {
+ color: var(--pico-color);
+}
diff --git a/core/installer/server/dodo-app/static/main.js b/core/installer/server/dodo-app/static/main.js
index 15e3bb2..bc2b87f 100644
--- a/core/installer/server/dodo-app/static/main.js
+++ b/core/installer/server/dodo-app/static/main.js
@@ -14,3 +14,11 @@
});
});
});
+
+function dropdownSelected(elem, value) {
+ while (elem.tagName.toLowerCase() !== "details") {
+ elem = elem.parentNode;
+ }
+ elem.querySelector("summary").innerHTML = value;
+ elem.removeAttribute("open");
+}
diff --git a/core/installer/server/dodo-app/templates/base.html b/core/installer/server/dodo-app/templates/base.html
index eb3a9c3..19aaf52 100644
--- a/core/installer/server/dodo-app/templates/base.html
+++ b/core/installer/server/dodo-app/templates/base.html
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ block "title" . }}{{ end }}</title>
<link rel="stylesheet" href="/static/pico.2.0.6.min.css">
- <link rel="stylesheet" href="/static/main.css?v=0.0.10">
+ <link rel="stylesheet" href="/static/main.css?v=0.0.11">
</head>
<body class="container">
<nav aria-label="breadcrumb">
@@ -17,7 +17,7 @@
</nav>
{{- block "content" . }}
{{- end }}
- <script src="/static/main.js?v=0.0.9"></script>
+ <script src="/static/main.js?v=0.0.10"></script>
</body>
</html>
{{ define "resources" }}
diff --git a/core/installer/server/dodo-app/templates/index.html b/core/installer/server/dodo-app/templates/index.html
index 5ea0a4b..cab3447 100644
--- a/core/installer/server/dodo-app/templates/index.html
+++ b/core/installer/server/dodo-app/templates/index.html
@@ -5,17 +5,33 @@
<form id="create-app" action="" method="POST">
<fieldset class="grid">
<input type="text" name="name" placeholder="name (optional)" />
- <select name="network">
- {{- range .Networks -}}
- <option value="{{ .Name }}">{{ .Name }} - {{ .Domain }}</option>
- {{- end -}}
- </select>
+ <details class="dropdown">
+ <summary>network</summary>
+ <ul>
+ {{- range $i, $n := .Networks -}}
+ <li>
+ <label>
+ <input type="radio" name="network" oninput="dropdownSelected(this, '{{ $n.Name }}')" value="{{$n.Name}}" />
+ {{ $n.Name }} - {{ $n.Domain }}
+ </label>
+ </li>
+ {{- end -}}
+ </ul>
+ </details>
<input type="text" name="subdomain" placeholder="subdomain" />
- <select name="type">
- {{- range .Types -}}
- <option value="{{ . }}">{{ . }}</option>
- {{- end -}}
- </select>
+ <details class="dropdown">
+ <summary>template</summary>
+ <ul>
+ {{- range $i, $t := .Types -}}
+ <li>
+ <label>
+ <input type="radio" name="type" oninput="dropdownSelected(this, '{{ $t }}')" value="{{$t}}" />
+ {{ $t }}
+ </label>
+ </li>
+ {{- end -}}
+ </ul>
+ </details>
<button id="create-app-button" aria-busy="false" type="submit" name="create-app">create app</button>
</fieldset>
</form>