improve styles

This commit is contained in:
DieMyst 2020-12-02 03:21:02 +03:00
parent 344ae0c981
commit ac161db98c
7 changed files with 44 additions and 26 deletions

View File

@ -3,8 +3,9 @@ module BlueprintPage.View exposing (..)
import BlueprintPage.Model exposing (BlueprintViewInfo)
import Blueprints.Model exposing (Blueprint)
import Dict exposing (Dict)
import Html exposing (Html, article, div, span, text)
import Html exposing (Html, article, div, h3, span, text)
import Html.Events exposing (onClick)
import Instances.View
import Interface.View exposing (instanceView)
import Model exposing (Model)
import Modules.Model exposing (Module)
@ -20,12 +21,20 @@ view model id =
blueprintToInfo model id
in
case blueprintInfo of
Just mi ->
div [ classes "cf ph2-ns" ]
[ span [ classes "fl w-100 f1 lh-title dark-red" ] [ text ("Blueprint: " ++ mi.name) ]
, span [ classes "fl w-100 light-red" ] [ text mi.id ]
, viewInfo mi
]
Just bi ->
let
(instanceNum, instanceView) = Instances.View.view model (\service -> service.blueprint_id == id)
in
div [ classes "fl w-100 cf ph2-ns" ]
[ div [ classes "fl w-100 mb2" ]
[ span [ classes "fl w-100 f1 lh-title dark-red" ] [ text ("Blueprint: " ++ bi.name) ]
, span [ classes "fl w-100 light-red" ] [ text bi.id ]
]
, div [ classes "fl w-100 bg-white mt2 mh2 ph4 pt3" ] [ viewInfo bi ]
, h3 [ classes "pt3" ] [ text ("Instances (" ++ (String.fromInt instanceNum) ++ ")") ]
, div [ classes "mt2 bg-white" ]
[ instanceView ]
]
Nothing ->
div [ classes "cf ph2-ns" ]

View File

