Fix the height of the landing page (#78)

bioimage-io · Sep 20, 2020 · dcb5082 · dcb5082
1 parent 91d95a1
commit dcb5082
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/src/components/Partners.vue b/src/components/Partners.vue
@@ -28,7 +28,6 @@
 </template>
 
 <script>
-const ICON_WIDTH = 140;
 export default {
   name: "Partners",
   props: {
@@ -39,8 +38,9 @@ export default {
   },
   data() {
     return {
+      icon_width: 140,
       selectedPartnerIndex: 0,
-      items2Show: window.innerWidth / ICON_WIDTH
+      items2Show: window.innerWidth / 140
     };
   },
   mounted() {
@@ -52,7 +52,12 @@ export default {
   },
   methods: {
     updateSize() {
-      this.items2Show = window.innerWidth / ICON_WIDTH;
+      if (window.innerWidth < 512) {
+        this.icon_width = 80;
+      } else {
+        this.icon_width = 140;
+      }
+      this.items2Show = window.innerWidth / this.icon_width;
       this.$forceUpdate();
     },
     switchPartner(partner) {
@@ -73,24 +78,29 @@ export default {
   text-align: center;
   width: 100vw;
   max-width: 100vw;
-  position: absolute;
+  /* position: absolute; */
   bottom: 0px;
   right: 0px;
   left: 0px;
   margin-right: 0px;
   margin-left: 0px;
 }
 .carousel-list {
-  padding-left: 30px;
-  padding-right: 30px;
+  padding-left: 100px;
+  padding-right: 100px;
 }
 .partner-logo {
   height: 80px;
   max-height: 100px;
   width: auto;
   margin-bottom: 10px;
 }
-
+@media screen and (max-width: 1024px) {
+  .carousel-list {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+}
 @media screen and (max-width: 500px) {
   .partner-logo {
     height: 60px;

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -55,8 +55,11 @@
       </div>
     </nav>
     <!-- Header -->
-    <section class="hero is-link is-fullheight is-fullheight-with-navbar">
-      <div class="hero-body">
+    <section
+      class="hero is-link is-fullheight is-fullheight-with-navbar"
+      style="max-height: 1024px!important;height:100%;min-height:680px;"
+    >
+      <div class="hero-body" style="position: relative;">
         <img
           class="background-img"
           v-if="selectedPartner"