alicestrt
/
food-review
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

optimize for mobile part 1

Browse Source
master
alicestrt 5 years ago
parent 7419fa58be
commit 374b7fc79e
8 changed files with 60 additions and 84 deletions
Show Stats Download Patch File Download Diff File

9
src/components/AboutPage.vue
Unescape Escape View File

@ -23,9 +23,8 @@ p {
<div> <div>
<MenuBar/> <MenuBar/>
<b-row class="about-text" align-h="center"> <b-row class="about-text" align-h="center">
<b-col cols="8"> <b-col cols="10">
<h3> <h3>About the project</h3>
About the project</h3>
<p class="about-text"> <p class="about-text">
I'm Alice. This website is part of my graduation project for the Master of Arts in Fine Art and Design: Experimental Publishing, in which I question the role of technology in the development of innovative food. More specifically, I'm deconstructing what I'm Alice. This website is part of my graduation project for the Master of Arts in Fine Art and Design: Experimental Publishing, in which I question the role of technology in the development of innovative food. More specifically, I'm deconstructing what
I've identified as the meal-replacement phenomenon, an ideology, culture, community and, ultimately, range of products that have emerged out of Silicon Valley's techno-solutionism approach to problem solving in the past 5 years, and have I've identified as the meal-replacement phenomenon, an ideology, culture, community and, ultimately, range of products that have emerged out of Silicon Valley's techno-solutionism approach to problem solving in the past 5 years, and have
@ -43,7 +42,7 @@ p {
</b-row> </b-row>
<b-row align-h="center"> <b-row align-h="center">
<b-col cols="8"> <b-col cols="10">
<h3>About the essay</h3> <h3>About the essay</h3>
<p class="about-text"> <p class="about-text">
"Your Body Will Make Itself Heard" represents my masters' thesis, and takes a broader look at the historical, cultural and technological development of meal replacements. "Your Body Will Make Itself Heard" represents my masters' thesis, and takes a broader look at the historical, cultural and technological development of meal replacements.
@ -52,7 +51,7 @@ p {
</b-row> </b-row>
<b-row class="about-text" align-h="center"> <b-row class="about-text" align-h="center">
<b-col cols="8"> <b-col cols="10">
<h3>About the video</h3> <h3>About the video</h3>
<p class="about-text"> <p class="about-text">
"Is It Time to Eat, Or Is There No More Time to Eat" is a short desktop film that complements my research on meal replacements. As opposed to a broader look on the topic, the video focuses on the issue of solving problems through the means of techno-solutionism. "Is It Time to Eat, Or Is There No More Time to Eat" is a short desktop film that complements my research on meal replacements. As opposed to a broader look on the topic, the video focuses on the issue of solving problems through the means of techno-solutionism.

2
src/components/CookingCard.vue
Unescape Escape View File

@ -18,7 +18,7 @@ p {
<div> <div>
<b-row align-h="center"> <b-row align-h="center">
<b-col cols="10"> <b-col cols="12">
<div class="card_content"> <div class="card_content">
<p style="text-align: center; font-weight: bold;">We love food, we hate having to cook it</p> <p style="text-align: center; font-weight: bold;">We love food, we hate having to cook it</p>
<p> <p>

19
src/components/FullTextPage.vue
Unescape Escape View File

@ -2,6 +2,7 @@
@import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap'); @import url('https://fonts.googleapis.com/css?family=Inconsolata&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
#header { #header {
margin-top: 40px; margin-top: 40px;
} }
@ -16,11 +17,6 @@ h3 {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
font-weight: bold; font-weight: bold;
} }
iframe {
position: absolute;
width: 800px;
height: 900px;
}
</style> </style>
@ -29,18 +25,23 @@ iframe {
<div> <div>
<MenuBar/> <MenuBar/>
<b-row align-h="center"> <b-row align-h="center">
<b-col cols="6"> <b-col md="6" sm="12">
<h3>Your Body Will Make Itself Heard</h3> <h3>Your Body Will Make Itself Heard</h3>
</b-col> </b-col>
</b-row> </b-row>
<b-row align-h="center"> <b-row align-h="center">
<b-col cols="6"> <b-col cols="10">
<p><a href="https://git.xpub.nl/alicestrt/Thesis" target="_blank">Download</a> the full text of my thesis.</p> <p><a href="https://git.xpub.nl/alicestrt/Thesis" target="_blank">Download</a> the full text of my thesis.</p>
</b-col> </b-col>
</b-row> </b-row>
<b-row align-h="center"> <b-row align-h="center">
<b-col cols="8"> <b-col cols="12">
<iframe style="left: 145px; right: 145px;" src="./media/thesis.pdf"></iframe> <b-embed
type="iframe"
aspect="4by3"
src="./media/thesis.pdf"
allowfullscreen
></b-embed>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>

20
src/components/MenuBar.vue
Unescape Escape View File

@ -1,13 +1,17 @@
<template> <template>
<b-row class="mb-5-menu"> <b-row class="mb-5-menu">
<b-col md="8"> <b-navbar toggleable="lg">
<b-button variant="light" to='/'>Home</b-button> <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-button variant="light" to='/about'>About</b-button> <b-collapse id="nav-collapse" is-nav>
<b-button variant="light" to='/review'>Review</b-button> <b-navbar-nav>
<b-nav-item to='/'>Home</b-nav-item>
<b-button variant="light" to='/fulltext'>Full text</b-button> <b-nav-item to='/about'>About</b-nav-item>
<b-button variant="light" to='/video'>Video</b-button> <b-nav-item to='/review'>Review</b-nav-item>
</b-col> <b-nav-item to='/fulltext'>Full text</b-nav-item>
<b-nav-item to='/video'>Video</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</b-row> </b-row>
</template> </template>

14
src/components/ReviewPage.vue
Unescape Escape View File

@ -80,7 +80,7 @@ b-card {
<b-container fluid> <b-container fluid>
<b-row align-h="center" class="mb-2"> <b-row align-h="center" class="mb-2">
<b-col cols="10" md-10 justify-text-center> <b-col cols="10">
<p id="intro_title">THE REVIEW</p> <p id="intro_title">THE REVIEW</p>
<div class="intro_text"> <div class="intro_text">
<p> <p>
@ -109,7 +109,7 @@ b-card {
<!-- End of description--> <!-- End of description-->
<b-row align-h="center" class="icon_dropdown"> <b-row align-h="center" class="icon_dropdown">
<b-col cols="2" class="text-center"> <b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2"> <b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="stroopwafel" size="3x" /></span> <span slot="text"> <font-awesome-icon icon="stroopwafel" size="3x" /></span>
<b-dropdown-text style="width: 240px;"> <b-dropdown-text style="width: 240px;">
@ -121,7 +121,7 @@ b-card {
</b-dropdown> </b-dropdown>
</b-col> </b-col>
<b-col cols="2" class="text-center"> <b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2"> <b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="stopwatch" size="3x" /></span> <span slot="text"> <font-awesome-icon icon="stopwatch" size="3x" /></span>
<b-dropdown-text style="width: 240px;"> <b-dropdown-text style="width: 240px;">
@ -133,7 +133,7 @@ b-card {
</b-dropdown> </b-dropdown>
</b-col> </b-col>
<b-col cols="2" class="text-center"> <b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2"> <b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="code" size="3x" /></span> <span slot="text"> <font-awesome-icon icon="code" size="3x" /></span>
<b-dropdown-text style="width: 240px;"> <b-dropdown-text style="width: 240px;">
@ -147,7 +147,7 @@ b-card {
</b-dropdown> </b-dropdown>
</b-col> </b-col>
<b-col cols="2" class="text-center"> <b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2"> <b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="search-dollar" size="3x" /></span> <span slot="text"> <font-awesome-icon icon="search-dollar" size="3x" /></span>
<b-dropdown-text style="width: 240px;"> <b-dropdown-text style="width: 240px;">
@ -158,7 +158,7 @@ b-card {
<b-dropdown-item v-on:click="resetShowValueCard(showValueCard)" href="#" variant="primary" class="read-button">Keep reading</b-dropdown-item> <b-dropdown-item v-on:click="resetShowValueCard(showValueCard)" href="#" variant="primary" class="read-button">Keep reading</b-dropdown-item>
</b-dropdown> </b-dropdown>
</b-col> </b-col>
<b-col cols="2" class="text-center"> <b-col md="2" sm="12" class="text-center">
<b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2"> <b-dropdown dropup variant="light" @click="onClick" no-caret class="m-2">
<span slot="text"> <font-awesome-icon icon="seedling" size="3x" /></span> <span slot="text"> <font-awesome-icon icon="seedling" size="3x" /></span>
<b-dropdown-text style="width: 240px;"> <b-dropdown-text style="width: 240px;">
@ -175,7 +175,7 @@ b-card {
</b-row> </b-row>
<b-container fluid> <b-container fluid>
<b-row align-h="center"> <b-row align-h="center">
<b-col cols="8" class="main-cards"> <b-col cols="12" class="main-cards">
<transition name="fade"> <transition name="fade">
<div v-if="showCookingCard"> <div v-if="showCookingCard">
<CookingCard/> <CookingCard/>

63
src/components/SplashPage.vue
Unescape Escape View File

@ -90,20 +90,14 @@ p {
<template> <template>
<div> <div>
<MenuBar/>
<b-row align-h="center"> <b-row align-h="center" style="margin-top: 20px;">
<b-col cols="12" id="subtitle"> <b-col md="4" sm="10">
<p style="text-align: center;">A critical resource for the meal-replacement curious</p> <h2 id='review_title'>A critical resource for the meal-replacement curious</h2>
</b-col> </b-col>
</b-row> </b-row>
<!--end header -->
<b-row align-h="center"> <b-row align-h="center">
<b-col cols="4"> <b-col cols="8" id="introduction">
<h2 id='review_title'>A REVIEW</h2>
</b-col>
</b-row>
<b-row align-h="center" style="border-bottom: 2px solid #D3D3D3;">
<b-col cols="6" id="introduction">
<p> <p>
Throughout this past year, I’ve become fascinated with meal replacements. From their surprising form and aspiration to replace normal food, to the entire growing culture and community base around them, I’ve delved deep into the rabbit hole. I have now Throughout this past year, I’ve become fascinated with meal replacements. From their surprising form and aspiration to replace normal food, to the entire growing culture and community base around them, I’ve delved deep into the rabbit hole. I have now
@ -122,24 +116,24 @@ p {
<!--end introduction --> <!--end introduction -->
<div class='signs'> <div class='signs'>
<b-row align-h="center"> <b-row align-h="center">
<b-col cols="3" id="why"> <b-col md="3" sm="12" id="why">
Why meal replacements? Why meal replacements?
</b-col> </b-col>
</b-row> </b-row>
<b-row align-h="center"> <b-row align-h="center">
<b-col cols="2" style="text-align:center;"> <b-col md="2" sm="12" style="text-align:center;">
<font-awesome-icon icon="stroopwafel" size="4x" /> <font-awesome-icon icon="stroopwafel" size="4x" />
<p id="icon-text" style="text-align:center;"> <p id="icon-text" style="text-align:center;">
Replacing cooking Replacing cooking
</p> </p>
</b-col> </b-col>
<b-col cols="3" style="text-align:center;"> <b-col md="2" sm="12" style="text-align:center;">
<font-awesome-icon icon="stopwatch" size="4x" /> <font-awesome-icon icon="stopwatch" size="4x" />
<p id="icon-text" style="text-align:center;"> <p id="icon-text" style="text-align:center;">
Saving time Saving time
</p> </p>
</b-col> </b-col>
<b-col cols="2" style="text-align:center;"> <b-col md="2" sm="12" style="text-align:center;">
<font-awesome-icon icon="code" size="4x" /> <font-awesome-icon icon="code" size="4x" />
<p id="icon-text" style="text-align:center;"> <p id="icon-text" style="text-align:center;">
Providing solutions Providing solutions
@ -151,57 +145,30 @@ p {
<b-row align-h="center" class="signs"> <b-row align-h="center" class="signs">
<b-col cols="2" style="text-align:center;"> <b-col md="2" sm="12" style="text-align:center;">
<font-awesome-icon icon="search-dollar" size="4x" /> <font-awesome-icon icon="search-dollar" size="4x" />
<p id="icon-text" style="text-align:center;"> <p id="icon-text" style="text-align:center;">
Adding value Adding value
</p> </p>
</b-col> </b-col>
<b-col cols="2" style="text-align:center;"> <b-col md="2" sm="12" style="text-align:center;">
<font-awesome-icon icon="seedling" size="4x" /> <font-awesome-icon icon="seedling" size="4x" />
<p id="icon-text" style="text-align:center;"> <p id="icon-text" style="text-align:center;">
Changing the future Changing the future
</p> </p>
</b-col> </b-col>
</b-row> </b-row>
<!-- end second row of icons-->
<b-row align-h="center" style="border-top: 2px solid #D3D3D3 margin-top: 10px; ">
<b-col cols="2" id="review_end">
<p style="text-align: right;">
Alice says:
<font-awesome-icon icon="star" />
<font-awesome-icon icon="star-half-alt" />
</p>
<p style="font-size: 12px; text-align: right;">
Verified user
<font-awesome-icon icon="user-check" style="color: green" />
</p>
</b-col>
<b-col cols="8">
<p id='review-title' style="font-weight: bold;">
I have so many thoughts!
</p>
<p id='short-review'>
“I tried meal replacements, got sucked into the culture, and I’ve come out with many thoughts. First of all...”
</p>
</b-col>
<b-col cols="1" id="read_full">
<b-button variant="light" to='/review'>
Read full review
</b-button>
</b-col>
</b-row>
</div> </div>
</template> </template>
<script> <script>
import MenuBar from './MenuBar'
export default { export default {
name: 'SplashPage', name: 'SplashPage',
components: {
MenuBar
}
} }
</script> </script>

2
src/components/TimeCard.vue
Unescape Escape View File

@ -60,7 +60,7 @@ export default {
data: function() { data: function() {
return { return {
post_mom_economy: '<img width="300" height="200" src="/media/topics/post-mom_economy/images/post_mom.png"></img>', post_mom_economy: '<img class="img-fluid" src="/media/topics/post-mom_economy/images/post_mom.png"></img>',
lot_2046: '<a href="https://www.lot2046.com/" target="_blank">LOT is a subscription-based service which distributes a basic set of clothing, footwear, essential self-care products, accessories, and media content.</a>', lot_2046: '<a href="https://www.lot2046.com/" target="_blank">LOT is a subscription-based service which distributes a basic set of clothing, footwear, essential self-care products, accessories, and media content.</a>',
washio: '<a href="http://www.thewashio.com/" target="_blank">"We know that your busy schedule will not allow you to do laundry at home, so let us takecare of your laundry - you can take care of what matter most to you"</a>', washio: '<a href="http://www.thewashio.com/" target="_blank">"We know that your busy schedule will not allow you to do laundry at home, so let us takecare of your laundry - you can take care of what matter most to you"</a>',
delivery: '<iframe width="250" height="200" src="https://www.youtube.com/embed/2I0fxeeI1sg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>', delivery: '<iframe width="250" height="200" src="https://www.youtube.com/embed/2I0fxeeI1sg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>',

11
src/components/VideoPage.vue
Unescape Escape View File

@ -27,13 +27,18 @@ h3 {
<div> <div>
<MenuBar/> <MenuBar/>
<b-row align-h="center"> <b-row align-h="center">
<b-col cols="4"> <b-col cols="10">
<h3>Is it time to eat, or is there no more time to eat?</h3> <h3>Is it time to eat, or is there no more time to eat?</h3>
</b-col> </b-col>
</b-row> </b-row>
<b-row align-h="center"> <b-row align-h="center">
<b-col cols="6" text-center> <b-col cols="10">
<iframe width="860" height="515" src="https://www.youtube.com/embed/S-maUIUAC3I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <b-embed
type="iframe"
aspect="16by9"
src="https://www.youtube.com/embed/S-maUIUAC3I"
allowfullscreen
></b-embed>
</b-col> </b-col>
</b-row> </b-row>
</div> </div>

Write Preview
Loading…
Cancel
Save