Starting to refactor CSS, redesigning header and footer, and replacin…

…g PNG logo with SVG.
IntersectMBO · Nov 19, 2020 · b6db994 · b6db994
1 parent b95cdd5
commit b6db994
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 168 deletions.
diff --git a/plutus-playground-client/src/View.js b/plutus-playground-client/src/View.js
@@ -6,4 +6,4 @@
 // Pulling in the image this way plays nicely with Webpack. The
 // `plutusLogo` string will actually be the hashed, permalink URL.
 // eg. 'e57a929e981d95dd55f1e92be8f3e0bb.png'.
-exports.plutusLogo = global.plutusLogo || require('../static/images/plutus_logo.png');
+exports.plutusLogo = global.plutusLogo || require('../static/images/plutus-logo.svg');
diff --git a/plutus-playground-client/src/View.purs b/plutus-playground-client/src/View.purs
@@ -2,7 +2,7 @@ module View (render) where
 
 import Types
 import AjaxUtils (ajaxErrorPane)
-import Bootstrap (btn, btnLink, colSm5, colSm6, colXs12, container, empty, justifyContentBetween, mlAuto, mrAuto, navLink, navbar, navbarBrand, navbarExpand, navbarNav, navbarText, nbsp, noGutters, row, row_)
+import Bootstrap (btn, btnLink, colSm5, colSm6, colXs12, container, empty, justifyContentBetween, navbar, navbarExpand, navbarNav, navbarText, nbsp, noGutters, row, row_)
 import Chain (evaluationPane)
 import Control.Monad.State (evalState)
 import Data.Array as Array
@@ -17,7 +17,7 @@ import Editor.Types (_keyBindings)
 import Editor.View (compileButton, editorFeedback, editorPreferencesPane, editorView)
 import Effect.Aff.Class (class MonadAff)
 import Gists (gistControls)
-import Halogen.HTML (ClassName(ClassName), ComponentHTML, HTML, a, button, div, div_, footer, img, nav, span, strong_, text)
+import Halogen.HTML (ClassName(ClassName), ComponentHTML, HTML, a, button, div, div_, header, main, footer, img, nav, strong_, text)
 import Halogen.HTML.Events (onClick)
 import Halogen.HTML.Extra (mapComponent)
 import Halogen.HTML.Properties (class_, classes, height, href, id_, src, target, width)
@@ -38,84 +38,82 @@ render ::
   State -> ComponentHTML HAction ChildSlots m
 render state@(State { currentView, blockchainVisualisationState, contractDemos, editorState }) =
   div
