Docs Restyle (#2151)

* 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

Author: dragosct

docs/app/components/PageContainer.vue

@@ -119,7 +119,15 @@
       >>>.code-fund{
         float: none;
         margin: 0;
-
+        display: flex;
+        #cf{
+          width: 300px !important;
+          img{
+            float: left;
+            margin-right: 10px;
+            border-radius: 2px;
+          }
+        }
       }
     }
   }

docs/app/pages/Home/Home.vue

@@ -141,11 +141,26 @@
             margin-left: 8px;
           }
 
+          #cf{
+            width: 300px !important;
+            img{
+              float: left;
+              margin-right: 10px;
+              border-radius: 2px;
+            }
+          }
           a {
             color: #fff !important;
           }
         }
       }
     }
   }
+
+  .main-footer {
+    margin-left: 0 !important;
+    h4, p{
+      color: #3a3a3a
+    }
+  }
 </style>

docs/app/pages/Home/HomeSponsors.vue

@@ -19,6 +19,11 @@
           <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> -->
 <!--
@@ -64,6 +69,12 @@
     width: calc(100% + 32px);
     margin: 0 -16px -16px;
     padding-bottom: 28px;
+    a{
+      &:hover{
+        color: transparent !important;
+        text-decoration: none;
+      }
+    }
   }
 
   .home-sponsors-open {
@@ -78,6 +89,21 @@
       margin-left: 11px;
       margin-top: 8px;
     }
+    &.logo-3{
+      margin-left: 11px;
+      margin-top: 5px;
+      width: 30px;
+    }
+    &.logo-4{
+      width: 45px;
+      margin-top: 10px;
+    }
+    @include md-layout-xsmall {
+      &.logo-3{
+        margin-top: 10px;
+        margin-left: 0px;
+      }
+    }
   }
 
 

docs/app/template/MainFooter.vue

@@ -1,8 +1,13 @@
 <template>
   <footer class="main-footer">
     <div class="main-footer-container">
-      <div class="main-footer-section">
+      <div class="main-footer-section" center>
+        <ul class="md-list">
+          <h4>About</h4>
+          <p>Vue Material is simple, lightweight and built exactly according to the Google Material Design specs.</p>
+        </ul>
         <ul class="md-list">
+          <h4>Links</h4>
           <li>
             <router-link to="/license">{{ $t('pages.license.title') }}</router-link>
           </li>
@@ -15,6 +20,7 @@
         </ul>
 
         <ul class="md-list">
+          <h4>More information</h4>
           <li>
             <router-link to="/about">{{ $t('aboutMaterial') }}</router-link>
           </li>
@@ -35,6 +41,8 @@
 
 
       <div class="main-footer-section">
+        <logo-vue-material />
+
         <a href="https://github.com/marcosmoura" target="_blank">
           {{ $t('madeWith') }} <span class="red">❤</span> {{ $t('by') }} Marcos Moura.
         </a>
