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

refactor: small fixes and refactors, update coreui styles

Browse Source
This commit is contained in:
woothu
2019-10-15 10:53:25 +02:00
parent 14ba9223f9
commit 26d30c2fb0
11 changed files with 144 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/containers/TheHeader.vue
+5 -5
View File
@@ -2,7 +2,7 @@
<CHeader fixed with-subheader light>
<CSidebarToggler
class="c-header-toggler ml-3"
v-c-emit-root-event:c-sidebar-toggle
v-c-emit-root-event:toggle-sidebar
/>
<img
class="c-header-brand mx-auto d-lg-none"
@@ -11,12 +11,12 @@
height="46"
alt="CoreUI Logo"
/>
<ul class="c-header-nav d-md-down-none mr-auto">
<CHeaderNav class="d-md-down-none mr-auto">
<CHeaderNavItem class="px-3" to="/dashboard">Dashboard</CHeaderNavItem>
<CHeaderNavItem class="px-3" to="/users" exact>Users</CHeaderNavItem>
<CHeaderNavItem class="px-3">Settings</CHeaderNavItem>
</ul>
<ul class="c-header-nav mr-4">
</CHeaderNav>
<CHeaderNav class="mr-4">
<CHeaderNavItem class="d-md-down-none mx-2">
<i class="cui-bell"></i>
</CHeaderNavItem>
@@ -27,7 +27,7 @@
<i class="cui-envelope-open"></i>
</CHeaderNavItem>
<TheHeaderDropdownAccnt/>
</ul>
</CHeaderNav>
<div class="c-subheader px-3">
<CBreadcrumbRouter class="border-0"/>
</div>
src/containers/TheSidebar.vue
+6 -2
View File
@@ -13,7 +13,7 @@
<CRenderFunction :contentToRender="nav"/>
<!-- <CSidebarFooter/> -->
<CSidebarMinimizer
class="d-md-down-none"
class="d-md-down-none c-sidebar-minimized-unfoldable"
@click.native="minimize = !minimize"
/>
</CSidebar>
@@ -26,8 +26,12 @@ export default {
data () {
return {
minimize: false,
nav
nav,
show: null
}
},
mounted () {
this.$root.$on('toggle-sidebar', () => this.show = !this.show)
}
}
</script>
src/views/base/Cards.vue
+3 -1
View File
@@ -66,7 +66,9 @@
Card with label
<CBadge pill variant="danger" class="float-right">42</CBadge>
</CCardHeader>
<CCardBody :body-html="loremIpsum"/>
<CCardBody>
{{loremIpsum}}
</CCardBody>
</CCard>
</CCol>
</CRow>
src/views/base/Forms.vue
+11 -7
View File
@@ -210,14 +210,14 @@
</CCol>
<CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
<CFormRadio
v-for="option in options"
v-for="(option, optionIndex) in options"
:key="option"
:label="option"
type="radio"
:value="option"
:custom="key > 1"
:name="`Option 1${key}`"
checked="Option 1"
:checked="optionIndex === key"
:inline="key % 2 === 1"
/>
</CCol>
@@ -561,7 +561,7 @@
<CFormInput placeholder="Username">
<template #prepend>
<CDropdown
button-html="Action"
togglerText="Action"
variant="primary"
>
<CDropdownItem>Action</CDropdownItem>
@@ -578,7 +578,7 @@
>
<template #append>
<CDropdown
button-html="Action"
togglerText="Action"
variant="primary"
right
>
@@ -593,7 +593,7 @@
<template #prepend>
<CDropdown
button-html="Split"
togglerText="Split"
variant="primary"
split
>
@@ -606,7 +606,7 @@
<template #append>
<CDropdown
button-html="Action"
togglerText="Action"
variant="primary"
right
>
@@ -861,7 +861,11 @@ export default {
options: ['Option 1', 'Option 2', 'Option 3'],
selectOptions: [
'Option 1', 'Option 2', 'Option 3',
{ value: ['some value', 'another value'], label: 'Option 4' }],
{
value: ['some value', 'another value'],
label: 'Selected option'
}
],
selectedOption: ['some value', 'another value'],
formCollapsed: true,
src/views/base/Navbars.vue
+5 -5
View File
@@ -20,7 +20,7 @@
toggleable="md"
variant="info"
>
<CNavbarToggle @click="show=!show"/>
<CNavbarToggler @click="show=!show"/>
<CNavbarBrand href="#">NavBar</CNavbarBrand>
<CCollapse :show="show" navbar>
<CNavbarNav>
@@ -42,7 +42,7 @@
</CForm>
<CDropdown
button-html="Lang"
toggler-text="Lang"
nav
placement="bottom-end"
>
@@ -54,7 +54,7 @@
<CDropdown
nav
buttonHtml="<em>User</em>"
toggler-text="User"
placement="bottom-end"
>
<CDropdownItem>Profile</CDropdownItem>
@@ -111,7 +111,7 @@
<CNavItem href="#">Link</CNavItem>
<!-- Navbar dropdowns -->
<CDropdown
button-html="Lang"
toggler-text="Lang"
right
nav
>
@@ -121,7 +121,7 @@
<CDropdownItem>FA</CDropdownItem>
</CDropdown>
<CDropdown
button-html="User"
toggler-text="User"
right
nav
>
src/views/base/ProgressBars.vue
+10 -10
View File
@@ -16,7 +16,7 @@
</div>
</CCardHeader>
<CCardBody>
<CProgress :value="counter" :max="max" show-progress animated></CProgress>
<CProgress :value="counter" :max="max" show-percentage animated></CProgress>
<CProgress class="mt-1" :max="max" show-value>
<CProgressBar :value="counter*(6/10)" variant="success"/>
<CProgressBar :value="counter*(2.5/10)" variant="warning"/>
@@ -41,11 +41,11 @@
<h6>Value label</h6>
<CProgress :value="value" :max="max2" show-value class="mb-3"/>
<h6>Progress label</h6>
<CProgress :value="value" :max="max2" show-progress class="mb-3"/>
<CProgress :value="value" :max="max2" show-percentage class="mb-3"/>
<h6>Value label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-value class="mb-3"/>
<h6>Progress label with precision</h6>
<CProgress :value="value" :max="max2" :precision="2" show-progress class="mb-3"/>
<CProgress :value="value" :max="max2" :precision="2" show-percentage class="mb-3"/>
</CCardBody>
</CCard>
<CCard>
@@ -71,10 +71,10 @@
</CCardHeader>
<CCardBody>
<h6>Default height</h6>
<CProgress :value="value3" show-progress class="mb-3"/>
<CProgress :value="value3" show-percentage class="mb-3"/>
<h6>Custom heights</h6>
<CProgress height="2rem" :value="value3" show-progress class="mb-2"/>
<CProgress height="20px" :value="value3" show-progress class="mb-2"/>
<CProgress height="2rem" :value="value3" show-percentage class="mb-2"/>
<CProgress height="20px" :value="value3" show-percentage class="mb-2"/>
<CProgress height="2px" :value="value3"/>
</CCardBody>
</CCard>
@@ -184,7 +184,7 @@
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress show-progress :max="max3" class="mb-3">
<CProgress show-percentage :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]"/>
<CProgressBar variant="success" :value="values[1]"/>
<CProgressBar variant="info" :value="values[2]"/>
@@ -195,9 +195,9 @@
<CProgressBar variant="info" :value="values[2]"/>
</CProgress>
<CProgress :max="max3" class="mb-3">
<CProgressBar variant="primary" :value="values[0]" show-progress/>
<CProgressBar variant="success" :value="values[1]" animated show-progress/>
<CProgressBar variant="info" :value="values[2]" striped show-progress/>
<CProgressBar variant="primary" :value="values[0]" show-percentage/>
<CProgressBar variant="success" :value="values[1]" animated show-percentage/>
<CProgressBar variant="info" :value="values[2]" striped show-percentage/>
</CProgress>
</CCardBody>
</CCard>
src/views/base/Table.vue
+1 -1
View File
@@ -8,7 +8,7 @@
:fixed="fixed"
:items="items"
:fields="fields"
:per-page="small ? 10 : 5"
:items-per-page="small ? 10 : 5"
:dark="dark"
pagination
>
src/views/buttons/ButtonGroups.vue
+64 -70
View File
@@ -125,78 +125,72 @@
</div> -->
</CCardHeader>
<CCardBody>
<div>
<CButtonToolbar aria-label="Toolbar with button groups">
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
<CButton variant="secondary">&lsaquo;</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
<CButton variant="secondary">Redo</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton variant="secondary">&rsaquo;</CButton>
<CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<CButtonToolbar aria-label="Toolbar with button groups" >
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
<CButton variant="secondary">&lsaquo;</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
<CButton variant="secondary">Redo</CButton>
</CButtonGroup>
<CButtonGroup class="mx-1">
<CButton variant="secondary">&rsaquo;</CButton>
<CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
</CButtonGroup>
</CButtonToolbar>
<hr class="d-sm-down-none"/>
<div>
<CButtonToolbar
aria-label="Toolbar with button groups and input groups"
class="d-sm-down-none"
>
<CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
</CButtonGroup>
<CFormInput
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="$"
append-html=".00"
value="100"
/>
<CFormSelect
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="Size"
value="Medium"
:options="['Large','Medium','Small']"
custom
/>
<CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<CButtonToolbar
aria-label="Toolbar with button groups and input groups"
class="d-sm-down-none"
>
<CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
</CButtonGroup>
<CFormInput
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="$"
append-html=".00"
value="100"
/>
<CFormSelect
class="mb-0 w-25 mx-1"
size="sm"
prepend-html="Size"
value="Medium"
:options="['Large','Medium','Small']"
custom
/>
<CButtonGroup size="sm" class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
<hr/>
<div>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="mx-1 d-sm-down-none">
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
</CButtonGroup>
<CDropdown
variant="secondary"
class="mx-1"
placement="bottom-end"
button-content="Menu"
>
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButtonGroup class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</div>
<CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
<CButtonGroup class="mx-1 d-sm-down-none">
<CButton variant="secondary">New</CButton>
<CButton variant="secondary">Edit</CButton>
<CButton variant="secondary">Undo</CButton>
</CButtonGroup>
<CDropdown
variant="secondary"
class="mx-1"
placement="bottom-end"
button-content="Menu"
>
<CDropdownItem>Item 1</CDropdownItem>
<CDropdownItem>Item 2</CDropdownItem>
<CDropdownItem>Item 3</CDropdownItem>
</CDropdown>
<CButtonGroup class="mx-1">
<CButton variant="secondary">Save</CButton>
<CButton variant="secondary">Cancel</CButton>
</CButtonGroup>
</CButtonToolbar>
</CCardBody>
</CCard>
</CCol>
src/views/notifications/Modals.vue
+11 -11
View File
@@ -54,7 +54,7 @@
<!-- Modal Component -->
<CModal
title="Modal title"
:visible.sync="myModal"
:show.sync="myModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -66,7 +66,7 @@
<CModal
title="Modal title"
size="lg"
:visible.sync="largeModal"
:show.sync="largeModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -78,7 +78,7 @@
<CModal
title="Modal title"
size="sm"
:visible.sync="smallModal"
:show.sync="smallModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -90,7 +90,7 @@
<CModal
title="Modal title"
:visible.sync="primaryModal"
:show.sync="primaryModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -102,7 +102,7 @@
<CModal
title="Modal title"
variant="success"
:visible.sync="successModal"
:show.sync="successModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -114,7 +114,7 @@
<CModal
title="Modal title"
variant="warning"
:visible.sync="warningModal"
:show.sync="warningModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -126,7 +126,7 @@
<CModal
title="Modal title"
variant="danger"
:visible.sync="dangerModal"
:show.sync="dangerModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -138,7 +138,7 @@
<CModal
title="Modal title"
variant="info"
:visible.sync="infoModal"
:show.sync="infoModal"
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -148,7 +148,7 @@
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</CModal>
<CModal
:visible.sync="darkModal"
:show.sync="darkModal"
:no-close-on-backdrop="true"
:centered="true"
title="Modal title 2"
@@ -166,8 +166,8 @@
<CButtonClose @click="hide()" class="text-white"/>
</template>
<template #footer="{hide}">
<CButton @click="hide()" variant="danger">Discard</CButton>
<CButton @click="hide(true)" variant="success">Accept</CButton>
<CButton @click="darkModal = false" variant="danger">Discard</CButton>
<CButton @click="darkModal = false" variant="success">Accept</CButton>
</template>
</CModal>
</div>
src/views/users/UsersData.js
+27 -26
View File
@@ -1,30 +1,31 @@
const usersData = [
{id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
{id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
{id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
{id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
{id: 23, name: 'Einar Randall', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
{id: 24, name: 'Félix Troels', registered: '2018/03/21', role: 'Staff', status: 'Active'},
{id: 25, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
{id: 42, name: 'Ford Prefex', registered: '2001/05/21', role: 'Alien', status: 'Don\'t panic!'}
{ username: 'Samppa Nori', registered: '2012/01/01', role: 'Member', status: 'Active'},
{ username: 'Estavan Lykos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{ username: 'Chetan Mohamed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{ username: 'Derick Maximinus', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{ username: 'Friderik Dávid', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{ username: 'Yiorgos Avraamu', registered: '2012/01/01', role: 'Member', status: 'Active'},
{ username: 'Avram Tarasios', registered: '2012/02/01', role: 'Staff', status: 'Banned', _classes: 'table-success'},
{ username: 'Quintin Ed', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{ username: 'Enéas Kwadwo', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{ username: 'Agapetus Tadeáš', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{ username: 'Carwyn Fachtna', registered: '2012/01/01', role: 'Member', status: 'Active', _classes: 'table-success'},
{ username: 'Nehemiah Tatius', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{ username: 'Ebbe Gemariah', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{ username: 'Eustorgios Amulius', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{ username: 'Leopold Gáspár', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{ username: 'Pompeius René', registered: '2012/01/01', role: 'Member', status: 'Active'},
{ username: 'Paĉjo Jadon', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{ username: 'Micheal Mercurius', registered: '2012/02/01', role: 'Admin', status: 'Inactive'},
{ username: 'Ganesha Dubhghall', registered: '2012/03/01', role: 'Member', status: 'Pending'},
{ username: 'Hiroto Šimun', registered: '2012/01/21', role: 'Staff', status: 'Active'},
{ username: 'Vishnu Serghei', registered: '2012/01/01', role: 'Member', status: 'Active'},
{ username: 'Zbyněk Phoibos', registered: '2012/02/01', role: 'Staff', status: 'Banned'},
{ username: 'Einar Randall', registered: '2012/02/01', role: 'Admin', status: 'Inactive', _classes: 'table-danger'},
{ username: 'Félix Troels', registered: '2012/03/21', role: 'Staff', status: 'Active'},
{ username: 'Aulus Agmundr', registered: '2012/01/01', role: 'Member', status: 'Pending'}
]
export default usersData