Skip to content

Commit ed6d321

Browse files
mkphilippamarkovics
authored and
nextjournal-ci
committed
clojure-mode landing-page improvements ✨
* Don't break in clojure-mode keybindings * Also show mac emojis on iOS * Add viewport info to trigger breakpoints on mobile devices * Table layout improvements, overflow on mobile Co-authored-by: Philipp Markovics <[email protected]> Co-authored-by: Philipp Markovics <[email protected]>
1 parent a42fd57 commit ed6d321

File tree

2 files changed

+18
-16
lines changed

2 files changed

+18
-16
lines changed

‎demo/src/nextjournal/clojure_mode/demo.cljs

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -105,12 +105,13 @@
105105
(let [[opts s] (if (map? (first s)) [(first s) (rest s)] [nil s])]
106106
(str "<" (name tag) (reduce-kv #(str %1 " " (name %2) "=" "'" %3 "'") "" opts) ">" (apply str s) "</" (name tag) ">")))
107107

108-
(defn mac? []
109-
(some? (re-find #"Mac" js/navigator.platform)))
110-
111108
(defn linux? []
112109
(some? (re-find #"(Linux)|(X11)" js/navigator.userAgent)))
113110

111+
(defn mac? []
112+
(and (not (linux?))
113+
(some? (re-find #"(Mac)|(iPhone)|(iPad)|(iPod)" js/navigator.platform))))
114+
114115
(defn key-mapping []
115116
(cond-> {"ArrowUp" "↑"
116117
"ArrowDown" "↓"
@@ -151,23 +152,23 @@
151152
(tag :th {:class "px-3 py-1 align-top text-left text-xs uppercase font-normal black-50"} "Command")
152153
(tag :th {:class "px-3 py-1 align-top text-left text-xs uppercase font-normal black-50"} "Keybinding")
153154
(tag :th {:class "px-3 py-1 align-top text-left text-xs uppercase font-normal black-50"} "Alternate Binding")
154-
(tag :th {:class "px-3 py-1 align-top text-left text-xs uppercase font-normal black-50"} "Description"))
155+
(tag :th {:class "px-3 py-1 align-top text-left text-xs uppercase font-normal black-50" :style "min-width: 290px;"} "Description"))
155156
(->> keymap/paredit-keymap*
156157
(merge (sci/keymap* "Alt"))
157158
(sort-by first)
158159
(reduce (fn [out [command [{:keys [key shift doc]} & [{alternate-key :key}]]]]
159160
(str out
160161
(tag :tr
161162
{:class "border-t hover:bg-gray-100"}
162-
(tag :td {:class "px-3 py-1 align-top monospace"} (tag :b (name command)))
163-
(tag :td {:class "px-3 py-1 align-top text-sm"} (render-key key))
164-
(tag :td {:class "px-3 py-1 align-top text-sm"} (some-> alternate-key render-key))
163+
(tag :td {:class "px-3 py-1 align-top monospace whitespace-no-wrap"} (tag :b (name command)))
164+
(tag :td {:class "px-3 py-1 align-top text-right text-sm whitespace-no-wrap"} (render-key key))
165+
(tag :td {:class "px-3 py-1 align-top text-right text-sm whitespace-no-wrap"} (some-> alternate-key render-key))
165166
(tag :td {:class "px-3 py-1 align-top"} doc))
166167
(when shift
167168
(tag :tr
168169
{:class "border-t hover:bg-gray-100"}
169170
(tag :td {:class "px-3 py-1 align-top"} (tag :b (name shift)))
170-
(tag :td {:class "px-3 py-1 align-top text-sm"}
171+
(tag :td {:class "px-3 py-1 align-top text-sm whitespace-no-wrap text-right"}
171172
(render-key (str "Shift-" key)))
172173
(tag :td {:class "px-3 py-1 align-top text-sm"})
173174
(tag :td {:class "px-3 py-1 align-top"} ""))))) "")))))

‎public/index.html

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
56
<title>Clojure/Script mode for CodeMirror 6</title>
67
<link href="https://cdn.nextjournal.com/data/QmW53nJSRrRao5FZ9sZ2pwQ4Gd4mK4nZcvhrATVdiabPkc?filename=tailwind-a4c8a6fe636b6d528505c30cb68526a024f446a7.css&content-type=text/css" rel="stylesheet">
78
<link href="https://cdn.nextjournal.com/data/QmSaHZCU6U2DeNohfW2PuXDHkayw7w21uvUWL5oEqVWKwH?filename=viewer-1c61aac61ffa4da89b828d538c5e4eff188e7b56.css&content-type=text/css" rel="stylesheet">
@@ -95,22 +96,22 @@ <h3 class="text-center sans-serif font-bold text-lg mt-0 mb-1">Try evaluating an
9596
</li>
9697
<li class="mt-4 flex">
9798
<span class="mr-2">🥤</span>
98-
<div class="flex-auto">
99+
<div class="flex-auto overflow-x-auto">
99100
<span class="font-bold">Slurping & 🤮 Barfing</span>
100101
<table class="w-full md:max-w-sm text-sm">
101102
<tbody>
102103
<tr class="align-top">
103104
<td class="py-1">forward</td>
104-
<td class="py-1 text-right">
105+
<td class="py-1 text-right whitespace-no-wrap">
105106
<span class="kbd ctrl">Ctrl</span> + <span class="kbd">←</span> / <span class="kbd">→</span>
106107
</td>
107-
<td class="py-1 text-right">
108+
<td class="py-1 text-right whitespace-no-wrap">
108109
<span class="mx-1">or</span> <span class="kbd mod">Mod</span> + <span class="kbd">⇧</span> + <span class="kbd">j</span> / <span class="kbd">k</span>
109110
</td>
110111
</tr>
111112
<tr class="border-t">
112113
<td class="py-1 pr-12">backward</td>
113-
<td class="py-1 text-right">
114+
<td class="py-1 text-right whitespace-no-wrap">
114115
<span class="kbd ctrl">Ctrl</span> + <span class="kbd alt">Alt</span> + <span class="kbd">←</span> / <span class="kbd">→</span>
115116
</td>
116117
<td></td>
@@ -121,16 +122,16 @@ <h3 class="text-center sans-serif font-bold text-lg mt-0 mb-1">Try evaluating an
121122
</li>
122123
<li class="mt-4 flex">
123124
<span class="mr-2">💗</span>
124-
<div class="flex-auto">
125+
<div class="flex-auto overflow-x-auto">
125126
<span class="font-bold">Semantic Selections</span>
126127
<table class="w-full md:max-w-sm text-sm">
127128
<tbody>
128129
<tr>
129-
<td class="py-1" style="width: 150px;">Expand / Contract</td>
130-
<td class="py-1 text-right" style="width: 125px;">
130+
<td class="py-1">Expand / Contract</td>
131+
<td class="py-1 text-right whitespace-no-wrap">
131132
<span class="kbd alt">Alt</span> + <span class="kbd">↑</span> / <span class="kbd">↓</span>
132133
</td>
133-
<td class="py-1 text-right">
134+
<td class="py-1 text-right whitespace-no-wrap">
134135
<span class="mx-1">or</span> <span class="kbd mod">Mod</span> + <span class="kbd">1</span> / <span class="kbd">2</span>
135136
</td>
136137
</tr>

0 commit comments

Comments
 (0)