effie/unity-calendar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

preliminary layout for the main page

Browse Source
This commit is contained in:
Effie 2024-06-07 19:05:44 +10:00
parent 4d868269b9
commit 410c00e5c3
14 changed files with 204 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/main.css
View File

@ -1,3 +1,10 @@
body { body {
background-color: yellow; background-color: yellow;
margin: 0;
height: 100vh;
}
h1 {
margin: auto;
width: max-content;
} }

262
components/index/calendar/frame.vue
View File

@ -1,262 +0,0 @@
<style scoped>
.fullframe, .month, .header {
border: solid; border-width: 1px;
}
.fullframe {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* grid-auto-columns: 1fr; */
grid-template-rows: repeat(5, 1fr);
min-width: 1.2rem;
gap: .6rem;
}
.month {
height: fit-content;
}
.header {
grid-column: 1 / 7;
grid-row: 1 / 2;
}
.days {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(5, 1fr);
}
.leapweek {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.m1 {
}
.h1{
}
.m2 {
}
.h2{
}
.m3 {
}
.h3{
}
.m4 {
}
.h4{
}
.m5 {
}
.h5{
}
.m6 {
}
.h6{
}
.m7 {
}
.h7{
}
.m8 {
}
.h8{
}
.m9 {
}
.h9{
}
.m10 {
}
.h10{
}
.m11 {
}
.h11{
}
.m12 {
}
.h12{
}
.m13 {
grid-column: 3;
}
.intercalaryheader {
grid-column: 2;
}
.intercalarytext {
margin-left: auto;
width: 0;
min-width: fit-content;
}
</style>
<template>
<div class="fullframe">
<div class="month m1">
<div class="header h1">
First
</div>
<div class="days">
yah
</div>
</div>
<div class="month m2">
<div class="header h2">
Second
</div>
<div class="days">
yah
</div>
</div>
<div class="month m3">
<div class="header h3">
Third
</div>
<div class="days">
yah
</div>
</div>
<div class="month m4">
<div class="header h4">
Fourth
</div>
<div class="days">
yah
</div>
</div>
<div class="month m5">
<div class="header h5">
Fifth
</div>
<div class="days">
yah
</div>
</div>
<div class="month m6">
<div class="header h6">
Sixth
</div>
<div class="days">
yah
</div>
</div>
<div class="month m7">
<div class="header h7">
Seventh
</div>
<div class="days">
yah
</div>
</div>
<div class="month m8">
<div class="header h8">
Eighth
</div>
<div class="days">
yah
</div>
</div>
<div class="month m9">
<div class="header h9">
Ninth
</div>
<div class="days">
yah
</div>
</div>
<div class="month m10">
<div class="header h10">
Tenth
</div>
<div class="days">
yah
</div>
</div>
<div class="month m11">
<div class="header h11">
Eleventh
</div>
<div class="days">
yah
</div>
</div>
<div class="month m12">
<div class="header h12">
Twelfth
</div>
<div class="days">
yah
</div>
</div>
<div class="intercalaryheader">
<div class="intercalarytext">Intercalary Week</div>
</div>
<div class="month m13">
<div class="leapweek">
yuh
</div>
</div>
</div>
</template>

12
components/index/calblock.vue → components/main/calblock.vue
View File

@ -2,10 +2,7 @@
.indexcalendar { .indexcalendar {
display: flex; justify-content: space-between; display: flex; justify-content: space-between;
}
.calendarpart {
flex-grow: 1;
} }
@media (max-width: 720px) { @media (max-width: 720px) {
@ -13,9 +10,6 @@
flex-direction: column; flex-direction: column;
} }
.calendarpart {
width: 100%;
}
} }
</style> </style>
@ -24,10 +18,10 @@
<template> <template>
<div class="indexcalendar"> <div class="indexcalendar">
<div class="calendarpart"> <div class="calendarpart">
<IndexCalendarToday /> <MainCalendarToday />
</div> </div>
<div class="calendarpart"> <div class="calendarpart">
<IndexCalendarFrame /> <MainCalendarFrame />
</div> </div>
</div> </div>
</template> </template>

34
components/main/calendar/days.vue Normal file
View File

@ -0,0 +1,34 @@
<script setup>
const props = defineProps(['daycount'])
const weekcount = props.daycount / 6
const defaultdays = ref(Array.from(Array(props.daycount).keys()))
</script>
<style scoped>
.days {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(v-bind('weekcount'), 1fr);
grid-gap: 1px;
background-color: black;
border: 1px solid black;
}
</style>
<template>
<div class="days">
<MainCalendarSingleday
v-for="day in defaultdays"
/>
</div>
</template>

81
components/main/calendar/frame.vue Normal file
View File