@@ -63,25 +71,47 @@
   @import "~vue-material/theme/engine";
 
   .md-list{
-    display: inline-block;
+    display: inline-table;
     margin: 10px 0;
+    max-width: 180px;
     + .md-list{
       margin-left: 40px;
     }
     li{
       margin: 5px 0;
     }
+    h4{
+      margin: 0 0 10px;
+      padding-bottom: 5px;
+      // border-bottom: 1px solid #dedede;
+    }
+
   }
   .main-footer {
-    padding: 0 16px;
+    padding: 20px 16px;
+    margin-left: 230px;
     position: relative;
+
     z-index: 4;
     background-color: md-get-palette-color(grey, 200);
 
-    @include md-layout-xsmall {
-      height: 152px;
+   @include md-layout-small {
+      .md-list{
+        display: block;
+        margin-left: 0;
+      }
+    }
+    @include md-layout-small {
       flex-direction: column;
       justify-content: space-around;
+      margin-left: 0;
+      .md-list{
+        display: block;
+        max-width: unset;
+      }
+    }
+    p{
+      margin: 0;
     }
   }
 
@@ -94,7 +124,7 @@
     transition: .3s $md-transition-default-timing;
     transition-property: max-width;
 
-    @include md-layout-xsmall {
+    @include md-layout-medium {
       flex-direction: column;
       justify-content: space-around;
     }
@@ -125,6 +155,7 @@
     position: relative;
 
     + .main-footer-section {
+      text-align: center;
       @include md-layout-xsmall {
         &:after {
           width: 60px;
@@ -152,4 +183,15 @@
     color: md-get-palette-color(red, 500);
     transition: .3s $md-transition-default-timing;
   }
+
+  .md-svg-loader {
+    display: block;
+    z-index: 3000;
+    position: relative;
+    width: 15%;
+    margin: auto;
+    text-align: center;
+}
+
+
 </style>

docs/app/template/MainHeader.vue

@@ -70,17 +70,56 @@
             Docs
           </md-button>
 
-          <md-button href="/about">
-            About
-          </md-button>
-
           <md-button href="/components/app">
             Components
           </md-button>
 
           <md-button href="/premium-themes">
             Premium themes
           </md-button>
+          <md-menu md-size="medium" md-align-trigger>
+            <md-button md-menu-trigger>
+              Ecosystem
+
+              <md-icon class="md-size-1x">arrow_drop_down</md-icon>
+
+            </md-button>
+            <md-menu-content>
+              <md-menu-item>
+                <router-link to="/getting-started">
+                  Getting started
+                </router-link>
+
+              </md-menu-item>
+              <md-menu-item>
+                <router-link to="/about">
+                  About
+                </router-link>
+
+              </md-menu-item>
+              <md-menu-item>
+                <a href="https://www.binarcode.com/estimate-project/?ref=vuematarial.io" target="_blank">
+                  Custom development
+                </a>
+              </md-menu-item>
+              <md-menu-item>
+                <a href="https://github.com/vuematerial/webpack" target="_blank">
+                  Webpack SPA
+                </a>
+              </md-menu-item>
+              <md-menu-item>
+                <a href="https://github.com/vuematerial/nuxtjs" target="_blank">
+                  Nuxt.js
+                </a>
+              </md-menu-item>
+
+              <md-menu-item>
+                <a href="https://codesandbox.io/s/github/vuematerial/examples/tree/master/examples/quick-start" target="_blank">
+                  Codesandbox
+                </a>
+              </md-menu-item>
+            </md-menu-content>
+          </md-menu>
         </div>
 
         <md-button href="http://github.com/vuematerial/vue-material" target="_blank" class="md-icon-button">
@@ -312,5 +351,19 @@
     }
   }
 
+  .md-menu{
+    margin: 6px 8px;
+  }
+
+  .md-menu-content{
+    background: #303030;
+    z-index: 9999;
+    >>>.md-list-item-content {
+      a{
+        color: inherit;
+      }
+    }
+  }
+
 
 </style>

docs/app/template/MainNavContent.vue

@@ -25,7 +25,7 @@
       <router-link to="/themes/prebuilt">{{ $t('pages.themePrebuilt.nav') }}</router-link>
       <router-link to="/themes/configuration">{{ $t('pages.themeConfiguration.nav') }}</router-link>
       <router-link to="/themes/advanced">{{ $t('pages.themeAdvanced.nav') }}</router-link>
-      <router-link to="/premium-themes">{{ $t('pages.home.premium') }}</router-link>
+      <router-link to="/premium-themes" class="premium-themes">{{ $t('pages.home.premium') }} <md-badge class="md-square" md-content="New" /></router-link>
       <a href="https://www.binarcode.com/estimate-project/?ref=vuematarial.io" target="_blank">{{ $t('pages.home.custom') }}</a>
 
     </div>
@@ -133,10 +133,8 @@
       responsiveLinks(){
         if (window.innerWidth < 601) {
           this.responsive = true;
-          console.log('mai mic ');
         } else {
           this.responsive = false;
-          console.log('mai mare ');
         }
       }
     }
@@ -145,6 +143,7 @@
 
 <style lang="scss" scoped>
   @import "~vue-material/theme/engine";
+  @import "~vue-material/components/MdLayout/mixins";
 
   .main-nav-content {
     a {
@@ -166,4 +165,18 @@
     margin-bottom: 16px;
     margin-left: 20px;
   }
+
+  .premium-themes{
+    display: flex !important;
+    position: relative;
+  }
+  .md-badge{
+    background: green;
+    right: -15px;
+    top: 5px;
+    @include md-layout-xsmall {
+      left: 55%;
+      right: unset;
+    }
+  }
 </style>