From 5a5eeebb50d8f3669b94250f8ce4a29b9b0ec911 Mon Sep 17 00:00:00 2001 From: Colin Tucker Date: Fri, 24 Nov 2017 10:12:18 +1100 Subject: [PATCH 01/13] Columns can now hide when empty --- src/Grid/Column.php | 41 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/src/Grid/Column.php b/src/Grid/Column.php index 8ec5635..65b948d 100644 --- a/src/Grid/Column.php +++ b/src/Grid/Column.php @@ -82,7 +82,8 @@ class Column extends Grid private static $db = [ 'Span' => 'Viewports', 'Offset' => 'Viewports', - 'Sidebar' => 'Boolean' + 'Sidebar' => 'Boolean', + 'HideEmpty' => 'Boolean' ]; /** @@ -92,7 +93,8 @@ class Column extends Grid * @config */ private static $defaults = [ - 'Sidebar' => 0 + 'Sidebar' => 0, + 'HideEmpty' => 0 ]; /** @@ -178,6 +180,10 @@ public function getCMSFields() CheckboxField::create( 'Sidebar', $this->fieldLabel('Sidebar') + ), + CheckboxField::create( + 'HideEmpty', + $this->fieldLabel('HideEmpty') ) ] ) @@ -206,6 +212,7 @@ public function fieldLabels($includerelations = true) $labels['Span'] = _t(__CLASS__ . '.SPAN', 'Span'); $labels['Offset'] = _t(__CLASS__ . '.OFFSET', 'Offset'); $labels['Sidebar'] = _t(__CLASS__ . '.SIDEBAR', 'Sidebar'); + $labels['HideEmpty'] = _t(__CLASS__ . '.HIDEWHENEMPTY', 'Hide when empty'); $labels['ColumnStyle'] = $labels['ColumnOptions'] = _t(__CLASS__ . '.COLUMN', 'Column'); // Answer Field Labels: @@ -251,6 +258,26 @@ public function getColumnOffsetOptions() return $options; } + /** + * Answers true if the column is empty. + * + * @return boolean + */ + public function isEmpty() + { + return !$this->getEnabledChildren()->exists(); + } + + /** + * Answers true if the column is hidden. + * + * @return boolean + */ + public function isHidden() + { + return ($this->HideEmpty && $this->isEmpty()); + } + /** * Answers true if the column is a sidebar. * @@ -275,6 +302,16 @@ public function getTag() return parent::getTag(); } + /** + * Answers true if the column is hidden or disabled. + * + * @return boolean + */ + public function isDisabled() + { + return $this->isHidden() ?: parent::isDisabled(); + } + /** * Renders the component for the HTML template. * From 202fd4b066c75dbf1c092d1590b96a4cf415d83b Mon Sep 17 00:00:00 2001 From: Colin Tucker Date: Fri, 24 Nov 2017 11:19:51 +1100 Subject: [PATCH 02/13] Fixed list component image and content margins --- client/dist/styles/bundle.css | 2 +- client/src/styles/components/BaseListComponent.scss | 1 + client/src/styles/components/ListComponent.scss | 2 ++ package.json | 2 +- postcss.config.js | 6 +++++- webpack.config.js | 11 ++--------- 6 files changed, 12 insertions(+), 12 deletions(-) diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css index 7337667..693cd3b 100644 --- a/client/dist/styles/bundle.css +++ b/client/dist/styles/bundle.css @@ -1 +1 @@ -.baselistcomponent .items>article.item{margin-bottom:2rem}.baselistcomponent .items>article.item:last-child{margin-bottom:0}.baselistcomponent .items>article.item>div.image{position:relative}.baselistcomponent .items>article.item>div.image a{display:block}.baselistcomponent .items>article.item>div.image img{display:inline-block}.baselistcomponent .items>article.item>div.image div.image-overlay{top:0;left:0;right:0;bottom:0;width:100%;height:100%;opacity:0;overflow:hidden;position:absolute;-webkit-transition:.5s ease;transition:.5s ease;background-color:rgba(33,37,41,.5)}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner{top:50%;left:0;width:100%;position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner>div.icon{font-size:32px;text-align:center;color:#fff}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner>div.text{text-align:center;padding:0 1rem}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner>div.text>*{margin:0;padding:0;font-size:1.25rem;color:#fff}.baselistcomponent .items>article.item>div.image:hover div.image-overlay,.baselistcomponent .items>article.item>div.image a:focus div.image-overlay{opacity:1}.baselistcomponent .items>article.item>section.content{margin-top:1rem}.baselistcomponent .items>article.item>section.content header{margin-bottom:.5rem}.baselistcomponent .items>article.item>section.content header>*{margin-bottom:0}.baselistcomponent .items>article.item>section.content header a{color:inherit}.baselistcomponent .items>article.item>section.content div.details{color:#868e96}.baselistcomponent .items>article.item>section.content div.details>span{margin-right:.5rem}.baselistcomponent .items>article.item>section.content div.details a{color:inherit}.baselistcomponent .items>article.item>section.content footer{margin-top:1rem}.baselistcomponent .items>article.item>section.content>div{margin-bottom:.5rem}.baselistcomponent ul.pagination{margin-top:2rem;margin-bottom:0}.featurecomponent article.feature>a.feature{display:block;text-decoration:none;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out}.featurecomponent article.feature>a.feature:focus,.featurecomponent article.feature>a.feature:hover{text-decoration:none}.featurecomponent article.feature div.icon{margin-bottom:.5rem}.featurecomponent article.feature div.summary>p:last-child{margin-bottom:0}.featurecomponent article.feature footer{margin-top:1rem}.imagecomponent figure{width:100%;margin-bottom:0}.imagecomponent figure>figcaption>p:last-child{margin-bottom:0}.imagecomponent a.image{display:block}@media (min-width:768px){.listcomponent .items>article.item{display:block}.listcomponent .items.image-align-left>article.item,.listcomponent .items.image-align-right>article.item,.listcomponent .items.image-align-stagger>article.item{display:-webkit-box;display:-ms-flexbox;display:flex}.listcomponent .items.image-align-left>article.item>div.image,.listcomponent .items.image-align-right>article.item>div.image,.listcomponent .items.image-align-stagger>article.item>div.image{margin-bottom:0}.listcomponent .items.image-align-left>article.item.has-image>div.image,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(odd)>div.image{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.listcomponent .items.image-align-left>article.item.has-image>section.content,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(odd)>section.content{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin-left:1rem}.listcomponent .items.image-align-right>article.item.has-image>div.image,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(2n)>div.image,.listcomponent .items>div.image{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.listcomponent .items.image-align-right>article.item.has-image>section.content,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(2n)>section.content,.listcomponent .items>section.content{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;margin-right:1rem}}.mediacomponent figure{width:100%;margin-bottom:0}.mediacomponent figure>figcaption>p:last-child{margin-bottom:0}.mediacomponent a.text{display:block}.mediacomponent a.text:hover{text-decoration:none}.mediacomponent a.text:hover span{text-decoration:underline}.mediacomponent a.text>i.fa{color:#868e96}.mediacomponent a.image{display:block}.mediacomponent a.image+a.text{margin-top:.5rem}.mediacomponent .rich>iframe{margin:0!important}.mediacomponent .video{width:100%;height:0;display:block;position:relative}.mediacomponent .video.four-three{padding-bottom:75%}.mediacomponent .video.sixteen-nine{padding-bottom:56.25%}.mediacomponent .video>iframe{top:0;left:0;border:0;width:100%;height:100%;position:absolute}.pagecomponent.page-title-hidden .content-container>article>header{display:none}.pagecomponent .content-container>article>div{margin-bottom:1rem}.scrolltotopbutton{opacity:0;outline:0;right:1rem;bottom:1rem;width:4rem;height:4rem;z-index:1000;position:fixed;display:block;overflow:hidden;visibility:hidden;white-space:nowrap;text-align:center;font-size:16px;line-height:4rem;-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);box-shadow:0 0 20px rgba(0,0,0,.2);-webkit-transition:opacity .3s 0s,visibility 0s .3s,color .15s ease-in-out 0s,background-color .15s ease-in-out 0s;transition:opacity .3s 0s,visibility 0s .3s,color .15s ease-in-out 0s,background-color .15s ease-in-out 0s}.scrolltotopbutton.is-visible{opacity:1;visibility:visible}.scrolltotopbutton.fade-out{opacity:.5}.scrolltotopbutton:hover{opacity:1}@media (min-width:768px){.scrolltotopbutton{width:5rem;height:5rem;right:2rem;bottom:2rem;line-height:5rem}}@media (min-width:992px){.scrolltotopbutton{width:6rem;height:6rem;font-size:20px;line-height:6rem}}.tilecomponent .items{-webkit-box-orient:horizontal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.tilecomponent .items,.tilecomponent .items>article.item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal}.tilecomponent .items>article.item{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1 100%;flex:1 100%;padding:2%}.tilecomponent .items>article.item>section.content{margin-top:auto}.tilecomponent .items>article.item>section.content div.details>span{display:block;margin-right:0;margin-bottom:.25rem}@media (min-width:576px){.tilecomponent .items>article.item{-webkit-box-flex:1;-ms-flex:1 50%;flex:1 50%}}@media (min-width:768px){.tilecomponent .items>article.item{-webkit-box-flex:1;-ms-flex:1 33.3%;flex:1 33.3%}}@media (min-width:992px){.tilecomponent .items>article.item{-webkit-box-flex:1;-ms-flex:1 25%;flex:1 25%}}div.detail-fields a{color:inherit}div.detail-fields>ul{margin:0;padding:0;list-style:none}div.detail-fields>ul>li>dl,div.detail-fields>ul>li>dl>dd{margin:0;padding:0}div.detail-fields.block>ul>li{margin-bottom:1rem}div.detail-fields.block>ul>li dl dt{font-size:1rem;font-weight:700}div.detail-fields.block>ul>li dl dd{font-size:1rem}div.detail-fields.inline>ul>li{color:#868e96;display:inline-block;margin-right:.5rem}div.detail-fields.inline>ul>li dl dd,div.detail-fields.inline>ul>li dl dt{display:inline-block;font-size:1rem}div.detail-fields.hide-header>header,div.detail-fields.hide-icons>ul>li dl>dt>i,div.detail-fields.hide-names>ul>li dl>dt>span.name{display:none}.component.link{text-decoration:none}.component.link,.component.link>i.fa{display:inline-block}.component.link:active,.component.link:focus,.component.link:hover{text-decoration:none}.show-icons.hide-text .component.link{overflow:hidden;text-align:center;-webkit-transition:color .15s ease-in-out 0s,background-color .15s ease-in-out 0s,border-color .15s ease-in-out 0s;transition:color .15s ease-in-out 0s,background-color .15s ease-in-out 0s,border-color .15s ease-in-out 0s}.show-icons.hide-text .component.link>i.fa{display:block}.show-icons.hide-text .component.link.size-16{width:16px;height:16px;font-size:8px;line-height:16px}.show-icons.hide-text .component.link.size-16>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-24{width:24px;height:24px;font-size:12px;line-height:24px}.show-icons.hide-text .component.link.size-24>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-32{width:32px;height:32px;font-size:16px;line-height:32px}.show-icons.hide-text .component.link.size-32>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-48{width:48px;height:48px;font-size:24px;line-height:48px}.show-icons.hide-text .component.link.size-48>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-64{width:64px;height:64px;font-size:32px;line-height:64px}.show-icons.hide-text .component.link.size-64>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-96{width:96px;height:96px;font-size:48px;line-height:96px}.show-icons.hide-text .component.link.size-96>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-128{width:128px;height:128px;font-size:64px;line-height:128px}.show-icons.hide-text .component.link.size-128>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.hide-icons .component.link>i.fa,.hide-text .component.link>span.text{display:none}.component.slide .slide-caption.title-after>h1,.component.slide .slide-caption.title-after>h2,.component.slide .slide-caption.title-after>h3,.component.slide .slide-caption.title-after>h4,.component.slide .slide-caption.title-after>h5,.component.slide .slide-caption.title-after>h6{margin-bottom:0} \ No newline at end of file +.baselistcomponent .items>article.item{margin-bottom:2rem}.baselistcomponent .items>article.item:last-child{margin-bottom:0}.baselistcomponent .items>article.item>div.image{position:relative}.baselistcomponent .items>article.item>div.image a{display:block}.baselistcomponent .items>article.item>div.image img{margin:0;display:inline-block}.baselistcomponent .items>article.item>div.image div.image-overlay{top:0;left:0;right:0;bottom:0;width:100%;height:100%;opacity:0;overflow:hidden;position:absolute;-webkit-transition:.5s ease;transition:.5s ease;background-color:rgba(33,37,41,.5)}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner{top:50%;left:0;width:100%;position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner>div.icon{font-size:32px;text-align:center;color:#fff}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner>div.text{text-align:center;padding:0 1rem}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner>div.text>*{margin:0;padding:0;font-size:1.25rem;color:#fff}.baselistcomponent .items>article.item>div.image:hover div.image-overlay,.baselistcomponent .items>article.item>div.image a:focus div.image-overlay{opacity:1}.baselistcomponent .items>article.item>section.content{margin-top:1rem}.baselistcomponent .items>article.item>section.content header{margin-bottom:.5rem}.baselistcomponent .items>article.item>section.content header>*{margin-bottom:0}.baselistcomponent .items>article.item>section.content header a{color:inherit}.baselistcomponent .items>article.item>section.content div.details{color:#868e96}.baselistcomponent .items>article.item>section.content div.details>span{margin-right:.5rem}.baselistcomponent .items>article.item>section.content div.details a{color:inherit}.baselistcomponent .items>article.item>section.content footer{margin-top:1rem}.baselistcomponent .items>article.item>section.content>div{margin-bottom:.5rem}.baselistcomponent ul.pagination{margin-top:2rem;margin-bottom:0}.featurecomponent article.feature>a.feature{display:block;text-decoration:none;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out}.featurecomponent article.feature>a.feature:focus,.featurecomponent article.feature>a.feature:hover{text-decoration:none}.featurecomponent article.feature div.icon{margin-bottom:.5rem}.featurecomponent article.feature div.summary>p:last-child{margin-bottom:0}.featurecomponent article.feature footer{margin-top:1rem}.imagecomponent figure{width:100%;margin-bottom:0}.imagecomponent figure>figcaption>p:last-child{margin-bottom:0}.imagecomponent a.image{display:block}@media (min-width:768px){.listcomponent .items>article.item{display:block}.listcomponent .items.image-align-left>article.item,.listcomponent .items.image-align-right>article.item,.listcomponent .items.image-align-stagger>article.item{display:-webkit-box;display:-ms-flexbox;display:flex}.listcomponent .items.image-align-left>article.item>div.image,.listcomponent .items.image-align-right>article.item>div.image,.listcomponent .items.image-align-stagger>article.item>div.image{margin-bottom:0}.listcomponent .items.image-align-left>article.item.has-image>div.image,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(odd)>div.image{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.listcomponent .items.image-align-left>article.item.has-image>section.content,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(odd)>section.content{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin-top:0;margin-left:1rem}.listcomponent .items.image-align-right>article.item.has-image>div.image,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(2n)>div.image,.listcomponent .items>div.image{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.listcomponent .items.image-align-right>article.item.has-image>section.content,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(2n)>section.content,.listcomponent .items>section.content{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;margin-top:0;margin-right:1rem}}.mediacomponent figure{width:100%;margin-bottom:0}.mediacomponent figure>figcaption>p:last-child{margin-bottom:0}.mediacomponent a.text{display:block}.mediacomponent a.text:hover{text-decoration:none}.mediacomponent a.text:hover span{text-decoration:underline}.mediacomponent a.text>i.fa{color:#868e96}.mediacomponent a.image{display:block}.mediacomponent a.image+a.text{margin-top:.5rem}.mediacomponent .rich>iframe{margin:0!important}.mediacomponent .video{width:100%;height:0;display:block;position:relative}.mediacomponent .video.four-three{padding-bottom:75%}.mediacomponent .video.sixteen-nine{padding-bottom:56.25%}.mediacomponent .video>iframe{top:0;left:0;border:0;width:100%;height:100%;position:absolute}.pagecomponent.page-title-hidden .content-container>article>header{display:none}.pagecomponent .content-container>article>div{margin-bottom:1rem}.scrolltotopbutton{opacity:0;outline:0;right:1rem;bottom:1rem;width:4rem;height:4rem;z-index:1000;position:fixed;display:block;overflow:hidden;visibility:hidden;white-space:nowrap;text-align:center;font-size:16px;line-height:4rem;-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);box-shadow:0 0 20px rgba(0,0,0,.2);-webkit-transition:opacity .3s 0s,visibility 0s .3s,color .15s ease-in-out 0s,background-color .15s ease-in-out 0s;transition:opacity .3s 0s,visibility 0s .3s,color .15s ease-in-out 0s,background-color .15s ease-in-out 0s}.scrolltotopbutton.is-visible{opacity:1;visibility:visible}.scrolltotopbutton.fade-out{opacity:.5}.scrolltotopbutton:hover{opacity:1}@media (min-width:768px){.scrolltotopbutton{width:5rem;height:5rem;right:2rem;bottom:2rem;line-height:5rem}}@media (min-width:992px){.scrolltotopbutton{width:6rem;height:6rem;font-size:20px;line-height:6rem}}.tilecomponent .items{-webkit-box-orient:horizontal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.tilecomponent .items,.tilecomponent .items>article.item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal}.tilecomponent .items>article.item{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1 100%;flex:1 100%;padding:2%}.tilecomponent .items>article.item>section.content{margin-top:auto}.tilecomponent .items>article.item>section.content div.details>span{display:block;margin-right:0;margin-bottom:.25rem}@media (min-width:576px){.tilecomponent .items>article.item{-webkit-box-flex:1;-ms-flex:1 50%;flex:1 50%}}@media (min-width:768px){.tilecomponent .items>article.item{-webkit-box-flex:1;-ms-flex:1 33.3%;flex:1 33.3%}}@media (min-width:992px){.tilecomponent .items>article.item{-webkit-box-flex:1;-ms-flex:1 25%;flex:1 25%}}div.detail-fields a{color:inherit}div.detail-fields>ul{margin:0;padding:0;list-style:none}div.detail-fields>ul>li>dl,div.detail-fields>ul>li>dl>dd{margin:0;padding:0}div.detail-fields.block>ul>li{margin-bottom:1rem}div.detail-fields.block>ul>li dl dt{font-size:1rem;font-weight:700}div.detail-fields.block>ul>li dl dd{font-size:1rem}div.detail-fields.inline>ul>li{color:#868e96;display:inline-block;margin-right:.5rem}div.detail-fields.inline>ul>li dl dd,div.detail-fields.inline>ul>li dl dt{display:inline-block;font-size:1rem}div.detail-fields.hide-header>header,div.detail-fields.hide-icons>ul>li dl>dt>i,div.detail-fields.hide-names>ul>li dl>dt>span.name{display:none}.component.link{text-decoration:none}.component.link,.component.link>i.fa{display:inline-block}.component.link:active,.component.link:focus,.component.link:hover{text-decoration:none}.show-icons.hide-text .component.link{overflow:hidden;text-align:center;-webkit-transition:color .15s ease-in-out 0s,background-color .15s ease-in-out 0s,border-color .15s ease-in-out 0s;transition:color .15s ease-in-out 0s,background-color .15s ease-in-out 0s,border-color .15s ease-in-out 0s}.show-icons.hide-text .component.link>i.fa{display:block}.show-icons.hide-text .component.link.size-16{width:16px;height:16px;font-size:8px;line-height:16px}.show-icons.hide-text .component.link.size-16>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-24{width:24px;height:24px;font-size:12px;line-height:24px}.show-icons.hide-text .component.link.size-24>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-32{width:32px;height:32px;font-size:16px;line-height:32px}.show-icons.hide-text .component.link.size-32>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-48{width:48px;height:48px;font-size:24px;line-height:48px}.show-icons.hide-text .component.link.size-48>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-64{width:64px;height:64px;font-size:32px;line-height:64px}.show-icons.hide-text .component.link.size-64>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-96{width:96px;height:96px;font-size:48px;line-height:96px}.show-icons.hide-text .component.link.size-96>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-128{width:128px;height:128px;font-size:64px;line-height:128px}.show-icons.hide-text .component.link.size-128>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.hide-icons .component.link>i.fa,.hide-text .component.link>span.text{display:none}.component.slide .slide-caption.title-after>h1,.component.slide .slide-caption.title-after>h2,.component.slide .slide-caption.title-after>h3,.component.slide .slide-caption.title-after>h4,.component.slide .slide-caption.title-after>h5,.component.slide .slide-caption.title-after>h6{margin-bottom:0} \ No newline at end of file diff --git a/client/src/styles/components/BaseListComponent.scss b/client/src/styles/components/BaseListComponent.scss index 5427e14..b961e43 100644 --- a/client/src/styles/components/BaseListComponent.scss +++ b/client/src/styles/components/BaseListComponent.scss @@ -22,6 +22,7 @@ } img { + margin: 0; display: inline-block; } diff --git a/client/src/styles/components/ListComponent.scss b/client/src/styles/components/ListComponent.scss index 6c0aa55..66c3832 100644 --- a/client/src/styles/components/ListComponent.scss +++ b/client/src/styles/components/ListComponent.scss @@ -35,6 +35,7 @@ > section.content { flex: 1; order: 2; + margin-top: 0; margin-left: $spacer; } @@ -50,6 +51,7 @@ > section.content { flex: 1; order: 1; + margin-top: 0; margin-right: $spacer; } diff --git a/package.json b/package.json index 3aeafb8..07b6e97 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "url": "https://github.com/praxisnetau/silverware/issues" }, "engines": { - "node": "^4.2.0" + "node": "^6.x" }, "scripts": { "watch": "webpack --env.development --colors --watch", diff --git a/postcss.config.js b/postcss.config.js index f053ebf..b122ab5 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1 +1,5 @@ -module.exports = {}; +module.exports = { + plugins: [ + require('autoprefixer') + ] +}; diff --git a/webpack.config.js b/webpack.config.js index af8ad22..1eaf71e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -5,7 +5,6 @@ const path = require('path'); const webpack = require('webpack'); -const autoprefixer = require('autoprefixer'); // Load Plugin Modules: @@ -60,10 +59,7 @@ const rules = (env) => { loader: 'css-loader' }, { - loader: 'postcss-loader', - options: { - plugins: [ autoprefixer ] // see "browserslist" in package.json - } + loader: 'postcss-loader' } ]) }, @@ -74,10 +70,7 @@ const rules = (env) => { loader: 'css-loader' }, { - loader: 'postcss-loader', - options: { - plugins: [ autoprefixer ] // see "browserslist" in package.json - } + loader: 'postcss-loader' }, { loader: 'sass-loader', From 062ca3958b409d0d18dafb957c7151e907b0a583 Mon Sep 17 00:00:00 2001 From: Colin Tucker Date: Fri, 24 Nov 2017 12:49:33 +1100 Subject: [PATCH 03/13] Fixed bug with crop priority field showing on non-images --- .../Admin/CropPriorityFileFormExtension.php | 25 ++++++++++++------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/Extensions/Admin/CropPriorityFileFormExtension.php b/src/Extensions/Admin/CropPriorityFileFormExtension.php index 3b9b2f6..d08751e 100644 --- a/src/Extensions/Admin/CropPriorityFileFormExtension.php +++ b/src/Extensions/Admin/CropPriorityFileFormExtension.php @@ -17,6 +17,7 @@ namespace SilverWare\Extensions\Admin; +use SilverStripe\Assets\Image; use SilverStripe\Control\Controller; use SilverStripe\Core\Extension; use SilverStripe\Forms\DropdownField; @@ -45,16 +46,22 @@ class CropPriorityFileFormExtension extends Extension */ public function updateFormFields(FieldList $fields, Controller $controller, $name, $context) { - // Update Field Objects: + // Check Record Type: - $fields->insertAfter( - 'ParentID', - DropdownField::create( - 'CropPriority', - _t(__CLASS__ . '.CROPPRIORITY', 'Crop priority'), - $this->getCropPriorityOptions() - ) - ); + if ($context['Record'] instanceof Image) { + + // Update Field Objects: + + $fields->insertAfter( + 'ParentID', + DropdownField::create( + 'CropPriority', + _t(__CLASS__ . '.CROPPRIORITY', 'Crop priority'), + $this->getCropPriorityOptions() + ) + ); + + } } /** From 9d43bc4801eac5b32f31737242c3dda4f0cb2e77 Mon Sep 17 00:00:00 2001 From: Colin Tucker Date: Fri, 24 Nov 2017 12:56:30 +1100 Subject: [PATCH 04/13] Renamed image alignment options to match SS native --- src/Tools/ImageTools.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Tools/ImageTools.php b/src/Tools/ImageTools.php index 29e2bab..49b7be8 100644 --- a/src/Tools/ImageTools.php +++ b/src/Tools/ImageTools.php @@ -93,10 +93,10 @@ public function getResizeMethods() public function getAlignmentOptions() { return [ - self::ALIGN_LEFT_ALONE => _t(__CLASS__ . '.ALIGNLEFTALONE', 'On the left, on its own.'), - self::ALIGN_CENTER => _t(__CLASS__ . '.ALIGNCENTER', 'Centered, on its own.'), - self::ALIGN_LEFT => _t(__CLASS__ . '.ALIGNLEFT', 'On the left, with text wrapping around.'), - self::ALIGN_RIGHT => _t(__CLASS__ . '.ALIGNRIGHT', 'On the right, with text wrapping around.') + self::ALIGN_LEFT_ALONE => _t(__CLASS__ . '.ALIGNLEFTALONE', 'Left'), + self::ALIGN_CENTER => _t(__CLASS__ . '.ALIGNCENTER', 'Center'), + self::ALIGN_LEFT => _t(__CLASS__ . '.ALIGNLEFT', 'Left wrap'), + self::ALIGN_RIGHT => _t(__CLASS__ . '.ALIGNRIGHT', 'Right wrap') ]; } From 2fdfc40af5b1e2a52fba144fb16897ca26f66892 Mon Sep 17 00:00:00 2001 From: Colin Tucker Date: Tue, 28 Nov 2017 09:18:22 +1100 Subject: [PATCH 05/13] Added syntax for defining associated objects through fixtures --- src/Dev/FixtureBlueprint.php | 96 +++++++++++++++++++++++++++++++++++- 1 file changed, 95 insertions(+), 1 deletion(-) diff --git a/src/Dev/FixtureBlueprint.php b/src/Dev/FixtureBlueprint.php index 4abe3fc..2e9785f 100644 --- a/src/Dev/FixtureBlueprint.php +++ b/src/Dev/FixtureBlueprint.php @@ -446,6 +446,10 @@ public function populateObject(DataObject $object, $data, $fixtures) $this->populateRelations($object, $data, $fixtures); + // Populate Objects: + + $this->populateObjects($object, $data, $fixtures); + } // Answer Object: @@ -468,7 +472,7 @@ public function populateFields(DataObject $object, $data, $fixtures) foreach ($data as $name => $value) { - if (!$this->isRelation($object, $name) && !$this->isChild($object, $name)) { + if ($this->isField($object, $name)) { $this->populateField($object, $name, $value); } @@ -555,6 +559,46 @@ public function populateChildren(DataObject $object, $data, $fixtures) return $object; } + /** + * Populates the associated objects of the given object. + * + * @param DataObject $object + * @param array $data + * @param array $fixtures + * + * @return DataObject + */ + public function populateObjects(DataObject $object, $data, $fixtures) + { + // Populate Objects: + + foreach ($data as $name => $value) { + + // Detect Object: + + if ($this->isObject($object, $name)) { + + // Trim Name: + + $name = ltrim($name, '->'); + + // Populate Object: + + if ($subObject = $object->$name) { + + foreach ($value as $k => $v) { + $subObject->$k = $v; + } + + $subObject->write(); + + } + + } + + } + } + /** * Populates the relations of the given object. * @@ -574,6 +618,12 @@ public function populateRelations(DataObject $object, $data, $fixtures) foreach ($data as $name => $value) { + // Skip Object Identifiers: + + if ($this->isObject($object, $name)) { + continue; + } + // Detect Relation: if ($this->isRelation($object, $name)) { @@ -873,6 +923,38 @@ public function isChild(DataObject $object, $name) return ($this->isChildIdentifier($name) && $object->hasExtension(Hierarchy::class)); } + /** + * Answers true if the specified field is a regular field of the given object. + * + * @param DataObject $object + * @param string $name + * + * @return boolean + */ + public function isField(DataObject $object, $name) + { + return ( + !$this->isRelation($object, $name) && + !$this->isObject($object, $name) && + !$this->isChild($object, $name) + ); + } + + /** + * Answers true if the specified field is an object associated with the given object. + * + * @param DataObject $object + * @param string $name + * + * @return boolean + */ + public function isObject(DataObject $object, $name) + { + $identifier = ltrim($name, '->'); + + return ($this->isObjectIdentifier($name) && is_object($object->$identifier)); + } + /** * Answers true if the specified field name is a child identifier string. * @@ -885,6 +967,18 @@ public function isChildIdentifier($name) return (strpos($name, '+') === 0); } + /** + * Answers true if the specified field name is an object identifier string. + * + * @param string $name + * + * @return boolean + */ + public function isObjectIdentifier($name) + { + return (strpos($name, '->') === 0); + } + /** * Answers true if the specified class is a file. * From ef0aabcf1185330ba0017d09878ece71af01ee5a Mon Sep 17 00:00:00 2001 From: Colin Tucker Date: Tue, 28 Nov 2017 10:27:38 +1100 Subject: [PATCH 06/13] Added summary mode to meta data extension --- src/Extensions/Model/MetaDataExtension.php | 81 ++++++++++++++++++++-- 1 file changed, 77 insertions(+), 4 deletions(-) diff --git a/src/Extensions/Model/MetaDataExtension.php b/src/Extensions/Model/MetaDataExtension.php index dd724bc..7ff89be 100644 --- a/src/Extensions/Model/MetaDataExtension.php +++ b/src/Extensions/Model/MetaDataExtension.php @@ -26,6 +26,7 @@ use SilverStripe\Forms\Tab; use SilverStripe\ORM\DataExtension; use SilverStripe\ORM\FieldType\DBField; +use SilverStripe\ORM\FieldType\DBHTMLText; use SilverWare\Components\BaseListComponent; use SilverWare\Forms\DimensionsField; use SilverWare\Forms\FieldSection; @@ -46,6 +47,12 @@ class MetaDataExtension extends DataExtension { use GridAware; + /** + * Define summary constants. + */ + const SUMMARY_FIRST_SENTENCE = 'first-sentence'; + const SUMMARY_FIRST_PARAGRAPH = 'first-paragraph'; + /** * Maps field names to field types for the extended object. * @@ -54,6 +61,7 @@ class MetaDataExtension extends DataExtension */ private static $db = [ 'SummaryMeta' => 'HTMLText', + 'SummaryMode' => 'Varchar(16)', 'ImageMetaHidden' => 'Varchar(1)', 'ImageMetaResize' => 'Dimensions', 'ImageMetaResizeMethod' => 'Varchar(32)', @@ -103,6 +111,7 @@ class MetaDataExtension extends DataExtension * @config */ private static $defaults = [ + 'SummaryMode' => 'default', 'ImageMetaHidden' => 0, 'ImageMetaCaptionHidden' => 0 ]; @@ -264,11 +273,41 @@ public function getMetaFieldConfig() */ public function getMetaSummaryFields($params = []) { - return FieldList::create([ + // Define Placeholder: + + $placeholder = _t(__CLASS__ . '.DROPDOWNDEFAULT', '(default)'); + + // Create Field Objects: + + $fields = [ HTMLEditorField::create( 'SummaryMeta', $this->owner->fieldLabel('SummaryMeta') - )->setRows(10) + )->setRows(10), + $mode = DropdownField::create( + 'SummaryMode', + $this->owner->fieldLabel('SummaryMode'), + $this->getSummaryModeOptions() + )->setEmptyString(' ')->setAttribute('data-placeholder', $placeholder) + ]; + + // Define Mode Right Title: + + $mode->setRightTitle( + _t( + __CLASS__ . '.SUMMARYMODERIGHTTITLE', + 'This mode only applies to summary text automatically generated from the record content.' + ) + ); + + // Answer Field Objects: + + return FieldList::create([ + FieldSection::create( + 'SummaryMetaSection', + $this->owner->fieldLabel('SummaryMetaSection'), + $fields + ) ]); } @@ -423,7 +462,9 @@ public function updateFieldLabels(&$labels) $labels['ImageMetaAlignment'] = _t(__CLASS__ . '.ALIGNMENT', 'Alignment'); $labels['ImageMetaHidden'] = _t(__CLASS__ . '.HIDEIMAGE', 'Hide image'); $labels['ImageMetaLinked'] = _t(__CLASS__ . '.LINKIMAGE', 'Link image'); - $labels['SummaryMeta'] = _t(__CLASS__ . '.SUMMARY', 'Summary'); + $labels['SummaryMetaSection'] = _t(__CLASS__ . '.SUMMARY', 'Summary'); + $labels['SummaryMeta'] = _t(__CLASS__ . '.SUMMARYTEXT', 'Summary text'); + $labels['SummaryMode'] = _t(__CLASS__ . '.SUMMARYMODE', 'Summary mode'); } /** @@ -558,7 +599,7 @@ public function getMetaSummary() } if ($content = $this->owner->getMetaContent()) { - return DBField::create_field('HTMLFragment', sprintf('

%s

', $content->Summary())); + return DBField::create_field('HTMLFragment', sprintf('

%s

', $this->getContentSummary($content))); } } @@ -1093,6 +1134,38 @@ public function getFieldFromParent($name) return $value; } + /** + * Answers the appropriate summary of the given content field. + * + * @param DBHTMLText $content + * + * @return string + */ + protected function getContentSummary(DBHTMLText $content) + { + switch ($this->owner->SummaryMode) { + case self::SUMMARY_FIRST_SENTENCE: + return $content->FirstSentence(); + case self::SUMMARY_FIRST_PARAGRAPH: + return $content->FirstParagraph(); + default: + return $content->Summary(); + } + } + + /** + * Answers an array of options for the summary mode field. + * + * @return array + */ + protected function getSummaryModeOptions() + { + return [ + self::SUMMARY_FIRST_SENTENCE => _t(__CLASS__ . '.FIRSTSENTENCE', 'First Sentence'), + self::SUMMARY_FIRST_PARAGRAPH => _t(__CLASS__ . '.FIRSTPARAGRAPH', 'First Paragraph') + ]; + } + /** * Answers an array of options for a toggle dropdown field. * From 1f4e3542cf15178ddacef260d272bb8af202e9aa Mon Sep 17 00:00:00 2001 From: Colin Tucker Date: Wed, 29 Nov 2017 09:31:25 +1100 Subject: [PATCH 07/13] Updated list of components in readme --- README.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/README.md b/README.md index e2183fe..7a61f58 100644 --- a/README.md +++ b/README.md @@ -165,7 +165,9 @@ SilverWare ships with the following components ready for use: - [`MediaComponent`](#mediacomponent) - [`PageComponent`](#pagecomponent) - [`ScrollToTopButton`](#scrolltotopbutton) +- [`TableComponent`](#tablecomponent) - [`TagCloudComponent`](#tagcloudcomponent) +- [`TileComponent`](#tilecomponent) - [`TitleComponent`](#titlecomponent) ### AreaComponent @@ -238,6 +240,12 @@ The button is hidden by default when the user is at the top of the page, and app the user begins to scroll down. It can be customised by choosing a font icon, and also has fields for defining the show offset, opacity offset and scroll duration. +### TableComponent + +Renders a series of child components in a table layout, consisting of rows and columns. +By default, `TableComponent` makes use of the Bootstrap v4 flexbox layout grid, allowing +you to define viewport-specific column spans for child components. + ### TagCloudComponent Shows an interactive tag cloud with tags obtained from an implementor of `TagSource`. @@ -246,6 +254,13 @@ can be rotated by the user using the mouse or touch gestures. The component has configurable text and outline colors, along with zoom, rotation, and font size options. Weighted tags are also supported. +### TileComponent + +Renders a list of items as a series of "tiles". `TileComponent` is very similar to +a `ListComponent`, and allows you to specify a `ListSource` for the items to display. +The tiles are rendered using CSS + flexbox (similar to the Bootstrap grid), adjusting to +each device accordingly. + ### TitleComponent Shows the title of the current page. This component is useful when you need to show From 8d3296ceaabeca22f830f10251946090226852a6 Mon Sep 17 00:00:00 2001 From: Colin Tucker Date: Wed, 29 Nov 2017 09:32:39 +1100 Subject: [PATCH 08/13] Added additional ContentComponent features --- .../styles/components/ContentComponent.scss | 14 ++++++++ src/Components/ContentComponent.php | 32 +++++++++++++++++-- .../SilverWare/Components/ContentComponent.ss | 4 +++ .../Components/ContentComponent/Content.ss | 5 +++ .../Components/ContentComponent/Header.ss | 12 +++++++ 5 files changed, 65 insertions(+), 2 deletions(-) create mode 100644 client/src/styles/components/ContentComponent.scss create mode 100644 templates/SilverWare/Components/ContentComponent.ss create mode 100644 templates/SilverWare/Components/ContentComponent/Content.ss create mode 100644 templates/SilverWare/Components/ContentComponent/Header.ss diff --git a/client/src/styles/components/ContentComponent.scss b/client/src/styles/components/ContentComponent.scss new file mode 100644 index 0000000..95c5e85 --- /dev/null +++ b/client/src/styles/components/ContentComponent.scss @@ -0,0 +1,14 @@ +/* Content Component Styles +===================================================================================================================== */ + +.contentcomponent { + + > header { + + a { + color: inherit; + } + + } + +} diff --git a/src/Components/ContentComponent.php b/src/Components/ContentComponent.php index 292ccf2..1973ada 100644 --- a/src/Components/ContentComponent.php +++ b/src/Components/ContentComponent.php @@ -18,6 +18,9 @@ namespace SilverWare\Components; use SilverStripe\Forms\HTMLEditor\HTMLEditorField; +use SilverWare\Extensions\Model\LinkToExtension; +use SilverWare\Extensions\Style\AlignmentStyle; +use SilverWare\FontIcons\Extensions\FontIconExtension; /** * An extension of the base component class for a content component. @@ -78,6 +81,18 @@ class ContentComponent extends BaseComponent */ private static $allowed_children = 'none'; + /** + * Defines the extension classes to apply to this object. + * + * @var array + * @config + */ + private static $extensions = [ + AlignmentStyle::class, + FontIconExtension::class, + LinkToExtension::class + ]; + /** * Defines the default classes to use when rendering this object. * @@ -106,7 +121,8 @@ public function getCMSFields() HTMLEditorField::create( 'Content', $this->fieldLabel('Content') - ) + ), + 'LinkTo' ); // Answer Field Objects: @@ -123,5 +139,17 @@ public function getContent() { return $this->dbObject('Content'); } - + + /** + * Renders the component for the HTML template. + * + * @param string $layout Page layout passed from template. + * @param string $title Page title passed from template. + * + * @return DBHTMLText|string + */ + public function renderSelf($layout = null, $title = null) + { + return $this->getController()->renderWith(self::class); + } } diff --git a/templates/SilverWare/Components/ContentComponent.ss b/templates/SilverWare/Components/ContentComponent.ss new file mode 100644 index 0000000..1a55422 --- /dev/null +++ b/templates/SilverWare/Components/ContentComponent.ss @@ -0,0 +1,4 @@ +
+ <% include SilverWare\Components\ContentComponent\Header %> + <% include SilverWare\Components\ContentComponent\Content %> +
diff --git a/templates/SilverWare/Components/ContentComponent/Content.ss b/templates/SilverWare/Components/ContentComponent/Content.ss new file mode 100644 index 0000000..94253b8 --- /dev/null +++ b/templates/SilverWare/Components/ContentComponent/Content.ss @@ -0,0 +1,5 @@ +<% if $Content %> +
+ $Content +
+<% end_if %> diff --git a/templates/SilverWare/Components/ContentComponent/Header.ss b/templates/SilverWare/Components/ContentComponent/Header.ss new file mode 100644 index 0000000..10e68c9 --- /dev/null +++ b/templates/SilverWare/Components/ContentComponent/Header.ss @@ -0,0 +1,12 @@ +<% if $ShowTitle %> +
+ <$TitleTag> + {$FontIconTag} + <% if $HasLink %> + {$TitleText} + <% else %> + {$TitleText} + <% end_if %> + +
+<% end_if %> From 5b863a6a89eb33ba77cd01b804af5fe26d6e845d Mon Sep 17 00:00:00 2001 From: Colin Tucker Date: Wed, 29 Nov 2017 09:33:33 +1100 Subject: [PATCH 09/13] Column span and offset methods can now accept a viewports argument --- src/Grid/Extensions/ColumnExtension.php | 10 ++++++++-- src/Grid/Frameworks/Bootstrap/Column.php | 17 +++++++++++++---- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/Grid/Extensions/ColumnExtension.php b/src/Grid/Extensions/ColumnExtension.php index 122e604..c5a0be9 100644 --- a/src/Grid/Extensions/ColumnExtension.php +++ b/src/Grid/Extensions/ColumnExtension.php @@ -17,6 +17,8 @@ namespace SilverWare\Grid\Extensions; +use SilverWare\ORM\FieldType\DBViewports; + /** * A grid extension class which forms an abstract base for column extensions. * @@ -31,16 +33,20 @@ abstract class ColumnExtension extends GridExtension /** * Answers the span class names for the extended object. * + * @param DBViewports $span Optional viewports field to use instead of extended object field. + * * @return array */ - abstract public function getSpanClassNames(); + abstract public function getSpanClassNames(DBViewports $span = null); /** * Answers the offset class names for the extended object. * + * @param DBViewports $offset Optional viewports field to use instead of extended object field. + * * @return array */ - abstract public function getOffsetClassNames(); + abstract public function getOffsetClassNames(DBViewports $offset = null); /** * Answers the combined class names for the extended object. diff --git a/src/Grid/Frameworks/Bootstrap/Column.php b/src/Grid/Frameworks/Bootstrap/Column.php index cd47484..e0ed178 100644 --- a/src/Grid/Frameworks/Bootstrap/Column.php +++ b/src/Grid/Frameworks/Bootstrap/Column.php @@ -18,6 +18,7 @@ namespace SilverWare\Grid\Frameworks\Bootstrap; use SilverWare\Grid\Extensions\ColumnExtension; +use SilverWare\ORM\FieldType\DBViewports; /** * A column extension for Bootstrap columns. @@ -75,13 +76,17 @@ class Column extends ColumnExtension /** * Answers the span class names for the extended object. * + * @param DBViewports $span Optional viewports field to use instead of extended object field. + * * @return array */ - public function getSpanClassNames() + public function getSpanClassNames(DBViewports $span = null) { $classes = []; - $span = $this->owner->dbObject('Span'); + if (!$span) { + $span = $this->owner->dbObject('Span'); + } if ($span->allEqualTo('auto')) { @@ -113,13 +118,17 @@ public function getSpanClassNames() /** * Answers the offset class names for the extended object. * + * @param DBViewports $offset Optional viewports field to use instead of extended object field. + * * @return array */ - public function getOffsetClassNames() + public function getOffsetClassNames(DBViewports $offset = null) { $classes = []; - $offset = $this->owner->dbObject('Offset'); + if (!$offset) { + $offset = $this->owner->dbObject('Offset'); + } foreach ($offset->getViewports() as $viewport) { $classes[] = $this->getOffsetClass($viewport, $offset->getField($viewport)); From 92eed2e10c38ac5712e291be90847d4711eaff7e Mon Sep 17 00:00:00 2001 From: Colin Tucker Date: Wed, 29 Nov 2017 09:33:46 +1100 Subject: [PATCH 10/13] Added TableComponent --- .../dist/images/icons/TableComponent.png | Bin 0 -> 512 bytes .../src/images/icons/TableComponent.png | Bin 0 -> 512 bytes .../src/styles/components/TableComponent.scss | 10 + src/Components/TableComponent.php | 227 ++++++++++++++++++ .../SilverWare/Components/TableComponent.ss | 7 + 5 files changed, 244 insertions(+) create mode 100644 admin/client/dist/images/icons/TableComponent.png create mode 100644 admin/client/src/images/icons/TableComponent.png create mode 100644 client/src/styles/components/TableComponent.scss create mode 100644 src/Components/TableComponent.php create mode 100644 templates/SilverWare/Components/TableComponent.ss diff --git a/admin/client/dist/images/icons/TableComponent.png b/admin/client/dist/images/icons/TableComponent.png new file mode 100644 index 0000000000000000000000000000000000000000..671d414b701976cd339c8b1907760680b56575d1 GIT binary patch literal 512 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|SkfJR9T^xl z_H+M9WCij$3p^r=85sBugD~Uq{1qucLCF%=h?3y^w370~qEv>0#LT=By}Z;C1rt33 zJwwYY*ERtaF&22bIEGmG&zh5C?uKb-SO~MNi}IP zP`I?pK2*^4OJiTBlGZCFr3nrKvd2&MZ?Dd~D;~>Y%q#P5=EFJZe1}^)G?t`qo^`>| zA@haTfjG6~4&w`7Z~tU`6Lsxj$c*Pzv9C5pEp7K|eRn!_m-f^b+ai|Cc4}OgJA2)y zN+&T{wl_;IyFY$8B`#X`msI~!h5$K+r;H9j@toOdmuCB@IOsNna~D0j`GzUwV&Z`? zt#D7S>bAjh`4mg40aTR=xlJ^!8OIhJU|=C%U#XdS86u8eMa9d))cy s6M)?Ai6{O!S=30nyfAq1f6)c=Z>M-)_Fj3S3XC8IPgg&ebxsLQ0D$(;TmS$7 literal 0 HcmV?d00001 diff --git a/admin/client/src/images/icons/TableComponent.png b/admin/client/src/images/icons/TableComponent.png new file mode 100644 index 0000000000000000000000000000000000000000..671d414b701976cd339c8b1907760680b56575d1 GIT binary patch literal 512 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|SkfJR9T^xl z_H+M9WCij$3p^r=85sBugD~Uq{1qucLCF%=h?3y^w370~qEv>0#LT=By}Z;C1rt33 zJwwYY*ERtaF&22bIEGmG&zh5C?uKb-SO~MNi}IP zP`I?pK2*^4OJiTBlGZCFr3nrKvd2&MZ?Dd~D;~>Y%q#P5=EFJZe1}^)G?t`qo^`>| zA@haTfjG6~4&w`7Z~tU`6Lsxj$c*Pzv9C5pEp7K|eRn!_m-f^b+ai|Cc4}OgJA2)y zN+&T{wl_;IyFY$8B`#X`msI~!h5$K+r;H9j@toOdmuCB@IOsNna~D0j`GzUwV&Z`? zt#D7S>bAjh`4mg40aTR=xlJ^!8OIhJU|=C%U#XdS86u8eMa9d))cy s6M)?Ai6{O!S=30nyfAq1f6)c=Z>M-)_Fj3S3XC8IPgg&ebxsLQ0D$(;TmS$7 literal 0 HcmV?d00001 diff --git a/client/src/styles/components/TableComponent.scss b/client/src/styles/components/TableComponent.scss new file mode 100644 index 0000000..aa0b507 --- /dev/null +++ b/client/src/styles/components/TableComponent.scss @@ -0,0 +1,10 @@ +/* Table Component Styles +===================================================================================================================== */ + +.tablecomponent { + + .row > .column > .component { + margin-bottom: $spacer; + } + +} diff --git a/src/Components/TableComponent.php b/src/Components/TableComponent.php new file mode 100644 index 0000000..9e1fa49 --- /dev/null +++ b/src/Components/TableComponent.php @@ -0,0 +1,227 @@ +=5.6.0 + * + * For full copyright and license information, please view the + * LICENSE.md file that was distributed with this source code. + * + * @package SilverWare\Components + * @author Colin Tucker + * @copyright 2017 Praxis Interactive + * @license https://opensource.org/licenses/BSD-3-Clause BSD-3-Clause + * @link https://github.com/praxisnetau/silverware + */ + +namespace SilverWare\Components; + +use SilverStripe\ORM\ArrayList; +use SilverStripe\View\ArrayData; +use SilverWare\Forms\FieldSection; +use SilverWare\Forms\ViewportsField; +use SilverWare\Grid\Column; + +/** + * An extension of the base component class for a table component. + * + * @package SilverWare\Components + * @author Colin Tucker + * @copyright 2017 Praxis Interactive + * @license https://opensource.org/licenses/BSD-3-Clause BSD-3-Clause + * @link https://github.com/praxisnetau/silverware + */ +class TableComponent extends BaseComponent +{ + /** + * Human-readable singular name. + * + * @var string + * @config + */ + private static $singular_name = 'Table Component'; + + /** + * Human-readable plural name. + * + * @var string + * @config + */ + private static $plural_name = 'Table Components'; + + /** + * Description of this object. + * + * @var string + * @config + */ + private static $description = 'Renders a series of child components as a table'; + + /** + * Icon file for this object. + * + * @var string + * @config + */ + private static $icon = 'silverware/silverware: admin/client/dist/images/icons/TableComponent.png'; + + /** + * Defines an ancestor class to hide from the admin interface. + * + * @var string + * @config + */ + private static $hide_ancestor = BaseComponent::class; + + /** + * Maps field names to field types for this object. + * + * @var array + * @config + */ + private static $db = [ + 'ColumnSpan' => 'Viewports' + ]; + + /** + * Defines the default values for the fields of this object. + * + * @var array + * @config + */ + private static $defaults = [ + 'ColumnSpanSmall' => 6, + 'ColumnSpanMedium' => 4 + ]; + + /** + * Defines the allowed children for this object. + * + * @var array|string + * @config + */ + private static $allowed_children = [ + BaseComponent::class + ]; + + /** + * Answers a list of field objects for the CMS interface. + * + * @return FieldList + */ + public function getCMSFields() + { + // Obtain Field Objects (from parent): + + $fields = parent::getCMSFields(); + + // Create Style Fields: + + $fields->addFieldToTab( + 'Root.Style', + FieldSection::create( + 'ColumnStyle', + $this->fieldLabel('Column'), + [ + ViewportsField::create( + 'ColumnSpan', + $this->fieldLabel('Span'), + $this->getColumnSpanOptions() + ) + ] + ) + ); + + // Answer Field Objects: + + return $fields; + } + + /** + * Answers the labels for the fields of the receiver. + * + * @param boolean $includerelations Include labels for relations. + * + * @return array + */ + public function fieldLabels($includerelations = true) + { + // Obtain Field Labels (from parent): + + $labels = parent::fieldLabels($includerelations); + + // Define Field Labels: + + $labels['Span'] = _t(__CLASS__ . '.SPAN', 'Span'); + $labels['Column'] = _t(__CLASS__ . '.COLUMN', 'Column'); + + // Answer Field Labels: + + return $labels; + } + + /** + * Answers an array of row class names for the template. + * + * @return array + */ + public function getRowClassNames() + { + $classes = $this->styles('row'); + + $this->extend('updateRowClassNames', $classes); + + return $classes; + } + + /** + * Answers a list of the columns within the receiver. + * + * @return ArrayList + */ + public function getColumns() + { + $columns = ArrayList::create(); + + foreach ($this->getEnabledChildren() as $child) { + + $columns->push( + ArrayData::create([ + 'Child' => $child, + 'ColumnClass' => $this->ColumnClass + ]) + ); + + } + + return $columns; + } + + /** + * Answers an array of column class names for the template. + * + * @return array + */ + public function getColumnClassNames() + { + $classes = array_merge( + $this->styles('column'), + Column::singleton()->getSpanClassNames($this->dbObject('ColumnSpan')) + ); + + $this->extend('updateColumnClassNames', $classes); + + return $classes; + } + + /** + * Answers an array of options for the column size field. + * + * @return array + */ + public function getColumnSpanOptions() + { + return Column::singleton()->getColumnSpanOptions(); + } +} diff --git a/templates/SilverWare/Components/TableComponent.ss b/templates/SilverWare/Components/TableComponent.ss new file mode 100644 index 0000000..5ba626d --- /dev/null +++ b/templates/SilverWare/Components/TableComponent.ss @@ -0,0 +1,7 @@ +
+ <% loop $Columns %> +
+ $Child +
+ <% end_loop %> +
From c06476c591ee8a175699970be6defef3dbe74a02 Mon Sep 17 00:00:00 2001 From: Colin Tucker Date: Wed, 29 Nov 2017 09:34:08 +1100 Subject: [PATCH 11/13] Adjusted list component margin --- client/src/styles/components/BaseListComponent.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/styles/components/BaseListComponent.scss b/client/src/styles/components/BaseListComponent.scss index b961e43..181b3de 100644 --- a/client/src/styles/components/BaseListComponent.scss +++ b/client/src/styles/components/BaseListComponent.scss @@ -7,7 +7,7 @@ > article.item { - margin-bottom: $spacer-double; + margin-bottom: $spacer; &:last-child { margin-bottom: 0; From 9ee8b3ad3fbc1a9fe2f20eb05d67bdb7e371c50b Mon Sep 17 00:00:00 2001 From: Colin Tucker Date: Wed, 29 Nov 2017 09:34:26 +1100 Subject: [PATCH 12/13] Added extension point for body attributes --- src/Extensions/ConfigExtension.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Extensions/ConfigExtension.php b/src/Extensions/ConfigExtension.php index 4864af3..5378beb 100644 --- a/src/Extensions/ConfigExtension.php +++ b/src/Extensions/ConfigExtension.php @@ -100,6 +100,8 @@ public function getAllBodyAttributes() } + $this->owner->extend('updateBodyAttributes', $attributes); + return $attributes; } From 9772dd95895a3d74ecc3e49be8895300c66406b5 Mon Sep 17 00:00:00 2001 From: Colin Tucker Date: Wed, 29 Nov 2017 09:34:36 +1100 Subject: [PATCH 13/13] Updated styles --- _config/styles.yml | 3 +++ client/dist/styles/bundle.css | 2 +- client/src/styles/bundle.scss | 2 ++ 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/_config/styles.yml b/_config/styles.yml index 6676410..d8605c1 100644 --- a/_config/styles.yml +++ b/_config/styles.yml @@ -53,6 +53,8 @@ SilverWare\Grid\Frameworks\Bootstrap\Framework: outline-dark: btn-outline-dark small: btn-sm large: btn-lg + column: + column: column content: content: content typography: typography @@ -86,6 +88,7 @@ SilverWare\Grid\Frameworks\Bootstrap\Framework: left: rounded-left circle: rounded-circle row: + row: row no-gutters: no-gutters section: edge-to-edge: pl-0 pr-0 diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css index 693cd3b..040ee1c 100644 --- a/client/dist/styles/bundle.css +++ b/client/dist/styles/bundle.css @@ -1 +1 @@ -.baselistcomponent .items>article.item{margin-bottom:2rem}.baselistcomponent .items>article.item:last-child{margin-bottom:0}.baselistcomponent .items>article.item>div.image{position:relative}.baselistcomponent .items>article.item>div.image a{display:block}.baselistcomponent .items>article.item>div.image img{margin:0;display:inline-block}.baselistcomponent .items>article.item>div.image div.image-overlay{top:0;left:0;right:0;bottom:0;width:100%;height:100%;opacity:0;overflow:hidden;position:absolute;-webkit-transition:.5s ease;transition:.5s ease;background-color:rgba(33,37,41,.5)}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner{top:50%;left:0;width:100%;position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner>div.icon{font-size:32px;text-align:center;color:#fff}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner>div.text{text-align:center;padding:0 1rem}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner>div.text>*{margin:0;padding:0;font-size:1.25rem;color:#fff}.baselistcomponent .items>article.item>div.image:hover div.image-overlay,.baselistcomponent .items>article.item>div.image a:focus div.image-overlay{opacity:1}.baselistcomponent .items>article.item>section.content{margin-top:1rem}.baselistcomponent .items>article.item>section.content header{margin-bottom:.5rem}.baselistcomponent .items>article.item>section.content header>*{margin-bottom:0}.baselistcomponent .items>article.item>section.content header a{color:inherit}.baselistcomponent .items>article.item>section.content div.details{color:#868e96}.baselistcomponent .items>article.item>section.content div.details>span{margin-right:.5rem}.baselistcomponent .items>article.item>section.content div.details a{color:inherit}.baselistcomponent .items>article.item>section.content footer{margin-top:1rem}.baselistcomponent .items>article.item>section.content>div{margin-bottom:.5rem}.baselistcomponent ul.pagination{margin-top:2rem;margin-bottom:0}.featurecomponent article.feature>a.feature{display:block;text-decoration:none;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out}.featurecomponent article.feature>a.feature:focus,.featurecomponent article.feature>a.feature:hover{text-decoration:none}.featurecomponent article.feature div.icon{margin-bottom:.5rem}.featurecomponent article.feature div.summary>p:last-child{margin-bottom:0}.featurecomponent article.feature footer{margin-top:1rem}.imagecomponent figure{width:100%;margin-bottom:0}.imagecomponent figure>figcaption>p:last-child{margin-bottom:0}.imagecomponent a.image{display:block}@media (min-width:768px){.listcomponent .items>article.item{display:block}.listcomponent .items.image-align-left>article.item,.listcomponent .items.image-align-right>article.item,.listcomponent .items.image-align-stagger>article.item{display:-webkit-box;display:-ms-flexbox;display:flex}.listcomponent .items.image-align-left>article.item>div.image,.listcomponent .items.image-align-right>article.item>div.image,.listcomponent .items.image-align-stagger>article.item>div.image{margin-bottom:0}.listcomponent .items.image-align-left>article.item.has-image>div.image,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(odd)>div.image{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.listcomponent .items.image-align-left>article.item.has-image>section.content,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(odd)>section.content{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin-top:0;margin-left:1rem}.listcomponent .items.image-align-right>article.item.has-image>div.image,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(2n)>div.image,.listcomponent .items>div.image{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.listcomponent .items.image-align-right>article.item.has-image>section.content,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(2n)>section.content,.listcomponent .items>section.content{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;margin-top:0;margin-right:1rem}}.mediacomponent figure{width:100%;margin-bottom:0}.mediacomponent figure>figcaption>p:last-child{margin-bottom:0}.mediacomponent a.text{display:block}.mediacomponent a.text:hover{text-decoration:none}.mediacomponent a.text:hover span{text-decoration:underline}.mediacomponent a.text>i.fa{color:#868e96}.mediacomponent a.image{display:block}.mediacomponent a.image+a.text{margin-top:.5rem}.mediacomponent .rich>iframe{margin:0!important}.mediacomponent .video{width:100%;height:0;display:block;position:relative}.mediacomponent .video.four-three{padding-bottom:75%}.mediacomponent .video.sixteen-nine{padding-bottom:56.25%}.mediacomponent .video>iframe{top:0;left:0;border:0;width:100%;height:100%;position:absolute}.pagecomponent.page-title-hidden .content-container>article>header{display:none}.pagecomponent .content-container>article>div{margin-bottom:1rem}.scrolltotopbutton{opacity:0;outline:0;right:1rem;bottom:1rem;width:4rem;height:4rem;z-index:1000;position:fixed;display:block;overflow:hidden;visibility:hidden;white-space:nowrap;text-align:center;font-size:16px;line-height:4rem;-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);box-shadow:0 0 20px rgba(0,0,0,.2);-webkit-transition:opacity .3s 0s,visibility 0s .3s,color .15s ease-in-out 0s,background-color .15s ease-in-out 0s;transition:opacity .3s 0s,visibility 0s .3s,color .15s ease-in-out 0s,background-color .15s ease-in-out 0s}.scrolltotopbutton.is-visible{opacity:1;visibility:visible}.scrolltotopbutton.fade-out{opacity:.5}.scrolltotopbutton:hover{opacity:1}@media (min-width:768px){.scrolltotopbutton{width:5rem;height:5rem;right:2rem;bottom:2rem;line-height:5rem}}@media (min-width:992px){.scrolltotopbutton{width:6rem;height:6rem;font-size:20px;line-height:6rem}}.tilecomponent .items{-webkit-box-orient:horizontal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.tilecomponent .items,.tilecomponent .items>article.item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal}.tilecomponent .items>article.item{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1 100%;flex:1 100%;padding:2%}.tilecomponent .items>article.item>section.content{margin-top:auto}.tilecomponent .items>article.item>section.content div.details>span{display:block;margin-right:0;margin-bottom:.25rem}@media (min-width:576px){.tilecomponent .items>article.item{-webkit-box-flex:1;-ms-flex:1 50%;flex:1 50%}}@media (min-width:768px){.tilecomponent .items>article.item{-webkit-box-flex:1;-ms-flex:1 33.3%;flex:1 33.3%}}@media (min-width:992px){.tilecomponent .items>article.item{-webkit-box-flex:1;-ms-flex:1 25%;flex:1 25%}}div.detail-fields a{color:inherit}div.detail-fields>ul{margin:0;padding:0;list-style:none}div.detail-fields>ul>li>dl,div.detail-fields>ul>li>dl>dd{margin:0;padding:0}div.detail-fields.block>ul>li{margin-bottom:1rem}div.detail-fields.block>ul>li dl dt{font-size:1rem;font-weight:700}div.detail-fields.block>ul>li dl dd{font-size:1rem}div.detail-fields.inline>ul>li{color:#868e96;display:inline-block;margin-right:.5rem}div.detail-fields.inline>ul>li dl dd,div.detail-fields.inline>ul>li dl dt{display:inline-block;font-size:1rem}div.detail-fields.hide-header>header,div.detail-fields.hide-icons>ul>li dl>dt>i,div.detail-fields.hide-names>ul>li dl>dt>span.name{display:none}.component.link{text-decoration:none}.component.link,.component.link>i.fa{display:inline-block}.component.link:active,.component.link:focus,.component.link:hover{text-decoration:none}.show-icons.hide-text .component.link{overflow:hidden;text-align:center;-webkit-transition:color .15s ease-in-out 0s,background-color .15s ease-in-out 0s,border-color .15s ease-in-out 0s;transition:color .15s ease-in-out 0s,background-color .15s ease-in-out 0s,border-color .15s ease-in-out 0s}.show-icons.hide-text .component.link>i.fa{display:block}.show-icons.hide-text .component.link.size-16{width:16px;height:16px;font-size:8px;line-height:16px}.show-icons.hide-text .component.link.size-16>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-24{width:24px;height:24px;font-size:12px;line-height:24px}.show-icons.hide-text .component.link.size-24>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-32{width:32px;height:32px;font-size:16px;line-height:32px}.show-icons.hide-text .component.link.size-32>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-48{width:48px;height:48px;font-size:24px;line-height:48px}.show-icons.hide-text .component.link.size-48>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-64{width:64px;height:64px;font-size:32px;line-height:64px}.show-icons.hide-text .component.link.size-64>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-96{width:96px;height:96px;font-size:48px;line-height:96px}.show-icons.hide-text .component.link.size-96>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-128{width:128px;height:128px;font-size:64px;line-height:128px}.show-icons.hide-text .component.link.size-128>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.hide-icons .component.link>i.fa,.hide-text .component.link>span.text{display:none}.component.slide .slide-caption.title-after>h1,.component.slide .slide-caption.title-after>h2,.component.slide .slide-caption.title-after>h3,.component.slide .slide-caption.title-after>h4,.component.slide .slide-caption.title-after>h5,.component.slide .slide-caption.title-after>h6{margin-bottom:0} \ No newline at end of file +.baselistcomponent .items>article.item{margin-bottom:1rem}.baselistcomponent .items>article.item:last-child{margin-bottom:0}.baselistcomponent .items>article.item>div.image{position:relative}.baselistcomponent .items>article.item>div.image a{display:block}.baselistcomponent .items>article.item>div.image img{margin:0;display:inline-block}.baselistcomponent .items>article.item>div.image div.image-overlay{top:0;left:0;right:0;bottom:0;width:100%;height:100%;opacity:0;overflow:hidden;position:absolute;-webkit-transition:.5s ease;transition:.5s ease;background-color:rgba(33,37,41,.5)}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner{top:50%;left:0;width:100%;position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner>div.icon{font-size:32px;text-align:center;color:#fff}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner>div.text{text-align:center;padding:0 1rem}.baselistcomponent .items>article.item>div.image div.image-overlay>div.inner>div.text>*{margin:0;padding:0;font-size:1.25rem;color:#fff}.baselistcomponent .items>article.item>div.image:hover div.image-overlay,.baselistcomponent .items>article.item>div.image a:focus div.image-overlay{opacity:1}.baselistcomponent .items>article.item>section.content{margin-top:1rem}.baselistcomponent .items>article.item>section.content header{margin-bottom:.5rem}.baselistcomponent .items>article.item>section.content header>*{margin-bottom:0}.baselistcomponent .items>article.item>section.content header a{color:inherit}.baselistcomponent .items>article.item>section.content div.details{color:#868e96}.baselistcomponent .items>article.item>section.content div.details>span{margin-right:.5rem}.baselistcomponent .items>article.item>section.content div.details a{color:inherit}.baselistcomponent .items>article.item>section.content footer{margin-top:1rem}.baselistcomponent .items>article.item>section.content>div{margin-bottom:.5rem}.baselistcomponent ul.pagination{margin-top:2rem;margin-bottom:0}.contentcomponent>header a{color:inherit}.featurecomponent article.feature>a.feature{display:block;text-decoration:none;-webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out}.featurecomponent article.feature>a.feature:focus,.featurecomponent article.feature>a.feature:hover{text-decoration:none}.featurecomponent article.feature div.icon{margin-bottom:.5rem}.featurecomponent article.feature div.summary>p:last-child{margin-bottom:0}.featurecomponent article.feature footer{margin-top:1rem}.imagecomponent figure{width:100%;margin-bottom:0}.imagecomponent figure>figcaption>p:last-child{margin-bottom:0}.imagecomponent a.image{display:block}@media (min-width:768px){.listcomponent .items>article.item{display:block}.listcomponent .items.image-align-left>article.item,.listcomponent .items.image-align-right>article.item,.listcomponent .items.image-align-stagger>article.item{display:-webkit-box;display:-ms-flexbox;display:flex}.listcomponent .items.image-align-left>article.item>div.image,.listcomponent .items.image-align-right>article.item>div.image,.listcomponent .items.image-align-stagger>article.item>div.image{margin-bottom:0}.listcomponent .items.image-align-left>article.item.has-image>div.image,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(odd)>div.image{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.listcomponent .items.image-align-left>article.item.has-image>section.content,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(odd)>section.content{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin-top:0;margin-left:1rem}.listcomponent .items.image-align-right>article.item.has-image>div.image,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(2n)>div.image,.listcomponent .items>div.image{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2}.listcomponent .items.image-align-right>article.item.has-image>section.content,.listcomponent .items.image-align-stagger>article.item.has-image:nth-child(2n)>section.content,.listcomponent .items>section.content{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;margin-top:0;margin-right:1rem}}.mediacomponent figure{width:100%;margin-bottom:0}.mediacomponent figure>figcaption>p:last-child{margin-bottom:0}.mediacomponent a.text{display:block}.mediacomponent a.text:hover{text-decoration:none}.mediacomponent a.text:hover span{text-decoration:underline}.mediacomponent a.text>i.fa{color:#868e96}.mediacomponent a.image{display:block}.mediacomponent a.image+a.text{margin-top:.5rem}.mediacomponent .rich>iframe{margin:0!important}.mediacomponent .video{width:100%;height:0;display:block;position:relative}.mediacomponent .video.four-three{padding-bottom:75%}.mediacomponent .video.sixteen-nine{padding-bottom:56.25%}.mediacomponent .video>iframe{top:0;left:0;border:0;width:100%;height:100%;position:absolute}.pagecomponent.page-title-hidden .content-container>article>header{display:none}.pagecomponent .content-container>article>div{margin-bottom:1rem}.scrolltotopbutton{opacity:0;outline:0;right:1rem;bottom:1rem;width:4rem;height:4rem;z-index:1000;position:fixed;display:block;overflow:hidden;visibility:hidden;white-space:nowrap;text-align:center;font-size:16px;line-height:4rem;-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);box-shadow:0 0 20px rgba(0,0,0,.2);-webkit-transition:opacity .3s 0s,visibility 0s .3s,color .15s ease-in-out 0s,background-color .15s ease-in-out 0s;transition:opacity .3s 0s,visibility 0s .3s,color .15s ease-in-out 0s,background-color .15s ease-in-out 0s}.scrolltotopbutton.is-visible{opacity:1;visibility:visible}.scrolltotopbutton.fade-out{opacity:.5}.scrolltotopbutton:hover{opacity:1}@media (min-width:768px){.scrolltotopbutton{width:5rem;height:5rem;right:2rem;bottom:2rem;line-height:5rem}}@media (min-width:992px){.scrolltotopbutton{width:6rem;height:6rem;font-size:20px;line-height:6rem}}.tablecomponent .row>.column>.component{margin-bottom:1rem}.tilecomponent .items{-webkit-box-orient:horizontal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.tilecomponent .items,.tilecomponent .items>article.item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-direction:normal}.tilecomponent .items>article.item{-webkit-box-orient:vertical;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1 100%;flex:1 100%;padding:2%}.tilecomponent .items>article.item>section.content{margin-top:auto}.tilecomponent .items>article.item>section.content div.details>span{display:block;margin-right:0;margin-bottom:.25rem}@media (min-width:576px){.tilecomponent .items>article.item{-webkit-box-flex:1;-ms-flex:1 50%;flex:1 50%}}@media (min-width:768px){.tilecomponent .items>article.item{-webkit-box-flex:1;-ms-flex:1 33.3%;flex:1 33.3%}}@media (min-width:992px){.tilecomponent .items>article.item{-webkit-box-flex:1;-ms-flex:1 25%;flex:1 25%}}div.detail-fields a{color:inherit}div.detail-fields>ul{margin:0;padding:0;list-style:none}div.detail-fields>ul>li>dl,div.detail-fields>ul>li>dl>dd{margin:0;padding:0}div.detail-fields.block>ul>li{margin-bottom:1rem}div.detail-fields.block>ul>li dl dt{font-size:1rem;font-weight:700}div.detail-fields.block>ul>li dl dd{font-size:1rem}div.detail-fields.inline>ul>li{color:#868e96;display:inline-block;margin-right:.5rem}div.detail-fields.inline>ul>li dl dd,div.detail-fields.inline>ul>li dl dt{display:inline-block;font-size:1rem}div.detail-fields.hide-header>header,div.detail-fields.hide-icons>ul>li dl>dt>i,div.detail-fields.hide-names>ul>li dl>dt>span.name{display:none}.component.link{text-decoration:none}.component.link,.component.link>i.fa{display:inline-block}.component.link:active,.component.link:focus,.component.link:hover{text-decoration:none}.show-icons.hide-text .component.link{overflow:hidden;text-align:center;-webkit-transition:color .15s ease-in-out 0s,background-color .15s ease-in-out 0s,border-color .15s ease-in-out 0s;transition:color .15s ease-in-out 0s,background-color .15s ease-in-out 0s,border-color .15s ease-in-out 0s}.show-icons.hide-text .component.link>i.fa{display:block}.show-icons.hide-text .component.link.size-16{width:16px;height:16px;font-size:8px;line-height:16px}.show-icons.hide-text .component.link.size-16>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-24{width:24px;height:24px;font-size:12px;line-height:24px}.show-icons.hide-text .component.link.size-24>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-32{width:32px;height:32px;font-size:16px;line-height:32px}.show-icons.hide-text .component.link.size-32>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-48{width:48px;height:48px;font-size:24px;line-height:48px}.show-icons.hide-text .component.link.size-48>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-64{width:64px;height:64px;font-size:32px;line-height:64px}.show-icons.hide-text .component.link.size-64>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-96{width:96px;height:96px;font-size:48px;line-height:96px}.show-icons.hide-text .component.link.size-96>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.show-icons.hide-text .component.link.size-128{width:128px;height:128px;font-size:64px;line-height:128px}.show-icons.hide-text .component.link.size-128>i.fa{top:50%;position:relative;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.hide-icons .component.link>i.fa,.hide-text .component.link>span.text{display:none}.component.slide .slide-caption.title-after>h1,.component.slide .slide-caption.title-after>h2,.component.slide .slide-caption.title-after>h3,.component.slide .slide-caption.title-after>h4,.component.slide .slide-caption.title-after>h5,.component.slide .slide-caption.title-after>h6{margin-bottom:0} \ No newline at end of file diff --git a/client/src/styles/bundle.scss b/client/src/styles/bundle.scss index f0033bb..fc28659 100644 --- a/client/src/styles/bundle.scss +++ b/client/src/styles/bundle.scss @@ -20,12 +20,14 @@ // Import Component Styles: @import "components/BaseListComponent"; +@import "components/ContentComponent"; @import "components/FeatureComponent"; @import "components/ImageComponent"; @import "components/ListComponent"; @import "components/MediaComponent"; @import "components/PageComponent"; @import "components/ScrollToTopButton"; +@import "components/TableComponent"; @import "components/TileComponent"; // Import Extension Styles: