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>
<MenuBar/>
<b-row class="about-text" align-h="center">
<b-col cols="8">
<h3>
About the project</h3>
<b-col cols="10">
<h3>About the project</h3>
<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'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 align-h="center">
<b-col cols="8">
<b-col cols="10">
<h3>About the essay</h3>
<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.
@ -52,7 +51,7 @@ p {
</b-row>
<b-row class="about-text" align-h="center">
<b-col cols="8">
<b-col cols="10">
<h3>About the video</h3>
<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.

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

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

21
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=Open+Sans&display=swap');
#header {
margin-top: 40px;
}
@ -16,11 +17,6 @@ h3 {
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
iframe {
position: absolute;
width: 800px;
height: 900px;
}
</style>
@ -29,19 +25,24 @@ iframe {
<div>
<MenuBar/>
<b-row align-h="center">
<b-col cols="6">
<b-col md="6" sm="12">
<h3>Your Body Will Make Itself Heard</h3>
</b-col>
</b-row>
<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>
</b-col>
</b-row>
<b-row align-h="center">
<b-col cols="8">
<iframe style="left: 145px; right: 145px;" src="./media/thesis.pdf"></iframe>
</b-col>
<b-col cols="12">
<b-embed
type="iframe"
aspect="4by3"
src="./media/thesis.pdf"
allowfullscreen
></b-embed>
</b-col>
</b-row>
</div>

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

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

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

@ -80,7 +80,7 @@ b-card {
<b-container fluid>
<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>
<div class="intro_text">
<p>
@ -109,7 +109,7 @@ b-card {
<!-- End of description-->
<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">
<span slot="text"> <font-awesome-icon icon="stroopwafel" size="3x" /></span>
<b-dropdown-text style="width: 240px;">
@ -121,7 +121,7 @@ b-card {
</b-dropdown>
</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">
<span slot="text"> <font-awesome-icon icon="stopwatch" size="3x" /></span>
<b-dropdown-text style="width: 240px;">
@ -133,7 +133,7 @@ b-card {
</b-dropdown>
</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">
<span slot="text"> <font-awesome-icon icon="code" size="3x" /></span>
<b-dropdown-text style="width: 240px;">
@ -147,7 +147,7 @@ b-card {
</b-dropdown>
</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">
<span slot="text"> <font-awesome-icon icon="search-dollar" size="3x" /></span>
<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>
</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">
<span slot="text"> <font-awesome-icon icon="seedling" size="3x" /></span>
<b-dropdown-text style="width: 240px;">
@ -175,7 +175,7 @@ b-card {
</b-row>
<b-container fluid>
<b-row align-h="center">
<b-col cols="8" class="main-cards">
<b-col cols="12" class="main-cards">
<transition name="fade">
<div v-if="showCookingCard">
<CookingCard/>

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

@ -90,20 +90,14 @@ p {
<template>
<div>
<b-row align-h="center">
<b-col cols="12" id="subtitle">
<p style="text-align: center;">A critical resource for the meal-replacement curious</p>
</b-col>
</b-row>
<!--end header -->
<b-row align-h="center">
<b-col cols="4">
<h2 id='review_title'>A REVIEW</h2>
<MenuBar/>
<b-row align-h="center" style="margin-top: 20px;">
<b-col md="4" sm="10">
<h2 id='review_title'>A critical resource for the meal-replacement curious</h2>
</b-col>
</b-row>
<b-row align-h="center" style="border-bottom: 2px solid #D3D3D3;">
<b-col cols="6" id="introduction">
<b-row align-h="center">
<b-col cols="8" id="introduction">
<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
@ -122,24 +116,24 @@ p {
<!--end introduction -->
<div class='signs'>
<b-row align-h="center">
<b-col cols="3" id="why">
<b-col md="3" sm="12" id="why">
Why meal replacements?
</b-col>
</b-row>
<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" />
<p id="icon-text" style="text-align:center;">
Replacing cooking
</p>
</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" />
<p id="icon-text" style="text-align:center;">
Saving time
</p>
</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" />
<p id="icon-text" style="text-align:center;">
Providing solutions
@ -151,57 +145,30 @@ p {
<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" />
<p id="icon-text" style="text-align:center;">
Adding value
</p>
</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" />
<p id="icon-text" style="text-align:center;">
Changing the future
</p>
</b-col>
</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>
</template>
<script>
import MenuBar from './MenuBar'
export default {
name: 'SplashPage',
components: {
MenuBar
}
}
</script>

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

@ -60,7 +60,7 @@ export default {
data: function() {
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>',
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>',

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

@ -27,13 +27,18 @@ h3 {
<div>
<MenuBar/>
<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>
</b-col>
</b-row>
<b-row align-h="center">
<b-col cols="6" text-center>
<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-col cols="10">
<b-embed
type="iframe"
aspect="16by9"
src="https://www.youtube.com/embed/S-maUIUAC3I"
allowfullscreen
></b-embed>
</b-col>
</b-row>
</div>

Write Preview
Loading…
Cancel
Save