Feature/add open collective (#2224)

* feat: code-fund re-positioned

* refactor: remove patreon add opencollective

* feature: change active theme position on dropdown

* feature: fixed white spaces

* feature: fixed white spaces

FUNDING.yml

@@ -1,2 +1 @@
-patreon: marcosmoura
-custom: http://bit.ly/VueMaterialPaypal
+open_collective: vue-material

ROADMAP.md

@@ -230,10 +230,10 @@ Well. All kind of help are welcome. If you want to contribute with the project,
 ## Awesome! I want to pay you a coffee!
 Vue Material do not run under the umbrella of any company or something like that, and is an independent project created by me on spare time. It became one of the most used UI Libraries for Vue.js.
 
-If you think that this project helped you or your company in some way, you can consider become a backer/sponsor on Patreon:
+If you think that this project helped you or your company in some way, you can consider become a backer/sponsor on Open Collective:
 <p>
-  <a href="https://www.patreon.com/marcosmoura" target="_blank">
-    <img width="150" src="https://c5.patreon.com/external/logo/become_a_patron_button.png">
+  <a href="https://opencollective.com/vue-material" target="_blank">
+    <img src="https://opencollective.com/vue-material/tiers/backer.svg?avatarHeight=36">
   </a>
 </p>
 

docs/app/components/AdManager.vue

@@ -62,28 +62,12 @@
     font-size: 12px;
     line-height: 1.5em;
 
-    @media (min-width: $ad-responsive-big) {
-      margin: 0;
-      position: fixed;
-      top: 80px;
-      right: 24px;
-      z-index: 1000;
-    }
-
-    @media (max-width: $ad-responsive-small) {
-      max-width: none;
-      margin: 8px auto 16px;
-      float: none;
-    }
-
     .splash-container & {
-      @media (max-width: $ad-responsive-big) {
-        max-width: 530px;
-        min-height: 100px;
-        margin: 0px auto 8px;
-        float: none;
-        background: none !important;
-      }
+      max-width: 530px;
+      min-height: 100px;
+      margin: 0px auto 8px;
+      float: none;
+      background: none !important;
     }
   }
 </style>

docs/app/components/PageContainer.vue

@@ -43,6 +43,8 @@
   @import "~vue-material/components/MdAnimation/variables";
   @import "~vue-material/theme/engine";
 
+  $ad-responsive-big: 1690px;
+
   .page-container.centered {
     max-width: 1100px;
     margin: 0 auto;
@@ -113,6 +115,16 @@
     position: fixed;
   }
 