-    [ class_ $ ClassName "main-frame" ]
-    [ div_
-        [ mainHeader
-        , subHeader contractDemos
-        , div
-            [ id_ "main-content"
-            , class_ container
+    [ class_ $ ClassName "frame" ]
+    [ mainHeader
+    , subHeader contractDemos
+    , main
+        [ id_ "main-content"
+        , classes [ ClassName "content", container ]
+        ]
+        [ div [ classes [ row, noGutters, justifyContentBetween ] ]
+            [ div [ classes [ colXs12, colSm6 ] ] [ mainTabBar ChangeView tabs currentView ]
+            , div
+                [ classes [ colXs12, colSm5 ] ]
+                [ GistAction <$> gistControls (unwrap state) ]
             ]
-            [ div [ classes [ row, noGutters, justifyContentBetween ] ]
-                [ div [ classes [ colXs12, colSm6 ] ] [ mainTabBar ChangeView tabs currentView ]
-                , div
-                    [ classes [ colXs12, colSm5 ] ]
-                    [ GistAction <$> gistControls (unwrap state) ]
-                ]
-            , row_
-                [ viewContainer currentView Editor
-                    let
-                      compilationResult = view _compilationResult state
-                    in
-                      [ div [ id_ "editor" ]
-                          [ mapComponent EditorAction $ editorPreferencesPane (view _keyBindings editorState)
-                          , mapComponent EditorAction $ editorView defaultContents StaticData.bufferLocalStorageKey editorState
-                          , compileButton CompileProgram compilationResult
-                          , mapComponent EditorAction $ editorFeedback compilationResult
-                          , case compilationResult of
-                              Failure error -> ajaxErrorPane error
-                              _ -> empty
-                          ]
+        , row_
+            [ viewContainer currentView Editor
+                let
+                  compilationResult = view _compilationResult state
+                in
+                  [ div [ id_ "editor" ]
+                      [ mapComponent EditorAction $ editorPreferencesPane (view _keyBindings editorState)
+                      , mapComponent EditorAction $ editorView defaultContents StaticData.bufferLocalStorageKey editorState
+                      , compileButton CompileProgram compilationResult
+                      , mapComponent EditorAction $ editorFeedback compilationResult
+                      , case compilationResult of
+                          Failure error -> ajaxErrorPane error
+                          _ -> empty
                       ]
-                , viewContainer currentView Simulations
-                    $ let
-                        knownCurrencies = evalState getKnownCurrencies state
+                  ]
+            , viewContainer currentView Simulations
+                $ let
+                    knownCurrencies = evalState getKnownCurrencies state
 
-                        initialValue = mkInitialValue knownCurrencies zero
-                      in
-                        [ simulationPane
-                            initialValue
-                            (view _actionDrag state)
-                            ( view
-                                ( _compilationResult
-                                    <<< _Success
-                                    <<< _Right
-                                    <<< _Newtype
-                                    <<< _result
-                                    <<< _functionSchema
-                                )
-                                state
+                    initialValue = mkInitialValue knownCurrencies zero
+                  in
+                    [ simulationPane
+                        initialValue
+                        (view _actionDrag state)
+                        ( view
+                            ( _compilationResult
+                                <<< _Success
+                                <<< _Right
+                                <<< _Newtype
+                                <<< _result
+                                <<< _functionSchema
                             )
-                            (view _simulations state)
-                            (view _evaluationResult state)
-                        , case (view _evaluationResult state) of
-                            Failure error -> ajaxErrorPane error
-                            Success (Left error) -> actionsErrorPane error
-                            _ -> empty
-                        ]
-                , viewContainer currentView Transactions
-                    $ case view _evaluationResult state of
-                        Success (Right evaluation) -> [ evaluationPane blockchainVisualisationState evaluation ]
-                        Success (Left error) ->
-                          [ text "Your simulation has errors. Click the "
-                          , strong_ [ text "Simulation" ]
-                          , text " tab above to fix them and recompile."
-                          ]
-                        Failure error ->
-                          [ text "Your simulation has errors. Click the "
-                          , strong_ [ text "Simulation" ]
-                          , text " tab above to fix them and recompile."
-                          ]
-                        Loading -> [ icon Spinner ]
-                        NotAsked ->
-                          [ text "Click the "
-                          , strong_ [ text "Simulation" ]
-                          , text " tab above and evaluate a simulation to see some results."
-                          ]
-                ]
+                            state
+                        )
+                        (view _simulations state)
+                        (view _evaluationResult state)
+                    , case (view _evaluationResult state) of
+                        Failure error -> ajaxErrorPane error
+                        Success (Left error) -> actionsErrorPane error
+                        _ -> empty
+                    ]
+            , viewContainer currentView Transactions
+                $ case view _evaluationResult state of
+                    Success (Right evaluation) -> [ evaluationPane blockchainVisualisationState evaluation ]
+                    Success (Left error) ->
+                      [ text "Your simulation has errors. Click the "
+                      , strong_ [ text "Simulation" ]
+                      , text " tab above to fix them and recompile."
+                      ]
+                    Failure error ->
+                      [ text "Your simulation has errors. Click the "
+                      , strong_ [ text "Simulation" ]
+                      , text " tab above to fix them and recompile."
+                      ]
+                    Loading -> [ icon Spinner ]
+                    NotAsked ->
+                      [ text "Click the "
+                      , strong_ [ text "Simulation" ]
+                      , text " tab above and evaluate a simulation to see some results."
+                      ]
             ]
-        , mainFooter
         ]
+    , mainFooter
     ]
   where
   defaultContents :: Maybe String
@@ -125,14 +123,14 @@ foreign import plutusLogo :: String
 
 mainHeader :: forall p. HTML p HAction
 mainHeader =
-  nav
+  header
     [ id_ "main-header"
-    , classes [ navbar, navbarExpand ]
+    , class_ $ ClassName "header"
     ]
-    [ span [ class_ navbarBrand ]
+    [ div [ class_ $ ClassName "logo" ]
         [ img
-            [ height 22
-            , width 22
+            [ height 26
+            , width 26
             , src plutusLogo
             ]
         , text
@@ -145,7 +143,7 @@ documentationLinksPane :: forall p i. HTML p i
 documentationLinksPane =
   div
     [ id_ "docs"
-    , classes [ navbarNav, mlAuto ]
+    , class_ $ ClassName "documentation-links"
     ]
     (makeLink <$> links)
   where
@@ -159,8 +157,7 @@ documentationLinksPane =
 makeLink :: forall p i. HTML p i /\ String -> HTML p i
 makeLink (label /\ link) =
   a
-    [ class_ navLink
-    , href link
+    [ href link
     , target "_blank"
     ]
     [ label ]
@@ -169,7 +166,7 @@ subHeader :: forall p. Array ContractDemo -> HTML p HAction
 subHeader contractDemos =
   nav
     [ id_ "sub-header"
-    , classes [ navbar, navbarExpand ]
+    , classes [ ClassName "sub-header", navbar, navbarExpand ]
     ]
     [ contractDemosPane contractDemos
     ]
@@ -216,31 +213,20 @@ mainFooter :: forall p i. HTML p i
 mainFooter =
   footer
     [ id_ "main-footer"
-    , classes [ navbar, navbarExpand ]
+    , class_ $ ClassName "footer"
     ]
-    [ div
-        [ id_ "docs"
-        , classes [ navbarNav, mrAuto ]
-        ]
+    [ div_
         [ makeLink $ text "Cardano.org" /\ "https://cardano.org/"
+        , text "|"
         , makeLink $ text "IOHK.io" /\ "https://iohk.io/"
         ]
-    , div
-        [ classes [ navbarNav ]
-        ]
+    , div_
         [ copyright
         , nbsp
         , text "2020 IOHK Ltd."
         ]
-    , div
-        [ classes [ mlAuto ]
-        ]
-        [ a
-            [ href "https://twitter.com/hashtag/Plutus"
-            , target "_blank"
-            ]
-            [ text "Twitter" ]
-        ]
+    , div_
+        [ makeLink $ text "Twitter" /\ "https://twitter.com/hashtag/Plutus" ]
     ]
 
 copyright :: forall p i. HTML p i

diff --git a/plutus-playground-client/static/images/plutus-logo.svg b/plutus-playground-client/static/images/plutus-logo.svg
diff --git a/plutus-playground-client/static/images/plutus_logo.png b/plutus-playground-client/static/images/plutus_logo.png