xclele/vue-material-kit
1
0
Fork 0
mirror of https://github.com/creativetimofficial/vue-material-kit.git synced 2025-05-23 12:14:22 +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;
margin-bottom: 20px;
.md-toolbar-section-start {
.md-list {
display: none;
}
}
&.md-transparent{
background-color: transparent !important;
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 {
position: fixed;
z-index: 1030;
@ -225,6 +226,7 @@
.md-title {
height: 50px;
min-width: 50px;
display: flex;
align-items: center;
font-size: 18px;

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

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

11
src/layout/MainNavbar.vue
View File

@ -12,6 +12,10 @@
</md-button>
<div class="md-collapse">
<div class="md-collapse-wrapper">
<mobile-menu nav-mobile-section-start="false">
<!-- Here you can add your items from the section-start of your toolbar -->
</mobile-menu>
<md-list>
<li class="md-list-item" v-if="!showDownload">
<a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
@ -23,7 +27,7 @@
</md-button>
<ul class="dropdown-menu dropdown-with-icons">
<li>
<a href="/">
<a href="#/">
<i class="material-icons">layers</i>
<p>All Components</p>
</a>
@ -102,6 +106,7 @@
</div>
</div>
</div>
</div>
</md-toolbar>
</template>
@ -119,7 +124,11 @@ function resizeThrottler(actualResizeHandler) {
}
}
import MobileMenu from "@/layout/MobileMenu";
export default {
components: {
MobileMenu
},
props: {
type: {
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="brand">
<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>
@ -128,11 +128,11 @@
<div class="section section-download" id="downloadSection">
<div class="container">
<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>
<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 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://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>
@ -140,12 +140,15 @@
<br><br>
<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>
<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 class="md-layout-item md-size-50 md-small-size-100 mx-auto">
<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 class="md-layout-item md-size-40 md-small-size-66 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>
</div>
@ -239,4 +242,10 @@ export default {
margin-left: 5px;
}
}
@media all and (min-width: 991px) {
.btn-container {
display: flex;
}
}
</style>

2
src/views/Login.vue
View File

@ -3,7 +3,7 @@
<div class="section page-header header-filter" :style="headerStyle">
<div class="container">
<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">
<h4 slot="title" class="card-title">Login</h4>
<md-button slot="buttons" to="#facebook" class="md-just-icon md-simple md-white">