Skip to content
Snippets Groups Projects
Commit b458e4a4 authored by rinaboc's avatar rinaboc
Browse files

added browse page and fixed some layout problems

parent e8903f07
Branches
No related tags found
No related merge requests found
......@@ -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 {
......
@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;
}
}
......@@ -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 {
......
<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
......@@ -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;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment