Edit search list to make it fit the css more

mamamia5x commented 3 years ago

The search looks like this

But it just doesn't fit.

Maybe it is the font color and size, or the style of the lists.

But if you want to edit the list to make it fit, you'd just need to edit this

  #listOfItems {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#listOfItems li a {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 18px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}

#listOfItems li a:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}

And it's found in vital/pages/search/index.html You'll just need to edit this page if you'd like to see what it looks like, but to make a permanent you'll need to copy the changes and paste them to vital/searchtemplate.html

shravan2524 commented 3 years ago

Hello, Can you please assign me this issue.

rajpratyush commented 3 years ago

@mamamia5x can i work on this??

mamamia5x commented 3 years ago

Sure thing, sorry for the delay.

rajpratyush commented 3 years ago

one question before I work on this how do you want the layout to be?

mamamia5x commented 3 years ago

That's a good question. I would prefer to have feel like a search engine, like Google or Bing. It doesn't have to be that way, it is totaly up to you, as long as it looks good it'll be added in.

rajpratyush commented 3 years ago

@mamamia5x let me sketch a wireframe for this and then we can modify it

mamamia5x commented 3 years ago

Alright sounds good.