From b458e4a437ce48c71dee7ab2a7da6d51598b261f Mon Sep 17 00:00:00 2001 From: rinaboc <bocska.karina@gmail.com> Date: Tue, 14 May 2024 09:50:32 +0200 Subject: [PATCH] added browse page and fixed some layout problems --- frontend/src/App.vue | 47 +++++++------- frontend/src/assets/main.css | 9 +-- frontend/src/components/HelloWorld.vue | 13 ++-- frontend/src/components/browse-komponens.vue | 65 ++++++++++++++++++++ frontend/src/components/login-komponens.vue | 18 +++++- 5 files changed, 117 insertions(+), 35 deletions(-) create mode 100644 frontend/src/components/browse-komponens.vue diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 033ae93..7e9adec 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -4,27 +4,33 @@ import TheWelcome from './components/TheWelcome.vue' import PeldaKomponens from "@/components/pelda-komponens.vue"; import RegisterKomponens from "@/components/register-komponens.vue"; import IntroKomponens from "@/components/intro-komponens.vue"; + +import {ref} from "vue"; +import BrowseKomponens from "@/components/browse-komponens.vue"; +// import loggedIn from "@/components/login-komponens.vue" +const isNotLoggedIn = ref(false); + +function setStatus(status){ + isNotLoggedIn.value = !status; +} + </script> <template> <header> - <HelloWorld msg="TechnoCool NoteStore" /> + <HelloWorld msg="TechnoCool NoteStore" @status="setStatus" /> </header> - -<!-- <PeldaKomponens />--> - - - <main> -<!-- <TheWelcome />--> - <h1>A TechnoCool NoteStore jegyzetek, segédanyagok hallgatók közötti egyszerű megosztására alkalmas szolgáltatás.</h1> - </main> -<!-- <main>--> -<!-- <h2>Az oldal eléréséhez jelentkezz be.</h2>--> -<!-- <h3>Nincsen felhasználód? <register-komponens/></h3>--> -<!-- </main>--> - <main> - <intro-komponens/> - </main> + <div v-if="isNotLoggedIn"> + <main> + <h1>A TechnoCool NoteStore jegyzetek, segédanyagok hallgatók közötti egyszerű megosztására alkalmas szolgáltatás.</h1> + <div> + <intro-komponens/> + </div> + </main> + </div> + <div v-else> + <browse-komponens/> + </div> </template> <style scoped> @@ -38,20 +44,19 @@ import IntroKomponens from "@/components/intro-komponens.vue"; @media (min-width: 1024px) { main { - display: block; + display: grid; + grid-template-columns: 1fr 1fr; width: 100%; height: 100%; color: lightseagreen; + padding: 20px; } header { display: block; - position: fixed; - top: 0; - left: 0; - width: 100%; line-height: 1.5; background-color: #224c49; + margin: 10px 0 20px 0; } .logo { diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index 36fb845..fe91057 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -1,10 +1,11 @@ @import './base.css'; #app { - max-width: 1280px; + /*max-width: 1280px;*/ margin: 0 auto; padding: 2rem; font-weight: normal; + width: 100%; } a, @@ -24,12 +25,12 @@ a, @media (min-width: 1024px) { body { display: flex; - place-items: center; + place-items: flex-start; } #app { - display: grid; - grid-template-columns: 1fr 1fr; + display: block; + /*grid-template-columns: 1fr 1fr;*/ padding: 0 2rem; } } diff --git a/frontend/src/components/HelloWorld.vue b/frontend/src/components/HelloWorld.vue index e8431ad..8f86236 100644 --- a/frontend/src/components/HelloWorld.vue +++ b/frontend/src/components/HelloWorld.vue @@ -22,17 +22,14 @@ defineProps({ <!-- </h3>--> <!-- <div class="space"></div>--> <div class="login"> - <LoginKomponens /> + <LoginKomponens @status="(value) => this.$emit('status', value)" /> </div> </div> </template> <style scoped> -.login { - position: fixed; - right: 5%; -} + .title { color: lightseagreen; @@ -72,10 +69,10 @@ h3 { } .greetings { - display: flex; + display: grid; padding: 1em; - place-items: center flex-start; - flex-wrap: wrap; + grid-template-columns: 1fr 4fr 2fr; + align-items: center; } .space { diff --git a/frontend/src/components/browse-komponens.vue b/frontend/src/components/browse-komponens.vue new file mode 100644 index 0000000..9505d38 --- /dev/null +++ b/frontend/src/components/browse-komponens.vue @@ -0,0 +1,65 @@ +<script setup> + +</script> + +<template> + <div class="page-wrapper"> + <main class="browse"> + <ul class="browse-list"> + <li class="module">Modul 1</li> + <li>Jegyzet</li> + <li>Jegyzet</li> + <li class="module">Modul 2</li> + <li>Jegyzet</li> + </ul> + </main> + <main> + <div class="note-page"> + <h2 class="note-header">Jegyzet</h2> + <h3 class="note-description"> + Jegyzet leírása + </h3> + <h4>Feltőltő neve</h4> + <button>Letöltés</button> + </div> + </main> + </div> +</template> + +<style scoped> + +.page-wrapper{ + display: grid; + grid-auto-flow: row; + grid-template-columns: 1fr 2fr; + column-gap: 10px; + padding: 0 10% 0 10%; +} + +.browse-list{ + list-style-type: none; + padding: 0; +} + +li { + padding: 2px; +} + +.browse, .note-page { + border: 1px solid lightseagreen; + padding: 5px; +} + +.module { + background-color: #224c49; +} + +.note-page > h4 { + color: lightseagreen; +} + +.note-page { + padding: 15px; +} + +</style> \ No newline at end of file diff --git a/frontend/src/components/login-komponens.vue b/frontend/src/components/login-komponens.vue index c19efa8..ededf24 100644 --- a/frontend/src/components/login-komponens.vue +++ b/frontend/src/components/login-komponens.vue @@ -55,14 +55,28 @@ function login(){ } } + </script> <template> - <h1>{{userName}}</h1> - <button class="grow" @click="login">{{btnText}}</button> + <div class="wrapper"> + <h2 class="user">{{userName}}</h2> + <button class="grow" @click="login" >{{btnText}}</button> + </div> </template> <style scoped> + +.wrapper { + display: flex; +} + +.user { + color: lightseagreen; + width: 200px; + text-align: center; +} + button { height: 40px; width: 130px; -- GitLab