Style the user/cart page

.php-cs-fixer.cache

@@ -1 +1 @@
-{"php":"8.0.13","version":"3.0.0","indent":"    ","lineEnding":"\n","rules":{"blank_line_after_opening_tag":true,"braces":{"allow_single_line_anonymous_class_with_empty_body":true},"compact_nullable_typehint":true,"declare_equal_normalize":true,"lowercase_cast":true,"lowercase_static_reference":true,"new_with_braces":true,"no_blank_lines_after_class_opening":true,"no_leading_import_slash":true,"no_whitespace_in_blank_line":true,"ordered_class_elements":{"order":["use_trait"]},"ordered_imports":{"imports_order":["class","function","const"],"sort_algorithm":"none"},"return_type_declaration":true,"short_scalar_cast":true,"single_blank_line_before_namespace":true,"single_trait_insert_per_statement":true,"ternary_operator_spaces":true,"visibility_required":{"elements":["const","method","property"]},"blank_line_after_namespace":true,"class_definition":true,"constant_case":true,"elseif":true,"function_declaration":true,"indentation_type":true,"line_ending":true,"lowercase_keywords":true,"method_argument_space":{"on_multiline":"ensure_fully_multiline"},"no_break_comment":true,"no_closing_tag":true,"no_spaces_after_function_name":true,"no_spaces_inside_parenthesis":true,"no_trailing_whitespace":true,"no_trailing_whitespace_in_comment":true,"single_blank_line_at_eof":true,"single_class_element_per_statement":{"elements":["property"]},"single_import_per_statement":true,"single_line_after_imports":true,"switch_case_semicolon_to_colon":true,"switch_case_space":true,"encoding":true,"full_opening_tag":true},"hashes":{"\/run\/user\/1000\/neoformat\/product.blade.php":1493321553}}
+{"php":"8.0.13","version":"3.0.0","indent":"    ","lineEnding":"\n","rules":{"blank_line_after_opening_tag":true,"braces":{"allow_single_line_anonymous_class_with_empty_body":true},"compact_nullable_typehint":true,"declare_equal_normalize":true,"lowercase_cast":true,"lowercase_static_reference":true,"new_with_braces":true,"no_blank_lines_after_class_opening":true,"no_leading_import_slash":true,"no_whitespace_in_blank_line":true,"ordered_class_elements":{"order":["use_trait"]},"ordered_imports":{"imports_order":["class","function","const"],"sort_algorithm":"none"},"return_type_declaration":true,"short_scalar_cast":true,"single_blank_line_before_namespace":true,"single_trait_insert_per_statement":true,"ternary_operator_spaces":true,"visibility_required":{"elements":["const","method","property"]},"blank_line_after_namespace":true,"class_definition":true,"constant_case":true,"elseif":true,"function_declaration":true,"indentation_type":true,"line_ending":true,"lowercase_keywords":true,"method_argument_space":{"on_multiline":"ensure_fully_multiline"},"no_break_comment":true,"no_closing_tag":true,"no_spaces_after_function_name":true,"no_spaces_inside_parenthesis":true,"no_trailing_whitespace":true,"no_trailing_whitespace_in_comment":true,"single_blank_line_at_eof":true,"single_class_element_per_statement":{"elements":["property"]},"single_import_per_statement":true,"single_line_after_imports":true,"switch_case_semicolon_to_colon":true,"switch_case_space":true,"encoding":true,"full_opening_tag":true},"hashes":{"\/run\/user\/1000\/neoformat\/product.blade.php":1493321553,"\/tmp\/neoformat\/user.blade.php":2134171036}}

resources/scss/user.scss

@@ -0,0 +1,21 @@
+.cart-item {
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+	width: 100%;
+	padding: 2em;
+	font-size: 0.8em;
+	&:nth-child(2n+1) {
+		background-color: #f0f0b1;
+	}
+}
+.product-image {
+	height: 10rem;
+}
+.name-price-container {
+	& > * {
+		margin: 0.2em 0px;
+	}
+	flex-direction: column;
+	align-items: flex-start;
+}

resources/views/user.blade.php

@@ -1,3 +1,7 @@
+@push('head')
+<link rel="stylesheet" href="{{ mix("css/user.css") }}">
+@endpush
+
 @extends('layouts.app')
 
 @section('title', "Sklep")
@@ -12,6 +16,18 @@
     <div>
         <h2>Your cart:</h2>
         <div>
+            <div class="cart-items">
+                @foreach($user->cart as $product)
+                    <div class="cart-item">
+                        <x-product :product="$product" />
+                    <form class="remove-cart-form" action="{{ route("removeFromCart", $product) }}" method="post">
+                        @csrf
+                        <button type="submit"> Remove from cart </button>
+                    </form>
+                    </div>
+                @endforeach()
+            </div>
+
             <form action="{{ route("order.create") }}" method="post">
                 @csrf
                 @foreach($user->cart as $product)
@@ -19,15 +35,6 @@
                 @endforeach()
                 <button type="submit"> Order </button>
             </form>
-            @foreach($user->cart as $product)
-                <div>
-                    <x-product :product="$product" />
-                </div>
-                <form action="{{ route("removeFromCart", $product) }}" method="post">
-                    @csrf
-                    <button type="submit"> Remove from cart </button>
-                </form>
-            @endforeach()
         </div>
     </div>
 @endsection()

webpack.mix.js

@@ -20,4 +20,7 @@ mix.js("resources/js/app.js", "public/js").sass(
 ).sass(
     "resources/scss/product.scss",
     "public/css"
-);;
+).sass(
+    "resources/scss/user.scss",
+    "public/css"
+);