aboutsummaryrefslogtreecommitdiff
path: root/frontend/src
diff options
context:
space:
mode:
authorAkshay <[email protected]>2020-12-27 07:49:37 +0000
committerAkshay <[email protected]>2020-12-27 07:49:37 +0000
commit1c183165842b62ead796ba3f6e1547edcf37824e (patch)
tree406d999380c851db5fb42ec1098ce28527942a0a /frontend/src
parentaddbf7d1a3ceb8d3164fc7745daed0affde78804 (diff)
finish styling cart, product and checkout
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/Cart.elm7
-rw-r--r--frontend/src/Checkout.elm11
-rw-r--r--frontend/src/Product.elm76
3 files changed, 73 insertions, 21 deletions
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 =
246 ] 246 ]
247 ] 247 ]
248 ) 248 )
249 , a [ href "/checkout" ] [ text "Checkout" ] 249 , div
250 [ css [ textAlign right ] ]
251 [ furbyButton
252 []
253 [ a [ href "/checkout" ] [ text "Checkout" ] ]
254 ]
250 ] 255 ]
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 =
135 , div [] [ furbyRadio "Cash" (PaymentModeSelected "Cash") ] 135 , div [] [ furbyRadio "Cash" (PaymentModeSelected "Cash") ]
136 , div [] [ furbyRadio "Debit Card" (PaymentModeSelected "Debit Card") ] 136 , div [] [ furbyRadio "Debit Card" (PaymentModeSelected "Debit Card") ]
137 , div [] [ furbyRadio "Credit Card" (PaymentModeSelected "Credit Card") ] 137 , div [] [ furbyRadio "Credit Card" (PaymentModeSelected "Credit Card") ]
138 , div [] [ a [ href "/cart" ] [ text "Cancel" ] ] 138 , div
139 , div [] [ button [ onClick CheckoutPressed ] [ text "Confirm and Pay" ] ] 139 []
140 [ div
141 [ css [ float left, Css.width (pct 40), margin (px 15) ] ]
142 [ furbyButton [ style "width" "100%" ] [ a [ href "/cart" ] [ text "Cancel" ] ] ]
143 , div
144 [ css [ float left, Css.width (pct 40), margin (px 15) ] ]
145 [ furbyButton [ onClick CheckoutPressed, style "width" "100%" ] [ text "Confirm and Pay" ] ]
146 ]
140 ] 147 ]
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 =
372 372
373viewInput : String -> String -> String -> (String -> msg) -> Html msg 373viewInput : String -> String -> String -> (String -> msg) -> Html msg
374viewInput t p v toMsg = 374viewInput t p v toMsg =
375 input [ type_ t, placeholder p, value v, onInput toMsg ] [] 375 input
376 [ type_ t
377 , placeholder p
378 , value v
379 , onInput toMsg
380 , css [ Css.width (pct 100), Css.height (px 100) ]
381 ]
382 []
383
376 384
385viewStars : Model -> Html Msg
386viewStars model =
387 let
388 activeStyle =
389 [ border3 (px 3) solid theme.fg ]
377 390
378viewStars : Html Msg 391 inactiveStyle =
379viewStars = 392 [ border3 (px 3) solid theme.primary ]
380 ul [] 393
394 buttonStyle =
395 [ borderRadius (px 6), margin (px 6), backgroundColor theme.bg, padding2 (px 4) (px 8) ]
396 in
397 div
398 [ css
399 [ Css.width (pct 100)
400 , margin auto
401 , padding (px 12)
402 , textAlign center
403 ]
404 ]
381 (List.map 405 (List.map
382 (\i -> button [ onClick (AddRatingStars i) ] [ text <| String.fromInt i ]) 406 (\i ->
407 button
408 [ onClick (AddRatingStars i)
409 , (if i == model.ratingStars then
410 activeStyle
411
412 else
413 inactiveStyle
414 )
415 ++ buttonStyle
416 |> css
417 ]
418 [ text <| String.fromInt i ]
419 )
383 [ 1, 2, 3, 4, 5 ] 420 [ 1, 2, 3, 4, 5 ]
384 ) 421 )
385 422
@@ -393,16 +430,13 @@ view model =
393 _ -> 430 _ ->
394 div 431 div
395 [ css 432 [ css
396 [ Css.width (pct 60) 433 [ Css.width (pct 50)
397 , margin auto 434 , margin auto
398 ] 435 ]
399 ] 436 ]
400 [ div [] [ viewProduct model.listing ] 437 [ div [] [ viewProduct model.listing ]
401 , div 438 , div
402 [ css 439 [ css [ cardPrimaryText ] ]
403 [ cardPrimaryText
404 ]
405 ]
406 [ text "User Reviews" ] 440 [ text "User Reviews" ]
407 , if model.ratings == [] then 441 , if model.ratings == [] then
408 text "Be the first to add a review." 442 text "Be the first to add a review."
@@ -415,13 +449,19 @@ view model =
415 ] 449 ]
416 ] 450 ]
417 (List.map viewRating model.ratings) 451 (List.map viewRating model.ratings)
418 , div [] [ text "Add Rating: " ] 452 , div
419 , div [] 453 [ css [ cardPrimaryText, margin2 (px 20) (px 0) ] ]
420 [ viewStars 454 [ text "Rate this product" ]
421 , viewInput "text" "Enter Comment Text" model.ratingText AddRatingComment 455 , div
422 , button [ onClick AddRatingPressed ] [ text "Submit Rating" ] 456 []
423 ] 457 [ viewStars model
424 , div [] 458 , div
425 [ a [ href "/catalog" ] [ text "Back to catalog" ] 459 []
460 [ viewInput "textarea" "Enter Comment Text" model.ratingText AddRatingComment ]
461 , div
462 [ css
463 [ textAlign center ]
464 ]
465 [ furbyButton [ onClick AddRatingPressed ] [ text "Submit Rating" ] ]
426 ] 466 ]
427 ] 467 ]