Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: mobile-friendly style (#48) #52

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: mobile-friendly style (#48) #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 29 additions & 3 deletions src/components/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
<form class="main-form" @submit.prevent="generate">
<FormIntro/>

<div class="common-fields vue-ui-grid col-2 default-gap">
<div class="common-fields">
<VueFormField
:title="i18n('repo-title')"
:subtitle="i18n('repo-subtitle')"
class="first-row"
class="first-row can-narrow"
>
<VueSelect
v-model="repo"
Expand All @@ -26,7 +26,7 @@

<VueFormField
:title="i18n('type-title')"
class="first-row"
class="first-row can-narrow"
>
<VueGroup
v-model="type"
Expand Down Expand Up @@ -254,3 +254,29 @@ export default {
text-align center
margin 24px 0
</style>

<style lang="stylus">
@media screen and (max-width: 600px)
.title
font-weight bold
.vue-ui-form-field
margin-bottom 24px

@media screen and (min-width: 600px)
.can-narrow
flex: 0 0 48% !important

.common-fields
display flex !important
flex-flow row wrap
justify-content space-between

.vue-ui-form-field
margin-bottom 12px
width 100%

.medium > .shell
width 800px !important
min-width auto !important
max-width calc(100vw - 40px) !important
</style>
10 changes: 7 additions & 3 deletions src/components/BugReport.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
<template>
<div class="bug-report" style="margin:0">
<div class="vue-ui-grid col-2 default-gap">
<div class="common-fields">
<VueFormField
:title="i18n('version-title')"
:subtitle="i18n('version-subtitle')"
class="can-narrow"
>
<VueTypeAhead
v-model="attrs.version"
Expand All @@ -19,6 +20,7 @@
<VueFormField
v-if="repo.id === 'vuejs/vue-devtools'"
:title="i18n('browser-and-os-title')"
class="can-narrow"
>
<VueInput
v-model="attrs.browserAndOS"
Expand All @@ -35,6 +37,7 @@
<VueFormField
v-if="isCLI && doesNotSupportVueInfo"
:title="i18n('node-and-os-title')"
class="can-narrow"
>
<VueInput
v-model="attrs.nodeAndOS"
Expand All @@ -50,7 +53,6 @@
<VueFormField
v-else-if="isCLI"
:title="i18n('cli-envinfo-title')"
class="span-2"
>
<VueInput
v-model="attrs.cliEnvInfo"
Expand All @@ -64,7 +66,7 @@
/>
</VueFormField>

<VueFormField :title="i18n('repro-title')">
<VueFormField :title="i18n('repro-title')" class="can-narrow">
<VueInput
type="url"
v-model="attrs.reproduction"
Expand Down Expand Up @@ -99,6 +101,7 @@

<VueFormField
:title="i18n('expected-title')"
class="can-narrow"
>
<VueInput
type="textarea"
Expand All @@ -110,6 +113,7 @@

<VueFormField
:title="i18n('actual-title')"
class="can-narrow"
>
<VueInput
type="textarea"
Expand Down
2 changes: 1 addition & 1 deletion src/components/FeatureRequest.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="feature-request">
<div class="vue-ui-grid col-1 default-gap">
<div class="common-fields">
<VueFormField
:title="i18n('rationale-title')"
>
Expand Down