little-lines/frontend
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases 2 Activity

feature: setting some of css for mobile

Browse source
This commit is contained in:
SRP-mango 2023-07-15 15:44:27 +07:00
parent 5cd87926de
commit 0e54335e9d
4 changed files with 26 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
micromobility-navigation/index.html
View file

@ -4,10 +4,14 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title> <title>micromobility-navigation</title>
<style>
html, body {margin: 0; height: 100%; overflow: hidden}
</style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

2
micromobility-navigation/src/App.vue
View file

@ -11,5 +11,5 @@
</template> </template>
<script setup> <script setup>
import {RouterLink, RouterView} from 'vue-router'; import {RouterLink, RouterView} from 'vue-router';
</script> </script>

2
micromobility-navigation/src/main.js
View file

@ -4,4 +4,4 @@ import '@/style.css'
import App from '@/App.vue' import App from '@/App.vue'
import router from '@/plugins/router' import router from '@/plugins/router'
createApp(App).use(router).mount('#app') createApp(App).use(router).mount('#app')

20
micromobility-navigation/src/style.css
View file

@ -1,3 +1,19 @@
/* for mobile user */
body{ body{
background-color: transparent; display: block;
} margin: auto auto auto auto;
padding: 1rem 1rem 1rem 1rem;
max-width: 450px;
height: 925px;
background-color: white;
}
:root{
background-color: rgb(131, 131, 131);
}
/* disable desktop & tablet for now due to unfinalized design */
@media only screen and (min-width: 700px) {
body{
display: none;
}
}