@ -0,0 +1,81 @@
<script setup>
const defaultmonths = ref([
{id: 1, name: 'First'},
{id: 2, name: 'Second'},
{id: 3, name: 'Third'},
{id: 4, name: 'Fourth'},
{id: 5, name: 'Fifth'},
{id: 6, name: 'Sixth'},
{id: 7, name: 'Seventh'},
{id: 8, name: 'Eighth'},
{id: 9, name: 'Ninth'},
{id: 10, name: 'Tenth'},
{id: 11, name: 'Eleventh'},
{id: 12, name: 'Twelfth'}
])
</script>
<style scoped>
.fullframe, .header {
border: solid; border-width: 1px;
}
.fullframe {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* grid-auto-columns: 1fr; */
/* grid-template-rows: repeat(5, 1fr) 1.2rem; */
min-width: 1.2rem;
gap: .6rem;
}
.month {
height: fit-content;
}
.header {
grid-column: 1 / 7;
grid-row: 1 / 2;
}
.leapweek {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.m13 {
grid-column: 3;
}
.intercalaryheader {
grid-column: 2;
}
.intercalarytext {
margin-left: auto;
width: 0;
min-width: fit-content;
}
</style>
<template>
<div class="fullframe">
<MainCalendarMonth
v-for="month in defaultmonths"
:monthname="month.name"
:daycount="30"
/>
<div class="intercalaryheader">
<div class="intercalarytext">Intercalary Week</div>
</div>
<MainCalendarMonth
:daycount="6" />
</div>
</template>

28
components/main/calendar/month.vue Normal file
View File

@ -0,0 +1,28 @@
<script setup>
const props = defineProps(['monthname', 'daycount'])
</script>
<style scoped>
.headertext {
width: fit-content;
margin: auto;
}
</style>
<template>
<div class="month">
<div class="header">
<div class="headertext">
{{monthname}}
</div>
</div>
<MainCalendarDays
:daycount=daycount />
</div>
</template>

14
components/main/calendar/singleday.vue Normal file
View File

@ -0,0 +1,14 @@
<style>
.singleday {
background-color: white;
min-width: 1.2rem;
}
</style>
<template>
<div class="singleday">-</div>
</template>

0
components/index/calendar/today.vue → components/main/calendar/today.vue
View File

0
components/index/cycleblock.vue → components/main/cycleblock.vue
View File

0
components/index/questionblock.vue → components/main/questionblock.vue
View File

0
components/index/titleblock.vue → components/main/titleblock.vue
View File

24
components/navfoot.vue
View File

@ -1,6 +1,14 @@
<style scoped> <style scoped>
ul { .footer {
position: sticky;
bottom: 0;
max-width: 72rem;
width: 100%;
background-color: red;
}
.navlist {
display: flex; gap: 6rem; justify-content: center; display: flex; gap: 6rem; justify-content: center;
@ -9,10 +17,12 @@
</style> </style>
<template> <template>
<ul> <nav class="footer">
<li><NuxtLink to="/">home</NuxtLink></li> <ul class="navlist">
<li><NuxtLink to="/info">info</NuxtLink></li> <li><NuxtLink to="/">home</NuxtLink></li>
<li><NuxtLink to="/maker">maker</NuxtLink></li> <li><NuxtLink to="/info">info</NuxtLink></li>
<li><NuxtLink to="/credits">credits</NuxtLink></li> <li><NuxtLink to="/maker">maker</NuxtLink></li>
</ul> <li><NuxtLink to="/credits">credits</NuxtLink></li>
</ul>
</nav>
</template> </template>

26
layouts/default.vue
View File

@ -1,27 +1,17 @@
<style> <style>
main {
max-width: 60rem; .pagewrap {
margin: auto; height: 100vh;
display: flex; flex-direction: column;
align-items: center;
justify-content: space-between;
} }
h1 {
margin: auto;
width: max-content;
}
nav {
position: absolute;
bottom: 0;
width: 60rem;
margin: auto;
}
</style> </style>
<template> <template>
<main> <div class="pagewrap">
<slot /> <slot />
</main>
<nav>
<navfoot /> <navfoot />
</nav> </div>
</template> </template>

23
pages/index.vue
View File

@ -1,18 +1,19 @@
<style scoped> <style scoped>
.indexblock { .mainblock {
max-width: 72rem;
display: flex; flex-direction: column; gap: 1.2rem; width: 100%;
display: flex; flex-direction: column; gap: 7.2rem;
} }
</style> </style>
<template> <template>
<div class="indexblock"> <main class="mainblock">
<IndexTitleblock /> <MainTitleblock />
<IndexCalblock /> <MainCalblock />
<IndexCycleblock /> <MainCycleblock />
<IndexQuestionblock /> <MainQuestionblock />
</div> </main>
</template> </template>