[CONTEDIT-51] Templates for article list and article detail Created: 15/Mar/17  Updated: 08/Sep/17  Resolved: 24/Mar/17

Status: Closed
Project: Content Editor
Component/s: None
Affects Version/s: None
Fix Version/s: 1.0

Type: Improvement Priority: Neutral
Reporter: Anja von Gunten Assignee: Maxime Michel
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File 01 mgnl blog article list fonts.png     PNG File 01 mgnl blog article list padding.png     PNG File 02 mgnl blog article detail fonts.png     PNG File 02 mgnl blog article detail padding.png     Zip Archive Article #3.zip    
Issue Links:
dependency
is depended upon by CONTEDIT-19 Show only article stub consisting of ... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: Initial Article editor
Sprint: Basel 88
Story Points: 5

 Description   

After publishing an article the editor wants to see how the final article actually looks like. A list view and according detail views of the articles are technically already implemented on the public instance. This Improvement issue is about applying simple styles to the two templates, article list and article detail. This serves the purpose to properly tell and demonstrate the final part of the story of the article editor: the article should in the end look like a state-of-the-art article as expected from today's web.


Article list

The article list is in chronological order. The article teasers appear in two variations

A) Article stub 1 for the two recent articles containing:

  • title
  • author/date
  • lead image
  • lead text
  • 2 paragraphs (ignoring subheadings h2 / h3)

B) Article stub 2 for all other articles containing:

  • title
  • author/date
  • lead text

Padding

The width of the article list is fixed to 700 px and centered in the browser window.
See all padding definitions of the list view in the following image

Font styles

See all font definitions of the list view in the following image


Article detail

Padding

The width of the article detail is fixed to 700 px and centered in the browser window.
See all padding definitions of the detail view in the following image

  • In general there are 15px between two paragraphs
  • Before a subheading there are 30px
  • Before and after an image there are 30px
  • Between image and image caption there are 10 px

Font styles

See all font definitions of the detail view in the following image



 Comments   
Comment by Andreas Weder [ 17/Mar/17 ]

I've attached an archive containing article #3 - that the third article shown in the templates attached to this issue on "sharing components on npm" (original can be found here). The archive contains two XML exports of both an article and an asset, as well as the binary of the asset itself.

I've used a build of today to write this piece: https://nexus.magnolia-cms.com/service/local/repositories/magnolia.enterprise.snapshots/content/info/magnolia/articleeditor/article-editor-bundle/1.0-SNAPSHOT/article-editor-bundle-1.0-20170317.094819-6-tomcat-bundle.tar.gz

We will provide more articles with a later build and on Monday, once embeds become available.

Generated at Mon Feb 12 00:16:34 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.