@ -34,7 +34,7 @@ view model =
viewService : BlueprintInfo -> Html msg
viewService blueprint =
div [ classes "fl w-third-ns pa2" ]
[ a [ attribute "href" ("/blueprint/" ++ blueprint.id), classes "fl w-100 link dim black mw5 dt hide-child ba b-black pa4 br2 solid" ]
[ a [ attribute "href" ("/blueprint/" ++ blueprint.id), classes "fl bg-white w-100 link dim black mw5 dt hide-child ba b-black pa4 br2 solid" ]
[ div [ classes "w-100 mb2 b" ] [ text blueprint.name ]
, div [ classes "w-100 mb4" ] [ text ("By " ++ blueprint.author) ]
, div [ classes "w-100" ] [ instancesText blueprint.instanceNumber ]

View File

@ -19,7 +19,7 @@ view model =
, h3 [] [ text "Featured Modules" ]
, Modules.View.view model
, h3 [] [ text "Service Instances" ]
, Instances.View.view model
, Tuple.second (Instances.View.view model (\_ -> True))
]

View File

@ -23,19 +23,20 @@ toInstance peerId identify blueprints service =
{ name = name, instance = service.service_id, peerId = peerId, ip = ip }
view : Model -> Html msg
view model =
view : Model -> (Service -> Bool) -> (Int, Html msg)
view model filter =
let
instances =
Dict.toList model.discoveredPeers
|> List.map
(\( peer, data ) ->
data.services
|> List.filter filter
|> List.map (toInstance peer data.identify model.blueprints)
)
|> List.concat
in
viewTable instances
(List.length instances, viewTable instances)
viewTable : List Instance -> Html msg

View File

@ -1,7 +1,8 @@
module ModulePage.View exposing (..)
import Dict exposing (Dict)
import Html exposing (Html, article, div, span, text)
import Html exposing (Html, article, div, h3, span, text)
import Instances.View
import Interface.View exposing (instanceView)
import Model exposing (Model)
import ModulePage.Model exposing (ModuleViewInfo)
@ -13,15 +14,23 @@ view : Model -> String -> Html msg
view model id =
let
moduleInfo =
modelToServiceInfo model.modules id
moduleToInfo model.modules id
in
case moduleInfo of
Just mi ->
div [ classes "cf ph2-ns" ]
[ span [ classes "fl w-100 f1 lh-title dark-red" ] [ text ("Module: " ++ mi.name) ]
, span [ classes "fl w-100 light-red" ] [ text mi.id ]
, viewInfo mi
]
let
check = Maybe.map (\bp -> bp.dependencies |> List.member id )
filter = (\s -> model.blueprints |> Dict.get s.blueprint_id |> check |> Maybe.withDefault False)
(instanceNum, instanceView) = Instances.View.view model filter
in
div [ classes "fl w-100 cf ph2-ns" ]
[ div [ classes "fl w-100 mb2"]
[ span [ classes "fl w-100 f1 lh-title dark-red" ] [ text ("Module: " ++ mi.name) ]
]
, div [ classes "fl w-100 bg-white mt2 mh2 ph4 pt3" ] [ viewInfo mi ]
, h3 [ classes "pt3" ] [ text ("Instances (" ++ (String.fromInt instanceNum) ++ ")") ]
, div [ classes "fl w-100 mt2 bg-white" ] [ instanceView ]
]
Nothing ->
div [ classes "cf ph2-ns" ]
@ -29,8 +38,8 @@ view model id =
]
modelToServiceInfo : Dict String Module -> String -> Maybe ModuleViewInfo
modelToServiceInfo modules id =
moduleToInfo : Dict String Module -> String -> Maybe ModuleViewInfo
moduleToInfo modules id =
let
moduleInfo =
Dict.get id modules

View File

@ -12,7 +12,7 @@ import Utils.Utils exposing (instancesText)
getModuleShortInfo : Model -> List ModuleShortInfo
getModuleShortInfo model =
getAllModules model.modules model.discoveredPeers |> Dict.toList |> List.map (\( moduleName, ( moduleInfo, peers ) ) -> { moduleInfo = moduleInfo, instanceNumber = List.length peers })
getAllModules model.modules model.discoveredPeers |> Dict.toList |> List.map (\( _, ( moduleInfo, peers ) ) -> { moduleInfo = moduleInfo, instanceNumber = List.length peers })
getAllModules : Dict String Module -> Dict String PeerData -> Dict String ( Module, List String )
@ -60,7 +60,7 @@ view modules =
viewService : ModuleShortInfo -> Html msg
viewService moduleInfo =
div [ classes "fl w-third-ns pa2" ]
[ a [ attribute "href" ("/module/" ++ moduleInfo.moduleInfo.name), classes "fl w-100 link dim black mw5 dt hide-child ba b-black pa4 br2 solid" ]
[ a [ attribute "href" ("/module/" ++ moduleInfo.moduleInfo.name), classes "fl w-100 bg-white link dim black mw5 dt hide-child ba b-black pa2 br2 solid" ]
[ p [ classes "tl di" ] [ span [ classes "b pl2" ] [ text moduleInfo.moduleInfo.name ], span [ classes "di fr pr2" ] [ instancesText moduleInfo.instanceNumber ] ]
]
]

View File

@ -18,7 +18,6 @@ limitations under the License.
import Browser exposing (Document, UrlRequest(..))
import Html exposing (Html, div, header)
import Html.Attributes exposing (style)
import Model exposing (Model, Route(..))
import Msg exposing (..)
import Palette exposing (classes)
@ -45,8 +44,8 @@ body model =
layout : List (Html Msg) -> Html Msg
layout elms =
div [ classes "mw9 center w-70" ]
[ div [ classes "fl w-100 pa2", style "font-family" "Roboto+Mono" ]
div [ classes "mw8 center w-100" ]
[ div [ classes "fl w-100 pa2 ph4 bg-near-white" ]
([]
++ elms
)