Merge branch '7.3'

gchq · Mar 19, 2024 · d517b5b · d517b5b
2 parents bd439ea + 7ef8d8c
commit d517b5b
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 20 deletions.
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
@@ -648,28 +648,61 @@ div.stroom-menu-demo {
 }
 
 
-////////////////
-//  key-bind  //
-////////////////
+//////////////////////////
+//  key-bind Shortcode  //
+//////////////////////////
 
 span.key-bind {
-  border-style: solid;
-  border-color: #dbdbdb;
-  border-radius: 7px;
-  border-width: 1px;
-  padding: 0.05em 0.1em;
-  margin: 0 0.1em;
+    margin: 0 0.1em;
+    //margin-bottom: 0.5em;
+    display: inline-flex;
+    align-items: center;
+
+  span.key-bind-group {
+    display: flex;
+    align-items: center;
+
+    &.key-bind-multiple {
+      padding: 0.05em 0.1em;
+      border-style: solid;
+      border-color: #dbdbdb;
+      border-radius: 6px;
+      border-width: 1px;
+    }
+  }
+
+  span.key-bind-plus, 
+      span.key-bind-comma, 
+      span.key-bind-key {
+    float: left;
+    display: inline-flex;
+    font-family: monospace;
+    font-size: 90%;
+  }
+
+  span.key-bind-plus, 
+      span.key-bind-comma {
+    letter-spacing:0px;
+    color: dimgrey;
+    font-weight: 900;
+  }
+
+  span.key-bind-plus {
+    padding: 0 0.1em;
+  }
 
   span.key-bind-key {
+    font-weight: 600;
     background-color: dimgrey;
-    border-radius: 7px;
+    border-radius: 6px;
     color: white;
-    font-family: monospace;
-    font-weight: 600;
-    font-size: 90%;
-    margin: 0 0.05em;
+    margin: 0.1em 0.1em;
     padding: 0 0.4em;
     vertical-align: text-top;
+    min-width: 2em;
+    justify-content: center;
+    line-height:1.4em;
+    box-shadow: rgba(0, 0, 0, 0.30) 1px 2px 4px;
   }
 }
 

diff --git a/layouts/shortcodes/key-bind.html b/layouts/shortcodes/key-bind.html
@@ -49,9 +49,15 @@
 "up" "⬆"
 }}
 
-<span class="key-bind-chord">
+<span class="key-bind">
+  {{ $group_no := 1 }}
   {{- range (seq 0 (sub (len .Params) 1) ) -}}
 
+    {{- if gt $group_no 1 -}}
+      <span class="key-bind-comma">,</span>
+      {{- "" -}}
+    {{- end -}}
+
     {{ $param := $.Get . }}
     {{ $keys := slice }}
     {{ $lastChar := strings.Substr $param -1 }}
@@ -92,13 +98,24 @@
       {{ end }}
     {{ end }}
 
-    <span class="key-bind">
-    {{ range $keys_sorted }}
+    {{ $extra_classes := "" }}
+    {{ if gt ($keys_sorted | len) 1 }}
+      {{ $extra_classes = "key-bind-multiple" }}
+    {{ else }}
+      {{ $extra_classes = "key-bind-single" }}
+    {{ end }}
+    <span class="key-bind-group {{ $extra_classes }}">
+    {{ $key_no := 1 }}
+    {{- range $keys_sorted -}}
+      {{- if gt $key_no 1 -}}
+        <span class="key-bind-plus">+</span>
+        {{- "" -}}
+      {{- end -}}
       {{ $key := . }}
       <span class="key-bind-key">{{- $key -}}</span>
-    {{ end }}
+      {{ $key_no = add $key_no 1 }}
+    {{- end -}}
     </span>
-    {{/* This is to deal with the space the browswer adds after a char if it is not on the end of the line.*/}}
-    &ZeroWidthSpace;
+    {{ $group_no = add $group_no 1 }}
   {{- end -}}
 </span>