Redesign, new views and responsive for SELFEED

With this contribution I created a new view for the SELFEED by @elguille, also you can now toggle night mode and it is responsive.

This is how it looked:

New design:

The new colors look better and it is cleaner without the underline.

Also there is a new view style:

And an option to toggle night mode so it looks like this:

This was achieved using CSS and jQuery.

The jQuery code is like this:

        $('#view-masonry').click(function(){
          $('#posts-container').addClass('posts-masonry')
        });
        $('#view-normal').click(function(){
          $('#posts-container').removeClass('posts-masonry')
        });
        $('#togglenight').click(function(){
          $('body').toggleClass('nightmode')
        });

This makes all the buttons work to apply or remove the necessary classes. It is simple and fast to the user.

The CSS is more extended, there was need to create a new style sheet.

body{
  color:#f4f4f4;
  margin: 0px auto;
  font-family: sans-serif;
  color: #BBB;
}
body.nightmode {
    background: #444;
}

With this option the background color changes to darker only if the nightmode class is active.

Same for masonry style:

.posts-masonry{
  column-count: 4;
  column-gap: 10px;}
.posts-masonry .stm-post{
  display: inline-block;
  margin: 0 0 10px;
  width: 100%;
  border:#ececec 1px solid;
  border-radius:3px;
  padding:10px;
  box-sizing: border-box;
}
.nightmode .posts-masonry .stm-post{
  border:#333 1px solid;
}

The view style only appears like that if the container has the class posts-masonry and the colors change with nightmode.

Finally a few breakpoints were added to make it responsive:

.posts-masonry{
  column-count: 1;
  column-gap: 10px;}

  @media  screen and (min-width: 500px) {
    .posts-masonry{
      column-count: 2;
      }
    }

@media  screen and (min-width: 800px) {
  .posts-masonry{
    column-count: 3;
    }
  }

These are just a few lines of codes to work as example. The four columns layout can be seen starting at 1200px.

To see it working click here.

Remember to add your own username at the end.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---