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

css: disable create team button in smartphone mode

Browse Source
This commit is contained in:
Settel 2022-10-09 21:36:51 +02:00
parent e2d504c839
commit 118dc897ce
1 changed files with 7 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,9 +6,7 @@
<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>
@ -30,7 +28,6 @@ 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()
@ -62,7 +59,6 @@ body {
height: 120px; height: 120px;
@media (max-width: $phone-max-width) { @media (max-width: $phone-max-width) {
flex-direction: column;
margin: 32px 0 0 0; margin: 32px 0 0 0;
} }
} }
@ -77,35 +73,19 @@ body {
} }
} }
&__create-team {
@media (max-width: $phone-max-width) {
display: none;
}
}
&__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) { @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; 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;
}
} }
} }