PR: Improved mobile responsiveness

src/App.vue

@@ -1,56 +1,60 @@
 <template>
   <div id="app">
     <div class="image-header">
-      <img alt="Stroyblok logo" src="./assets/logo.png">
+      <img alt="Stroyblok logo" src="./assets/logo.png" />
     </div>
-    <Select v-on:update-filter="sendFilter" v-on:update-type="sendType"/>
-    <Loading v-if="!contentRepositories"/>
-    <ListOfRepositories :json-data="contentRepositories" :filter="filterId" :type="typeId" v-on:show-repos="changeLoading"/>
+    <Select v-on:update-filter="sendFilter" v-on:update-type="sendType" />
+    <Loading v-if="!contentRepositories" />
+    <ListOfRepositories
+      :json-data="contentRepositories"
+      :filter="filterId"
+      :type="typeId"
+      v-on:show-repos="changeLoading"
+    />
   </div>
 </template>
 
 <script>
-import Select from './components/Select.vue'
-import Loading from './components/Loading.vue'
+import Select from './components/Select.vue';
+import Loading from './components/Loading.vue';
 import dataFromJson from '../scripts/crawler-repositories/data/repositories.json'
-import ListOfRepositories from './components/ListOfRepositories.vue'
+import ListOfRepositories from './components/ListOfRepositories.vue';
 
 export default {
   name: 'App',
   components: {
     Select,
     Loading,
-    ListOfRepositories
+    ListOfRepositories,
   },
 
   data() {
     return {
       contentRepositories: dataFromJson,
       filterId: '',
       typeId: '',
-      isLoading: true
-    }
+      isLoading: true,
+    };
   },
 
   methods: {
     sendFilter(val) {
-      this.filterId = val
+      this.filterId = val;
     },
 
     sendType(val) {
-      this.typeId = val
+      this.typeId = val;
     },
 
     changeLoading(val) {
-      this.isLoading = val
+      this.isLoading = val;
     },
     // async loadFiles () {
     //   return await loadRepositoriesJson()
     //   // console.log(content)
     // }
-  }
-
-}
+  },
+};
 </script>
 
 <style>
@@ -69,4 +73,10 @@ export default {
   display: flex;
   justify-content: center;
 }
+
+@media only screen and (max-width: 425px) {
+  #app {
+    width: 90%;
+  }
+}
 </style>

src/components/Issues.vue

@@ -69,4 +69,4 @@ section {
 span {
   margin-right: 5px;
 }
-</style>
+</style>

src/components/Repository.vue

@@ -1,11 +1,16 @@
 <template>
   <div>
-    <section class="section content list-of-repository" v-if="source.open_issues > 0">
+    <section
+      class="section content list-of-repository"
+      v-if="source.open_issues > 0"
+    >
       <!-- {{source.open_issues}} -->
-      <a :href="source.html_url"
-         :title="'Repository ' + source.name"
-         class="title is-2"
-         target="_blank">{{source.name.split('')[0].toUpperCase() + source.name.substr(1)}}
+      <a
+        :href="source.html_url"
+        :title="'Repository ' + source.name"
+        class="title is-2"
+        target="_blank"
+        >{{ source.name.split('')[0].toUpperCase() + source.name.substr(1) }}
       </a>
       <!-- {{source.id}} -->
       <!-- {{issuesJson}} -->
@@ -18,7 +23,7 @@
                 <span v-else>Load Pull Requests</span>
         </button>
       </div> -->
-      <Issues :issuesSource="issuesFromCurrentRepo(source)"/>
+      <Issues :issuesSource="issuesFromCurrentRepo(source)" />
       <!-- <PullRequests :pullsSource="prs" v-else/> -->
       <!-- <section v-if="showMessage && types === 'pr'">
         <strong> This repository has no open Pull Requests. </strong>
@@ -29,7 +34,7 @@
 
 <script>
 // import { getAllIssuesFromRepo, getAllPrsFromRepo } from '../service/index'
-import Issues from './Issues'
+import Issues from './Issues';
 // import PullRequests from './PullRequests'
 import issuesJson from '../../scripts/crawler-repositories/data/issues.json'
 
@@ -45,27 +50,27 @@ export default {
     source: {
       required: true,
       type: Object,
-      default: () => {}
+      default: () => {},
     },
     id: {
       required: true,
       type: Number,
-      default: () => 0
+      default: () => 0,
     },
     types: {
       required: true,
       type: String,
-      default: () => 'is'
-    }
+      default: () => 'is',
+    },
   },
 
   data() {
     return {
       issues: issuesJson,
       loading: false,
       prs: [],
-      showMessage: false
-    }
+      showMessage: false,
+    };
   },
 
   methods: {
@@ -75,38 +80,50 @@ export default {
       // }
 
       // return this.issues.every(findIssuesFromRepo)
-      return this.issues.filter(e => {
-        return e.node_id === source.node_id ? e : null
-      })
+      return this.issues.filter((e) => {
+        return e.node_id === source.node_id ? e : null;
+      });
+    },
+    //   async get() {
+    //     this.loading = true
 
-    }
-  //   async get() {
-  //     this.loading = true
-
-  //     if(this.types === 'is' || this.types === '' || this.types === undefined) {
-  //       this.issues = await getAllIssuesFromRepo(this.source.name)
-  //     }
+    //     if(this.types === 'is' || this.types === '' || this.types === undefined) {
+    //       this.issues = await getAllIssuesFromRepo(this.source.name)
+    //     }
 
