Merge branch 'Trying-Replication' into release

Pasgru · Apr 8, 2024 · cc07361 · cc07361
2 parents b90dfa3 + 19b223c
commit cc07361
Show file tree

Hide file tree

Showing 18 changed files with 5,576 additions and 2,972 deletions.
diff --git a/app/components/shop.hbs b/app/components/shop.hbs
@@ -0,0 +1,40 @@
+<shop class="flex flex-col justify-center text-center" ...attributes>
+  <div
+    class="topIMG flex flex-grow w-full min-h-48 relative justify-center text-white"
+  >
+    {{! <img
+      id="contentImage"
+      src="/assets/images/DescriptionImage.png"
+      alt="Description Image"
+    /> }}
+    <h1 class="absolute top-[50%]">Paragraph 2</h1>
+  </div>
+  <a href="/lookbook">
+    Summer 2021 is made to get the people going.<br />
+    Be provocative in your own way!
+    <p>free shipping in austria on all orders over 75€</p>
+  </a>
+  <div class="mx-48 grid grid-cols-2 gap-2">
+    {{#each this.products as |product|}}
+      <button  type="button" {{on 'click' (fn this.productClick product.id)}}>
+        <div class="mx-auto">
+          <img
+            class="bg-gray-200 w-96 h-96"
+            id="{{product.name}}_img"
+            src="{{product.image}}"
+            alt="Failed"
+          />
+          <div class="flex">
+            <div class="flex flex-col text-left">
+              <span>{{product.name}}</span>
+              <span>{{product.color}}</span>
+            </div>
+            <span class="ml-auto">{{product.price}}</span>
+          </div>
+        </div>
+      </button>
+    {{/each}}
+  </div>
+
+</shop>
+{{yield}}
diff --git a/app/components/shop.js b/app/components/shop.js
@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+
+export default class Shop extends Component {
+  constructor() {
+    super(...arguments);
+    this.products = [
+      {
+        id: 1,
+        name: 'P1',
+        price: 35,
+        color: 'black',
+        image: '/assets/images/p1.webp',
+      },
+      {
+        id: 2,
+        name: 'P2',
+        price: 35,
+        color: 'black',
+        image: '/assets/images/p2.webp',
+      },
+      {
+        id: 3,
+        name: 'P3',
+        price: 35,
+        color: 'black',
+        image: '/assets/images/p3.webp',
+      },
+    ];
+  }
+  @action
+  productClick(productId) {
+    console.log(productId);
+  }
+}
diff --git a/app/components/sidebar.hbs b/app/components/sidebar.hbs
@@ -0,0 +1,6 @@
+<sidebar class="p-2 transition ease-linear delay-300 flex flex-col w-48 h-full hover:bg-slate-800" ...attributes>
+  <img class="" id="logoHeader" src="/assets/images/logo.png" alt="Sawcon is the best"/>
+  <a href="/#sContent" class="text-red-800">Shop</a>
+  <a href="/lookbook" class="transition ease-linear delay-300 text-red-800 hover:text-white">Lookbook</a>
+  <a href="/cart" class="transition ease-linear delay-300 text-red-800 hover:text-white">Cart</a>
+</sidebar>
diff --git a/app/components/sidebar.js b/app/components/sidebar.js
@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class Sidenav extends Component {
+  constructor() {
+    super(...arguments);
+  }
+}
diff --git a/app/index.html b/app/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <title>Sawcon</title>
+    <title>Sawcon2020</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -0,0 +1 @@
+@import "controllers/shop.scss"
diff --git a/app/styles/controllers/shop.scss b/app/styles/controllers/shop.scss
@@ -0,0 +1,5 @@
+.topIMG {
+  background-image: url("/assets/images/DescriptionImage.png");
+  background-size: cover;
+  background-position-y: 50%;
+}
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -1,7 +1,3 @@
-{{page-title "Sawcon"}}
-
-<h1 class="text-3xl font-bold underline bg-lime-500">
-  this is applicaton
-</h1>
-
+<Sidebar class="fixed top-0 left-0 z-10"/>
+<Shop class="w-full h-full z-0"/>
 {{outlet}}
diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -4,7 +4,7 @@ const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 module.exports = function (defaults) {
   const app = new EmberApp(defaults, {
-    // Add options here
+
   });
 
   const { Webpack } = require('@embroider/webpack');