From 1c183165842b62ead796ba3f6e1547edcf37824e Mon Sep 17 00:00:00 2001 From: Akshay Date: Sun, 27 Dec 2020 13:19:37 +0530 Subject: finish styling cart, product and checkout --- frontend/src/Cart.elm | 7 ++++- frontend/src/Checkout.elm | 11 +++++-- frontend/src/Product.elm | 76 ++++++++++++++++++++++++++++++++++++----------- 3 files changed, 73 insertions(+), 21 deletions(-) (limited to 'frontend/src') diff --git a/frontend/src/Cart.elm b/frontend/src/Cart.elm index 008d0bc..4f4cbef 100644 --- a/frontend/src/Cart.elm +++ b/frontend/src/Cart.elm @@ -246,5 +246,10 @@ view model = ] ] ) - , a [ href "/checkout" ] [ text "Checkout" ] + , div + [ css [ textAlign right ] ] + [ furbyButton + [] + [ a [ href "/checkout" ] [ text "Checkout" ] ] + ] ] diff --git a/frontend/src/Checkout.elm b/frontend/src/Checkout.elm index 216b90d..22e51c7 100644 --- a/frontend/src/Checkout.elm +++ b/frontend/src/Checkout.elm @@ -135,6 +135,13 @@ view model = , div [] [ furbyRadio "Cash" (PaymentModeSelected "Cash") ] , div [] [ furbyRadio "Debit Card" (PaymentModeSelected "Debit Card") ] , div [] [ furbyRadio "Credit Card" (PaymentModeSelected "Credit Card") ] - , div [] [ a [ href "/cart" ] [ text "Cancel" ] ] - , div [] [ button [ onClick CheckoutPressed ] [ text "Confirm and Pay" ] ] + , div + [] + [ div + [ css [ float left, Css.width (pct 40), margin (px 15) ] ] + [ furbyButton [ style "width" "100%" ] [ a [ href "/cart" ] [ text "Cancel" ] ] ] + , div + [ css [ float left, Css.width (pct 40), margin (px 15) ] ] + [ furbyButton [ onClick CheckoutPressed, style "width" "100%" ] [ text "Confirm and Pay" ] ] + ] ] diff --git a/frontend/src/Product.elm b/frontend/src/Product.elm index 0975c8d..964538b 100644 --- a/frontend/src/Product.elm +++ b/frontend/src/Product.elm @@ -372,14 +372,51 @@ viewRating r = viewInput : String -> String -> String -> (String -> msg) -> Html msg viewInput t p v toMsg = - input [ type_ t, placeholder p, value v, onInput toMsg ] [] + input + [ type_ t + , placeholder p + , value v + , onInput toMsg + , css [ Css.width (pct 100), Css.height (px 100) ] + ] + [] + +viewStars : Model -> Html Msg +viewStars model = + let + activeStyle = + [ border3 (px 3) solid theme.fg ] -viewStars : Html Msg -viewStars = - ul [] + inactiveStyle = + [ border3 (px 3) solid theme.primary ] + + buttonStyle = + [ borderRadius (px 6), margin (px 6), backgroundColor theme.bg, padding2 (px 4) (px 8) ] + in + div + [ css + [ Css.width (pct 100) + , margin auto + , padding (px 12) + , textAlign center + ] + ] (List.map - (\i -> button [ onClick (AddRatingStars i) ] [ text <| String.fromInt i ]) + (\i -> + button + [ onClick (AddRatingStars i) + , (if i == model.ratingStars then + activeStyle + + else + inactiveStyle + ) + ++ buttonStyle + |> css + ] + [ text <| String.fromInt i ] + ) [ 1, 2, 3, 4, 5 ] ) @@ -393,16 +430,13 @@ view model = _ -> div [ css - [ Css.width (pct 60) + [ Css.width (pct 50) , margin auto ] ] [ div [] [ viewProduct model.listing ] , div - [ css - [ cardPrimaryText - ] - ] + [ css [ cardPrimaryText ] ] [ text "User Reviews" ] , if model.ratings == [] then text "Be the first to add a review." @@ -415,13 +449,19 @@ view model = ] ] (List.map viewRating model.ratings) - , div [] [ text "Add Rating: " ] - , div [] - [ viewStars - , viewInput "text" "Enter Comment Text" model.ratingText AddRatingComment - , button [ onClick AddRatingPressed ] [ text "Submit Rating" ] - ] - , div [] - [ a [ href "/catalog" ] [ text "Back to catalog" ] + , div + [ css [ cardPrimaryText, margin2 (px 20) (px 0) ] ] + [ text "Rate this product" ] + , div + [] + [ viewStars model + , div + [] + [ viewInput "textarea" "Enter Comment Text" model.ratingText AddRatingComment ] + , div + [ css + [ textAlign center ] + ] + [ furbyButton [ onClick AddRatingPressed ] [ text "Submit Rating" ] ] ] ] -- cgit v1.2.3