UI for What's new feature

Last modified by Vincent Massol on 2024/11/19 16:14

 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="row">

                    <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

.category-tag {
   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:

v1.png

v2.png

v3.png

v4.png

v5.png

Example custom image

w1.png

w2.png

w3.png

w4.png

w5.png

w6.png

w7.png

w8.png



 

Get Connected