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