From df818f04043b48fbc92065c0876d3ea9d11ffb32 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Tue, 26 May 2020 17:58:03 +0000 Subject: [PATCH] WIP #3641 @10 --- .../controllers/BlogpostController.php | 13 ++- .../application/forms/CMS/Sub/Blog/Post.php | 6 +- framework/application/models/Blog.php | 4 +- .../views/helpers/BackgroundBlock.php | 16 ++-- .../application/views/helpers/BlogBody.php | 56 ++++++++++++ .../application/views/helpers/BlogIndex.php | 29 +++--- .../application/views/helpers/BlogIntro.php | 52 +++++++++++ .../views/helpers/ContactFooter.php | 4 +- .../application/views/helpers/HomeLayer.php | 2 +- .../views/scripts/blogpost/index.phtml | 15 +++- less/610-blog.less | 88 +++++++++++++++++++ 11 files changed, 244 insertions(+), 41 deletions(-) create mode 100644 framework/application/views/helpers/BlogBody.php create mode 100644 framework/application/views/helpers/BlogIntro.php create mode 100644 less/610-blog.less diff --git a/framework/application/controllers/BlogpostController.php b/framework/application/controllers/BlogpostController.php index cd32ce2..33c34a4 100644 --- a/framework/application/controllers/BlogpostController.php +++ b/framework/application/controllers/BlogpostController.php @@ -4,7 +4,7 @@ class BlogpostController extends CubeIT_Controller_PageController { public function indexAction() { - $this->view->headScript()->addScriptAndStyle('blog-post'); + $this->view->headScript()->addScriptAndStyle('610-blog'); //$parent = $this->view->currentPage->getParent(); //$parent_data = $this->getBootstrap()->getCMSDatasOfNavigationPage($parent); @@ -13,8 +13,14 @@ class BlogpostController extends CubeIT_Controller_PageController { $model = Fluidbook_Model_Blog::factory() ->order('publish_date DESC') - ->where('id = ?', $this->getRequest() - ->getParam('post_id')); + ->where('id = ?', $this->getRequest()->getParam('post_id')); + + // Non-admin users can't see offline or future posts + if (!$this->isAllowed('edition')) { + $model->where('online = ?', 1); + $model->where('publish_date <= NOW()'); + } + $post = $model->find(); if (count($post) < 1) { @@ -24,6 +30,7 @@ class BlogpostController extends CubeIT_Controller_PageController { // Get the first and only array item $post = reset($post); + $post = $post->unserialize(); $this->view->post = $post->unserialize(); $this->view->headTitle($post->getTitle(), 'SET'); diff --git a/framework/application/forms/CMS/Sub/Blog/Post.php b/framework/application/forms/CMS/Sub/Blog/Post.php index db33459..b86e46d 100644 --- a/framework/application/forms/CMS/Sub/Blog/Post.php +++ b/framework/application/forms/CMS/Sub/Blog/Post.php @@ -35,13 +35,13 @@ class Fluidbook_Form_CMS_Sub_Blog_Post extends CubeIT_Form_List_Model $intro_image->setMaxItems(1); $this->addElement($intro_image); - $intro_text_color = new Zend_Form_Element_Select('intro_text_color'); - $intro_text_color->setLabel('Intro Text Colour') + $intro_style = new Zend_Form_Element_Select('intro_style'); + $intro_style->setLabel('Intro Block Style') ->setMultiOptions([ 'light' => 'Light', 'dark' => 'Dark', ]); - $this->addElement($intro_text_color); + $this->addElement($intro_style); $intro_gradient_start = new CubeIT_Form_Element_Color('intro_gradient_start'); $intro_gradient_start->setLabel('Intro Gradient Start') diff --git a/framework/application/models/Blog.php b/framework/application/models/Blog.php index 72771b6..746128f 100644 --- a/framework/application/models/Blog.php +++ b/framework/application/models/Blog.php @@ -9,7 +9,7 @@ class Fluidbook_Model_Blog extends CubeIT_Model_Data_Table protected $intro_image; protected $intro_gradient_start; protected $intro_gradient_end; - protected $intro_text_color; + protected $intro_style; protected $content; protected $publish_date; protected $author_id; @@ -26,7 +26,7 @@ class Fluidbook_Model_Blog extends CubeIT_Model_Data_Table $table->addColumn('intro_image', 'text'); $table->addColumn('intro_gradient_start', 'string', ['length' => 7]); // Hex code $table->addColumn('intro_gradient_end', 'string', ['length' => 7]); // Hex code - $table->addColumn('intro_text_color', 'string', ['length' => 7]); // light|dark + $table->addColumn('intro_style', 'string', ['length' => 5, 'default' => 'light']); // light|dark (used for setting text colour + header style) $table->addColumn('content', 'text'); $table->addColumn('publish_date', 'datetime'); $table->addColumn('author_id', 'integer', ['unsigned' => true]); diff --git a/framework/application/views/helpers/BackgroundBlock.php b/framework/application/views/helpers/BackgroundBlock.php index 3be23e4..f6060f8 100644 --- a/framework/application/views/helpers/BackgroundBlock.php +++ b/framework/application/views/helpers/BackgroundBlock.php @@ -5,10 +5,15 @@ class Fluidbook_View_Helper_BackgroundBlock extends CubeIT_View_Helper_Abstract /** * @return string */ - public function backgroundBlock($content, $data, $class = array('content-wrapper', 'no-shrink')) + public function backgroundBlock($content, $data, $attributes = []) { - $style = ''; - $attributes = array('class' => $class); + if (!isset($attributes['style'])) { + $attributes['style'] = ''; + } + + if (!isset($attributes['class'])) { + $attributes['class'] = ['content-wrapper', 'no-shrink']; + } if (isset($data['backgroundimage']) && !isset($data['bg_image'])) { $data['bg_image'] = $data['backgroundimage']; @@ -54,11 +59,9 @@ class Fluidbook_View_Helper_BackgroundBlock extends CubeIT_View_Helper_Abstract $target_height = $mobile_max_width * $image_ratio; $mobile = $this->imageProcess()->imageProcessGetURL($mobile_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M'); } else { - $attributes['data-bg-ratio'] = $attributes['data-bg-ratio']; $mobile = $this->imageProcess()->imageProcessGetURL($image_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M'); } } else { - $attributes['data-bg-ratio'] = $attributes['data-bg-ratio']; $mobile = $this->imageProcess()->imageProcessGetURL($image_path, '', $mobile_max_width, $target_height, array(), 'C', 'R', 'M'); } @@ -85,9 +88,8 @@ class Fluidbook_View_Helper_BackgroundBlock extends CubeIT_View_Helper_Abstract } if (isset($data['bg_color'])) { - $style .= "background-color:" . $data['bg_color'] . ";"; + $attributes['style'] .= "background-color: {$data['bg_color']};"; } - $attributes['style'] = $style; return $this->htmlElement($content, 'div', $attributes); } diff --git a/framework/application/views/helpers/BlogBody.php b/framework/application/views/helpers/BlogBody.php new file mode 100644 index 0000000..b58f30c --- /dev/null +++ b/framework/application/views/helpers/BlogBody.php @@ -0,0 +1,56 @@ +'; + $res .= '
'; + + foreach ($post->getContent() as $content) { + + $res .= '
'; + + switch($content->content_type) { + case 'text': + $res .= $this->_text($content); + break; + + case 'image': + $res .= $this->_image($content); + break; + } + + $res .= '
'; // .block-$content->content_type + } + + $res .= '
'; // .blog-post-body + $res .= ''; // .content-wrapper + + return $res; + } + + protected function _text($content) { + return $this->markupDotclear($content->text); + } + + protected function _image($content) { + + $class = (!empty($content->image_style)) ? 'image-'.$content->image_style : ''; + + $res = '
'; + + if (!empty($content->image)) { + $res .= $this->imageCms($content->image, $content->image_caption); + } + + if (!empty($content->image_caption)) { + $res .= '
'. $content->image_caption .'
'; + } + + $res .= '
'; + + return $res; + } + +} diff --git a/framework/application/views/helpers/BlogIndex.php b/framework/application/views/helpers/BlogIndex.php index 4366e46..e876ebe 100644 --- a/framework/application/views/helpers/BlogIndex.php +++ b/framework/application/views/helpers/BlogIndex.php @@ -6,32 +6,23 @@ class Fluidbook_View_Helper_BlogIndex extends CubeIT_View_Helper_Abstract { */ public function blogIndex() { - $posts = Fluidbook_Model_Blog::factory()->order('publish_date DESC')->find(); + $model = Fluidbook_Model_Blog::factory()->order('publish_date DESC'); + + // Don't show offline or future posts to non-admins + if (!$this->acl()->isAllowed('edition')) { + $model->where('online = ?', 1); + $model->where('publish_date <= NOW()'); + } + + $posts = $model->find(); $res = ''; foreach ($posts as $post) { /* @var $post Fluidbook_Model_Blog */ - $res .= $this->post($post->unserialize()); + $res .= $this->blogIntro($post, false); } return $this->htmlElement($res, 'div', ['class' => 'blog-index']); } - - protected function post($post) { - - $URL = CubeIT_Navigation_Page::generateAutoUri($post, Bootstrap::getBlogPostURLTemplate()); - - $img = $this->view->imageCms($post->getIntroImage(), $post->getTitle(), null, null, ['class' => 'blog-hero-image']); - - $res = $this->link($img, $URL); - $res .= '
'; - $res .= $this->dateTime($post->getPublishDate(), CubeIT_Date::DAY .' '. CubeIT_Date::MONTH_NAME .' '. CubeIT_Date::YEAR); - $res .= $this->link($this->htmlElement($post->getTitle(), 'h2'), $URL, ['class' => 'news-heading-link']); - $res .= '
'; - $res .= $this->markupDotclear($post->getExcerpt()); - $res .= '
'; - $res .= $this->link(__('Lire la suite'), $URL, ['class' => 'read-more']); - return $this->htmlElement($res, 'article'); - } } diff --git a/framework/application/views/helpers/BlogIntro.php b/framework/application/views/helpers/BlogIntro.php new file mode 100644 index 0000000..0bd8f9a --- /dev/null +++ b/framework/application/views/helpers/BlogIntro.php @@ -0,0 +1,52 @@ +unserialize(); + + $URL = CubeIT_Navigation_Page::generateAutoUri($post, Bootstrap::getBlogPostURLTemplate()); + + // This helper is used in two contexts: the blog index and on the single blog post + // In the blog index, the title should be a H2 and have a link on it + // In the single post view, the title is a H1 without a link + if ($is_single) { + $title = $post->getTitle(); + $title_tag = 'h1'; + } else { + $title = $this->link($post->getTitle(), $URL); + $title_tag = 'h2'; + } + + // Blog intro content structure + $res = '
'; + $res .= '
'; + $res .= $this->dateTime( + $post->getPublishDate(), + CubeIT_Date::DAY .' '. CubeIT_Date::MONTH_NAME .' '. CubeIT_Date::YEAR, + ['class' => 'blog-intro-date'] + ); + $res .= $this->title($title, $title_tag, ['class' => 'blog-intro-title']); + $res .= $this->markupDotclear($post->getExcerpt(), [], ['class' => 'blog-intro-excerpt']); + $res .= '
'; // .col-2 + $res .= '
'; // .grid + + // Prepare data and attributes for use in the backgroundBlock helper + $data = [ + 'title' => $post->getTitle(), + ]; + + $attributes = [ + 'class' => ['content-wrapper', 'blog-intro', $post->getIntroStyle()], + 'style' => "background-image:linear-gradient(135deg, {$post->getIntroGradientStart()}, {$post->getIntroGradientEnd()});", + ]; + + if ($post->getIntroImage()) { + $data['bg_image'] = $post->getIntroImage(); + } + + return $this->backgroundBlock($res, $data, $attributes); + } + +} diff --git a/framework/application/views/helpers/ContactFooter.php b/framework/application/views/helpers/ContactFooter.php index 43315da..40bce09 100644 --- a/framework/application/views/helpers/ContactFooter.php +++ b/framework/application/views/helpers/ContactFooter.php @@ -23,11 +23,11 @@ class Fluidbook_View_Helper_ContactFooter extends CubeIT_View_Helper_Abstract { $res = $this->htmlElement($res, 'div', array('class' => 'col-2')); $res = $this->htmlElement($res, 'div', array('class' => 'grid')); - $res = $this->backgroundBlock($res, $cf, array('content-wrapper')); + $res = $this->backgroundBlock($res, $cf, ['class' => ['content-wrapper']]); return $this->htmlElement($res, 'section', array( 'class' => 'contactFooter section', 'data-themecolor' => '#8aab41', // Todo: possibly set this via the admin? 'data-section-name' => 'contact', 'data-puce' => __('Contact'))); } -} \ No newline at end of file +} diff --git a/framework/application/views/helpers/HomeLayer.php b/framework/application/views/helpers/HomeLayer.php index 2add350..1fb2727 100644 --- a/framework/application/views/helpers/HomeLayer.php +++ b/framework/application/views/helpers/HomeLayer.php @@ -20,7 +20,7 @@ class Fluidbook_View_Helper_HomeLayer extends CubeIT_View_Helper_Abstract $content = $this->htmlElement($content, 'div', array('class' => 'content-inner')); $content .= $outerContent; - $content = $this->backgroundBlock($content, $this->data, array('content-wrapper', 'no-shrink', 'fullheight')); + $content = $this->backgroundBlock($content, $this->data, ['class' => ['content-wrapper', 'no-shrink', 'fullheight']]); return $this->htmlElement($content, 'section', $attributes); } diff --git a/framework/application/views/scripts/blogpost/index.phtml b/framework/application/views/scripts/blogpost/index.phtml index f6c5470..bc694b4 100644 --- a/framework/application/views/scripts/blogpost/index.phtml +++ b/framework/application/views/scripts/blogpost/index.phtml @@ -1,4 +1,11 @@ - -
-    post); ?>
-
+ 'blog-post-single', + 'data-header-theme' => $this->post->getIntroStyle(), +]; + +echo $this->htmlElement($this->blogIntro($this->post), 'section', $attributes); +echo $this->blogBody($this->post); +echo $this->contactFooter(); + diff --git a/less/610-blog.less b/less/610-blog.less new file mode 100644 index 0000000..43e1f2c --- /dev/null +++ b/less/610-blog.less @@ -0,0 +1,88 @@ +@import "000-imports"; + +.blog-index { + padding: 144px 0; + + @media @m1280 { + padding: 86px 0; + } + @media @m900 { + padding: 96px 0; + } + @media @m768 { + padding: 68px 0; + } + +} + + +.blog-intro { + display: flex; + align-items: center; + padding: 0 !important; + + &.light { + color: #fff; + } + + &.dark { + color: @color-text; + } + + &-content { + flex-basis: 40%; + } + + &-date { + display: block; + margin-bottom: 0.5em; + } + + &-title { + color: currentColor !important; + font-size: 60px !important; + + &:after { + background-color: currentColor !important; + } + + a { + color: currentColor; + text-decoration: none; + + &:hover { + color: currentColor; + } + } + } + + &-excerpt { + font-size: 15px; + line-height: 1.7; + } + + .picture { + @media @m1024 { + display: none; + } + } + +} + + +.blog-post-body { + max-width: 1008px; + margin: 0 auto; + font-size: 24px; + line-height: 1.67; + + > * + * { + margin-top: 1.5em; + } + + img { + max-width: 100%; + height: auto; + } + +} -- 2.39.5