diff --git a/src/Main.elm b/src/Main.elm
@@ -5,6 +5,7 @@ import Types exposing (..)
import Html exposing (Html)
import Browser exposing (document)
+import Http
import File exposing (File)
import File.Download as Download
import File.Select as Select
@@ -15,7 +16,7 @@ import Task
main : Program () Model Msg
main =
document
- { init = \_ -> (init, Cmd.none)
+ { init = \_ -> (init, loadExample)
, update = update
, view = view
, subscriptions = subscriptions
@@ -28,6 +29,9 @@ update msg model =
Update image ->
({ model | image = image }, Cmd.none)
+ Load result ->
+ (model, load result)
+
Validation val ->
({ model | isValid = val }, Cmd.none)
@@ -35,19 +39,28 @@ update msg model =
({ model | darkMode = not model.darkMode }, Cmd.none)
Download ->
- (model, Download.string "image.svg" "image/svg+xml" model.image)
+ (model, Download.string model.fileName "image/svg+xml" model.image)
Upload upl ->
- (model, upload upl)
+ upload model upl
+
+load : Result Http.Error String -> Cmd Msg
+load result =
+ case result of
+ Ok data ->
+ Task.perform Update (Task.succeed data)
-upload : Upload -> Cmd Msg
-upload upl =
+ Err _ ->
+ Cmd.none
+
+upload : Model -> Upload -> (Model, Cmd Msg)
+upload model upl =
case upl of
Requested ->
- Select.file ["image/svg+xml"] (\file -> Upload (Selected file))
+ (model, Select.file ["image/svg+xml"] (\file -> Upload (Selected file)))
Selected file ->
- Task.perform Update (File.toString file)
+ ({ model | fileName = File.name file }, Task.perform Update (File.toString file))
subscriptions : Model -> Sub Msg
@@ -56,8 +69,16 @@ subscriptions model =
init : Model
init =
- { image = "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1\" viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" r=\"50\" fill=\"rgb(67, 54, 76)\" />\n</svg>"
+ { image = ""
, isValid = True
, darkMode = False
, uriEncoder = Maybe.withDefault Regex.never <| Regex.fromString "!|#|\\$|%|&|'|\\(|\\)|\\*|\\+|,|\\/|:|;|=|\\?|@|\\[|\\]"
+ , fileName = "example.svg"
}
+
+loadExample : Cmd Msg
+loadExample =
+ Http.get
+ { url = "example.svg"
+ , expect = Http.expectString Load
+ }
diff --git a/styles.css b/styles.css
@@ -58,47 +58,86 @@ textarea::placeholder {
svg {
fill-rule: evenodd;
- clip-rule: evenodd;
+ fill: currentColor;
}
body {
- width: 100%;
- height: 100%;
+ display: flex;
+
+ width: calc(100% - 6 * var(--small));
+ height: 100vh;
margin: 0;
- padding: 0;
+ padding: 0 calc(3 * var(--small));
background: var(--dark);
+ font-family: 'B612 Mono', monospace;
+ color: var(--light);
}
-body > div#header {
+body * {
+ color: var(--light);
+}
+
+body > div#container {
width: 100%;
- height: var(--large);
+
+ margin: auto 0;
+}
- background: var(--mid);
+body > div#container > * {
+ box-shadow: 0 0 var(--small) 1vmax #00000040;
+}
+
+body > div#container > div#title {
+ padding: 0 var(--tiny);
+ font-size: 2.5vmax;
+}
+
+@media (orientation: landscape) {
+ body > div#container > div#title {
+ width: min-content;
+ }
+}
+
+body > div#container > div#title > svg {
+ height: 70%;
+ margin: auto;
}
-body > div#editor {
+body > div#container > div#title, body > div#container > div#editor > div#display > div#options > button {
+ display: flex;
+
+ height: calc(4 * var(--tiny));
+
+ background: var(--highlight);
+ border-radius: calc(2 * var(--tiny));
+}
+
+body > div#container > div#title, body > div#container > div#editor, body > div#container > div#editor > * {
+ transition: background-color .25s ease, fill .25s ease;
+}
+
+body > div#container > div#editor {
display: grid;
grid-gap: calc(1.5 * var(--tiny));
- margin: calc(1.5 * var(--small)) calc(3 * var(--small));
+
+ margin-top: calc(1.5 * var(--tiny));
padding: calc(1.5 * var(--tiny));
background: var(--highlight);
- box-shadow: 0 0 var(--small) 1vmax #00000040;
-
border-radius: calc(2 * var(--tiny));
}
-body > div#editor.error {
+body > div#container.error {
--mid: #c2858f;
--light: #eec6df;
--highlight: #c73a4d;
}
@media (orientation: landscape) {
- body > div#editor {
+ body > div#container > div#editor {
grid-template-columns: 1fr 2fr;
grid-template-areas: "display text";
@@ -107,7 +146,7 @@ body > div#editor.error {
}
@media (orientation: portrait) {
- body > div#editor {
+ body > div#container > div#editor {
grid-template-rows: 3fr 1fr;
grid-template-areas: "display" "text";
@@ -115,16 +154,12 @@ body > div#editor.error {
}
}
-body > div#editor, body > div#editor > * {
- transition: background-color .25s ease, border-color .25s ease;
-}
-
-body > div#editor img {
+body > div#container > div#editor img {
width: 100%;
height: 100%;
}
-body > div#editor > div#display {
+body > div#container > div#editor > div#display {
grid-area: display;
position: relative;
@@ -135,16 +170,16 @@ body > div#editor > div#display {
transition: background .5s ease, box-shadow .5s ease;
}
-body > div#editor > div#display.dark {
+body > div#container > div#editor > div#display.dark {
background: var(--dark);
box-shadow: inset 0 0 calc(.25 * var(--small)) .5vmax #ffffff10;
}
-body > div#editor > div#display > * {
+body > div#container > div#editor > div#display > * {
position: absolute;
}
-body > div#editor > div#display > img {
+body > div#container > div#editor > div#display > img {
top: 0;
left: 0;
@@ -154,7 +189,7 @@ body > div#editor > div#display > img {
padding: calc(2 * var(--tiny));
}
-body > div#editor > div#display > div#options {
+body > div#container > div#editor > div#display > div#options {
display: grid;
grid-gap: var(--tiny);
grid-auto-flow: column;
@@ -169,57 +204,51 @@ body > div#editor > div#display > div#options {
}
@media (hover: hover) {
- body > div#editor > div#display > div#options {
+ body > div#container > div#editor > div#display > div#options {
grid-gap: var(--tiny);
opacity: .75;
}
- body > div#editor > div#display > div#options:hover {
+ body > div#container > div#editor > div#display > div#options:hover {
opacity: 1;
}
}
@media (hover: none) {
- body > div#editor > div#display > div#options {
+ body > div#container > div#editor > div#display > div#options {
width: calc(100% - 2 * var(--tiny));
}
}
-body > div#editor > div#display > div#options > button {
+body > div#container > div#editor > div#display > div#options > button {
display: flex;
width: calc(4 * var(--tiny));
- height: calc(4 * var(--tiny));
margin: auto;
-
- background: var(--highlight);
border: none;
- border-radius: calc(2 * var(--tiny));
box-shadow: 0 0 calc(.25 * var(--small)) .5vmax #00000030;
cursor: pointer;
}
-body > div#editor svg {
+body > div#container > div#editor svg {
max-width: 90%;
max-height: 90%;
margin: auto;
-
- fill: var(--light);
}
-body > div#editor > svg#error, body > div#editor.error > div#display {
+body > div#container > div#editor > svg#error, body > div#container.error > div#editor > div#display {
display: none;
}
-body > div#editor.error > svg#error {
+body > div#container.error > div#editor > svg#error {
display: block;
}
-body > div#editor > textarea {
+body > div#container > div#editor > textarea {
grid-area: text;
resize: none;
white-space: pre;
@@ -242,13 +271,13 @@ body > div#editor > textarea {
}
@media (hover: hover) {
- body > div#editor > textarea {
+ body > div#container > div#editor > textarea {
font-size: 1.2vmax;
}
}
@media (hover: none) {
- body > div#editor > textarea {
+ body > div#container > div#editor > textarea {
font-size: 2.25vmax;
}
}
\ No newline at end of file