font fixes, view fixes

This commit is contained in:
DieMyst 2020-12-08 17:17:09 +03:00
parent 83491792a3
commit 3bbd0ba656
10 changed files with 82 additions and 55 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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') {

View File

@ -25,6 +25,14 @@ h1 {
border-color: #E11E5A;
}
.fluence-red {
color: #E11E5A;
}
.table-red-row:hover {
background-color: #FFF8F8;
}
.gray-font {
color: #7d7d7d;
}