diff --git a/src/BlueprintPage/View.elm b/src/BlueprintPage/View.elm index 868d4d3..d0f6359 100644 --- a/src/BlueprintPage/View.elm +++ b/src/BlueprintPage/View.elm @@ -3,8 +3,7 @@ module BlueprintPage.View exposing (..) import BlueprintPage.Model exposing (BlueprintViewInfo) import Blueprints.Model exposing (Blueprint) import Dict exposing (Dict) -import Html exposing (Html, article, div, h1, h3, span, text) -import Html.Attributes exposing (style) +import Html exposing (Html, article, div, h2, span, text) import Html.Events exposing (onClick) import Instances.View import Interface.View exposing (interfaceView) @@ -28,19 +27,19 @@ view model id = Instances.View.view model (\service -> service.blueprint_id == id) in div [ classes "fl w-100" ] - [ div [ classes "fl w-100 mb2" ] - [ h1 [ redFont, classes "f2 lh-copy ma0 mt4" ] [ text ("Blueprint: " ++ bi.name) ] + [ div [ classes "fl w-100 pb3 pt4" ] + [ div [ redFont, classes "f1 fw4 pt5" ] [ text ("Blueprint: " ++ bi.name) ] , span [ classes "fl w-100", darkRed ] [ text bi.id ] ] - , div [ classes "fl w-100 bg-white mt2 ph4 pt3 mb4 pb2 br3" ] [ viewInfo bi ] - , h3 [ classes "pt3" ] [ text ("Instances (" ++ String.fromInt instanceNum ++ ")") ] - , div [ classes "mt2 mb4 bg-white br3" ] + , div [ classes "fl w-100 bg-white mt2 ph4 pt3 mb5 pb3 br3" ] [ viewInfo bi ] + , h2 [ classes "pt4 fw5 f3 pb3" ] [ text ("Instances (" ++ String.fromInt instanceNum ++ ")") ] + , div [ classes "fl w-100 mt2 mb4 bg-white br3" ] [ instanceView ] ] Nothing -> div [ classes "cf ph2-ns" ] - [ span [ classes "fl w-100 f1 lh-title dark-red" ] [ text "Blueprint not found" ] + [ ] @@ -75,15 +74,13 @@ viewInfo blueprintInfo = \id -> blueprintInfo.openedModule |> Maybe.map (\om -> om == id) |> Maybe.withDefault False in article [ classes "cf" ] - [ div [ classes "fl w-100 w-30-ns gray mv1", style "word-break" "break-all" ] [ text "AUTHOR" ] - , div [ classes "fl w-100 w-70-ns mv1 lucida" ] - [ span [ classes "fl w-100 black b" ] [ text blueprintInfo.author ] - , span [ classes "fl w-100 black", style "word-break" "break-all" ] [ text blueprintInfo.authorPeerId ] - ] - , div [ classes "fl w-100 w-30-ns gray mv1", style "word-break" "break-all" ] [ text "DESCRIPTION" ] - , div [ classes "fl w-100 w-70-ns mv1", style "word-break" "break-all" ] [ span [ classes "fl w-100 black lucida pv1" ] [ text blueprintInfo.description ] ] - , div [ classes "fl w-100 w-30-ns gray mv1", style "word-break" "break-all" ] [ text "INTERFACE" ] - , div [ classes "fl w-100 w-70-ns mv1", style "word-break" "break-all" ] + [ div [ classes "fl w-100 w-20-ns gray-font mv3" ] [ text "AUTHOR" ] + , div [ classes "fl w-100 w-80-ns mv3 lucida" ] + [ span [ classes "fl w-100 black b" ] [ text blueprintInfo.author ] ] + , div [ classes "fl w-100 w-20-ns gray-font mv3" ] [ text "DESCRIPTION" ] + , div [ classes "fl w-100 w-80-ns mv3" ] [ span [ classes "fl w-100 black lucida pv1" ] [ text blueprintInfo.description ] ] + , div [ classes "fl w-100 w-20-ns gray-font mv3" ] [ text "INTERFACE" ] + , div [ classes "fl w-100 w-80-ns mv3" ] (blueprintInfo.modules |> List.map (\m -> viewToggledInterface (checkToggle m.name) m.name m.interface) ) @@ -95,7 +92,7 @@ viewToggledInterface isOpen name interface = let interfaceViewEl = if isOpen then - [ div [ classes "fl w-100 ph4" ] (interfaceView interface) ] + [ div [ classes "fl w-100 ph3" ] (interfaceView interface) ] else [] diff --git a/src/Blueprints/View.elm b/src/Blueprints/View.elm index 2c7e826..834a738 100644 --- a/src/Blueprints/View.elm +++ b/src/Blueprints/View.elm @@ -36,10 +36,12 @@ view model = viewService : BlueprintInfo -> Html msg viewService blueprint = div [ classes "fl w-100 w-third-ns pr3 lucida" ] - [ a [ attribute "href" ("/blueprint/" ++ blueprint.id), classes "fl w-100 bg-white black mw6 mr3 mb3 hide-child pv3 pl4 br3 element-box ba b--white bw1 no-underline" ] - [ div [ classes "w-100 mb3 pt1 b f3" ] [ text blueprint.name ] + [ a [ attribute "href" ("/blueprint/" ++ blueprint.id) + , classes "fl w-100 bg-white black mw6 mr3 mb3 hide-child pv3 pl4 br3 element-box ba b--white bw2 no-underline" + ] + [ div [ classes "w-100 mb3 pt1 b f3 overflow-hidden" ] [ text blueprint.name ] , div [ classes "w-100 mb4 fw4 gray-font" ] [ text "By ", span [classes "lucida-in normal"] [text blueprint.author] ] - , div [ classes "w-100 mt1 lucida-in" ] [ instancesText blueprint.instanceNumber ] + , div [ classes "w-100 mt1 lucida gray-font" ] [ instancesText blueprint.instanceNumber ] ] ] diff --git a/src/HubPage/View.elm b/src/HubPage/View.elm index d428d61..c0b6a7a 100644 --- a/src/HubPage/View.elm +++ b/src/HubPage/View.elm @@ -12,20 +12,20 @@ import Palette exposing (classes, redFont) view : Model -> Html msg view model = div [ classes "pt4" ] - [ div [ redFont, classes "f2 fw4 pt4 pb3" ] [ text "Developer Hub" ] + [ div [ redFont, classes "f1 fw4 pt5 pb3" ] [ text "Developer Hub" ] , welcomeText - , h2 [ classes "mt4 pt4 mb3 f3 fw5" ] [ text "Featured Blueprints" ] + , h2 [ classes "pt4 f3 fw5 pb3" ] [ text "Featured Blueprints" ] , Blueprints.View.view model - , h2 [ classes "mt3 pt3 mb3 f3 fw5" ] [ text "Featured Modules" ] + , h2 [ classes "pt4 f3 fw5 pb3" ] [ text "Featured Modules" ] , Modules.View.view model - , h2 [ classes "mt3 pt3 mb3 f3 fw5" ] [ text "Service Instances" ] + , h2 [ classes "pt4 f3 fw5 pb3" ] [ text "Blueprint Instances" ] , Tuple.second (Instances.View.view model (\_ -> True)) ] welcomeText : Html msg welcomeText = - div [ classes "w-two-thirds lucida welcome-text pt2" ] + div [ classes "w-two-thirds-ns lucida welcome-text pt2 pb3" ] [ span [] [ text "Welcome to the Fluence Developer Hub! Start building with composing existing services or explore featured modules to create your custom services. Learn more about how to build applications in " , a [ attribute "href" "https://fluence-labs.readme.io/docs" ] [ text "Documentation" ] diff --git a/src/Instances/View.elm b/src/Instances/View.elm index 1ef0c5e..e3d2bcd 100644 --- a/src/Instances/View.elm +++ b/src/Instances/View.elm @@ -3,7 +3,7 @@ module Instances.View exposing (..) import Blueprints.Model exposing (Blueprint) import Dict exposing (Dict) import Html exposing (Html, div, p, table, tbody, td, text, th, thead, tr) -import Html.Attributes exposing (attribute, style) +import Html.Attributes exposing (attribute) import Instances.Model exposing (Instance) import Model exposing (Model) import Nodes.Model exposing (Identify) @@ -43,10 +43,10 @@ viewTable : List Instance -> Html msg viewTable instances = div [ classes "pa1 mt2 bg-white br3" ] [ div [ classes "mw8-ns pa2 " ] - [ table [ classes "f6 w-100 center ws-normal-ns", attribute "cellspacing" "0", style "word-break" "break-all" ] + [ table [ classes "f6 w-100 center ws-normal-ns", attribute "cellspacing" "0" ] [ thead [] [ tr [ classes "" ] - [ th [ classes "fw5 tl pa3 gray-font" ] [ text "SERVICE" ] + [ th [ classes "fw5 tl pa3 gray-font" ] [ text "BLUEPRINT" ] , th [ classes "fw5 tl pa3 gray-font" ] [ text "INSTANCE" ] , th [ classes "fw5 tl pa3 gray-font" ] [ text "NODE" ] , th [ classes "fw5 tl pa3 gray-font" ] [ text "IP" ] @@ -60,7 +60,7 @@ viewTable instances = viewInstance : Instance -> Html msg viewInstance instance = - tr [ classes "" ] + tr [ classes "table-red-row" ] [ td [ classes "ph3" ] [ p [classes "ws-normal"] [text instance.name ]] , td [ classes "ph3" ] [ p [classes "ws-normal"] [text instance.instance ]] , td [ classes "ph3" ] [ p [classes "ws-normal"] [text (shortHashRaw 8 instance.peerId) ]] diff --git a/src/Interface/View.elm b/src/Interface/View.elm index c7db7ce..1b82e79 100644 --- a/src/Interface/View.elm +++ b/src/Interface/View.elm @@ -18,7 +18,7 @@ recordsView record = recordView : Record -> Html msg recordView record = - div [ classes "i" ] + div [ classes "i f6" ] ([ span [ classes "fl w-100 mt2" ] [ text (record.name ++ " {") ] ] ++ fieldsView record.fields ++ [ span [ classes "fl w-100 mb2" ] [ text "}" ] ] @@ -38,7 +38,9 @@ signaturesView signatures = signatureView : Signature -> Html msg signatureView signature = div [ classes "i fl w-100 mv2" ] - [ text "fn ", span [classes "b fs-normal"] [text signature.name], text (interpolate "({0}) -> {1}" [ argumentsToString signature.arguments, outputToString signature.output_types ]) ] + [ text "fn " + , span [classes "fw5"] [text signature.name] + , text (interpolate "({0}) -> {1}" [ argumentsToString signature.arguments, outputToString signature.output_types ]) ] argumentsToString : List (List String) -> String diff --git a/src/ModulePage/View.elm b/src/ModulePage/View.elm index c9220d4..c570f2a 100644 --- a/src/ModulePage/View.elm +++ b/src/ModulePage/View.elm @@ -1,11 +1,12 @@ module ModulePage.View exposing (..) import Dict exposing (Dict) -import Html exposing (Html, a, article, div, h1, h3, span, text) -import Html.Attributes exposing (attribute, style) +import Html exposing (Html, a, article, div, h2, span, text) +import Html.Attributes exposing (attribute, property) import Info exposing (getDescription, getSite) import Instances.View import Interface.View exposing (interfaceView) +import Json.Encode exposing (string) import Model exposing (Model) import ModulePage.Model exposing (ModuleViewInfo) import Modules.Model exposing (Module) @@ -31,17 +32,17 @@ view model id = Instances.View.view model filter in div [ classes "fl w-100 cf ph2-ns" ] - [ div [ classes "fl w-100 mb2 pt2" ] - [ h1 [ redFont, classes "f2 lh-copy ma0 mt4" ] [ text ("Module: " ++ mi.name) ] + [ div [ classes "fl w-100 mb2 pt4 pb3" ] + [ div [ redFont, classes "f1 fw4 pt5" ] [ text ("Module: " ++ mi.name) ] ] , div [ classes "fl w-100 bg-white mt2 ph4 pt3 mb4 pb2 br3" ] [ viewInfo mi ] - , h3 [ classes "pt3" ] [ text ("Instances (" ++ String.fromInt instanceNum ++ ")") ] + , h2 [ classes "pt4 fw5 f3 pb3" ] [ text ("Instances (" ++ String.fromInt instanceNum ++ ")") ] , div [ classes "fl w-100 mt2 mb4 bg-white br3" ] [ instanceView ] ] Nothing -> div [ classes "cf ph2-ns" ] - [ span [ classes "fl w-100 f1 lh-title dark-red" ] [ text "Module not found" ] + [ ] @@ -70,16 +71,23 @@ moduleToInfo modules id = in info +resString = String.fromChar (Char.fromCode 160) + +empty = span [ ] [ text resString ] viewInfo : ModuleViewInfo -> Html msg viewInfo moduleInfo = article [ classes "cf" ] - [ div [ style "word-break" "break-all", classes "fl w-100 w-30-ns gray mv1" ] [ text "AUTHOR" ] - , div [ style "word-break" "break-all", classes "fl w-100 w-70-ns mv1" ] [ span [ classes "fl w-100 black b" ] [ text moduleInfo.author ], span [ classes "fl w-100 black" ] [ text moduleInfo.authorPeerId ] ] - , div [ style "word-break" "break-all", classes "fl w-100 w-30-ns gray mv1" ] [ text "WEBSITE" ] - , div [ style "word-break" "break-all", classes "fl w-100 w-70-ns mv1" ] [ a [ attribute "href" moduleInfo.website, classes "fl w-100 black" ] [ text moduleInfo.website ] ] - , div [ style "word-break" "break-all", classes "fl w-100 w-30-ns gray mv1" ] [ text "DESCRIPTION" ] - , div [ style "word-break" "break-all", classes "fl w-100 w-70-ns mv1" ] [ span [ classes "fl w-100 black" ] [ text moduleInfo.description ] ] - , div [ style "word-break" "break-all", classes "fl w-100 w-30-ns gray mv1" ] [ text "INTERFACE" ] - , div [ style "word-break" "break-all", classes "fl w-100 w-70-ns mv1" ] [ span [ classes "fl w-100 black" ] (interfaceView moduleInfo.moduleInfo.interface) ] + [ div [ classes "fl w-100 w-20-ns gray mv3" ] [ text "AUTHOR" ] + , div [ classes "fl w-100 w-80-ns mv3" ] + [ span [ classes "fl w-100 black b lucida" ] [ text moduleInfo.author ] ] + , div [ classes "fl w-100 w-20-ns gray mv3" ] [ text "WEBSITE" ] + , div [ classes "fl w-100 w-80-ns mv3 lucida" ] + [ if moduleInfo.website == "" then empty else a [ attribute "href" moduleInfo.website, classes "fl w-100 fluence-red" ] [ text moduleInfo.website ] ] + , div [ classes "fl w-100 w-20-ns gray mv3" ] [ text "DESCRIPTION" ] + , div [ classes "fl w-100 w-80-ns mv3 lucida" ] + [ span [ classes "fl w-100 black", property "innerHTML" (string " 123") ] [ text moduleInfo.description ] ] + , div [ classes "fl w-100 w-20-ns gray mv3" ] [ text "INTERFACE" ] + , div [ classes "fl w-100 w-80-ns mv3" ] + [ span [ classes "fl w-100 black" ] (interfaceView moduleInfo.moduleInfo.interface) ] ] diff --git a/src/Modules/View.elm b/src/Modules/View.elm index 7f16e86..612f789 100644 --- a/src/Modules/View.elm +++ b/src/Modules/View.elm @@ -12,7 +12,9 @@ import Utils.Utils exposing (instancesText) getModuleShortInfo : Model -> List ModuleShortInfo getModuleShortInfo model = - getAllModules model.modules model.discoveredPeers |> Dict.toList |> List.map (\( _, ( 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 +62,12 @@ view modules = viewService : ModuleShortInfo -> Html msg viewService moduleInfo = div [ classes "fl w-100 w-third-ns pr3" ] - [ a [ attribute "href" ("/module/" ++ moduleInfo.moduleInfo.name), classes "fl w-100 bg-white black mw6 mr2 mb3 hide-child pa2 element-box ba b--white bw1 pl3" ] - [ p [ classes "tl di" ] [ div [ classes "fl b w-100 mb1 fw5" ] [ text moduleInfo.moduleInfo.name ], div [ classes "fl w-100 mt1 lucida gray-font2" ] [ instancesText moduleInfo.instanceNumber ] ] + [ a [ attribute "href" ("/module/" ++ moduleInfo.moduleInfo.name), + classes "fl w-100 bg-white black mw6 mr2 mb3 hide-child pa2 element-box ba b--white bw1 pl3" ] + [ p [ classes "tl di" ] + [ div [ classes "fl b w-100 mb1 fw5 overflow-hidden" ] + [ text moduleInfo.moduleInfo.name ] + , div [ classes "fl w-100 mt1 lucida gray-font2" ] [ instancesText moduleInfo.instanceNumber ] + ] ] ] diff --git a/src/View.elm b/src/View.elm index 3a63cdb..3e63713 100644 --- a/src/View.elm +++ b/src/View.elm @@ -40,14 +40,17 @@ body model = layout <| List.concat [ [ header [ classes "w-100" ] - [ div [ classes "w-100 fl ph2 pv3 pb1 bg-white one-edge-shadow" ] + [ div [ classes "w-100 fl pv2 bg-white one-edge-shadow" ] [ div [ classes "mw8-ns center ph3"] [ div [ classes "fl mv1 pl3" ] [ a [ attribute "href" "/" ] - [ img [ classes "v-mid dib mw-100", style "height" "30px", attribute "src" "/images/logo_new.svg" ] [] + [ img [ classes "mw-100", style "height" "30px" + , attribute "src" "/images/logo_new.svg" + , style "position" "relative" + , style "top" "0.16rem" ] [] ] ] - , div [ classes "fl pl5 h-auto" ] [ p [ classes "h-100 m-auto fw4 v-mid" ] [ text "Developer Hub" ] ] + , div [ classes "fl pl5 h-auto" ] [ p [ classes "h-100 m-auto fw4" ] [ text "Developer Hub" ] ] ] ] ] diff --git a/src/index.ts b/src/index.ts index aff7503..5923636 100644 --- a/src/index.ts +++ b/src/index.ts @@ -24,7 +24,7 @@ import * as serviceWorker from './serviceWorker'; import { Elm } from './Main.elm'; import { faasNetHttps, Node } from './environments'; -const relayIdx = 1; +const relayIdx = 4; export const relays: Node[] = faasNetHttps; @@ -63,8 +63,8 @@ function event(name: string,peer: string,peers?: string[],identify?: string[],se const eventService = new ServiceOne('event', (fnName, args: any[]) => { console.log('event service called: ', fnName); - console.log('from: ', args[0]); - console.log('event service args: ', args); + // console.log('from: ', args[0]); + // console.log('event service args: ', args); try { if (fnName === 'peers_discovered') { diff --git a/src/main.css b/src/main.css index b39d917..710f9a7 100644 --- a/src/main.css +++ b/src/main.css @@ -25,6 +25,14 @@ h1 { border-color: #E11E5A; } +.fluence-red { + color: #E11E5A; +} + +.table-red-row:hover { + background-color: #FFF8F8; +} + .gray-font { color: #7d7d7d; }