Matrix-Programs/Scylla
1
0
Fork 0
Code Issues 9 Pull Requests Releases Wiki Activity

Style the "Log In" screen.

Browse Source
This commit is contained in:
Danila Fedorin 2018-12-10 12:21:08 -08:00
parent b76e4bdf7d
commit 4b2c0d2ae8
2 changed files with 68 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Scylla/Views.elm
View File

@ -4,8 +4,8 @@ import Scylla.Sync exposing (..)
import Scylla.Route exposing (..) import Scylla.Route exposing (..)
import Url.Builder import Url.Builder
import Json.Decode as Decode import Json.Decode as Decode
import Html exposing (Html, div, input, text, button, div, span, a) import Html exposing (Html, div, input, text, button, div, span, a, h2)
import Html.Attributes exposing (type_, value, href) import Html.Attributes exposing (type_, value, href, class)
import Html.Events exposing (onInput, onClick) import Html.Events exposing (onInput, onClick)
import Dict import Dict
@ -45,8 +45,9 @@ roomListView s jr =
a [ href <| Url.Builder.absolute [ "room", s ] [] ] [ text name ] a [ href <| Url.Builder.absolute [ "room", s ] [] ] [ text name ]
loginView : Model -> Html Msg loginView : Model -> Html Msg
loginView m = div [] loginView m = div [ class "login-wrapper" ]
[ input [ type_ "text", value m.loginUsername, onInput ChangeLoginUsername] [] [ h2 [] [ text "Log In" ]
, input [ type_ "text", value m.loginUsername, onInput ChangeLoginUsername] []
, input [ type_ "password", value m.loginPassword, onInput ChangeLoginPassword ] [] , input [ type_ "password", value m.loginPassword, onInput ChangeLoginPassword ] []
, input [ type_ "text", value m.apiUrl, onInput ChangeApiUrl ] [] , input [ type_ "text", value m.apiUrl, onInput ChangeApiUrl ] []
, button [ onClick AttemptLogin ] [ text "Log In" ] , button [ onClick AttemptLogin ] [ text "Log In" ]

63
static/scss/style.scss Normal file
View File

@ -0,0 +1,63 @@
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
$primary-color: #53C0FA;
$primary-color-highlight: #4298C7;
$primary-color-light: #9FDBFB;
$active-input-color: white;
$transition-duration: .125s;
$inactive-input-color: darken($active-input-color, 3%);
$active-input-border-color: $primary-color;
$inactive-input-border-color: darken($inactive-input-color, 10%);
body {
font-family: 'Open Sans', sans-serif;
margin: 0px;
}
@mixin input-common {
padding: 5px;
border-radius: 3px;
outline: none;
transition: background-color $transition-duration;
}
div.login-wrapper {
display: flex;
flex-direction: column;
max-width: 300px;
margin: auto;
margin-top: 20px;
input, button {
margin: 3px;
}
h2 {
margin: 0px;
margin-bottom: 3px;
}
}
input {
@include input-common();
background-color: $inactive-input-color;
color: black;
border: .5px solid $inactive-input-border-color;
&:focus {
background-color: $active-input-color;
border-color: $active-input-border-color;
}
}
button {
@include input-common();
border: none;
background-color: $primary-color;
color: white;
&:hover, &:focus {
background-color: $primary-color-highlight;
}
}