CRBS / CIL_PHP_Website

Display data using Elasticsearch and utilize the bootstrap layout
Other
5 stars 2 forks source link

Redesign elements #37

Open orloff18 opened 6 years ago

orloff18 commented 6 years ago

Move Advanced search to below the Search box flush left to the left edge of the box.

Above the Search box have links to About, Licensing, Notification of Use, Contributors, Interactive Cells, Donate Button, Guest Book, Help, Submit, and the email icon.

We will no longer have a link to In the News but keep the page there in case we decide to bring it back.

Move the Twitter bird, Facebook logo and LinkedIn icon to the top right of the page below the Blue Naviagtion Bar and add,

Tumblr (get icon) - https://cellimagelibrary.tumblr.com Pinterest (get icon) - https://id.pinterest.com/CILImage/cell-image-library/ Doccheck (get icon) - http://www.doccheck.com/com/profiles/103-cell-image-library/tab/info Instagram (get icon) - https://www.instagram.com/cell_image_library/

Add the link and Apple App store link below the link icons on the right side of the page below the blue navigation bar.

Center both left and right and up and down and equal space all the logos at the bottom - ASCB, CCDB, NIF, Data Citation Index and Labby Award.

wawong commented 6 years ago

I just updated the main page. Please go to http://flagella.crbs.ucsd.edu/home Note that our linkedin url is not working. David, can you find out what the correct link is? Besides that, I cannot find the icon for the doccheck officially. I have to copy the icon from their forum.

The sources of our icons are the following and we should double-check their licenses: http://www.iconarchive.com/show/simple-icons-by-danleech/facebook-icon.html

http://www.iconarchive.com/show/simple-icons-by-danleech/twitter-icon.html

http://www.iconarchive.com/show/metro-style-social-icons-by-graphics-vibe/linkedin-icon.html

http://www.iconarchive.com/show/simple-icons-by-danleech/tumblr-icon.html

http://www.iconarchive.com/show/simple-icons-by-danleech/pinterest-icon.html

http://www.iconarchive.com/show/flat-social-media-icons-by-designbolts/Instagram-icon.html

orloff18 commented 6 years ago

I still need to double check the icon licenses.

For the design:

  1. move the Apple store logo below the icons on the right.

  2. move the icons on the right further to the right.

  3. make the text on the upper left one column About Licensing Notification of Use Interactive Cells Donate Guest Book

wawong commented 6 years ago

I've readjusted the page. Please look into the linkedin link and add the description at the center.

orloff18 commented 6 years ago

Please use the Glyph icon for instagram as noted here - https://en.instagram-brand.com/assets/glyph-icon - Use the multicolor one.

Delete the Doccheck icon.

And can we make them a little smaller? Since they are very recognisable icons I do not think they need to be so large.

Is the width of the left column with the links dictated by the width of the Featured Image?

As a placeholder to see how it looks please use this as the headline.

"Welcome to our newly redesigned website. Please let us know how you like it! Visit our Guest Book and leave a message."

wawong commented 6 years ago

1) Add the new icon for instagram 2) Deleted the Doccheck icon. 3) Made the icon size to be 24px from 32px.

Is the width of the left column with the links dictated by the width of the Featured Image? No, we can change the width sizes for the top horizontal panel.

As a placeholder to see how it looks please use this as the headline. Done.

orloff18 commented 6 years ago

Please take a quick look at the Instagram link noted above. I believe it is required to be shown at a minimum of 29pixel x 29 pixel - plus half again on each side for white space.

Make the left column with the links smaller so that the headline space is larger. Make it as wide as the Notification of Use + 5 letter spaces

orloff18 commented 6 years ago

Please have the icons in the upper right in the following order Facebook LinkedIn Twitter Instagram Tumblr Pinterest