Commit 821f353d authored by Darya Rednikina's avatar Darya Rednikina
Browse files

Merge branch 'css/left-menu' into 'develop'

Css/top menu - introduce bootstrap, some styling, a few issues and started Projects.elm

Closes #3, #5, and #2

See merge request !2
parents f9f7a373 852c5a8b
......@@ -10,4 +10,7 @@
`npm install elm-live -g`
`elm-live src/Main.elm --pushstate`
\ No newline at end of file
`elm-live src/Main.elm --open -- --output=elm.js`
#### Debug mode
`elm-live src/Main.elm --open -- --debug --output=elm.js`
\ No newline at end of file
.error-messages {
background-color: #feefd0;
color: rgba(213, 41, 64, 1);
}
html, body {
display: flex;
height: 100%;
width: 100%;
}
\ No newline at end of file
This diff is collapsed.
module Login exposing (..)
module Login exposing (Model, Msg(..), init, update, view)
import Browser exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Route exposing (..)
import Validation as V exposing (..)
import Html exposing (Html, a, button, div, fieldset, h1, input, p, text, ul)
import Html.Attributes exposing (class, placeholder, type_, value)
import Html.Events exposing (onInput, onSubmit)
import Route exposing (href)
import Validation as V exposing (Problem, ValidatedField, viewProblem)
init : ( Model, Cmd Msg )
......@@ -58,7 +57,7 @@ update msg model =
SubmittedForm ->
case validate model.form of
Ok validForm ->
Ok _ ->
( { model | problems = [] }
, Cmd.none
)
......@@ -105,19 +104,23 @@ viewForm form =
]
[]
]
, button [ class "btn btn-lg btn-primary pull-xs-right" ]
, button
[ class "btn btn-lg btn-primary"
, type_ "submit"
]
[ text "Sign in" ]
]
view : Model -> Html Msg
view : Model -> { title : String, content : Html Msg }
view model =
div [ class "cred-page" ]
[ div [ class "container page" ]
{ title = "Log In"
, content =
div [ class "container d-flex justify-content-center align-self-center" ]
[ div [ class "row" ]
[ div [ class "col-md-6 offset-md-3 col-xs-12" ]
[ h1 [ class "text-xs-center" ] [ text "Sign in" ]
, p [ class "text-xs-center" ]
[ div []
[ h1 [ class "text-center" ] [ text "Sign in" ]
, p [ class "text-center" ]
[ a [ Route.href Route.Register ]
[ text "Need an account?" ]
]
......@@ -127,7 +130,7 @@ view model =
]
]
]
]
}
......@@ -148,8 +151,8 @@ trimFields form =
fieldsToValidate : List ValidatedField
fieldsToValidate =
[ Email
, Password
[ V.Email
, V.Password
]
......@@ -180,7 +183,7 @@ validateField (Trimmed form) field =
in
List.map (V.InvalidEntry field) <|
case field of
Email ->
V.Email ->
emptyValidation form.email "email can't be blank."
_ ->
......
module Main exposing (..)
module Main exposing (main)
import Browser exposing (..)
import Browser exposing (UrlRequest, application)
import Browser.Navigation as Nav
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Html exposing (Html, h3, text)
import Login exposing (Model)
import Page exposing (Page, view)
import Projects exposing (Model)
import Register exposing (Model)
import Route exposing (..)
import Route exposing (Route)
import Url exposing (Url)
......@@ -26,6 +26,7 @@ type Page
= NotFoundPage
| LoginPage Login.Model
| RegisterPage Register.Model
| ProjectsPage Projects.Model
......@@ -35,6 +36,7 @@ type Page
type Msg
= LoginMsg Login.Msg
| RegisterMsg Register.Msg
| ProjectsMsg Projects.Msg
| LinkClicked UrlRequest
| UrlChanged Url
......@@ -66,6 +68,18 @@ update msg model =
in
m1
( ProjectsMsg projectsMsg, ProjectsPage p ) ->
let
( updatedPageModel, updatedCmd ) =
Projects.update projectsMsg p
m1 =
( { model | page = ProjectsPage updatedPageModel }
, Cmd.map ProjectsMsg updatedCmd
)
in
m1
( LinkClicked urlReq, _ ) ->
case urlReq of
Browser.Internal url ->
......@@ -103,27 +117,35 @@ type alias Document msg =
view : Model -> Document Msg
view model =
{ title = "Post App"
, body = [ currView model ]
}
currView : Model -> Html Msg
currView model =
let
mappedView page toMsg v =
let
{ title, body } =
Page.view page v
in
{ title = title
, body = List.map (Html.map toMsg) body
}
in
case model.page of
NotFoundPage ->
notFoundView
Page.view Page.Other notFoundView
LoginPage pageModel ->
Login.view pageModel |> Html.map LoginMsg
mappedView Page.Login LoginMsg (Login.view pageModel)
RegisterPage pageModel ->
Register.view pageModel |> Html.map RegisterMsg
mappedView Page.Register RegisterMsg (Register.view pageModel)
ProjectsPage pageModel ->
mappedView Page.Projects ProjectsMsg (Projects.view pageModel)
notFoundView : Html msg
notFoundView : { title : String, content : Html msg }
notFoundView =
h3 [] [ text "Oops! The page you requested was not found!" ]
{ title = "Not 404 found"
, content = h3 [] [ text "Oops! The page you requested was not found!" ]
}
......@@ -143,7 +165,7 @@ main =
init : () -> Url -> Nav.Key -> ( Model, Cmd Msg )
init flags url navKey =
init _ url navKey =
let
model =
{ route = Route.parseUrl url
......@@ -175,6 +197,13 @@ initCurrentPage ( model, existingCmds ) =
Register.init
in
( RegisterPage pageModel, Cmd.map RegisterMsg pageCmds )
Route.Projects ->
let
( pageModel, pageCmds ) =
Projects.init
in
( ProjectsPage pageModel, Cmd.map ProjectsMsg pageCmds )
in
( { model | page = currPage }
, Cmd.batch [ existingCmds, mappedCmds ]
......
module Page exposing (Page(..), view)
import Browser exposing (Document)
import Html exposing (Html, a, div, li, nav, text, ul)
import Html.Attributes exposing (class, classList, href)
import Route exposing (Route)
view :
Page
-> { title : String, content : Html msg }
-> Document msg
view page { title, content } =
{ title = title
, body = viewHeader page :: [ content ]
}
viewHeader : Page -> Html msg
viewHeader page =
case page of
Register ->
div [] []
Login ->
div [] []
_ ->
nav [ class "navbar navbar-light" ]
[ div [ class "container" ]
[ a [ class "navbar-brand", Route.href Route.Projects ]
[ text "conduit" ]
, ul [ class "nav navbar-nav pull-xs-right" ] <|
[ navbarLink page Route.Projects [ text "Projects" ] ]
]
]
navbarLink : Page -> Route -> List (Html msg) -> Html msg
navbarLink page route linkContent =
li [ classList [ ( "nav-item", True ), ( "active", isActive page route ) ] ]
[ a [ class "nav-link", Route.href route ] linkContent ]
isActive : Page -> Route -> Bool
isActive page route =
case ( page, route ) of
( Projects, Route.Projects ) ->
True
_ ->
False
{-| PAGE type for future configurations of header/footer/...
-}
type Page
= Other
| Login
| Register
| Projects
module Projects exposing (Model, Msg(..), init, update, view)
import Html exposing (Html, div)
-- MODEL
type alias Model =
{ listPage : Int
}
init : ( Model, Cmd Msg )
init =
( Model 0, Cmd.none )
-- UPDATE
type Msg
= GotProjectList
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
_ ->
( model, Cmd.none )
-- VIEW
view : Model -> { title : String, content : Html Msg }
view model =
{ title = "Projects"
, content =
div [] []
}
module Register exposing (..)
import Browser exposing (..)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import List exposing (..)
import Route exposing (..)
module Register exposing (Model, Msg(..), init, update, view)
import Html exposing (Html, a, button, div, fieldset, h1, input, p, text, ul)
import Html.Attributes exposing (class, placeholder, type_, value)
import Html.Events exposing (onInput, onSubmit)
import Route exposing (href)
import Validation as V exposing (Problem, ValidatedField)
......@@ -68,7 +66,7 @@ update msg model =
SubmittedForm ->
case validate model.form of
Ok validForm ->
Ok _ ->
( { model | problems = [] }
, Cmd.none
)
......@@ -133,14 +131,15 @@ viewForm form =
]
view : Model -> Html Msg
view : Model -> { title : String, content : Html Msg }
view model =
div [ class "cred-page" ]
[ div [ class "container page" ]
{ title = "Register"
, content =
div [ class "container d-flex justify-content-center align-self-center" ]
[ div [ class "row" ]
[ div [ class "col-md-6 offset-md-3 col-xs-12" ]
[ h1 [ class "text-xs-center" ] [ text "Sign up" ]
, p [ class "text-xs-center" ]
[ div []
[ h1 [ class "text-center" ] [ text "Sign up" ]
, p [ class "text-center" ]
[ a [ Route.href Route.Login ]
[ text "Already have an account?" ]
]
......@@ -150,7 +149,7 @@ view model =
]
]
]
]
}
......
......@@ -3,13 +3,14 @@ module Route exposing (Route(..), href, parseUrl)
import Html exposing (Attribute)
import Html.Attributes as Attr
import Url exposing (Url)
import Url.Parser exposing (..)
import Url.Parser exposing (Parser, map, oneOf, parse, s, top)
type Route
= NotFound
| Register
| Login
| Projects
parseUrl : Url -> Route
......@@ -28,6 +29,7 @@ matchRoute =
[ map Login top -- эта штука на localhost:9000/
, map Register (s "register")
, map Login (s "login")
, map Projects (s "projects")
]
......@@ -50,5 +52,8 @@ routeToPieces page =
Register ->
[ "register" ]
Projects ->
[ "projects" ]
_ ->
[]
module Validation exposing (..)
module Validation exposing (Problem(..), ValidatedField(..), viewProblem)
import Html exposing (..)
import Html.Attributes exposing (..)
import Html exposing (Html, li, text)
type Problem
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment