From e79def4b24bc393971a2defcd4e7d27b559fd110 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C3=A9ter=20M=C3=A1rk?= <peter.mark@hallgato.ppke.hu>
Date: Sun, 6 Apr 2025 12:00:16 +0200
Subject: [PATCH] =?UTF-8?q?base.css=20megv=C3=A1ltoztatva,=20EZ=20BASZTA?=
=?UTF-8?q?=20EL=20BASZDMEG=20AZ=20EG=C3=89SZET!=20Megoldva=20:)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/App.vue | 57 ++++---------------------
src/assets/base.css | 29 -------------
src/assets/main.css | 29 ++-----------
src/components/Footer.vue | 19 ---------
src/components/Header.vue | 89 ---------------------------------------
5 files changed, 13 insertions(+), 210 deletions(-)
delete mode 100644 src/components/Footer.vue
delete mode 100644 src/components/Header.vue
diff --git a/src/App.vue b/src/App.vue
index 3f35bfe..3bef86d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,53 +1,14 @@
-<template>
- <!-- Teljes szélességű piros fejléc -->
- <Header @navigate="handleNavigate" />
-
- <!-- Középső rész: mainContent vagy login nézet -->
- <component :is="currentPage" @navigate="handleNavigate" />
-
- <!-- Teljes szélességű piros lábléc -->
- <Footer />
-</template>
-
<script setup>
-import { ref, computed } from 'vue'
-import Header from './components/Header.vue'
-import Footer from './components/Footer.vue'
-import MainContent from './components/MainContent.vue'
-import Login from './components/Login.vue'
-
-/**
- * Megadjuk a lehetséges nézeteket: "main", "login"
- * Később, ha szeretnénk kosár oldalt, beírhatjuk ide: cart: CartView
- */
-const pages = {
- main: MainContent,
- login: Login
-}
-
-// Alapértelmezett nézet: főoldal (main)
-const currentView = ref('main')
+ import MainContent from './components/MainContent.vue'
+</script>
-// A gyermek komponensek (Header, Login) kibocsátanak egy "navigate" eseményt
-function handleNavigate(page) {
- currentView.value = page
-}
+<template>
-// Eltérő érték → eltérő komponens
-const currentPage = computed(() => {
- return pages[currentView.value] || MainContent
-})
-</script>
+ <main>
+ <MainContent />
+ </main>
+</template>
<style>
-/* Globális stílus – mindenképpen 100% széles és magas (ha kell) */
-html, body {
- margin: 0;
- padding: 0;
- width: 100%;
- min-height: 100vh;
- box-sizing: border-box;
- background-color: #fbeaea; /* halvány pirosas háttér */
- font-family: Arial, sans-serif;
-}
-</style>
+
+</style>
\ No newline at end of file
diff --git a/src/assets/base.css b/src/assets/base.css
index 8816868..edac408 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -50,36 +50,7 @@
}
}
-*,
-*::before,
-*::after {
- box-sizing: border-box;
- margin: 0;
- font-weight: normal;
-}
-
body {
- min-height: 100vh;
- color: var(--color-text);
- background: var(--color-background);
- transition:
- color 0.5s,
- background-color 0.5s;
- line-height: 1.6;
- font-family:
- Inter,
- -apple-system,
- BlinkMacSystemFont,
- 'Segoe UI',
- Roboto,
- Oxygen,
- Ubuntu,
- Cantarell,
- 'Fira Sans',
- 'Droid Sans',
- 'Helvetica Neue',
- sans-serif;
- font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
diff --git a/src/assets/main.css b/src/assets/main.css
index 36fb845..ebf6fc0 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,35 +1,14 @@
@import './base.css';
#app {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
+ display: contents;
font-weight: normal;
-}
-
-a,
-.green {
- text-decoration: none;
- color: hsla(160, 100%, 37%, 1);
- transition: 0.4s;
- padding: 3px;
-}
+ justify-content: center;
+ place-items: center;
+ background: #c7c7c7;
-@media (hover: hover) {
- a:hover {
- background-color: hsla(160, 100%, 37%, 0.2);
- }
}
@media (min-width: 1024px) {
- body {
- display: flex;
- place-items: center;
- }
- #app {
- display: grid;
- grid-template-columns: 1fr 1fr;
- padding: 0 2rem;
- }
}
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
deleted file mode 100644
index e4b8664..0000000
--- a/src/components/Footer.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup>
-</script>
-
-<template>
- <footer class="footer-container">
- <p>© 2025 Ignis - Minden jog fenntartva.</p>
- </footer>
-</template>
-
-<style scoped>
-.footer-container {
- width: 100%;
- background-color: #800000;
- color: white;
- text-align: center;
- padding: 10px;
- box-sizing: border-box;
-}
-</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
deleted file mode 100644
index 3099180..0000000
--- a/src/components/Header.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup>
-import { defineEmits } from 'vue'
-const emit = defineEmits(['navigate'])
-</script>
-
-<template>
- <header class="header-container">
- <!-- Bal oldalt a logó és a cím -->
- <div class="logo-container">
- <svg class="fire-logo" viewBox="0 0 24 24">
- <path
- fill="white"
- d="M12.0 2.0C9 6 14 8 10 13c-1 2-2 4 0 7 2 3 6 3 8 0 2-3 2-6 0-9-1-1-1-3 0-4 1-1 0-3-1-4-1-1-2-2-5-1z"
- />
- </svg>
- <h1>Ignis - Számítógép alkatrészek</h1>
- </div>
-
- <!-- Jobb oldalt a gombok -->
- <nav>
- <button @click="emit('navigate', 'main')">Termékek</button>
- <button @click="emit('navigate', 'login')">Bejelentkezés</button>
- <!-- Kosár gomb -->
- <button class="cart-btn" @click="emit('navigate', 'cart')">
- <svg class="cart-icon" viewBox="0 0 24 24">
- <path
- fill="white"
- d="M7 4H2v2h3l3.6 7.59-1.35 2.41C6.52 16.37 7.48 18 9 18h11v-2H9.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 21.85 6H6.31l-.95-2H2V2h4a1 1 0 0 1 .92.61L7.68 4H7z"
- />
- </svg>
- </button>
- </nav>
- </header>
-</template>
-
-<style scoped>
-.header-container {
- /* Teljes szélesség a böngészőben */
- width: 100%;
- background-color: #b30000; /* Piros fejléc */
- color: white;
- padding: 20px;
- box-sizing: border-box;
-
- /* Kulcs: a flexbox elrendezés,
- bal oldalt a logó, jobb oldalt a navigáció */
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-/* Logó + felirat (bal oldalt) */
-.logo-container {
- display: flex;
- align-items: center;
- gap: 10px;
-}
-.fire-logo {
- width: 40px;
- height: 40px;
-}
-
-/* Gombok (jobb oldalt) */
-nav {
- display: flex;
- gap: 10px;
-}
-button {
- background-color: #800000;
- color: white;
- border: none;
- padding: 8px 12px;
- cursor: pointer;
-}
-button:hover {
- background-color: #cc0000;
-}
-
-/* Kosár ikon */
-.cart-btn {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-.cart-icon {
- width: 20px;
- height: 20px;
-}
-</style>
--
GitLab