change fonts and spacing

This commit is contained in:
DieMyst 2020-12-03 13:02:23 +03:00
parent e4cd6c40d9
commit 87b60c3134
7 changed files with 37 additions and 24 deletions

View File

@ -3,7 +3,7 @@
<head>
<link rel="favicon" type="image/ico" href="favicon.ico" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;200&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">

View File

@ -10,7 +10,7 @@ import Interface.View exposing (interfaceView)
import Model exposing (Model)
import Modules.Model exposing (Module)
import Msg exposing (Msg(..))
import Palette exposing (classes)
import Palette exposing (classes, redFont)
import Service.Model exposing (Interface)
@ -28,8 +28,8 @@ view model id =
in
div [ classes "fl w-100 cf ph2-ns" ]
[ div [ classes "fl w-100 mb2 pt2" ]
[ span [ classes "fl w-100 f1 lh-title dark-red" ] [ text ("Blueprint: " ++ bi.name) ]
, span [ classes "fl w-100 light-red" ] [ text bi.id ]
[ span [ classes "fl w-100 f1 lh-title", redFont ] [ text ("Blueprint: " ++ bi.name) ]
, span [ classes "fl w-100 light-red", redFont ] [ text bi.id ]
]
, div [ classes "fl w-100 bg-white mt2 mh2 ph4 pt3 mb4 pb2" ] [ viewInfo bi ]
, h3 [ classes "pt3" ] [ text ("Instances (" ++ String.fromInt instanceNum ++ ")") ]

View File

@ -2,7 +2,7 @@ module Blueprints.View exposing (..)
import Blueprints.Model exposing (Blueprint, BlueprintInfo)
import Dict exposing (Dict)
import Html exposing (Html, a, div, text)
import Html exposing (Html, a, div, span, text)
import Html.Attributes exposing (attribute)
import Model exposing (Model, PeerData)
import Palette exposing (classes)
@ -35,11 +35,11 @@ view model =
viewService : BlueprintInfo -> Html msg
viewService blueprint =
div [ classes "fl w-third-ns pr2" ]
[ a [ attribute "href" ("/blueprint/" ++ blueprint.id), classes "fl bg-white w-100 black mw6 mh2 pa3 ph4 br2 ba b--white bw1 element-box" ]
[ 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 ]
div [ classes "fl w-third-ns pr3 lucida" ]
[ a [ attribute "href" ("/blueprint/" ++ blueprint.id), classes "fl w-100 bg-white black mw6 ma2 ph4 hide-child pa2 br3 element-box ba b--white bw1 no-underline" ]
[ div [ classes "w-100 mb3 pt1 b" ] [ text blueprint.name ]
, div [ classes "w-100 mb4" ] [ text "By ", span [classes "b"] [text blueprint.author] ]
, div [ classes "w-100 mt1" ] [ instancesText blueprint.instanceNumber ]
]
]

View File

@ -2,7 +2,7 @@ module HubPage.View exposing (..)
import Blueprints.View
import Html exposing (Html, a, div, h1, h3, span, text)
import Html.Attributes exposing (attribute)
import Html.Attributes exposing (attribute, style)
import Instances.View
import Model exposing (Model)
import Modules.View
@ -12,20 +12,20 @@ import Palette exposing (classes, redFont)
view : Model -> Html msg
view model =
div []
[ h1 [ redFont, classes "pt4" ] [ text "Developer Hub" ]
[ h1 [ redFont, classes "pt4 f2 lh-copy" ] [ text "Developer Hub" ]
, welcomeText
, h3 [ classes "mt4 pt4" ] [ text "Featured Blueprints" ]
, h3 [ classes "mt4 pt4 mb1 medium-roboto" ] [ text "Featured Blueprints" ]
, Blueprints.View.view model
, h3 [] [ text "Featured Modules" ]
, h3 [ classes "mt3 pt3 mb1 medium-roboto" ] [ text "Featured Modules" ]
, Modules.View.view model
, h3 [] [ text "Service Instances" ]
, h3 [ classes "mt3 pt3 mb1 medium-roboto" ] [ text "Service Instances" ]
, Tuple.second (Instances.View.view model (\_ -> True))
]
welcomeText : Html msg
welcomeText =
div [ classes "w-two-thirds" ]
div [ classes "w-two-thirds lucida welcome-text" ]
[ 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

@ -46,13 +46,13 @@ viewTable instances =
[ table [ classes "f6 w-100 center", attribute "cellspacing" "0" ]
[ thead []
[ tr [ classes "" ]
[ th [ classes "fw6 tl pa3" ] [ text "SERVICE" ]
, th [ classes "fw6 tl pa3" ] [ text "INSTANCE" ]
, th [ classes "fw6 tl pa3" ] [ text "NODE" ]
, th [ classes "fw6 tl pa3" ] [ text "IP" ]
[ th [ classes "fw6 tl pa3 gray" ] [ text "SERVICE" ]
, th [ classes "fw6 tl pa3 gray" ] [ text "INSTANCE" ]
, th [ classes "fw6 tl pa3 gray" ] [ text "NODE" ]
, th [ classes "fw6 tl pa3 gray" ] [ text "IP" ]
]
]
, tbody [ classes "" ] (instances |> List.map viewInstance)
, tbody [ classes "lucida" ] (instances |> List.map viewInstance)
]
]
]

View File

@ -59,8 +59,8 @@ view modules =
viewService : ModuleShortInfo -> Html msg
viewService moduleInfo =
div [ classes "fl w-third-ns pr2" ]
[ a [ attribute "href" ("/module/" ++ moduleInfo.moduleInfo.name), classes "fl w-100 bg-white black mw6 mh2 ph4 hide-child pa2 br2 element-box ba b--white bw1" ]
[ p [ classes "tl di" ] [ div [ classes "fl b w-100 mb1" ] [ text moduleInfo.moduleInfo.name ], div [ classes "fl w-100 pl1" ] [ instancesText moduleInfo.instanceNumber ] ]
div [ classes "fl w-third-ns pr3" ]
[ a [ attribute "href" ("/module/" ++ moduleInfo.moduleInfo.name), classes "fl w-100 bg-white black mw6 ma2 ph4 hide-child pa2 br3 element-box ba b--white bw1" ]
[ p [ classes "tl di" ] [ div [ classes "fl b w-100 mb1" ] [ text moduleInfo.moduleInfo.name ], div [ classes "fl w-100 mt1 lucida gray" ] [ instancesText moduleInfo.instanceNumber ] ]
]
]

View File

@ -20,3 +20,16 @@ h1 {
.element-box:hover {
border-color: #E11E5A;
}
.lucida {
font-family: 'Lucida Grande', Lucida, Tahoma, Verdana, Arial, sans-serif;
font-size: 14px
}
.welcome-text {
line-height: 20px;
}
.medium-roboto {
font-weight: 500;
}