jrmerz commented 4 years ago

pg-farm.library.ucdavis.edu should have a nice landing page provided a brief description of PG Farm as well as listing active databases and how to connect to them.

Database list elements

name
description
PostgreSQL connection information
- username/password (its public)
- host
- post
- database
PostgREST Url (ex: https://sloan-datafest-2019.pg-farm.library.ucdavis.edu/)
- add link to help? (ex: http://postgrest.org/en/v7.0.0/api.html#)
Swagger API playground link (ex: https://editor.swagger.io/?url=https://sloan-datafest-2019.pg-farm.library.ucdavis.edu/)
- This is GUI for PostgREST

jrmerz commented 4 years ago

@wrenaria let me know if you want to discuss any of this. But just single page for now. Simple and clean, library branded.

wrenaria commented 4 years ago

Design Files

Design Overview (Desktop, 600px+ viewport)

Refer to design spec PDF linked above for detailed design spec breakdown. This will just be a brief visual overview of the overall design.

Key Features:

Search with sort options (Name A-Z, Relevance, Most Recent, Oldest)
Link to full documentation under brief description (as pop-up)

Web 1366

Smallest "desktop" design is at 600px viewport:

Web 600 x 960 Small Tablet

Pop-up for documentation:

Web 1366 Popup

Design Overview (Mobile, <600px viewport)

Refer to design spec PDF linked above for detailed design spec breakdown. Mockup below is smallest standard mobile size (360px wide).

Changes for mobile scales include decreases in padding/margins, icon sizes, headers in pop-up, and changes in how the search and sort are positioned.

Pop-up for documentation:

Web 360 Popup – Under 600px

Icons and Colors

Icons

The icons in the colored circles are Font Awesome icons. The svgs in the assets folder are downloads from their site. Here are links to the sources for ones in the mock-up:

All other icons are Iron icons (icons used: keyboard-arrow-down, arrow-drop-down, description).

Colors for the Icon Circles:

I manually chose colors I thought related to topic best for the mock-up, but I suppose you could randomly assign when a database is added instead if you prefer.

Color	Hex Code	Color Name
	#C6007E	redbud
	#C10230	double-decker
	#F18A00	poppy
	#FFBF00	aggie-gold
	#3DAE2B	quad
	#008EAA	putah-creek
	#0047BA	gunrock
	#76236C	pinot

(These are the same brand colors used in the DAMS file browser, by the way.)

Other Colors Used in UI

Color	Hex Code	Color Name
	#191919	black90
	#022551	aggie-blue
	#355B85	ucdblue70
	#B3C1D1	ucdblue20
	#E5E9EF	ucdblue5
	#FFECB2	ucdgold30
	#FFF9E5	ucdgold10
	#FFFFFF	white

jrmerz commented 4 years ago

@wrenaria I just noticed the UC Davis logo at the top. That was my mistake when I quickly copied your RP template. This is a library branded product. Should we just swap in the library logo from the footer into the header?

wrenaria commented 4 years ago

@jrmerz Ehhhh that's a little bit of a tricky question. One thing we were gently chided on when Jessica and I met with Strat Comm recently about branding was our incorrectly designed header on the library site (library logo as main logo instead of UC Davis logo -- having inherited this header I didn't know it was "incorrect"). My understanding is they prefer that the UC Davis logo is in the color bar and sponsoring department logo(s)/names in the footer/ the site content that happens below the color bar. So I guess it depends on how on brand we want to be. 🤷 🤷 🤷

wrenaria commented 4 years ago

@jrmerz Also not sure if that branding rule applies to products we make as library or just to us as a department site, but I would guess the former? I don't know if we want to make the decision product to product or choose a path and stick to it. I see arguments for both solutions.

jrmerz commented 4 years ago

Got it. Sorry, didn't know the rules :) let's just stick with UC Davis until we find out further.

wrenaria commented 4 years ago

@jrmerz

Things to Fix

Screen Shot 2020-06-12 at 10 29 58 AM

[ ] Search and Sort Dropdown need to be same height: 44px
[ ] Chevron icon is far too big -- should 24px
[ ] Wrong search icon used. We're using the same one used on the library site. It was included in the assets folder that was linked above.

Screen Shot 2020-06-12 at 10 34 03 AM

[ ] These elements are too close together. There needs to be 8px of padding above the View Documentation div.

Also if there is a short description, it should be displayed so you can at a glance see what the data is for. I don't how you want to handle that -- display a limited character count, have a custom description for the display, I don't know! But it seems helpful for people looking at the site. If every entry could have that, it should.

Screen Shot 2020-06-12 at 10 30 06 AM

[ ] This is incorrectly displayed. The Rest API Access text only gets pushed below the icon at mobile levels (<600px) to minimize weird text breaks. At desktop sizes (600px+) it wraps around icon so it doesn't look so weird / hugely spaced between title and content.

Screen Shot 2020-06-12 at 10 30 41 AM

[ ] Icons are supposed to be max of 40px height in a 75px circle. This wineglass is too big. They should look more like this when correctly sized:

Screen Shot 2020-06-12 at 10 33 00 AM

[ ] Clearly not enough line height here as the letters are overlapping on break. It should be the same as the yellow text in header area: 35px line height

Screen Shot 2020-06-12 at 11 17 14 AM Screen Shot 2020-06-12 at 11 34 17 AM

Padding is incorrect around the edges of the site elements at a variety of scales...

[ ] Desktop: padding is missing around edges when the screen shrinks. The example included above should help (I hope).
[ ] Breaks to mobile view too early. Mobile starts at 599px (small tablets can handle "desktop" view)
[ ] Padding incorrect on mobile. The database content boxes should have the same outside padding as the Search and Sort fields do. Example of problem: