settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

css: make index page ready for smartphone

Browse Source
This commit is contained in:
Settel 2022-10-09 21:29:09 +02:00
parent 53e1371cde
commit e2d504c839
2 changed files with 45 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/components/TitleBox.vue
View File

@ -21,9 +21,9 @@
justify-content: center;
@media (max-width: $phone-max-width) {
padding: 40px 0;
padding: 40px 0;
}
}
}
&__titleborderbox1,
&__titleborderbox2,
@ -57,9 +57,9 @@
@media (max-width: $phone-max-width) {
top: 75px;
width: 300px;
height: 80px;
height: 80px;
}
}
}
&__titleborderbox3 {
position: absolute;
@ -81,7 +81,7 @@
text-align: center;
@media (max-width: $phone-max-width) {
font-size: 32px;
font-size: 32px;
}
}

42
client/src/pages/index.vue
View File

@ -6,7 +6,9 @@
<div class="page-index__login">
<LoginBox />
</div>
<div class="page-index__separator" />
<div class="page-index__separator">
<span class="page-index__separator-text">{{ $t('or') }}</span>
</div>
<div class="page-index__create-team">
<Button :border="false" @click="createTeam">{{ $t('create-team') }}</Button>
</div>
@ -28,6 +30,7 @@ import useI18n from '@/composables/useI18n'
const { $t } = useI18n({
'create-team': { en: 'Create Team ...', de: 'Team erstellen ...' },
or: { en: 'or', de: 'oder' },
})
const config = useRuntimeConfig()
@ -57,18 +60,53 @@ body {
display: flex;
width: 100%;
height: 120px;
@media (max-width: $phone-max-width) {
flex-direction: column;
margin: 32px 0 0 0;
}
}
&__login,
&__create-team {
width: 320px;
align-self: center;
@media (max-width: $phone-max-width) {
width: auto;
}
}
&__separator {
width: 1px;
margin: 0 48px;
border-left: $box-primary-border;
@media (max-width: $phone-max-width) {
position: relative;
width: 300px;
height: 1px;
margin: 48px 0;
border-left: none;
border-bottom: $box-primary-border;
align-self: center;
}
&-text {
display: none;
@media (max-width: $phone-max-width) {
display: block;
position: absolute;
top: -10px;
left: 120px;
width: 60px;
background-color: $background-primary-color;
font-size: 18px;
color: $text-primary-color;
text-align: center;
}
}
}
&__space {
@ -81,7 +119,7 @@ body {
bottom: 0;
color: #606060;
cursor: pointer;
&:hover {
color: #c0c0c0;
}