Merge branch 'css_mobile' into 'master'

Updated CSS to work on phones

See merge request corona-risikoabschaetzungs-app/covidassist!2
This commit is contained in:
Thilo Billerbeck 2020-03-21 21:58:00 +01:00
commit ab8526cd4a
6 changed files with 101 additions and 36 deletions

View file

@ -9,9 +9,13 @@
</template> </template>
<style> <style>
/* Import Open Sans from Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
h1 { h1 {
font-size: 1.2em; font-size: 1.2em;
line-height: 1em; line-height: 1em;
color: #23286B;
} }
img { img {
@ -27,17 +31,25 @@
color: #2779E1; color: #2779E1;
} }
p {
color: #333333;
}
button { button {
background: #23286B; background: #23286B;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.25); color: #FFFFFF;
border-radius: 20px;
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25);
border-radius: 15px;
padding: 0.4em 1.4em;
margin-left: 5%;
margin-right: 5%;
border: none;
font-family: Open Sans,sans-serif; font-family: Open Sans,sans-serif;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 1em; font-size: 0.9em;
padding: 0.7em 1em;
color: #FFFFFF;
} }
button.alert { button.alert {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 46 KiB

View file

@ -1,3 +1,17 @@
<style scoped>
.question {
padding: 0.5em;
}
button {
display: block;
width: 80%;
margin: 0 auto;
margin-bottom: 5%;
}
</style>
<template> <template>
<div class="question"> <div class="question">
<p>{{ question }}</p> <p>{{ question }}</p>

View file

@ -19,7 +19,7 @@ const routes = [
component: Warning component: Warning
}, },
{ {
path: '/questionmaire', path: '/questionnaire',
name: 'Fragebogen', name: 'Fragebogen',
component: Questionnaire component: Questionnaire
}, },

View file

@ -1,12 +1,47 @@
<style scoped>
.home {
display: flex;
flex-flow: column;
justify-content: center;
padding: 0.5em;
}
#welcome-image {
margin-left: auto;
margin-right: auto;
width: 85%;
}
p {
display: block;
margin-left: auto;
margin-right: auto;
width: 85%;
}
#information {
display: block;
margin: 0 auto;
padding: 5%;
font-size: 0.8em;
}
#title {
font-size: 1.2em;
color: #23286B;
}
</style>
<template> <template>
<div class="home"> <div class="home">
<img alt="Vue logo" src="../assets/welcome.png"> <img id="welcome-image" alt="Welcome" src="../assets/welcome.png">
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> --> <div>
<h1>COVIDassist</h1> <p id="title"><b>COVID</b>assist</p>
<p>Die COVID-19 Verhaltensdiagnose, die Ihre Daten respektiert.</p> <p>Die COVID-19 Verhaltensdiagnose, die keine Daten speichert.</p>
<router-link to="/warning"><button>Selbsttest starten</button></router-link> <router-link style="text-decoration:none" to="/warning"><button>Infektionsrisiko ermitteln</button></router-link>
<a href="/">Informationen zu COVID-19</a> </div>
<small><a href="/">Imprint</a></small>
<a id="information" href="https://www.rki.de/SharedDocs/FAQ/NCOV2019/FAQ_Liste.html"><b>Informationen zu COVID-19</b></a>
</div> </div>
</template> </template>
@ -21,12 +56,3 @@ export default {
} }
} }
</script> </script>
<style>
.home {
display: flex;
flex-flow: column;
justify-content: center;
padding: 0.5em;
}
</style>

View file

@ -1,16 +1,29 @@
<template> <style scoped>
<div class="about"> .warning {
<h1>Warnhinweis</h1> display: flex;
<p>Dieser Test geht auf Ihr Verhalten ein und gibt Ihnen Tipps, wie Sie eine Infektion vermeiden können. Wenn Sie vermuten, dass Sie bereits infiziert sind, rufen Sie den ärztlichen Bereitschaftsdienst an:</p> flex-flow: column;
<p class="number">116117</p> justify-content: center;
<router-link to="/questionmaire"><button>Fortfahren</button></router-link> padding: 1em;
</div> }
</template>
<style> h1, p {
.number { display: block;
font-family: sans-serif; margin-left: auto;
color: #E94A47; margin-right: auto;
font-size: 1.6em;
} }
</style> </style>
<template>
<div class="warning">
<div>
<h1>Hinweis</h1>
<p>
Dieser Test geht auf Ihr Verhalten ein und gibt Ihnen Tipps,
wie Sie eine Infektion vermeiden können. Wenn Sie vermuten,
dass Sie bereits infiziert sind, rufen Sie den ärztlichen
Bereitschaftsdienst unter 116117 an.
</p>
</div>
<router-link style="text-decoration:none" to="/questionnaire"><button>Ich möchte weiter zum Test</button></router-link>
</div>
</template>