bad/pai-sklep
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Wiki Activity

Compile scss with webpack

Browse source 
Also adds a basic front page with larvel blade :^)
This commit is contained in:
bad 2021-11-19 07:19:46 +01:00
parent f8e7060ef2
commit 5c231d2039
9 changed files with 13964 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -2,6 +2,7 @@
/public/hot
/public/storage
/storage/*.key
/public
/vendor
.env
.env.backup

13863
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

9
package.json
View file

@ -13,6 +13,13 @@
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14"
"postcss": "^8.1.14",
"resolve-url-loader": "^4.0.0",
"sass": "^1.43.4",
"sass-loader": "^12.3.0"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.15.4",
"sanitize.css": "^13.0.0"
}
}

0
resources/css/app.css vendored
View file

46
resources/scss/app.scss vendored Normal file
View file

@ -0,0 +1,46 @@
@import url(~sanitize.css);
@import url(~@fortawesome/fontawesome-free/css/all.css);
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
nav, footer {
background-color: blue;
height: 5vh;
width: 100%;
color: white;
}
nav {
display: flex;
align-items: center;
}
nav .fa {
font-size: 2em;
}
main {
display: flex;
width: min(max(90vw,1080px), 100%);
background-color: beige;
flex-grow: 1;
}
.product-image {
max-width: 100%;
}
footer {
display: flex;
justify-content: center;
align-items: center;
}

8
resources/views/components/product.blade.php Normal file
View file

@ -0,0 +1,8 @@
@props(['product'])
<a href="{{ route('product.show', ['product' => $product]) }}">
<div class="product-container">
<img class="product-image" src="@if(isset($product->images[0])) {{ $product->images[0]->URL() }} @else {{ asset("test.txt") }} @endif">
<p class="product-name"> {{ $product->name }} </p>
</div>
</a>

23
resources/views/index.blade.php
View file

@ -1,16 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sklep</title>
</head>
<body>
@extends('layouts.app')
@section('title', "Sklep")
@section('main')
<div style="display: flex; flex-wrap: wrap; justify-content: space-around; margin: 1em;">
@foreach ($products as $product)
<div class="product-container">
<img class="product-image" src="@if(isset($product->images[0])) {{ $product->images[0]->URL() }} @else {{ asset("test.txt") }} @endif">
<p class="product-name"> {{ $product->name }} </p>
</div>
<x-product :product="$product" />
@endforeach
</body>
</html>
</div>
@endsection()

24
resources/views/layouts/app.blade.php Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'Sklep')</title>
<link rel="stylesheet" href="{{ mix("css/app.css") }}">
@stack('head')
</head>
<body>
<nav>
<i class="fa fa-hamburger"></i>
</nav>
<main>
@yield('main')
</main>
<footer>
<h4>Copyright 2021 JA</h4>
</footer>
</body>
</html>

10
webpack.mix.js vendored
View file

@ -1,4 +1,4 @@
const mix = require('laravel-mix');
const mix = require("laravel-mix");
/*
|--------------------------------------------------------------------------
@ -11,7 +11,7 @@ const mix = require('laravel-mix');
|
*/
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
mix.js("resources/js/app.js", "public/js").sass(
"resources/scss/app.scss",
"public/css"
);