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"