Improve the dropdown border and spacing style

miguelmich commented 8 years ago

The dropdown general border is too dark, it would be better to use soft and subtle colors, also I'm noticing there is too many space at the bottom of each dropdown item, please fix this, spacing is one of the most important things in web design.

miguelmich commented 8 years ago

I'm going to let you some inspirations that may help you to create a better idea of spacing and general good aesthetics :

https://dribbble.com/shots/947961-Dropdown https://dribbble.com/shots/1213687-Mail-Message-Dropdown-Menu-UI https://dribbble.com/shots/2421078-Messages-Dropdown https://dribbble.com/shots/2344581-Notifications https://dribbble.com/shots/2043333-Message-Dropdown https://dribbble.com/shots/2108505-Material-Dashboard https://dribbble.com/shots/589458-Messages https://dribbble.com/shots/637733-Messages-2

This could be the hardest part for us to get an agreement be unfortunately is necessary to create a good product.

miguelmich commented 8 years ago

Please apply this to the three dropdown menus

miguelmich commented 8 years ago

This need more work on it, size issues is still a problem, please see the references I left you

alex-b-developer commented 8 years ago

Trabajé bastante en este punto acomodando espacio, tamaño de letra, etc... También centré el menu y le puse un arrowtop para señalar. Pero no he podido dar con los colores finales, por eso no cerré el issue.

Envío un ejemplo de colores para que me digas si te parece bien para poderlo implementar o en caso contrario para recibir nuevas sugerencias.

alex-b-developer commented 8 years ago

Propuesta color: color1

alex-b-developer commented 8 years ago

Efecto del dropdown. Para que el menu desplegable no salga tan brusco me gustaría implementarle algun efecto jquery. Dime que te parece o si me sugieres otros:

http://cssmenumaker.com/menu/quartz-responsive-menu# http://demo.tutorialzine.com/2012/10/css3-dropdown-menu/#

miguelmich commented 8 years ago

Varias cosas:

No efectos (Hay muchas razones, pero la principal es que un efecto así no le gusta a todo el mundo)
No cambios a los colores (Esto ya te lo había dicho, el contraste del color oscuro en la estructura ya lo está haciendo el left sidebar, no hay necesidad de sobrecargar el producto con más oscuro)

Todavía te falta mejorar el diseño, mientras yo te voy a ir mostrando el camino, yo sé que puede ser frustrante pero al final los resultados muestran lo que has aprendido, vas por el buen camino, ya has logrado mejorar un poco, pero aún te falta.

De todas las imágenes que te mandé al parecer solo te fijaste en lo más externo, vuelvo y te repito, la clave está en los detalles, son pequeños detalles que hacen una gran diferencia:

miguelmich commented 8 years ago

Lo que falta:

Tamaño en los íconos
Ubicación de la fecha y estilo
Tamaño de fuente del mensaje
Ancho general del dropdown
La sombra
Ajustar al máximo los espacios de cada item

miguelmich commented 8 years ago

Pendiente:

1. Overflow hidden

Colocar overflow hidden a el link de los items.

2. Imagen de messages & notifications

Las dimensiones de la imagen las debe tener el div padre, al igual que el border radius (asegurarse de colocar overflow hidden para que funcione)

3. Margin bottom del nombre del autor

Reducirlo a 5px y hacer un intento de texto de muestra de al menos dos líneas para ver cual es la mejor opción. colocar line-height de 17px en la descripción

miguelmich commented 8 years ago

Mejorar espaciado del user menu: aplicar padding de "7px 16px" y reducir el margin del divider a 6px, adicionalmente colocar los íconos de cada uno de los items correspondientes

alex-b-developer / petrol