+  @media (min-width: $ad-responsive-big) {
+    .ad-manager >>> .code-fund {
+      margin: 0;
+      position: fixed;
+      bottom: 0;
+      right: 24px;
+      z-index: 1000;
+    }
+  }
+
   @media(max-width: 960px){
     .ad-manager{
       position: relative;

docs/app/pages/Home/Home.vue

@@ -132,6 +132,9 @@
           display: flex !important;
           align-items: center;
           flex-direction: row;
+          max-width: none;
+          margin: 8px auto 16px;
+          float: none;
 
           .code-fund-image {
             max-width: 175px;

docs/app/pages/Home/HomeSponsors.vue

@@ -19,11 +19,6 @@
           <a href="https://www.creative-tim.com/?ref=vuematerial.io" target="_blank">
             <img src="/assets/sponsors/creative-tim.png" class="home-sponsors-open-1 logo-2">
           </a>
-          <a href="https://vuetifyjs.com/?ref=vuematerial.io" target="_blank">
-            <img src="/assets/sponsors/vuetify-logo.webp" class="home-sponsors-open-1 logo-3">
-            <img src="/assets/sponsors/vuetify-name.webp" class="home-sponsors-open-1 logo-4">
-
-          </a>
         </div>
         <!-- <p>{{ $t('pages.home.beACollective') }}:</p> -->
 <!--

docs/app/template/MainHeader.vue

@@ -19,52 +19,6 @@
       </div>
 
       <div class="md-toolbar-section-end">
-        <div v-if="!isSplash">
-          <div class="floating-theme-selector" :class="{ active: themeMenuActive }">
-            <div class="floating-theme-selector-items">
-              <md-list class="md-dense">
-                <md-list-item @click="themeMenuActive = !themeMenuActive">
-                  <md-avatar class="md-small md-primary"></md-avatar> Active Theme
-                </md-list-item>
-
-                <md-list-item :class="getPrimaryClass('default')" @click="setTheme('default')">
-                  <md-avatar md-theme="default" class="md-small md-primary"></md-avatar> Light
-                </md-list-item>
-
-                <md-list-item :class="getPrimaryClass('default-dark')" @click="setTheme('default-dark')">
-                  <md-avatar md-theme="default-dark" class="md-small md-primary"></md-avatar> Dark
-                </md-list-item>
-
-                <md-list-item :class="getPrimaryClass('light-green')" @click="setTheme('light-green')">
-                  <md-avatar md-theme="light-green" class="md-small md-primary"></md-avatar> Light Green
-                </md-list-item>
-
-                <md-list-item :class="getPrimaryClass('dark-green')" @click="setTheme('dark-green')">
-                  <md-avatar md-theme="dark-green" class="md-small md-primary"></md-avatar> Dark Green
-                </md-list-item>
-              </md-list>
-            </div>
-          </div>
-
-          <md-menu
-            class="fixed-theme-selector"
-            md-size="auto"
-            md-direction="bottom-end"
-            md-align-trigger>
-            <md-button :class="{ active: themeMenuActive }" md-menu-trigger>
-              <md-avatar class="md-small md-primary"></md-avatar>
-              <span>Theme</span>
-            </md-button>
-
-            <md-menu-content class="fixed-theme-selector-items">
-              <md-menu-item :class="getPrimaryClass('default')" @click="setTheme('default')">Light</md-menu-item>
-              <md-menu-item :class="getPrimaryClass('default-dark')" @click="setTheme('default-dark')">Dark</md-menu-item>
-              <md-menu-item :class="getPrimaryClass('light-green')" @click="setTheme('light-green')">Light Green</md-menu-item>
-              <md-menu-item :class="getPrimaryClass('dark-green')" @click="setTheme('dark-green')">Dark Green</md-menu-item>
-            </md-menu-content>
-          </md-menu>
-        </div>
-
         <div class="md-medium-hide">
           <md-button href="/getting-started">
             Docs
@@ -126,7 +80,17 @@
           <md-icon md-src="/assets/icon-github.svg" class="icon-github" />
         </md-button>
 
-
+        <md-menu md-align-trigger>
+          <md-button class="button-theme md-icon-button md-dense md-raised md-primary" md-menu-trigger>
+            <md-icon class="icon-github">invert_colors</md-icon>
+          </md-button>
+          <md-menu-content class="fixed-theme-selector-items">
+            <md-menu-item class="align-center" :class="getPrimaryClass('default')" @click="setTheme('default')"><md-avatar md-theme="default" class="md-small md-primary"></md-avatar> Light</md-menu-item>
+            <md-menu-item class="align-center" :class="getPrimaryClass('default-dark')" @click="setTheme('default-dark')"><md-avatar md-theme="default-dark" class="md-small md-primary"></md-avatar> Dark</md-menu-item>
+            <md-menu-item class="align-center" :class="getPrimaryClass('light-green')" @click="setTheme('light-green')"><md-avatar md-theme="light-green" class="md-small md-primary"></md-avatar> Light Green</md-menu-item>
+            <md-menu-item class="align-center" :class="getPrimaryClass('dark-green')" @click="setTheme('dark-green')"><md-avatar md-theme="dark-green" class="md-small md-primary"></md-avatar> Dark Green</md-menu-item>
+          </md-menu-content>
+        </md-menu>
       </div>
     </div>
   </md-toolbar>
@@ -200,6 +164,10 @@
   @import "~vue-material/components/MdElevation/mixins";
   @import "~components/MdLayout/mixins";
 
+  .align-center >>> .md-list-item-content {
+    justify-content: flex-start;
+  }
+
   .main-header {
     margin: auto;
     max-width: 100%;