feat: active theme section move to navbar + code fund re-style (#2225)

dragosct · hastom · marcosmoura · web-flow · commit a5d027b49170 · 2020-05-27T18:21:11.000+03:00
* fix(MdRadio): internal radio not being checked (#2063) * fix(MdMenu): unexpected close on item click (#2062) * docs: add funding * test: add a "testURL" field to jest config (#2082) fixes the " SecurityError: localStorage is not available for opaque origins" error message that everyone seems to get on their PRs. Using the solution provided here jestjs/jest#3630 * Docs/restyle (#2139) * Changed 'roboto mono' to 'roboto' * Changed code fund position to bottom right * updates Added ‘supported by Creative Tim’ in About page Added open collective * added links to header * Removed disclaimer, added sponsors, changed footer * Add premium-themes page and link to it from the footer * Added products to premium themes page * Finished premium page * Finished installation/usage/premium-themes section * Installed vue-github-buttons * Added GitHub star button * Added license, download and chat buttons * Changed order in gh star button * Changed page transition * Added vue-toc * Style modified for toc * Added ids on getting started for vue-toc * Added ids on themes-congifuration for vue-toc * Added ids on layouts for vue-toc * Added ids on typography * Added ids on components->app for vue-toc * Added ids on buttomBar for vue-toc * Added ids on Button for vue-toc * Added ids on Card for vue-toc * Added ids on datepicker for vue-toc * Added ids on Dialog for vue-toc * Added ids on Drawer for vue-toc * Added ids on autocomplete for vue-toc * Added ids on Chips for vue-toc * Added ids on Input for vue-toc * Added ids on Icon for vue-toc * Added ids on List for vue-toc * Added ids on Menu for vue-toc * Added ids on speedDial for vue-toc * Added ids on steppers for vue-toc * Added ids on table for vue-toc * Added ids on Tabs for vue-toc * Added ids on toolbar for vue-toc * Added ids on Tooltip for vue-toc * Updated license * Added key to vue-toc * Small change * Changed codeinwp logo * updates * Css changes for logo and gh-button * Added more space between buttons * Removed arrow down & nabber buttons hidden on mobile * style changes, added premium themes in navbar, centered premium themes * Cards change * toc style * Changed style for code-fund * restyle codefund * Restyled home premium section * Commented contribuitors section * Changed Patreon text to Open Collective * Changed home premium background color * Removed open collective * Added link to premium-themes from themes image * Added target blank * Restyled vue-toc * added refs * Responsive changes * Changed margin on title * Added custom development link * Added links from sponsors * lint fix * add margin left * Updated footer links (#2145) * Docs/restyle (#2150) * Added dropdown in nabber * Added sponsors * restyled codefund * Codefund restyle * Restyled footer * Restyled footer * Footer restyle on responsive * Add "new" tag and modify logo in footer * Cleaned console.log test texts * Added arrow on dropdown * Modified sponsors and dropdown * Codefund on responsive * Footer restyle on responsive * Added tag manager (#2153) * [MdTabs] fix mdActiveTab not selecting set tab on load (#2164) content and indicator were not initializing to the set active tab * [core] RTL support #80 (#2181) added rtl support to tabs component with mdIsRtl prop * update the work with Vue router page grammar (#2100) * docs: fix typo (#2080) * Update About.vue (#2117) Fix typo * docs(Tabs): add prop `md-is-rtl` to tabs table component (#2198) * docs(Tabs): add prop `md-is-rtl` to tabs table component * docs(Tabs): prop `md-is-rtl` move last item in table * Fix typo (#1819) * Fix typo I'm pretty sure you meant to write here `md-alignment-[vertical]-[horizontal]`, but in the docs it says `md-alignment-[horizontal]-[vertical]`. That threw me off for a bit. Overall, this is a super awesome package! I love working with it!! * fix typo in api section I noticed that at the bottom of the page, in the API section, the order also needs to be reversed. "x" should refer to horizontal, and "y" should refer to vertical. Co-authored-by: dragosct <17456857+dragosct10@users.noreply.github.com> * Added index to "md-table-row" slot-scope (#2064) Co-authored-by: hastom <aklyavlin@onvis.ru> * Improved grammar in Table.vue (docs) (#2178) * build: 1.0.0-beta-12 * build: release * build: changelog 1.0.0-beta-12 * Moving observers to setTimeout (#2201) Co-authored-by: hastom <aklyavlin@onvis.ru> * fix: Drawer detection (#1929) * fix(MdDialog):change position principle from transform to flex wrapper (#2023) * Changed dialog positioning to flex * Revert to transition root element Co-authored-by: hastom <aklyavlin@onvis.ru> * Fixed dialog transitions (#2021) Co-authored-by: hastom <aklyavlin@onvis.ru> Co-authored-by: dragosct <17456857+dragosct10@users.noreply.github.com> * Prevent tabs overflow inside dialog content (#2065) Co-authored-by: hastom <aklyavlin@onvis.ru> * fix(MdApp): remove height 100 to make md-app-content span content height (#1957) * remove height 100 to make md-app-content span content height * use min-height of 100 instead of height Co-authored-by: xxRockOnxx <xxRockOnxx@users.noreply.github.com> * build: 1.0.0-beta-13 * build: release * build: changelog 1.0.0-beta-13 * fix(MdDialog): position centered * fix(MdDialog): revert * Datepicker now emits the md-clear event when cleared, and has the option to not be clearable (#1967) * fix(components,doc): fix the character counter not reseting when (#2081) reseting the form fixes #2054 Co-authored-by: BOUTIGNY Adrien <adrien.boutigny@akka.eu> * Fix checking mouseevent in IE11 (#2091) * fix undefined dom.contains in IE11 (#2090) * Allow false as a value for an MdOption (#2183) * Auto insert in MdChips after focusout (#2189) * Implemented the function of automatically adding a value in the MdChips component, in case of loss of focus * fixed code format * Fix/md dialog position centered (#2211) * docs(Tabs): add prop `md-is-rtl` to tabs table component * docs(Tabs): add prop `md-is-rtl` to tabs table component * docs(Tabs): prop `md-is-rtl` move last item in table * docs(Tabs): prop `md-is-rtl` move last item in table * fix(MdDialog): position centered * fix(MdStep): set tabindex for not active step (#2215) * fix(MdStep): set tabindex for not active step * feat(MdStep): add v-show to hide content Co-authored-by: Samuell1 <samuell.patro@gmail.com> * fix(components,doc): fix the character counter not reseting when (#2213) reseting the form fixes #2054 Co-authored-by: BOUTIGNY Adrien <adrien.boutigny@akka.eu> Co-authored-by: hastom <aklyavlin@onvis.ru> * Fix checking mouseevent in IE11 (#2212) Co-authored-by: kmsheng <kmsh3ng@gmail.com> Co-authored-by: hastom <aklyavlin@onvis.ru> * Revert "fix undefined dom.contains in IE11 (#2090)" (#2220) This reverts commit 05649bb. * Util to replace Node.contains (#2214) * fix undefined dom.contains in IE11 * Added util to polyfill Node.contains Co-authored-by: kmsheng <kmsh3ng@gmail.com> Co-authored-by: hastom <aklyavlin@onvis.ru> * 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 Co-authored-by: hastom <hastomit@gmail.com> Co-authored-by: Marcos Moura <marcosvmmoura@gmail.com> Co-authored-by: Adrien Boutigny <mounch-man@hotmail.fr> Co-authored-by: rarestoma <tomairares@gmail.com> Co-authored-by: gaby64 <gaby_64@live.ca> Co-authored-by: tom dorofeyev <tomdorofey@gmail.com> Co-authored-by: Brett Kinnamon <b.kinnamon@icloud.com> Co-authored-by: Jason Cooke <Jason-Cooke@users.noreply.github.com> Co-authored-by: Amit Gurbani <amit1994.gurbani@gmail.com> Co-authored-by: Avraham Appel <33736292+avrahamappel@users.noreply.github.com> Co-authored-by: hastom <aklyavlin@onvis.ru> Co-authored-by: starsky135 <starsky135@gmail.com> Co-authored-by: Marcu Beniamin <marqbeniamin@yahoo.com> Co-authored-by: Hugome <Hugome@users.noreply.github.com> Co-authored-by: Lemuel Flores <is101.lemuel@gmail.com> Co-authored-by: xxRockOnxx <xxRockOnxx@users.noreply.github.com> Co-authored-by: Shira Gold <shira14@gmail.com> Co-authored-by: BOUTIGNY Adrien <adrien.boutigny@akka.eu> Co-authored-by: kmsheng <kmsh3ng@gmail.com> Co-authored-by: Jaryd Carolin <jaryd@upgear.com.au> Co-authored-by: Konstantin Mohov <htmlmak@gmail.com> Co-authored-by: Oliver Ni <oliver.ni@gmail.com> Co-authored-by: Samuell1 <samuell.patro@gmail.com>
diff --git a/FUNDING.yml b/FUNDING.yml
@@ -1,2 +1 @@
-patreon: marcosmoura
-custom: http://bit.ly/VueMaterialPaypal
+open_collective: vue-material
diff --git a/ROADMAP.md b/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>
 
diff --git a/docs/app/components/AdManager.vue b/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>
diff --git a/docs/app/components/PageContainer.vue b/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;
diff --git a/docs/app/pages/Home/Home.vue b/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;
diff --git a/docs/app/pages/Home/HomeSponsors.vue b/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> -->
 <!--
diff --git a/docs/app/template/MainHeader.vue b/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%;

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1 @@`
`1`		`-patreon: marcosmoura`
`2`		`-custom: http://bit.ly/VueMaterialPaypal`
	`1`	`+open_collective: vue-material`