xclele/vue-material-kit
1
0
Fork 0
mirror of https://github.com/creativetimofficial/vue-material-kit.git synced 2025-05-23 21:04:21 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

changes for responsive

Browse Source
This commit is contained in:
Dragos 2018-09-21 12:31:25 +03:00
parent 2350776429
commit 1653795d32
6 changed files with 162 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/assets/scss/material-kit/_navbars.scss
View File

@ -5,12 +5,6 @@
border-radius: 3px; border-radius: 3px;
margin-bottom: 20px; margin-bottom: 20px;
.md-toolbar-section-start {
.md-list {
display: none;
}
}
&.md-transparent{ &.md-transparent{
background-color: transparent !important; background-color: transparent !important;
box-shadow: none; box-shadow: none;
@ -26,6 +20,13 @@
} }
} }
.md-toolbar-section-end .md-list {
justify-content: flex-end;
}
.md-toolbar-section-start .md-list {
justify-content: flex-start;
}
&.md-absolute { &.md-absolute {
position: fixed; position: fixed;
z-index: 1030; z-index: 1030;
@ -225,6 +226,7 @@
.md-title { .md-title {
height: 50px; height: 50px;
min-width: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 18px; font-size: 18px;

37
src/assets/scss/material-kit/_responsive.scss
View File

@ -20,6 +20,12 @@
background-color: rgba(0, 0, 0, 0.45); background-color: rgba(0, 0, 0, 0.45);
} }
.md-toolbar-section-start {
.md-list {
display: none;
}
}
.footer .container { .footer .container {
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
@ -61,6 +67,10 @@
flex-flow: column; flex-flow: column;
} }
.md-collapse-wrapper {
height: calc(100vh - 61px);
}
.dropdown-toggle:not(.md-button):after, .dropdown-toggle:not(.md-button):after,
.dropdown-toggle .md-ripple:after, .dropdown-toggle .md-ripple:after,
.md-list-item .md-button.md-button-link:not(.md-just-icon):not(.md-btn-fab):not(.md-icon-button):not(.md-toolbar-toggle) .md-ripple .md-button-content i, .md-list-item .md-button.md-button-link:not(.md-just-icon):not(.md-btn-fab):not(.md-icon-button):not(.md-toolbar-toggle) .md-ripple .md-button-content i,
@ -134,15 +144,16 @@
display: none; display: none;
} }
&:after { }
width: calc(100% - 30px);
content: "";
display: block;
height: 1px;
margin-left: 15px;
background-color: #e5e5e5;
}
.nav-mobile-section-start .md-list-item:last-child:after,
.md-list-item:after {
width: calc(100% - 30px);
content: "";
display: block;
height: 1px;
margin-left: 15px;
background-color: #e5e5e5;
} }
.md-list-item-container { .md-list-item-container {
@ -161,7 +172,6 @@
position: relative; position: relative;
z-index: 4; z-index: 4;
overflow-y:scroll; overflow-y:scroll;
height: calc(100vh - 61px);
width: 100%; width: 100%;
} }
&::before{ &::before{
@ -380,6 +390,11 @@
.md-tabs-navigation { .md-tabs-navigation {
flex-direction: column; flex-direction: column;
.md-button {
max-width: none;
margin: 0 !important;
}
} }
.modal-wrapper .modal-container { .modal-wrapper .modal-container {
@ -411,6 +426,10 @@
max-width: 960px; max-width: 960px;
} }
.md-list.nav-mobile-menu {
display: none;
}
.hidden-lg { .hidden-lg {
display: none !important; display: none !important;
} }

175
src/layout/MainNavbar.vue
View File

@ -12,93 +12,98 @@
</md-button> </md-button>
<div class="md-collapse"> <div class="md-collapse">
<md-list> <div class="md-collapse-wrapper">
<li class="md-list-item" v-if="!showDownload"> <mobile-menu nav-mobile-section-start="false">
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown"> <!-- Here you can add your items from the section-start of your toolbar -->
<div class="md-list-item-content"> </mobile-menu>
<drop-down direction="down"> <md-list>
<md-button slot="title" class="md-button md-button-link md-white md-simple dropdown-toggle" data-toggle="dropdown"> <li class="md-list-item" v-if="!showDownload">
<i class="material-icons">apps</i> <a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
<p>Components</p> <div class="md-list-item-content">
</md-button> <drop-down direction="down">
<ul class="dropdown-menu dropdown-with-icons"> <md-button slot="title" class="md-button md-button-link md-white md-simple dropdown-toggle" data-toggle="dropdown">
<li> <i class="material-icons">apps</i>
<a href="/"> <p>Components</p>
<i class="material-icons">layers</i> </md-button>
<p>All Components</p> <ul class="dropdown-menu dropdown-with-icons">
</a> <li>
</li> <a href="#/">
<li> <i class="material-icons">layers</i>
<a href="https://demos.creative-tim.com/vue-material-kit/documentation/" > <p>All Components</p>
<i class="material-icons">content_paste</i> </a>
<p>Documentation</p> </li>
</a> <li>
</li> <a href="https://demos.creative-tim.com/vue-material-kit/documentation/" >
</ul> <i class="material-icons">content_paste</i>
</drop-down> <p>Documentation</p>
</div> </a>
</a> </li>
</li> </ul>
</drop-down>
</div>
</a>
</li>
<md-list-item href="https://demos.creative-tim.com/vue-material-kit/documentation/" target="_blank" v-if="showDownload"> <md-list-item href="https://demos.creative-tim.com/vue-material-kit/documentation/" target="_blank" v-if="showDownload">
<i class="material-icons">content_paste</i> <i class="material-icons">content_paste</i>
<p>Documentation</p> <p>Documentation</p>
</md-list-item> </md-list-item>
<md-list-item href="javascript:void(0)" @click="scrollToElement()" v-if="showDownload"> <md-list-item href="javascript:void(0)" @click="scrollToElement()" v-if="showDownload">
<i class="material-icons">cloud_download</i> <i class="material-icons">cloud_download</i>
<p>Download</p> <p>Download</p>
</md-list-item> </md-list-item>
<li class="md-list-item" v-else> <li class="md-list-item" v-else>
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown"> <a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
<div class="md-list-item-content"> <div class="md-list-item-content">
<drop-down direction="down"> <drop-down direction="down">
<md-button slot="title" class="md-button md-button-link md-white md-simple dropdown-toggle" data-toggle="dropdown"> <md-button slot="title" class="md-button md-button-link md-white md-simple dropdown-toggle" data-toggle="dropdown">
<i class="material-icons">view_carousel</i> <i class="material-icons">view_carousel</i>
<p>Examples</p> <p>Examples</p>
</md-button> </md-button>
<ul class="dropdown-menu dropdown-with-icons"> <ul class="dropdown-menu dropdown-with-icons">
<li> <li>
<a href="#/landing"> <a href="#/landing">
<i class="material-icons">view_day</i> <i class="material-icons">view_day</i>
<p>Landing Page</p> <p>Landing Page</p>
</a> </a>
</li> </li>
<li> <li>
<a href="#/login"> <a href="#/login">
<i class="material-icons">fingerprint</i> <i class="material-icons">fingerprint</i>
<p>Login Page</p> <p>Login Page</p>
</a> </a>
</li> </li>
<li> <li>
<a href="#/profile"> <a href="#/profile">
<i class="material-icons">account_circle</i> <i class="material-icons">account_circle</i>
<p>Profile Page</p> <p>Profile Page</p>
</a> </a>
</li> </li>
</ul> </ul>
</drop-down> </drop-down>
</div> </div>
</a> </a>
</li> </li>
<md-list-item href="https://twitter.com/CreativeTim" target="_blank"> <md-list-item href="https://twitter.com/CreativeTim" target="_blank">
<i class="fab fa-twitter"></i> <i class="fab fa-twitter"></i>
<p class="hidden-lg">Twitter</p> <p class="hidden-lg">Twitter</p>
<md-tooltip md-direction="bottom">Follow us on Twitter</md-tooltip> <md-tooltip md-direction="bottom">Follow us on Twitter</md-tooltip>
</md-list-item> </md-list-item>
<md-list-item href="https://www.facebook.com/CreativeTim" target="_blank"> <md-list-item href="https://www.facebook.com/CreativeTim" target="_blank">
<i class="fab fa-facebook-square"></i> <i class="fab fa-facebook-square"></i>
<p class="hidden-lg">Facebook</p> <p class="hidden-lg">Facebook</p>
<md-tooltip md-direction="bottom">Like us on Facebook</md-tooltip> <md-tooltip md-direction="bottom">Like us on Facebook</md-tooltip>
</md-list-item> </md-list-item>
<md-list-item href="https://www.instagram.com/CreativeTimOfficial" target="_blank"> <md-list-item href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
<i class="fab fa-instagram"></i> <i class="fab fa-instagram"></i>
<p class="hidden-lg">Instagram</p> <p class="hidden-lg">Instagram</p>
<md-tooltip md-direction="bottom">Follow us on Instagram</md-tooltip> <md-tooltip md-direction="bottom">Follow us on Instagram</md-tooltip>
</md-list-item> </md-list-item>
</md-list> </md-list>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -119,7 +124,11 @@ function resizeThrottler(actualResizeHandler) {
} }
} }
import MobileMenu from "@/layout/MobileMenu";
export default { export default {
components: {
MobileMenu
},
props: { props: {
type: { type: {
type: String, type: String,

17
src/layout/MobileMenu.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<md-list class="nav-mobile-menu nav-mobile-section-start" v-if="navMobileSectionStart === 'true'">
<slot></slot>
</md-list>
</template>
<script>
export default {
name: "mobile-menu",
props: {
navMobileSectionStart: {
type: String,
default: "false"
}
}
};
</script>

23
src/views/Index.vue
View File

@ -5,7 +5,7 @@
<div class="md-layout-item"> <div class="md-layout-item">
<div class="brand"> <div class="brand">
<h1>Vue Material Kit.</h1> <h1>Vue Material Kit.</h1>
<h3>A Badass VueMaterial.io Kit based on Material Design.</h3> <h3>Badass VueJs Kit based on Material Design.</h3>
</div> </div>
</div> </div>
</div> </div>
@ -128,11 +128,11 @@
<div class="section section-download" id="downloadSection"> <div class="section section-download" id="downloadSection">
<div class="container"> <div class="container">
<div class="md-layout text-center"> <div class="md-layout text-center">
<div class="md-layout-item md-size-66 mx-auto"> <div class="md-layout-item md-size-66 md-small-size-100 mx-auto">
<h2>Do you love this UI Kit?</h2> <h2>Do you love this UI Kit?</h2>
<h4>Cause if you do, it can be yours for FREE. Hit the buttons below to navigate to our website where you can find the kit. Our friends from <a href="https://themeisle.com/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website" target="_blank">ThemeIsle</a> created a Wordpress Theme which can be also downloaded for free. Start a new project or give an old Bootstrap project a new look!</h4> <h4>Cause if you do, it can be yours for FREE. Hit the buttons below to navigate to our website where you can find the kit. Our friends from <a href="https://themeisle.com/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website" target="_blank">ThemeIsle</a> created a Wordpress Theme which can be also downloaded for free. Start a new project or give an old Bootstrap project a new look!</h4>
</div> </div>
<div class="md-layout-item md-size-50 md-small-size-66 mx-auto"> <div class="md-layout-item md-size-50 md-small-size-100 mx-auto">
<md-button href="https://www.creative-tim.com/product/material-kit" target="_blank" class="md-primary md-lg"><i class="fab fa-html5"></i> Free HTML Download</md-button> <md-button href="https://www.creative-tim.com/product/material-kit" target="_blank" class="md-primary md-lg"><i class="fab fa-html5"></i> Free HTML Download</md-button>
<md-button href="https://themeisle.com/themes/hestia/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website" class="md-primary md-lg" target="_blank"><i class="fab fa-wordpress"></i> Wordpress Theme</md-button> <md-button href="https://themeisle.com/themes/hestia/?utm_campaign=mkfree-hestia&amp;utm_source=creativetim&amp;utm_medium=website" class="md-primary md-lg" target="_blank"><i class="fab fa-wordpress"></i> Wordpress Theme</md-button>
</div> </div>
@ -140,12 +140,15 @@
<br><br> <br><br>
<div class="md-layout text-center"> <div class="md-layout text-center">
<div class="md-layout-item md-size-66 mx-auto"> <div class="md-layout-item md-size-66 md-small-size-100 mx-auto">
<h2>Want more?</h2> <h2>Want more?</h2>
<h4>We've just launched <a href="https://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-mk-demos" target="_blank">Material Kit PRO</a>. It has a huge number of components, sections and example pages. Start Your Development With A Badass Bootstrap UI Kit inspired by Material Design.</h4> <h4>We've just launched <a href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-mk-demos" target="_blank">Vue Material Dashboard PRO</a>. It has a huge number of components, sections and example pages. Start Your Development With A Badass Bootstrap UI Kit inspired by Material Design.</h4>
</div> </div>
<div class="md-layout-item md-size-40 md-small-size-66 mx-auto"> <div class="md-layout-item md-size-50 md-small-size-100 mx-auto">
<md-button href="https://demos.creative-tim.com/material-kit-pro/presentation.html?ref=utp-mk-demos" class="md-button md-rose md-lg md-upgrade" target="_blank"><md-icon>unarchive</md-icon> Upgrade to PRO</md-button> <div class="btn-container">
<md-button href="https://www.creative-tim.com/product/vue-material-kit-pro?ref=utp-vmk-demos" class="md-button md-rose md-lg md-upgrade disabled" target="_blank"><md-icon>unarchive</md-icon>Vue Material Kit PRO</md-button>
<md-button href="https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=utp-vmk-demos" class="md-button md-rose md-lg md-upgrade" target="_blank"><md-icon>unarchive</md-icon>Vue Material Dashboard PRO</md-button>
</div>
</div> </div>
</div> </div>
@ -239,4 +242,10 @@ export default {
margin-left: 5px; margin-left: 5px;
} }
} }
@media all and (min-width: 991px) {
.btn-container {
display: flex;
}
}
</style> </style>

2
src/views/Login.vue
View File

@ -3,7 +3,7 @@
<div class="section page-header header-filter" :style="headerStyle"> <div class="section page-header header-filter" :style="headerStyle">
<div class="container"> <div class="container">
<div class="md-layout"> <div class="md-layout">
<div class="md-layout-item md-size-33 md-small-size-66 md-xsmall-size-80 md-medium-size-40 mx-auto"> <div class="md-layout-item md-size-33 md-small-size-66 md-xsmall-size-100 md-medium-size-40 mx-auto">
<login-card header-color="green"> <login-card header-color="green">
<h4 slot="title" class="card-title">Login</h4> <h4 slot="title" class="card-title">Login</h4>
<md-button slot="buttons" to="#facebook" class="md-just-icon md-simple md-white"> <md-button slot="buttons" to="#facebook" class="md-just-icon md-simple md-white">