diff --git a/src/AppMenu.vue b/src/AppMenu.vue index cb3121783..806d1d1ea 100755 --- a/src/AppMenu.vue +++ b/src/AppMenu.vue @@ -16,7 +16,7 @@ Elevation FlexBox FormLayout - Grid System + Grid System Spacing Text diff --git a/src/router.js b/src/router.js index 6a8ba4f0a..5683a95dd 100755 --- a/src/router.js +++ b/src/router.js @@ -317,9 +317,9 @@ export default new Router({ component: () => import('./views/fileupload/FileUploadDemo.vue') }, { - path: '/flexgrid', - name: 'flexgrid', - component: () => import('./views/flexgrid/FlexGridDemo.vue') + path: '/grid', + name: 'grid', + component: () => import('./views/grid/GridDemo.vue') }, { path: '/formlayout', diff --git a/src/views/flexgrid/FlexGridDemo.vue b/src/views/grid/GridDemo.vue similarity index 69% rename from src/views/flexgrid/FlexGridDemo.vue rename to src/views/grid/GridDemo.vue index 98da2e827..a82800057 100755 --- a/src/views/flexgrid/FlexGridDemo.vue +++ b/src/views/grid/GridDemo.vue @@ -1,9 +1,8 @@ diff --git a/src/views/flexgrid/FlexGridDoc.vue b/src/views/grid/GridDoc.vue similarity index 83% rename from src/views/flexgrid/FlexGridDoc.vue rename to src/views/grid/GridDoc.vue index df6a54d87..b351cc0ac 100755 --- a/src/views/flexgrid/FlexGridDoc.vue +++ b/src/views/grid/GridDoc.vue @@ -950,72 +950,30 @@ import 'primeflex/primeflex.css'; <h3>Panels</h3> <div class="p-grid"> <div class="p-col"> - <Panel header="Godfather"> - The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. - His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. - Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, - kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. + <Panel header="Header"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </Panel> </div> <div class="p-col"> - <Panel header="Godfather"> - The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. - His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. - Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, - kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. + <Panel header="Header"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </Panel> </div> <div class="p-col"> - <Panel header="Godfather"> - The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. - His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. - Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family, - kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. + <Panel header="Header"> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </Panel> </div> </div> - -<h3>Sample Layout</h3> -<div class="p-grid sample-layout"> - <div class="p-col-12 p-md-2"> - Menu - </div> - <div class="p-col-12 p-md-10 p-col-nogutter"> - <div class="p-col-12 p-col-nogutter"> - Top Bar - </div> - <div class="p-col-12"> - <div class="p-grid"> - <div class="p-col-12 p-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet, orci nec - dictum convallis, ligula mauris vestibulum turpis, nec varius tortor quam at diam. Nullam a viverra nibh. - In tincidunt tempor lectus quis vulputate. Pellentesque nec dui aliquam, lobortis est in, lobortis ante</div> - <div class="p-col-12 p-md-4">Maecenas vel nisi aliquet, vulputate tortor id, laoreet massa. Maecenas mattis - tristique bibendum. Suspendisse vel mi dictum, vestibulum lacus quis, pulvinar quam. Proin vulputate, nibh - at finibus varius, leo eros lacinia elit, nec blandit odio tellus a justo. Donec nec ex auctor, tristique - nulla nec, rutrum sapien.</div> - <div class="p-col-12 p-md-4">Proin efficitur in leo eget ornare. Nam vestibulum neque sed velit sagittis - sodales. Sed scelerisque hendrerit magna a hendrerit. Cras tempor sem at justo pharetra convallis. - Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis, - condimentum eget hendrerit sit amet.</div> - - <div class="p-col-6 p-md-3"><img alt="Galleria 1" src="demo/images/nature/nature1.jpg" style="width: 100%" /></div> - <div class="p-col-6 p-md-3"><img alt="Galleria 2" src="demo/images/nature/nature2.jpg" style="width: 100%" /></div> - <div class="p-col-6 p-md-3"><img alt="Galleria 3" src="demo/images/nature/nature3.jpg" style="width: 100%" /></div> - <div class="p-col-6 p-md-3"><img alt="Galleria 4" src="demo/images/nature/nature4.jpg" style="width: 100%" /></div> - - <div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien - facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque - neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</div> - <div class="p-col-12 p-md-6">Fusce ullamcorper congue massa, eget ullamcorper nunc lobortis egestas. Lorem - ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices dui eget dolor feugiat dapibus. Aliquam - pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div> - </div> - </div> - </div> - <div class="p-col-12"> - Footer - </div> -</div> @@ -1039,49 +997,45 @@ export default { .flexgrid-demo { - .box, - .sample-layout > div { - background-color: #f1f1f1; - text-align: center; - padding-top: 1rem; - padding-bottom: 1rem; - border-radius: 4px; - } + .box { + background-color: var(--surface-e); + text-align: center; + padding-top: 1rem; + padding-bottom: 1rem; + border-radius: 4px; + box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12); + } - .box-stretched { - height: 100%; - } + .box-stretched { + height: 100%; + } - .sample-layout { - margin: 0; - } + .vertical-container { + margin: 0; + height: 200px; + background: var(--surface-d); + border-radius: 4px; + } - .sample-layout > div { - border: 1px solid #ffffff; - } + .nested-grid .p-col-4 { + padding-bottom: 1rem; + } - .vertical-container { - margin: 0; - height: 200px; - background: #c0c0c0; - border-radius: 4px; - } + .dynamic-box-enter-active, .dynamic-box-leave-active { + transition: all .5s; + } - .nested-grid .p-col-4 { - padding-bottom: 1rem; - } + .dynamic-box-enter, .dynamic-box-leave-to { + opacity: 0; + } - .dynamic-box-enter-active, .dynamic-box-leave-active { - transition: all .5s; - } + .dynamic-box-enter, .dynamic-box-leave-to { + transform: translateX(30px); + } - .dynamic-box-enter, .dynamic-box-leave-to { - opacity: 0; - } - - .dynamic-box-enter, .dynamic-box-leave-to { - transform: translateX(30px); - } + p { + margin: 0; + } }