OrgGo/Mainflux.mainflux
1
0
Fork 0
mirror of https://github.com/mainflux/mainflux.git synced 2025-04-27 13:48:49 +08:00
Code Issues Projects Releases Wiki Activity

NOISSUE - Improve UI styling (#719)

Browse Source 
* Add styling

Signed-off-by: drasko <drasko.draskovic@gmail.com>

* Fix errors

Signed-off-by: drasko <drasko.draskovic@gmail.com>

* Fix env

Signed-off-by: drasko <drasko.draskovic@gmail.com>
This commit is contained in:
Drasko DRASKOVIC 2019-04-18 13:29:38 +02:00 committed by Darko Draskovic
parent d9d9da49a8
commit baebe8abc1
7 changed files with 86 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
ui/css/mainflux.css
View File

@ -2,39 +2,50 @@
Mainflux
SPDX-License-Identifier: Apache-2.0 */
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,800');
.btn-primary {
color: #fff;
background-color: #113f67;
border-color: #113f67;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
color: #fff;
background-color: #408ab4;
border-color: #408ab4;
}
body {
background-color: #f3f3f4 !important;
font-family: 'Montserrat', sans-serif !important;
}
.title{
font-family: 'Montserrat', sans-serif;
font-weight: 800;
transform: scaleY(0.95);
text-align: center;
margin: 1rem 0;
}
@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,800');
.btn-primary {
color: #fff;
background-color: #113f67;
border-color: #113f67;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
color: #fff;
background-color: #408ab4;
border-color: #408ab4;
}
.btn-secondary {
color: #fff;
background-color: #408ab4;
border-color: #408ab4;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active, .open>.dropdown-toggle.btn-secondary {
color: #fff;
background-color: #113f67;
border-color: #113f67;
}
body {
background-color: #f3f3f4 !important;
font-family: 'Montserrat', sans-serif !important;
}
.title{
font-family: 'Montserrat', sans-serif;
font-weight: 800;
transform: scaleY(0.95);
text-align: center;
margin: 1rem 0;
}
.page-link{
color: #113f67;
}
.page-item.active .page-link {
background-color: #113f67;
border-color: #113f67;
background-color: #408ab4;
border-color: #408ab4;
}
ul.nav a:hover {
@ -42,10 +53,12 @@ ul.nav a:hover {
background-color: #408ab4 !important;
cursor: pointer;
transition: color .15s ease-in-out,background-color .15s ease-in-out;
border-radius: 0;
}
.nav-pills .nav-link.active{
background-color: #408ab4 !important;
background-color: #408ab4 !important;
border-radius: 0;
}
.nav li a i {
@ -56,15 +69,32 @@ ul.nav a:hover {
line-height: 25px;
text-align: center;
border-radius: 4px;
background:#154f82;
background: transparent;
}
.card {
margin-top: 30px;
margin-bottom: 30px;
border: none;
}
.card-header {
background-color: white;
border-bottom: none;
margin-bottom: none;
}
.table thead th {
border-top: none;
}
.table-hover tbody tr:hover > td {
cursor: pointer;
background:#408ab4;
color: white;
}
.table_header {
color: #408ab4;
font-weight: bold;
}

6
ui/src/Channel.elm
View File

@ -19,7 +19,7 @@ import Bootstrap.Table as Table
import Bootstrap.Utilities.Spacing as Spacing
import Dict
import Error
import Helpers
import Helpers exposing (faIcons, fontAwesome)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)
@ -278,10 +278,10 @@ view model =
|> Card.header []
[ Grid.row []
[ Grid.col [ Col.attrs [ align "left" ] ]
[ h3 [ Spacing.mt2 ] [ text "Channels" ]
[ h3 [] [ div [ class "table_header" ] [ i [ style "margin-right" "15px", class faIcons.channels ] [], text "Channels" ] ]
]
, Grid.col [ Col.attrs [ align "right" ] ]
[ Button.button [ Button.success, Button.attrs [ align "right" ], Button.onClick ShowProvisionModal ] [ text "ADD" ]
[ Button.button [ Button.secondary, Button.attrs [ align "right" ], Button.onClick ShowProvisionModal ] [ text "ADD" ]
]
]
]

6
ui/src/Connection.elm
View File

@ -19,7 +19,7 @@ import Bootstrap.Utilities.Spacing as Spacing
import Channel
import Debug exposing (log)
import Error
import Helpers
import Helpers exposing (faIcons, fontAwesome)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)
@ -119,12 +119,12 @@ view model =
[ Grid.row []
[ Grid.col []
(Helpers.appendIf (model.things.things.total > model.things.limit)
[ Helpers.genCardConfig "Things" (genThingRows model.checkedThingsIds model.things.things.list) ]
[ Helpers.genCardConfig faIcons.things "Things" (genThingRows model.checkedThingsIds model.things.things.list) ]
(Html.map ThingMsg (Helpers.genPagination model.things.things.total (Helpers.offsetToPage model.things.offset model.things.limit) Thing.SubmitPage))
)
, Grid.col []
(Helpers.appendIf (model.channels.channels.total > model.channels.limit)
[ Helpers.genCardConfig "Channels" (genChannelRows model.checkedChannelsIds model.channels.channels.list) ]
[ Helpers.genCardConfig faIcons.channels "Channels" (genChannelRows model.checkedChannelsIds model.channels.channels.list) ]
(Html.map ChannelMsg (Helpers.genPagination model.channels.channels.total (Helpers.offsetToPage model.channels.offset model.channels.limit) Channel.SubmitPage))
)
]

9
ui/src/Helpers.elm
View File

@ -14,7 +14,7 @@ import Bootstrap.Grid.Col as Col
import Bootstrap.Grid.Row as Row
import Bootstrap.Table as Table
import Bootstrap.Utilities.Spacing as Spacing
import Html exposing (Html, a, div, hr, li, nav, node, p, strong, text, ul)
import Html exposing (Html, a, div, hr, li, nav, node, p, strong, text, ul, i)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)
import Http
@ -157,6 +157,7 @@ faIcons =
, channels = "fas fa-broadcast-tower"
, connection = "fas fa-plug"
, messages = "far fa-paper-plane"
, version = "fa fa-code-branch"
}
@ -196,11 +197,11 @@ disableNext currPage total =
currPage == Basics.ceiling (Basics.toFloat total / 10)
genCardConfig : String -> List (Table.Row msg) -> Html msg
genCardConfig title rows =
genCardConfig : String -> String -> List (Table.Row msg) -> Html msg
genCardConfig faClass title rows =
Card.config
[]
|> Card.headerH3 [] [ text title ]
|> Card.headerH3 [] [ div [ class "table_header" ] [ i [ style "margin-right" "15px", class faClass ] [], text title ] ]
|> Card.block []
[ Block.custom
(Table.table

20
ui/src/Main.elm
View File

@ -407,29 +407,23 @@ dashboard model =
cardList : Model -> List (Card.Config Msg)
cardList model =
[ Card.config
[ Card.secondary
, Card.textColor Text.white
]
|> Card.headerH3 [] [ text "Version" ]
[ Card.config []
|> Card.headerH3 [] [ div [ class "table_header" ] [ i [ style "margin-right" "15px", class faIcons.version ] [], text "Version" ] ]
|> Card.block []
[ Block.titleH4 [] [ text model.dashboard.version ] ]
, Card.config
[ Card.info
, Card.textColor Text.white
]
|> Card.headerH3 [] [ text "Things" ]
, Card.config []
|> Card.headerH3 [] [ div [ class "table_header" ] [ i [ style "margin-right" "15px", class faIcons.things ] [], text "Things" ] ]
|> Card.block []
[ Block.titleH4 [] [ text (String.fromInt model.thing.things.total) ]
, Block.custom <|
Button.button [ Button.light, Button.onClick Things ] [ text "Manage things" ]
Button.button [ Button.secondary, Button.onClick Things ] [ text "Manage things" ]
]
, Card.config []
|> Card.headerH3 [] [ text "Channels" ]
|> Card.headerH3 [] [ div [ class "table_header" ] [ i [ style "margin-right" "15px", class faIcons.channels ] [], text "Channels" ] ]
|> Card.block []
[ Block.titleH4 [] [ text (String.fromInt model.channel.channels.total) ]
, Block.custom <|
Button.button [ Button.dark, Button.onClick Channels ] [ text "Manage channels" ]
Button.button [ Button.secondary, Button.onClick Channels ] [ text "Manage channels" ]
]
]

10
ui/src/Message.elm
View File

@ -18,7 +18,7 @@ import Bootstrap.Table as Table
import Bootstrap.Utilities.Spacing as Spacing
import Channel
import Error
import Helpers
import Helpers exposing (faIcons, fontAwesome)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)
@ -126,26 +126,26 @@ view model =
[ Grid.row []
[ Grid.col []
(Helpers.appendIf (model.things.things.total > model.things.limit)
[ Helpers.genCardConfig "Things" (genThingRows model.things.things.list) ]
[ Helpers.genCardConfig faIcons.things "Things" (genThingRows model.things.things.list) ]
(Html.map ThingMsg (Helpers.genPagination model.things.things.total (Helpers.offsetToPage model.things.offset model.things.limit) Thing.SubmitPage))
)
, Grid.col []
(Helpers.appendIf (model.channels.channels.total > model.channels.limit)
[ Helpers.genCardConfig "Channels" (genChannelRows model.checkedChannelsIds model.channels.channels.list) ]
[ Helpers.genCardConfig faIcons.channels "Channels" (genChannelRows model.checkedChannelsIds model.channels.channels.list) ]
(Html.map ChannelMsg (Helpers.genPagination model.channels.channels.total (Helpers.offsetToPage model.channels.offset model.channels.limit) Channel.SubmitPage))
)
]
, Grid.row []
[ Grid.col []
[ Card.config []
|> Card.headerH3 [] [ text "Message" ]
|> Card.headerH3 [] [ div [ class "table_header" ] [ i [ style "margin-right" "15px", class faIcons.messages ] [], text "Message" ] ]
|> Card.block []
[ Block.custom
(Form.form []
[ Form.group []
[ Input.text [ Input.id "message", Input.onInput SubmitMessage ]
]
, Button.button [ Button.success, Button.attrs [ Spacing.ml1 ], Button.onClick SendMessage ] [ text "Send" ]
, Button.button [ Button.secondary, Button.attrs [ Spacing.ml1 ], Button.onClick SendMessage ] [ text "Send" ]
]
)
]

6
ui/src/Thing.elm
View File

@ -21,7 +21,7 @@ import Bootstrap.Table as Table
import Bootstrap.Utilities.Spacing as Spacing
import Dict
import Error
import Helpers
import Helpers exposing (faIcons, fontAwesome)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onClick)
@ -307,10 +307,10 @@ genTable model =
|> Card.header []
[ Grid.row []
[ Grid.col [ Col.attrs [ align "left" ] ]
[ h3 [ Spacing.mt2 ] [ text "Things" ]
[ h3 [] [ div [ class "table_header" ] [ i [ style "margin-right" "15px", class faIcons.things ] [], text "Things" ] ]
]
, Grid.col [ Col.attrs [ align "right" ] ]
[ Button.button [ Button.success, Button.attrs [ align "right" ], Button.onClick ShowProvisionModal ] [ text "ADD" ]
[ Button.button [ Button.secondary, Button.attrs [ align "right" ], Button.onClick ShowProvisionModal ] [ text "ADD" ]
]
]
]