sponsors + ui fixes

Author: Sami Kolari

.eslintrc.js

@@ -13,6 +13,7 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/no-unused-components': 'warn',
     'vue/no-multiple-template-root': 'off',
     'no-unused-vars': 'warn',
     'space-before-function-paren': ['warn', 'never'],

public/img/sponsors/aito.png

@@ -2,7 +2,6 @@
   <div
     ref="nav"
     class="navbar row center bg-black color-white p-2xsmall pt-small pb-small">
-    <div class="mr-medium" />
     <!-- section navigation -->
     <button
       v-for="item in $tm('navbar.items')"

public/img/sponsors/aktia.png

@@ -1,9 +1,9 @@
 <template>
   <div class="row bg-black color-white p-small pt-large pb-large">
-    <div class="container" style="line-height: 1.75;">
+    <div class="container" style="line-height: 2;">
       <div class="row">
         <div class="col-sm-6 col-md-3">
-          <h3>
+          <h3 class="mb-small">
             <a href="https://robotframework.org/foundation/">Foundation</a>
           </h3>
           <div>
@@ -25,7 +25,7 @@
         <div
           class="col-sm-6 col-md-3"
           :class="$store.state.isMobile ? 'type-right' : ''">
-          <h3>
+          <h3 class="mb-small">
             Community
           </h3>
           <div>
@@ -56,7 +56,7 @@
         </div>
         <div v-if="$store.state.isMobile" class="col-sm-12 mb-large" />
         <div class="col-sm-6 col-md-3">
-          <h3>
+          <h3 class="mb-small">
             Instructions
           </h3>
           <div>

public/img/sponsors/botlabs.png

@@ -44,11 +44,20 @@ export default {
 
 <style scoped>
   h2::before {
-  display: block;
-  content: " ";
-  margin-top: -100px;
-  height: 100px;
-  visibility: hidden;
-  pointer-events: none;
-}
+    display: block;
+    content: " ";
+    margin-top: -100px;
+    height: 100px;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  h2 {
+    clip-path: polygon(0 calc(100% - 2rem), 100% calc(100% - 2rem), 100% 100%, 0% 100%)
+  }
+  @media screen and (max-width: 700px) {
+    h2::before {
+      margin-top: -30px;
+      height: 30px;
+    }
+  }
 </style>

public/img/sponsors/capgemini.png

@@ -80,4 +80,13 @@ export default {
     visibility: hidden;
     pointer-events: none;
   }
+  h2 {
+    clip-path: polygon(0 calc(100% - 2rem), 100% calc(100% - 2rem), 100% 100%, 0% 100%)
+  }
+  @media screen and (max-width: 700px) {
+    h2::before {
+      margin-top: -30px;
+      height: 30px;
+    }
+  }
 </style>

public/img/sponsors/chili.png

@@ -0,0 +1,55 @@
+<template>
+  <div class="row bg-white card pt-medium pb-medium" :class="$store.state.isMobile ? '' : 'p-small'">
+    <div class="col-sm-12 mb-xsmall type-center color-theme">
+      <h3>
+        {{ $t('development.sponsorBoxTitle') }}
+      </h3>
+    </div>
+    <a
+      v-for="sponsor in $tm('resourcesList.sponsors')"
+      :key="sponsor.name"
+      :href="sponsor.href"
+      target="_blank"
+      class="sponsor cursor-pointer">
+      <div
+        class="img-container mb-small"
+        :style="`background-image: url(${publicPath}img/sponsors/${sponsor.img})`" />
+    </a>
+    <div class="col-sm-12 type-small type-right pr-small" v-html="$t('development.howToJoin')" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Sponsors',
+  data: () => ({
+    publicPath: process.env.BASE_URL
+  })
+}
+</script>
+
+<style scoped>
+.sponsor {
+  flex-basis: 12.5%;
+  max-width: 12.5%;
+  transition: transform 0.2s;
+}
+.sponsor:hover {
+  transform: scale(1.08);
+}
+.img-container {
+  width: 70%;
+  margin-left: auto;
+  margin-right: auto;
+  height: 4rem;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+@media screen and (max-width: 700px) {
+  .sponsor {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+}
+</style>

public/img/sponsors/cisco.png

@@ -10,6 +10,7 @@ import CompanyCarousel from './CompanyCarousel.vue'
 import CommunityItems from './CommunityItems.vue'
 import ResourceBox from './ResourceBox.vue'
 import TabBox from './TabBox.vue'
+import Sponsors from './Sponsors.vue'
 import RobotCode from './RobotCode.vue'
 
 import GlobeIcon from './icons/GlobeIcon.vue'
@@ -30,6 +31,7 @@ export {
   ResourceBox,
   TabBox,
   RobotCode,
+  Sponsors,
 
   GlobeIcon,
   ChevronIcon,

public/img/sponsors/comiq.png

@@ -18,6 +18,10 @@ export default () => ({
       {
         name: 'Resources',
         id: 'resources'
+      },
+      {
+        name: 'Development',
+        id: 'development'
       }
     ],
     dropdownName: 'Links',
@@ -276,6 +280,18 @@ Welcome Page Should Be Open
       'External'
     ]
   },
+  development: {
+    title: 'Development',
+    body: `<p>Development of Robot Framework is funded by the non-profit
+    <a href="https://robotframework.org/foundation/">Robot Framework Foundation</a>. It consists
+    of companies and organizations that want to ensure the continuity of Robot Framework now and
+    in the future.</p>
+    <p>Thanks to these sponsors, Robot Framework remains completely
+    free to use while being actively maintained and developed. Foundation also covers other
+    related expenses such as the development of this website and organizing various meetups.`,
+    sponsorBoxTitle: 'Members of Robot Framework Foundation',
+    howToJoin: '<a href="https://robotframework.org/foundation/">How to join</a>'
+  },
   usersPage: {
     title: 'Users of Robot Framework',
     body: `If you'd like your company added here, please submit a

public/img/sponsors/dbchenker.png

@@ -13,6 +13,7 @@ import tools from './resources/tools.js'
 import learning from './resources/learning.js'
 import stars from './resources/stars.js'
 import users from './resources/users.js'
+import sponsors from './resources/sponsors.js'
 
 export {
   english,
@@ -29,5 +30,6 @@ export {
   tools,
   learning,
   stars,
-  users
+  users,
+  sponsors
 }