diff options
| -rw-r--r-- | static/style.css | 22 | ||||
| -rw-r--r-- | templates/about.tmpl | 84 | ||||
| -rw-r--r-- | templates/nav.tmpl | 20 | ||||
| -rw-r--r-- | templates/notification.tmpl | 4 | ||||
| -rw-r--r-- | templates/postform.tmpl | 19 |
5 files changed, 125 insertions, 24 deletions
diff --git a/static/style.css b/static/style.css index 0349c29..9c05eff 100644 --- a/static/style.css +++ b/static/style.css @@ -505,6 +505,22 @@ img.emoji { margin: 8px 0 16px 0; } +.keyboard-shortcuts { + margin-top: 12px; +} + +.keyboard-shortcuts td { + padding: 2px 4px; +} + +kbd { + border-radius: 3px; + padding: 1px 4px; + border: 1px solid #444444; + background-color: #eeeeee; + font-size: 10pt; +} + .dark { background-color: #222222; background-image: none; @@ -548,3 +564,9 @@ img.emoji { background-color: #222222; border-color: #444444; } + +.dark kbd { + background-color: #333333; + border-color: #444444; + color: #eaeaea; +} diff --git a/templates/about.tmpl b/templates/about.tmpl index 1f6fda7..2b4d636 100644 --- a/templates/about.tmpl +++ b/templates/about.tmpl @@ -1,7 +1,7 @@ {{with .Data}} {{template "header.tmpl" (WithContext .CommonData $.Ctx)}} -<div class="page-title"> About </div> +<div class="page-title"> About </div> <div> <p> A web client for <a href="https://pleroma.social" target="_blank">Mastodon Network</a>. @@ -14,6 +14,88 @@ </P> </div> +<div class="page-title"> Keyboard shortcuts </div> +<div> + <table class="keyboard-shortcuts"> + <tr> + <td> User profile </td> + <td> <kbd>0</kbd> </td> + </tr> + <tr> + <td> Home timeline </td> + <td> <kbd>1</kbd> </td> + </tr> + <tr> + <td> Direct timeline </td> + <td> <kbd>2</kbd> </td> + </tr> + <tr> + <td> Local timeline </td> + <td> <kbd>3</kbd> </td> + </tr> + <tr> + <td> The Whole Known Network </td> + <td> <kbd>4</kbd> </td> + </tr> + <tr> + <td> Search </td> + <td> <kbd>5</kbd> </td> + </tr> + <tr> + <td> About </td> + <td> <kbd>6</kbd> </td> + </tr> + <tr> + <td> Settings </td> + <td> <kbd>7</kbd> </td> + </tr> + <tr> + <td> Signout </td> + <td> <kbd>8</kbd> </td> + </tr> + <tr> + <td> Emoji list </td> + <td> <kbd>L</kbd> </td> + </tr> + <tr> + <td> Edit post </td> + <td> <kbd>E</kbd> </td> + </tr> + <tr> + <td> Post format </td> + <td> <kbd>F</kbd> </td> + </tr> + <tr> + <td> Post scope </td> + <td> <kbd>S</kbd> </td> + </tr> + <tr> + <td> Post NSFW </td> + <td> <kbd>N</kbd> </td> + </tr> + <tr> + <td> Post attachments </td> + <td> <kbd>A</kbd> </td> + </tr> + <tr> + <td> Submit post </td> + <td> <kbd>P</kbd> </td> + </tr> + <tr> + <td> Refresh notifications </td> + <td> <kbd>R</kbd> </td> + </tr> + <tr> + <td> Read notifications </td> + <td> <kbd>C</kbd> </td> + </tr> + </table> + <p> + You can activate the shortcuts by pressing the associated key with your browser's <a href="https://en.wikipedia.org/wiki/Access_key#Access_in_different_browsers" target="_blank">accesskey modifier</a>, + which is generally <kbd>Alt</kbd> + <kbd>Shift</kbd>. + </p> +</div> + {{template "footer.tmpl"}} {{end}} diff --git a/templates/nav.tmpl b/templates/nav.tmpl index 293d210..f3db9f1 100644 --- a/templates/nav.tmpl +++ b/templates/nav.tmpl @@ -2,30 +2,30 @@ {{template "header.tmpl" (WithContext .CommonData $.Ctx)}} <div class="user-info"> <div class="user-info-img-container"> - <a class="img-link" href="/timeline/home" title="home"> + <a class="img-link" href="/timeline/home" title="Home (1)"> <img class="user-info-img" src="{{.User.AvatarStatic}}" alt="profile-avatar" height="64" /> </a> </div> <div class="user-info-details-container"> <div class="user-info-details-name"> <span class="status-dname"> {{EmojiFilter .User.DisplayName .User.Emojis}} </span> - <a class="nav-link" href="/user/{{.User.ID}}"> + <a class="nav-link" href="/user/{{.User.ID}}" accesskey="0" title="User profile (0)"> <span class="status-uname"> @{{.User.Acct}} </span> </a> </div> <div class="user-info-details-nav"> - <a class="nav-link" href="/timeline/home">home</a> - <a class="nav-link" href="/timeline/direct">direct</a> - <a class="nav-link" href="/timeline/local">local</a> - <a class="nav-link" href="/timeline/twkn">twkn</a> - <a class="nav-link" href="/search">search</a> - <a class="nav-link" href="/about">about</a> + <a class="nav-link" href="/timeline/home" accesskey="1" title="Home timeline (1)">home</a> + <a class="nav-link" href="/timeline/direct" accesskey="2" title="Direct timeline (2)">direct</a> + <a class="nav-link" href="/timeline/local" accesskey="3" title="Local timeline (3)">local</a> + <a class="nav-link" href="/timeline/twkn" accesskey="4" title="The Whole Known Netwwork (4)">twkn</a> + <a class="nav-link" href="/search" accesskey="5" title="Search (5)">search</a> + <a class="nav-link" href="/about" accesskey="6" title="About (6)">about</a> </div> <div> - <a class="nav-link" href="/settings" target="_top">settings</a> + <a class="nav-link" href="/settings" target="_top" accesskey="7" title="Settings (7)">settings</a> <form class="signout" action="/signout" method="post" target="_top"> <input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}"> - <input type="submit" value="signout" class="btn-link nav-link"> + <input type="submit" value="signout" class="btn-link nav-link" accesskey="8" title="Signout (8)"> </form> </div> </div> diff --git a/templates/notification.tmpl b/templates/notification.tmpl index 6973fa5..059268a 100644 --- a/templates/notification.tmpl +++ b/templates/notification.tmpl @@ -7,11 +7,11 @@ ({{.UnreadCount }}) {{end}} </div> - <a class="notification-refresh" href="/notifications" target="_self">refresh</a> + <a class="notification-refresh" href="/notifications" target="_self" accesskey="R" title="Refresh (R)">refresh</a> {{if .ReadID}} <form action="/notifications/read?max_id={{.ReadID}}" method="post" target="_self"> <input type="hidden" name="csrf_token" value="{{$.Ctx.CSRFToken}}"> - <input type="submit" value="read" class="btn-link"> + <input type="submit" value="read" class="btn-link" accesskey="C" title="Clear unread notifications (C)"> </form> {{end}} </div> diff --git a/templates/postform.tmpl b/templates/postform.tmpl index 3bb2457..ac77486 100644 --- a/templates/postform.tmpl +++ b/templates/postform.tmpl @@ -7,24 +7,22 @@ {{else}} <label for="post-content" class="post-form-title"> New post </label> {{end}} - <a class="post-form-emoji-link" href="/emojis" target="_blank" title="emoji list"> + <a class="post-form-emoji-link" href="/emojis" target="_blank" title="Emoji list (L)" accesskey="L"> emoji list </a> <div class="post-form-content-container"> - <textarea id="post-content" name="content" class="post-content" cols="34" rows="5">{{if .ReplyContext}}{{.ReplyContext.ReplyContent}}{{end}}</textarea> + <textarea id="post-content" name="content" class="post-content" cols="34" rows="5" accesskey="E" title="Edit post (E)">{{if .ReplyContext}}{{.ReplyContext.ReplyContent}}{{end}}</textarea> </div> <div> {{if gt (len .Formats) 0}} <span class="post-form-field"> - <label for="post-format"> Format </label> - <select id="post-format" name="format"> + <select id="post-format" name="format" accesskey="F" title="Format (F)"> {{range .Formats}} <option value="{{.Type}}">{{.Name}}</option> {{end}} </select> </span> {{end}} <span class="post-form-field"> - <label for="post-visilibity"> Scope </label> - <select id="post-visilibity" name="visibility" {{if .ReplyContext}}{{if .ReplyContext.ForceVisibility}}disabled{{end}}{{end}}> + <select id="post-visilibity" name="visibility" {{if .ReplyContext}}{{if .ReplyContext.ForceVisibility}}disabled{{end}}{{end}} accesskey="S" title="Scope (S)"> <option value="public" {{if eq .DefaultVisibility "public"}}selected{{end}}>Public</option> <option value="unlisted" {{if eq .DefaultVisibility "unlisted"}}selected{{end}}>Unlisted</option> <option value="private" {{if eq .DefaultVisibility "private"}}selected{{end}}>Private</option> @@ -32,17 +30,16 @@ </select> </span> <span class="post-form-field"> - <input type="checkbox" id="nsfw-checkbox" name="is_nsfw" value="on"> - <label for="nsfw-checkbox"> Is NSFW </label> + <input type="checkbox" id="nsfw-checkbox" name="is_nsfw" value="on" accesskey="N" title="NSFW (N)"> + <label for="nsfw-checkbox"> NSFW </label> </span> </div> <div> <span class="post-form-field"> - <label for ="post-file-picker"> Attachments </label> - <input id="post-file-picker" type="file" name="attachments" multiple> + <input id="post-file-picker" type="file" name="attachments" multiple accesskey="A" title="Attachments (A)"> </span> </div> - <button type="submit"> Post </button> + <button type="submit" accesskey="P" title="Post (P)"> Post </button> </form> {{end}} |