Skip to content
Permalink
Browse files

Playground: Improved responsive display.

This isn't the whole story for mobile support, but by golly it goes a
long way towards it.
  • Loading branch information...
krisajenkins committed Apr 11, 2019
1 parent d306104 commit b0e75bbc7f4d8368f677d4261b98644ed8e2ecbd
@@ -2,7 +2,7 @@ module Action
( simulationPane
) where

import Bootstrap (badge, badgePrimary, btn, btnDanger, btnGroup, btnGroupSmall, btnInfo, btnLink, btnPrimary, btnSecondary, btnSuccess, btnWarning, card, cardBody_, col10_, col2_, col4_, col_, formControl, formGroup_, invalidFeedback_, nbsp, pullRight, row, row_, validFeedback_, wasValidated)
import Bootstrap (badge, badgePrimary, btn, btnDanger, btnGroup, btnGroupSmall, btnInfo, btnLink, btnPrimary, btnSecondary, btnSuccess, btnWarning, card, cardBody_, col10_, col12, col2_, colMd4, colSm6, col_, formControl, formGroup_, invalidFeedback_, nbsp, pullRight, row, row_, validFeedback_, wasValidated)
import Control.Monad.Aff.Class (class MonadAff)
import Cursor (Cursor, current)
import Cursor as Cursor
@@ -135,7 +135,7 @@ actionsPane isValidWallet actions evaluationResult =
actionPane :: forall p. (Wallet -> Boolean) -> Int -> Action -> Tuple String (HTML p Query)
actionPane isValidWallet index action =
Tuple (show index) $
col4_
div [ classes [ col12, colSm6, colMd4 ] ]
[ div [ classes [ ClassName "action"
, ClassName ("action-" <> show index)
, ClassName ("action-" <> (case isValidWallet <$> (preview (_Action <<< _simulatorWallet <<< _simulatorWalletWallet) action) of
@@ -313,7 +313,7 @@ validationFeedback errors =
addWaitActionPane :: forall p. Tuple String (HTML p Query)
addWaitActionPane =
Tuple "add-wait" $
col4_
div [ classes [ col12, colSm6, colMd4 ] ]
[ div
[ class_ $ ClassName "add-wait-action" ]
[ div [ class_ card
@@ -13,7 +13,7 @@ import Action (simulationPane)
import AjaxUtils (ajaxErrorPane)
import AjaxUtils as AjaxUtils
import Analytics (Event, defaultEvent, trackEvent, ANALYTICS)
import Bootstrap (active, btn, btnGroup, btnSmall, col6_, container, container_, empty, floatRight, hidden, navItem_, navLink, navTabs_, noGutters, row)
import Bootstrap (active, btn, btnGroup, btnSmall, col12, colMd6, container, container_, empty, floatRight, hidden, navItem_, navLink, navTabs_, noGutters, row)
import Chain (evaluationPane)
import Control.Bind (bindFlipped)
import Control.Comonad (extract)
@@ -501,8 +501,8 @@ render state@(State {currentView}) =
[ container_
[ mainHeader
, div [ classes [ row, noGutters ] ]
[ col6_ [ mainTabBar currentView ]
, col6_ [ gistControls state ]
[ div [ classes [ col12, colMd6 ] ] [ mainTabBar currentView ]
, div [ classes [ col12, colMd6 ] ] [ gistControls state ]
]
]
, viewContainer currentView Editor $
@@ -2,7 +2,7 @@ module Wallet where

import Types

import Bootstrap (btn, btnSecondary, btnSmall, card, cardBody_, cardTitle_, card_, col4_, pullRight, row)
import Bootstrap (btn, btnSecondary, btnSmall, card, cardBody_, cardTitle_, card_, col12, colMd4, colSm6, pullRight, row)
import Data.Array (mapWithIndex)
import Data.Array as Array
import Data.Lens (view)
@@ -51,7 +51,7 @@ walletPane
})
=
Tuple (show walletIndex) $
col4_
div [ classes [ col12, colSm6, colMd4 ] ]
[ div [ classes [ ClassName "wallet", ClassName ("wallet-" <> show walletIndex) ] ]
[ card_
[ cardBody_
@@ -75,7 +75,7 @@ walletPane
addWalletPane :: forall p. Tuple String (HTML p Query)
addWalletPane =
Tuple "add-wallet" $
col4_
div [ classes [ col12, colSm6, colMd4 ] ]
[ div
[ class_ $ ClassName "add-wallet" ]
[ div [ class_ card
@@ -94,6 +94,30 @@ col10 = ClassName "col-10"
col10_ :: forall p i. Array (HTML p i) -> HTML p i
col10_ = div [ classes [ col, col10 ] ]

col11 :: ClassName
col11 = ClassName "col-11"

col11_ :: forall p i. Array (HTML p i) -> HTML p i
col11_ = div [ classes [ col, col11 ] ]

col12 :: ClassName
col12 = ClassName "col-12"

col12_ :: forall p i. Array (HTML p i) -> HTML p i
col12_ = div [ classes [ col, col12 ] ]

colSm6 :: ClassName
colSm6 = ClassName "col-sm-6"

colSm12 :: ClassName
colSm12 = ClassName "col-sm-12"

colMd4 :: ClassName
colMd4 = ClassName "col-md-4"

colMd6 :: ClassName
colMd6 = ClassName "col-md-6"

offset3 :: ClassName
offset3 = ClassName "offset-3"

@@ -79,6 +79,7 @@ h2 {

.gist-controls {
padding-left: 15px;
margin-bottom: 15px;

input {
padding: 0.375rem;
@@ -218,8 +219,8 @@ h2 {
}

.nav-tabs {
margin-bottom: 15px;
border-bottom: dotted 1px $lightPurple;
border-right: dotted 1px $lightPurple;
text-transform: uppercase;
letter-spacing: 0.1rem;

0 comments on commit b0e75bb

Please sign in to comment.
You can’t perform that action at this time.