-  //     this.prs = await getAllPrsFromRepo(this.source.name) || []
-  //     if (!this.prs.length) {
-  //       this.showMessage = true
-  //     }
+    //     this.prs = await getAllPrsFromRepo(this.source.name) || []
+    //     if (!this.prs.length) {
+    //       this.showMessage = true
+    //     }
 
-  //     this.loading = false
-  //     return
-  //   }
-  }
-}
+    //     this.loading = false
+    //     return
+    //   }
+  },
+};
 </script>
 
 <style>
 .list-of-repository {
-  box-shadow: 0px 0px 20px -14px rgba(0,0,0,0.74);
+  box-shadow: 0px 0px 20px -14px rgba(0, 0, 0, 0.74);
   border-radius: 10px;
 }
 
 section button {
   margin-top: 10px;
 }
 
-</style>
+@media only screen and (max-width: 425px) {
+  .list-of-repository:last-child {
+    margin-bottom: 5rem;
+  }
+
+  .list-of-repository a {
+    font-size: 1.5rem;
+  }
+
+  section button {
+  margin-top: 10px;
+  }
+}
+</style>

src/components/Select.vue

@@ -1,6 +1,5 @@
 <template>
   <section class="select__container section content">
-
     <div class="select__container--label">
       <p class="select__container--title">Sort By:</p>
       <div class="select">
@@ -23,7 +22,6 @@
         </select>
       </div>
     </div>
-
   </section>
 </template>
 
@@ -35,26 +33,26 @@ export default {
     return {
       filter: 'default',
       type: 'is',
-    }
+    };
   },
 
   watch: {
     filter: function () {
-      this.$emit('update-filter', this.filter)
+      this.$emit('update-filter', this.filter);
     },
 
     type: function () {
-      this.$emit('update-type', this.type)
-    }
-  }
-
-}
+      this.$emit('update-type', this.type);
+    },
+  },
+};
 </script>
 
 <style>
 .select__container {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 .select__container--label {
@@ -63,11 +61,42 @@ export default {
 }
 
 .select__container--title {
-  margin: 8px;
+  margin: 8px 8px 8px 0 !important;
   font-weight: bold;
 }
 
-.select #time, .select #type {
+.select #time,
+.select #type {
   font-weight: 600;
 }
-</style>
+
+@media only screen and (max-width: 425px) {
+  .select__container {
+    margin: 0 !important;
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .select__container--label:first-child {
+    margin-bottom: 8px;
+  }
+
+  .select #time,
+  .select #type {
+    width: 100%;
+    margin: 0;
+  }
+
+  .select__container--label {
+    width: 100%;
+  }
+
+  [class*='select__container--'] + p {
+    width: 25%;
+  }
+
+  [class*='select__container--'] + .select {
+    width: 75%;
+  }
+}
+</style>

yarn.lock

@@ -2012,9 +2012,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001043, caniuse-lite@^1.0.30001061:
-  version "1.0.30001061"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001061.tgz#80ca87ef14eb543a7458e7fd2b5e2face3458c9f"
-  integrity sha512-SMICCeiNvMZnyXpuoO+ot7FHpMVPlrsR+HmfByj6nY4xYDHXLqMTbgH7ecEkDNXWkH1vaip+ZS0D7VTXwM1KYQ==
+  version "1.0.30001245"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001245.tgz"
+  integrity sha512-768fM9j1PKXpOCKws6eTo3RHmvTUsG9UrpT4WoREFeZgJBTi4/X9g565azS/rVUGtqb8nt7FjLeF5u4kukERnA==
 
 case-sensitive-paths-webpack-plugin@^2.3.0:
   version "2.3.0"