sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

- Update Vue to 2.5.2

Browse Source 
- Update Vue Router to 3.0.0
- Fix height and position problems with .fixed-footer
- Fix mobile sidebar height
- Fix mobile breadcrumb position with .fixed-breadcrumb
- Add new navbar toggler icon
- Update old bootstrap classes ex. `hidden-sm-down`
This commit is contained in:
Łukasz Holeczek
2017-10-16 16:08:00 +02:00
parent 96f2affe25
commit f244f02585
29 changed files with 249 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Vue_Starter/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@coreui/vue",
"version": "1.0.1",
"version": "1.0.2",
"description": "",
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
"private": true,
Vue_Starter/scss/core/_dropdown-menu-right.scss
+1 -1
View File
@@ -5,4 +5,4 @@
right: auto;
}
}
}
}
Vue_Starter/scss/core/_footer.scss
+2 -2
View File
@@ -1,9 +1,9 @@
.app-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 $spacer;
color: $footer-color;
background: $footer-bg;
flex-wrap: wrap;
align-items: center;
@include borders($footer-borders);
}
Vue_Starter/scss/core/_layout.scss
+16 -16
View File
@@ -11,8 +11,8 @@
app-dashboard,
app-root {
display: flex;
min-height: 100vh;
flex-direction: column;
min-height: 100vh;
}
.app-header {
@@ -26,12 +26,12 @@ app-root {
.app-body {
display: flex;
flex-direction: row;
overflow-x: hidden;
flex-grow: 1;
overflow-x: hidden;
.main {
min-width: 0;
flex: 1;
min-width: 0;
}
.sidebar {
@@ -269,9 +269,11 @@ app-root {
.footer-fixed {
.app-footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: $zindex-sticky;
width: 100%;
height: $footer-height;
}
.app-body {
@@ -328,17 +330,26 @@ app-root {
margin-top: $navbar-height;
}
.breadcrumb-fixed {
.main:nth-child(2) .breadcrumb {
right: auto;
left: auto;
width: 100%;
}
}
.sidebar,
.sidebar-fixed .sidebar {
position: fixed;
z-index: $zindex-sticky - 1;
width: $mobile-sidebar-width;
height: 100%;
// height: 100%;
margin-left: - $mobile-sidebar-width;
.sidebar-nav,
.nav {
width: $mobile-sidebar-width !important;
height: calc(100vh - #{$navbar-height});
}
.sidebar-minimizer {
@@ -364,10 +375,6 @@ app-root {
.sidebar {
width: $mobile-sidebar-width;
margin-left: 0;
.sidebar-nav {
height: calc(100vh - #{$navbar-height});
}
}
.main {
@@ -375,11 +382,4 @@ app-root {
margin-left: $mobile-sidebar-width !important;
}
}
.breadcrumb-fixed {
.main .breadcrumb {
right: 0 !important;
left: 0 !important;
}
}
}
Vue_Starter/scss/core/_navbar.scss
+12 -2
View File
@@ -1,7 +1,7 @@
.app-header.navbar {
position: relative;
height: $navbar-height;
flex-direction: row;
height: $navbar-height;
padding: 0;
margin: 0;
background-color: $navbar-bg;
@@ -22,7 +22,17 @@
}
.navbar-toggler {
color: $navbar-color;
min-width: 50px;
padding: $navbar-toggler-padding-y 0;
&:hover .navbar-toggler-icon {
background-image: $navbar-toggler-icon-hover;
}
}
.navbar-toggler-icon {
height: 23px;
background-image: $navbar-toggler-icon;
}
.navbar-nav {
Vue_Starter/scss/core/_sidebar.scss
+1 -1
View File
@@ -78,8 +78,8 @@
.nav {
@include sidebar-width($sidebar-borders, $sidebar-width);
min-height: 100%;
flex-direction: column;
min-height: 100%;
}
.nav-title {
Vue_Starter/scss/core/_variables.scss
+3
View File
@@ -69,6 +69,9 @@ $navbar-hover-color: $gray-800 !default;
$navbar-active-color: $gray-800 !default;
$navbar-disabled-color: $gray-300 !default;
$navbar-toggler-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-toggler-icon-hover: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
// Sidebar
$sidebar-width: 200px !default;
Vue_Starter/scss/style.scss
+2 -1
View File
@@ -1,10 +1,11 @@
/*!
* CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.1
* @version v1.0.2
* @link http://coreui.io
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
* @license MIT
*/
// Override Boostrap variables
@import "bootstrap-variables";
Vue_Starter/src/components/Breadcrumb.vue
+3 -2
View File
@@ -1,7 +1,8 @@
<template>
<ol class="breadcrumb">
<li class="breadcrumb-item" v-for="(item, index) in list"><span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
<router-link :to="item.path" v-else>{{ showName(item) }}</router-link>
<li class="breadcrumb-item" v-for="(item, index) in list">
<span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
<router-link :to="item" v-else>{{ showName(item) }}</router-link>
</li>
</ol>
</template>
Vue_Starter/src/components/Header.vue
+9 -3
View File
@@ -1,9 +1,15 @@
<template>
<header class="app-header navbar">
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">&#9776;</button>
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">
<span class="navbar-toggler-icon"></span>
</button>
<b-link class="navbar-brand" to="#"></b-link>
<button class="navbar-toggler sidebar-toggler d-md-down-none mr-auto" type="button" @click="sidebarToggle">&#9776;</button>
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">&#9776;</button>
<button class="navbar-toggler sidebar-toggler d-md-down-none mr-auto" type="button" @click="sidebarToggle">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">
<span class="navbar-toggler-icon"></span>
</button>
</header>
</template>
<script>