improve styles

src/BlueprintPage/View.elm

@@ -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,11 +21,19 @@ view model id =
             blueprintToInfo model id
     in
     case blueprintInfo of
-        Just mi ->
+        Just bi ->
-            div [ classes "cf ph2-ns" ]
+            let
-                [ span [ classes "fl w-100 f1 lh-title dark-red" ] [ text ("Blueprint: " ++ mi.name) ]
+                (instanceNum, instanceView) = Instances.View.view model (\service -> service.blueprint_id == id)
-                , span [ classes "fl w-100 light-red" ] [ text mi.id ]
+            in
-                , viewInfo mi
+                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 ->

src/Blueprints/View.elm

@@ -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 ]

src/HubPage/View.elm

@@ -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))
         ]
 
 

src/Instances/View.elm

@@ -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 -> (Service -> Bool) -> (Int, Html msg)
-view model =
+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

src/ModulePage/View.elm

@@ -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,14 +14,22 @@ 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" ]
+            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) ]
-                , span [ classes "fl w-100 light-red" ] [ text mi.id ]
+                        ]
-                , viewInfo mi
+                    , 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 ->
@@ -29,8 +38,8 @@ view model id =
                 ]
 
 
-modelToServiceInfo : Dict String Module -> String -> Maybe ModuleViewInfo
+moduleToInfo : Dict String Module -> String -> Maybe ModuleViewInfo
-modelToServiceInfo modules id =
+moduleToInfo modules id =
     let
         moduleInfo =
             Dict.get id modules

src/Modules/View.elm

@@ -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 ] ]
             ]
         ]

src/View.elm

@@ -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 "mw8 center w-100" ]
-        [ div [ classes "fl w-100 pa2", style "font-family" "Roboto+Mono" ]
+        [ div [ classes "fl w-100 pa2 ph4 bg-near-white" ]
             ([]
                 ++ elms
             )