Closed mariacovasgrilo closed 8 years ago
esperancaJS
commented
9 years ago In order for me to use the search an sorter in IN THESE LISTS I need to know how to display the lists.. Do I use the list layout used here or the other one ? How does the user know which market/store the searched/sorted lists belong to ?
mariacovasgrilo
commented
9 years ago 
the image behind the markets names has a gradient that right now is in the wrong direction, it's coming from right to left and it should be coming from down.
/* gradient filter: */
background-image: linear-gradient(-179deg, rgba(32,29,32,0.80) 0%, rgba(32,29,32,0.95) 100%);
Also, the titles of the markets should be all in uppercase and the number of items font is too thin, try making it just a tiny bit thicker - it's barely readable.
In general, I think it's okay but I wished it could be more like the original design, with an "undo" at the bottom, especially for the cases of markets with many lists, which I can't check right now because I can't create a thousand lists just for the purpose of testing right now. But I think it would be cool to keep the "card" look from the original layout, with the small shadow around the box that drops open.
I also think you should be able to have several of those cards open at the same time, because I might need to read several and compare or so.
But, overall, it's definitely on the right track, which is awesome to see.
mariacovasgrilo
commented
9 years ago Question: what typeface is the one on the orange letters of the hashtags? It doesn't feel like it belongs here...
can we use exactly the same typeface that is used when you are typing text, except orange?
I forgot to put the section "about" but it is basically the same as "description", except after the "pictures" section.
------------------------ tabs "store" and "markets":---------------------------------- /* ACTIVE TAB: / font-family: Montserrat-Regular; font-size: 11px; color: #F5F5F5; letter-spacing: 0.72px; / UNACTIVE TAB: */ font-family: Montserrat-Light; font-size: 11px; color: #FFFFFF; letter-spacing: 0.72px;
Little shadow you see under these tabs is the following: box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
Little orange line of these tabs: border: 2px solid #E53527; box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.25);
----------------------------------- list of lists in this store: ---------------------------------- font-family: Montserrat-Light; font-size: 13px; color: #F5F5F5; letter-spacing: 0.44px; line-height: 28px;
----------------------------------- "more lists": ---------------------------------- font-family: Montserrat-Regular; font-size: 11px; color: #E53527; letter-spacing: 0.37px;
CONTAINER OF MARKET: width: 294px;
Title header image of market: height: 85px /* gradient filter: */ background-image: linear-gradient(-179deg, rgba(32,29,32,0.80) 0%, rgba(32,29,32,0.95) 100%);
/* NAME OF MARKET: */ font-family: Montserrat-Regular; font-size: 13px; color: #F5F5F5; letter-spacing: 0.5px; line-height: 20px; text-transform: uppercase;
/* data about market: */ font-family: Montserrat-Light; font-size: 11px; color: #F5F5F5;
/* lists: */ font-family: Montserrat-Light; font-size: 13px; color: #F5F5F5; letter-spacing: 0.44px; line-height: 28px;
List's margin up and down: 20px
"More Lists" and/or "Undo" (or anything else we want to put there) on hover: font-family: Montserrat-Regular; font-size: 11px; color: #E53527; letter-spacing: 0.37px;
"More Lists" and/or "Undo" (or anything else we want to put there) normal: font-family: Montserrat-Regular; font-size: 11px; color: #767075; letter-spacing: 0.37px;
Margin of these up and down is 20px.
The picture on a normal state has a filter over it that goes like this: background: rgba(32,29,32,0.25);
On hover it becomes like the picture on the further right, with a "close" icon in the center, not too big. The filter then becomes darker like this: background: rgba(32,29,32,0.80);