responsive design#

mariatsji · Mar 18, 2022 · 89bbee0 · 89bbee0
1 parent 47fa0f1
commit 89bbee0
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 37 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -1,37 +1,11 @@
 * {
     font-family: American Typewriter, serif;
-    margin-left: 16px;
-}
-body {
-    background-color: antiquewhite;
-}
-a {
-    margin: 0px;
-}
-form {
-    margin-top: 16px;
-    margin-left: 0px;
-}
-svg {
-    margin-top: 32px;
-}
-.inputlabel {
-    font-size: 12px;
-}
-.content {
-    border-radius: 4px;
-    margin-right: 16px;
-    background-color: floralwhite;
-}
-.air {
-    margin-top: 8px;
-    margin-bottom: 8px;
 }
 .azure {
     background-color: azure;
 }
 .red {
-    color: red;
+    color: rgb(182, 63, 63);
 }
 .bluebg {
     background-color: lightskyblue;
@@ -40,9 +14,92 @@ svg {
     background-color: lightgreen;
 }
 .snowbg {
-    background-color: snow;
+    background-color: lightpink;
+}
+.content {
+    overflow: auto;
 }
 .credits {
-    font-size: 10px;
+    font-size: 16px;
     color: lightslategrey;
+}
+/* mobile device */
+@media only screen and (max-width:445px){
+    h1 {
+        font-size: 24px;
+    }
+    p {
+        font-size: 16px;
+    }
+    body {
+        background-color: antiquewhite;
+    }
+    a {
+        margin: 0px;
+    }
+    form {
+        width: 100%;
+        max-height: 100px;
+    }
+    input {
+        padding: 10px;
+        font-size: 16px;
+    }
+    button {
+        padding: 4px;
+        margin-top: 8px;
+        margin-right: 8px;
+        margin-bottom: 8px;
+    }
+    svg {
+        margin-top: 20px;
+        max-width: 3000px;
+        max-height: 600px;
+    }
+    .credits {
+        font-size: 13px;
+        margin-top: 60px;
+    }
+}
+/* desktop */
+@media only screen and not (max-width:445px) {
+    * {
+        font-family: American Typewriter, serif;
+    }
+    h1 {
+        margin-left: 16px;
+    }
+    p {
+        margin-left: 16px;
+    }
+    body {
+        background-color: antiquewhite;
+    }
+    a {
+        margin: 0px;
+    }
+    form {
+        width: 100%;
+        max-height: 100px;
+        margin-left: 16px;
+    }
+    input {
+        padding: 10px;
+        font-size: 16px;
+    }
+    button {
+        padding: 4px;
+        margin-top: 8px;
+        margin-right: 8px;
+        margin-bottom: 8px;
+    }
+    svg {
+        margin-top: 20px;
+        margin-left: 16px;
+        max-width: 3000px;
+        max-height: 600px;
+    }
+    .sharelink {
+        margin-left: 16px;
+    }
 }
diff --git a/type-depict.cabal b/type-depict.cabal
@@ -40,8 +40,8 @@ library
         unordered-containers
     exposed-modules:
         Hoogle
-        Visual
         Parser
+        Visual
     default-extensions:
         DeriveGeneric
         DerivingStrategies

diff --git a/webserver/Main.hs b/webserver/Main.hs
@@ -48,11 +48,7 @@ main = do
     putStrLn "scotty webserver going up"
     scotty port $ do
         get "/" $ do
-            let cnt = doctype <> with (svg11_ mempty) container
-            html (mainHtml "(a -> m b) -> m a -> m b" (Content $ prettyText cnt))
-        post "/" $ do
-            let cnt = doctype <> with (svg11_ mempty) container
-            html (mainHtml "(a -> m b) -> m a -> m b" (Content $ prettyText cnt))
+            redirect "/%28a%20-%3E%20m%20b%29%20-%3E%20m%20a%20-%3E%20m%20b"
         get "/style.css" $ do
             setHeader "Content-Type" "text/css; charset=utf-8"
             file "assets/style.css"
@@ -110,11 +106,12 @@ htmlHead =
         , "<link rel=\"stylesheet\" type=\"text/css\" href=\"/style.css\" />"
         , "<title>type-depict.io</title>"
         , "<meta charset=\"utf-8\" />"
+        , "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
         , "</head>"
         ]
 
 htmlBody :: Expr -> Content -> Html
-htmlBody expr (Content content) = fold ["<body>", "<h1>", "Haskell Type Visualizer", "</h1>", htmlForm expr, "<div class=\"content air\">", content, "</div>", shareLink, credits, "</body>"]
+htmlBody expr (Content content) = fold ["<body>", "<h1>", "Haskell Type Visualizer", "</h1>", htmlForm expr, "<div class=\"content\">", content, "</div>", shareLink, credits, "</body>"]
 
 htmlForm :: Expr -> Html
 htmlForm (Expr expr) =
@@ -123,7 +120,7 @@ htmlForm (Expr expr) =
             [NI.text|
          <form action="/submit" method="post">
             <label class="inputlabel" for="signature">Haskell Type Signature</label><br>
-            <input type="text" id="signature" name="signature" class="air azure" size="90" autocomplete="off" value="$strictT"><br>
+            <input type="text" id="signature" name="signature" class="azure" size="90" autocomplete="off" value="$strictT"><br>
             <button type="submit" class="bluebg" title="Render the visualization in the input field above">Visualize</button>
             <button type="submit" class="greenbg" formaction="/hoogle" title="Hoogle a function name in the input field above">Hoogle</button>
             <button type="submit" class="snowbg" formaction="/" title="Clear visualization and reset page">Clear</button>
@@ -165,6 +162,7 @@ shareLink =
             [NI.text|
         <Button
             variant="contained"
+            class="sharelink"
             size="large"
             onClick="copyToClipboard(window.location.href)"
             title="Copy this visualization url to the clipboard">