A simple SVG markup editor for the web
Replaced icons with text in the user interface
Replaced the button icons in the image viewer for plain text
This should make the interface more accessible
6 files changed, 17 insertions, 71 deletions
| Status | File Name | N° Changes | Insertions | Deletions |
| Deleted | assets/bulb-off.svg | 5 | 0 | 5 |
| Deleted | assets/bulb-on.svg | 9 | 0 | 9 |
| Deleted | assets/download.svg | 7 | 0 | 7 |
| Deleted | assets/upload.svg | 7 | 0 | 7 |
| Modified | css/styles.css | 21 | 13 | 8 |
| Modified | src/View.elm | 39 | 4 | 35 |
diff --git a/assets/bulb-off.svg b/assets/bulb-off.svg @@ -1,5 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<!-- Caubi Karman (C) 2020 --> -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1.852 1.852"> - <path fill="#dfdfdf" d="M.53.53v.793h.793V.529z"/> -</svg>
diff --git a/assets/bulb-on.svg b/assets/bulb-on.svg @@ -1,9 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<!-- Caubi Karman (C) 2020 --> -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1.852 1.852"> - <path fill="#dfdfdf" - d="M0 0v.265h.265V0H0zm.794 0v.265h.264V0H.794zm.793 0v.265h.265V0h - -.265zM.53.53v.793h.794V.529H.529zM0 .793v.264h.265V.794H0zm1.587 - 0v.264h.265V.794h-.265zM0 1.587v.265h.265v-.265H0zm.794 - 0v.265h.264v-.265H.794zm.793 0v.265h.265v-.265h-.265z"/> -</svg>
diff --git a/assets/download.svg b/assets/download.svg @@ -1,7 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<!-- Caubi Karman (C) 2020 --> -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7"> - <path fill="#dfdfdf" - d="M2.502 0h1.996v2.003H6.5L3.5 5.001.499 - 1.999h2.003zM1.501 5.998V7h3.998V5.998z"/> -</svg>
diff --git a/assets/upload.svg b/assets/upload.svg @@ -1,7 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<!-- Caubi Karman (C) 2020 --> -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 7"> - <path fill="#dfdfdf" - d="M4.498 7H2.502V4.997H.5L3.5 1.999l3.001 - 3.002H4.498zm1.001-5.998V0H1.501v1.002z"/> -</svg>
diff --git a/css/styles.css b/css/styles.css @@ -68,9 +68,9 @@ body { display: grid; grid-template-rows: auto 2em; - grid-template-columns: repeat(3, 2em) auto; - grid-template-areas: "image image image image" - "button button button ."; + grid-template-columns: repeat(3, 1fr); + grid-template-areas: "image image image" + "button button button"; grid-gap: 1em; padding: 1em; @@ -87,14 +87,19 @@ body { background: var(--background); border: none; - cursor: pointer; + + font-family: 'IBM Plex Mono', 'EmojiOne Color', monospace; + font-size: 13pt; + line-height: 2em; + text-align: center; + color: var(--foreground); + + overflow-y: hidden; } -#container #display button img { - width: 70% !important; - height: 70% !important; - margin: auto; +#container #display button span { + margin: 0 auto; } #container #display img#error {
diff --git a/src/View.elm b/src/View.elm @@ -29,7 +29,7 @@ import Html.Lazy exposing (lazy) import Accessibility.Landmark exposing (application, region) import Accessibility.Role exposing (alert) import Accessibility.Key exposing (onKeyDown, enter) -import Accessibility.Widget exposing (label, hidden) +import Accessibility.Widget exposing (label) import Browser exposing (Document) import Json.Decode import Regex exposing (Regex, Match, replace) @@ -80,17 +80,17 @@ display model = [ onClick Download , label "Download file" ] - [ downloadIcon ] + [ span [] [ text "Download" ] ] , button [ onClick (Upload Requested) , label "Upload file" ] - [ uploadIcon ] + [ span [] [ text "Upload" ] ] , button [ onClick ToggleDarkMode , label "Toggle dark mode" ] - [ bulbIcon model ] + [ span [] [ text (if model.darkModeOn then "Lighter" else "Darker") ] ] ] uri : Model -> String @@ -146,37 +146,6 @@ valid status = Invalid -> False -downloadIcon : Html Msg -downloadIcon = - img - [ src "assets/download.svg" - , hidden True - , alt "Download file" - ] - [] - -uploadIcon : Html Msg -uploadIcon = - img - [ src "assets/upload.svg" - , hidden True - , alt "Upload file" - ] - [] - -bulbIcon : Model -> Html Msg -bulbIcon model = - let - bulbOn = "assets/bulb-on.svg" - bulbOff = "assets/bulb-off.svg" - in - img - [ src (if model.darkModeOn then bulbOn else bulbOff) - , hidden True - , alt "Toggle dark mode" - ] - [] - errorIcon : Html Msg errorIcon = img
