Commit 3a051afc authored by Elouan Le Bars's avatar Elouan Le Bars

[ADD] Warning for mobile users

parent 577fdd44
<template>
<div id="app">
<Header></Header>
<main id="main-flexbox">
<SinglePage
:page="displayed_single_page"
v-show="display_single_page"
></SinglePage>
<div class="scenarios" v-show="display_scenarios">
<Scenario title="Scenario A"></Scenario>
<Scenario title="Scenario B"></Scenario>
<Scenario title="Scenario C"></Scenario>
</div>
<ResultsDetailledView
:selectedView="results_detailled_view_choice"
class="scenarios"
v-show="!display_scenarios"
:key="re_render_results_detailled_view"
/>
<Results />
</main>
<div id="app">
<div v-show="!hide_warning" id="mobile-warning">
<p>Cette application n'est pas destinée aux supports mobiles.
Nous vous recommandons d'utiliser un ordinateur.<br>
<a href="#" @click.prevent="hide_warning = true">Continuer</a>
</p>
</div>
<Header></Header>
<main id="main-flexbox">
<SinglePage :page="displayed_single_page" v-show="display_single_page"></SinglePage>
<div class="scenarios" v-show="display_scenarios">
<Scenario title="Scenario A"></Scenario>
<Scenario title="Scenario B"></Scenario>
<Scenario title="Scenario C"></Scenario>
</div>
<ResultsDetailledView :selectedView="results_detailled_view_choice" class="scenarios" v-show="!display_scenarios" :key="re_render_results_detailled_view" />
<Results />
</main>
</div>
</template>
<script>
......@@ -45,6 +43,7 @@ export default {
re_render_results_detailled_view: false,
display_single_page: false,
displayed_single_page: null,
hide_warning: false,
};
},
methods: {},
......@@ -75,18 +74,46 @@ export default {
<style>
#app {
height: 100%;
display: flex;
flex-direction: column;
}
@media only screen and (min-width: 800px) {
#mobile-warning {
display: none;
}
}
#mobile-warning {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.8);
z-index: 1;
}
#mobile-warning p {
text-align: center;
margin-left: 25%;
width: 50%;
margin-top: 20%;
color: white;
}
#mobile-warning a {
color: white;
font-weight: bold;
}
#main-flexbox {
flex-basis:90%;
flex-basis: 90%;
display: flex;
width: 100%;
}
main {
/* height: 100%; */
}
.scenarios {
display: flex;
flex-basis: 75%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment