UI for What's new feature
- XWiki
- Design
- Active
Discussion started here: https://forum.xwiki.org/t/whats-new-ui-proposal-html-css-code/12968/3
Description
The full design page is at What's New Feature Design.
Goal
Create a simple, modern interface for the new What's new feature.
The Item in the repeater
Note that the following versions work for the MVP and for the final version which will have the section in the Drawer Menu like in GitLab.
Observation: the "new tab" icon from the external link class doesn't work for me, but it should, otherwise.
Updated (after forum discussion)
HTML
<div class="col-sm-6">
<!-- image side -->
<div class="article-cover">
<img src="https://wallpaperaccess.com/full/2386802.jpg" alt="Cover of the article containing elements related to knowledge organization and symbolic to the new changes made in XS" class="ïmg-responsive whatsnew-img">
</div>
</div>
<div class="col-sm-6">
<!-- content side -->
<h2 class="article-title">The new Task Manager (Pro)</h2>
<div id="xdocAuthors" class="xdocCreation"><b>by Dorina Anton</b> 7 August 2023</div>
<span class="category-tag">Pro Apps</span>
<span class="category-tag">XS</span>
<span class="category-tag">New release</span>
<p class="article-text">
XWiki SAS has launched the Task Manager Application (Pro), a business-ready application, part of
the paid apps suite <span class="wikiexternallink"><a href="http://extensions.xwiki.org">available on the dedicated
store</a></span>. Task Manager (Pro) allows you to create and manage tasks inside a wiki. It provides various
macros to display single or multiple tasks filtered using numerous criteria and it supports the
migration of Confluence tasks and reports to XWiki. Read the full article to learn about all its
features and how to install it.
</p>
<button id="whatsnew-btn" class="btn btn-primary ">Read more</button>
</div>
</div>
LESS
margin-top: 1.25rem;
margin-bottom: 1.25rem;
display: inline-block;
min-width: 10px;
padding: 5px 10px;
font-size: 12px;
line-height: 1;
color: @headings-color;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: @dropdown-link-hover-bg;
border-radius: 999px;
}
.whatsnew-img {
max-height: 300px;
margin-bottom: 2.5rem;
border-radius: 7px;
}
.article-cover {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.article-text {
text-align: justify;
text-justify: inter-word;
}
.article-title {
margin-top: 0px;
}
#whatsnew-btn {
margin-top: 5px;
}
Image requirements
For the first version, I believe that images that have a pretty small height compared to their width are better. A good size ratio for them could be one like social media covers (3:1) with a minimum of 783 x 261 px. They can have the height even smaller than this, the width is the one that is gonna affect the design if it's small.
Default image
For the first version: