Browse Source

feat(layouts/shortcodes): add select shortcode, docs and example use

Josh Habdas 9 months ago
parent
commit
85eefe5707
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74

+ 1
- 1
docs/content/_index.md View File

@@ -51,7 +51,7 @@ images = [
51 51
     <tr>
52 52
       <td><a href="./feature/">33</a></td>
53 53
       <td><a href="./module/">4</a></td>
54
-      <td><a href="./shortcode/">25</a></td>
54
+      <td><a href="./shortcode/">26</a></td>
55 55
       <td><a href="./extra/">1</a></td>
56 56
     </tr>
57 57
   </table>

+ 2
- 2
docs/content/module/toxic-swamp.md View File

@@ -186,7 +186,7 @@ Then generate your configuration to begin earning rewards:
186 186
       {{< /hackcss-formgroup >}}
187 187
       {{< hackcss-formgroup name="poolgroup" >}}
188 188
         {{< hackcss-label for="pool" text="Mining pool:" />}}
189
-        <select id="pool" name="pool" class="form-control">
189
+        {{< hackcss-select id="pool" name="pool" >}}
190 190
           <option>moneroocean.stream</option>
191 191
           <option>etn.nanopool.org</option>
192 192
           <option>monero.hashvault.pro</option>
@@ -230,7 +230,7 @@ Then generate your configuration to begin earning rewards:
230 230
           <option>aeon.sumominer.com</option>
231 231
           <option>monerohash.com</option>
232 232
           <option>monero.crypto-pool.fr</option>
233
-        </select>
233
+        {{< /hackcss-select >}}
234 234
         {{< hackcss-helpblock >}}
235 235
           Select a {{< external href="https://git.habd.as/comfusion/toxic-swamp/src/branch/master/server/pools.json" text="supported pool" />}} to mine with.
236 236
         {{< /hackcss-helpblock >}}

+ 47
- 0
docs/content/shortcode/select.md View File

@@ -0,0 +1,47 @@
1
++++
2
+title = "Select"
3
+description = "List a group of options in a drop-down menu."
4
+categories = ["experience"]
5
+tags = []
6
+html_attributes = ["name", "class", "disabled", "form"]
7
+custom_attributes = ["body"]
8
+snippets_used = ["label", "form group"]
9
++++
10
+
11
+Basic usage:
12
+
13
+```html
14
+{{</* hackcss-select >}}
15
+  <option>Option 1</option>
16
+  <option>Option 2</option>
17
+  <option>Option 3</option>
18
+{{< /hackcss-select */>}}
19
+```
20
+
21
+{{< hackcss-select >}}
22
+  <option>Option 1</option>
23
+  <option>Option 2</option>
24
+  <option>Option 3</option>
25
+{{< /hackcss-select >}}
26
+
27
+With [Label](../label) inside [Form Group](../form-group):
28
+
29
+```html
30
+{{</* hackcss-formgroup name="poolgroup" >}}
31
+  {{< hackcss-label for="pool" text="Mining pool:" />}}
32
+  {{< hackcss-select id="pool" name="pool" >}}
33
+    <option>moneroocean.stream</option>
34
+    <option>etn.nanopool.org</option>
35
+    <option>monero.hashvault.pro</option>
36
+  {{< /hackcss-select >}}
37
+{{< /hackcss-formgroup */>}}
38
+```
39
+
40
+{{< hackcss-formgroup name="poolgroup" >}}
41
+  {{< hackcss-label for="pool" text="Mining pool:" />}}
42
+  {{< hackcss-select id="pool" name="pool" >}}
43
+    <option>moneroocean.stream</option>
44
+    <option>etn.nanopool.org</option>
45
+    <option>monero.hashvault.pro</option>
46
+  {{< /hackcss-select >}}
47
+{{< /hackcss-formgroup >}}

+ 2
- 4
layouts/partials/components/select.html View File

@@ -1,5 +1,3 @@
1
-<select{{ with .id }} id="{{ . | urlize }}"{{ end }} class="form-control">
2
-  {{ range .options }}
3
-    <option>{{ . }}</option>
4
-  {{ end }}
1
+<select{{ with .id }} id="{{ . | urlize }}"{{ end }}{{ with .name }} name="{{ . }}"{{ end }} {{ with .disabled }} disabled{{ end }}{{ with .form }} form="{{ . }}"{{ end }} class="form-control{{ with .class }} {{ . }}{{ end }}">
2
+  {{ with .body }}{{ . }}{{ end }}
5 3
 </select>

+ 7
- 0
layouts/shortcodes/hackcss-select.html View File

@@ -0,0 +1,7 @@
1
+{{ $id := .Get "id" }}
2
+{{ $name := .Get "name" }}
3
+{{ $class := .Get "class" }}
4
+{{ $disabled := .Get "disabled" }}
5
+{{ $form := .Get "form" }}
6
+{{ $body := .Get "body" | default .Inner }}
7
+{{ partial "components/select.html" (dict "id" $id "name" $name "class" $class "disabled" $disabled "body" $body) }}

Loading…
Cancel
Save