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