Tags look revamp

Development
,
9

After reworking the HTML and CSS:

Tags look isolated

image
image728×97 9.27 KB

Tags look in the context of whole footer revamp

Disclaimers:

  • The like button has its own seperate proposal here, I’ll update the status there too.
  • The colored tags will have their own seperate proposal (will come back with a link)
  • The info in the right will have its own seperate proposal (will come back with a link)

Case 1: Viewer has no rights regarding adding tags

image
image1814×197 21.6 KB

Case 2: Viewer had rights to add tags

image
image1816×165 22.9 KB

Case 3: Mobile

image
image626×622 45 KB

Changes on the tags look from last update

  • alligned the like button with the tags
  • made the background of the normal/non-colored tags white
  • no hashtag on tags
  • the HTML is more semantic (hopefully fully)
  • added states to everything clickable (disclaimer:the way i did them works best only on light themes. I need to find a way to make them good for dark themes too)
  • increased horizontal spacing between tags
  • took into consideration the idea of having the “Add tag” button or the “Tags:” label depending on the rights of the viewer

HTML

The icons are not added in the way they are supposed to, this is just to confirm the structure and class usages.

                <div id="xdocFooter">
 
                  <!-- Like button -->
                  <button class="btn btn-default like-button"
                    title="Like this page to show your appreciation. Number of likes: 10">
                    <span class="fa fa-heart"></span>
                    <span class="like-number">10</span>
                  </button>

                  <div class="doc-tags">

                   <!-- Case 1 -->
                    <div class="tags-label">Tags:</div>

                   <!-- Case 2 -->
                    <button id="add-tag-button">
                      <span class="fa fa-plus"></span>
                      <span class="add-tag">Add tag</span>
                    </button>

                    <!-- All tags -->
                    <div class="tag-wrapper">

                      <!-- Each tag has the tag class and another class (simple-tag,success-tag, warning-tag, etc.) that color it i some way -->
                      <button class="tag success-tag"><a title="View all pages with the tag: done"
                          href="/xwiki/bin/view/Main/Tags?do=viewTag&amp;tag=done">done</a></button>
                      <button class="tag simple-tag"><a title="View all pages with the tag: proctivity"
                          href="/xwiki/bin/view/Main/Tags?do=viewTag&amp;tag=productivity">productivity</a></button>
                      <button class="tag simple-tag"><a title="View all pages with the tag: november"
                          href="/xwiki/bin/view/Main/Tags?do=viewTag&amp;tag=november">november</a></button>

                    </div>

                  </div>

<!-- Here will be HTML code for the info in the right side -->

</div>

CSS/LESS

/* additional spacing for the like button*/

.like-button {
    margin-right: 24px;
    align-self: start;
}

/* styling the add tag button */

#add-tag-button {
    display: inline;
    font-size: @font-size-base;
    vertical-align: middle;
    white-space: nowrap;
    background-color: @xwiki-page-content-bg;
    border: 0;
    color: @link-color;
    border-radius: @border-radius-base;
    padding: 4px 10px;
}

/* add tag button states */

#add-tag-button:hover {
    filter:brightness(95%);
}

#add-tag-button:focus {
    filter:brightness(90%);
}

#add-tag-button:active{
    filter: brightness(95%);
    padding:3px 10px;
    border:1px solid @link-color;
}

/* label spacing relative to the icon in the add tag button */
.add-tag {
    margin-left: 2px;
}

/* making all buttons in the footer consistent by having the same padding*/

#xdocFooter>button,
#xdocFooter>.doc-tags>.tag-wrapper>button,
#xdocFooter>.doc-tags1>.tag-wrapper1>button {
    padding: 3px 10px;

}



/* styling the general behaviour and dimensions of a tag
- css based on btn-default */

.tag {
    border-radius: 999px;
    overflow-wrap:break-word;
    word-wrap: break-word;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    font-size: @font-size-base;
    line-height: 1.428571429;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    margin-right: 6px;

}

/* tag states */

.tag:hover {
    filter: brightness(95%);
}

.tag:focus {
    filter: brightness(90%);
}

.tag:active {
    border: 3px solid transparent;
}

/* colouring the tags - normal tags */

.simple-tag {
    background-color: @xwiki-page-content-bg;
    border-color: #e8e8e8; /* box border color variable - which is it? */
}

.simple-tag a {
    color: @text-color;
}


/* example of a colored tag: succes case (status:done) 
This will be further explained in a separate proposal */

.success-tag {
    background-color: @alert-success-bg;
    border-color: @alert-success-border;
}

.success-tag a {
    color: @alert-success-text;
}


/* the wrapper that contains every tag */

.tag-wrapper{
    padding:0;
    display:inline;
    line-height:250%;
    
}

/* the container that contains the tags, add tag button or "Tags:" label*/

.doc-tags{
    flex:1;
}

/*styling the "Tags:" label*/
 .tags-label{
    display: inline;
    font-size: @font-size-base;
    vertical-align: middle;
    white-space: nowrap;
    margin-right: 4px;
 }

/*mobile*/

@media only screen and (max-width: 600px) {
    .tag-wrapper1 {
      display:flex;
      line-height: 275%;
    }

    .doc-tags1{
        margin-top:10px;
        margin-bottom:10px;
  }

  #add-tag-button{
    margin-left:-5px;
  }
}

Let me know what you think about the changes :grin:

1 Like