Issue #40 -- Overhaul overview (search results) #55

reficul31 · 2017-03-06T11:48:25Z

This is in reference to the issue.

Treora · 2017-03-08T16:17:25Z

I just tried it out, this design looks more informative than the current squares. A bunch of small things I would change still (some were already discussed in #40):

more space around the buttons
remove clustering, or at least the styles for popping up clustered items on hover
change to ellipsis overflow for titles & urls (also they do not get to use the full width for some reason?)
"No screenshot available" is not so important, could be very thin and lightgrey, or removed completely.
keep the background image until we have a better one

And possibly some other small things I don't notice now.

reficul31 · 2017-03-08T16:43:43Z

Thanks for the review. I'll change right now.

reficul31 · 2017-03-08T17:21:59Z

Updated PR:

Added significant spacing between the buttons.
Removed the clustering from the ResultView
Changed text-overflow to ellipsis
"No Screenshot Available" made thinner and more lighter
Background image back up

Please review and tell me what else should be changed. Thanks for your time.

Treora · 2017-03-08T21:12:54Z

Nice. Sorry to keep commenting, but I just played around with it more, finding that the use of relative sizes everywhere has its problems. E.g. a small window size just looks very wrong:

The layout seems to be designed to be nice on a normal screen size, but that is not the right way to design things. I see you also use display:table for vertical alignment, and float left and right , and wondered if you know that nowadays there css has flex layout. It takes a moment to get into it though, but allows making such things nicer and more.. flexible. I can also have a try at improving it some moment, or maybe somebody with more design skills than I can.

reficul31 · 2017-03-09T05:28:11Z

I am so sorry I forgot the min-height of the component(rookie mistake). I will try and be more careful next time. Obviously that doesn't solve the responsive problem. I have changed the PR. I looked into flex and it seems it solves some of our responsive problem. I will change the code again and make the PR. Thanks a lot for pointing out the mistakes. Any opportunity to learn is a good one. :D

Chaitya62 · 2017-03-10T06:37:36Z

Just a suggestion but why don't we add a placeholder icon when we cannot get the fa
Vicon instead of that white page icon.

obsidianart · 2017-03-10T10:38:37Z

src/overview/components/ResultList.css

@@ -2,7 +2,7 @@
    list-style: none;
    margin: 40px auto;
    padding: 0;
-    width: 242px;
+    width: 60%;


unless you have a container above in pixel you need min-width too

obsidianart · 2017-03-10T10:40:18Z

src/overview/components/VisitAsListItem.css

@@ -1,11 +1,11 @@
 .root {
    position: relative;
    display: block;
-    width: 240px;
-    height: 120px;
+    width: 100%;


any particular reason for this? width is auto by default, which means 100% already for most scenarios.

obsidianart · 2017-03-10T10:40:56Z

src/overview/components/VisitAsListItem.css

-    width: 240px;
-    height: 120px;
+    width: 100%;
+    height: 10%;


is this 10% of which element? if you don't know probably you want to use wh instead.

obsidianart · 2017-03-10T10:48:03Z

src/overview/components/VisitAsListItem.css

-
-.title {
+.logo {
+    height: 100%;


as above, are those percentages of which element?

obsidianart · 2017-03-10T10:48:07Z

src/overview/components/VisitAsListItem.css

+    color: #333;
+}
+.title{
+    height: 100%;


as above, are those percentages of which element?

obsidianart · 2017-03-10T10:48:10Z

src/overview/components/VisitAsListItem.css

    white-space: nowrap;
+    margin:0;
+    padding:0;
+    height:33.33%;


as above, are those percentages of which element?

obsidianart · 2017-03-10T10:48:30Z

src/overview/components/VisitAsListItem.css

+.screenshot{
+    float:right;
+    width:15%;
+    height:100%;


as above, are those percentages of which element?

obsidianart · 2017-03-10T10:53:19Z

I see a large use of percentages for sizing. Those are cards and they don't really make sense in percentage sizing for height.
Percentage is a very tricky thing to use, the value depends on the first parent specified in pixel for width and height but on the element for padding (and probably margin), and you can't move the card from one place to another without risking to break it. I don't think they percentages are needed to style those cards.
About the 3 columns system, I would probably evaluate flexbox rather than floating, since this is for modern browser, but this can open more issues and it can be done later.

reficul31 · 2017-03-10T16:27:00Z

Thank you @obsidianart for the review. Yeah as pointed by @Treora I was going to switch over from percentages and move to more definite sizing scheme. Currently I am in the process of converting all the floats to flex. The PR shall be updated soon. Sorry for the css practises.

reficul31 · 2017-03-13T15:48:39Z

Added the initial implementation of the above designed front end with flex box css. I have tried to conform to the styles mentioned in the previous PR that I made.
@obsidianart @Treora please review the PR and tell me all the changes to be made.

obsidianart · 2017-03-14T17:47:17Z

src/overview/components/VisitAsListItem.css

-    width: auto;
-    height: auto;
+    height: 100%;
+    width: 100%;


do you need this?

It was observed when the page width was decreased the div with the screenshot was shrinking more when no screenshot was present and less when there was a picture in the div(screenshot was present).
I researched a bit more and found that when the width of the container is decreased in flex, it fits according to the content given in the div. Therefore the height and width are set to 100% for when there is no screenshot the div occupies the same space as that of when there is a screenshot.

obsidianart · 2017-03-14T17:49:00Z

I still see various size in percentage, is there a reason for it?

reficul31 · 2017-03-14T23:55:16Z

I have tried my best not to use percentages in sizes. I think now whatever percentage sizing being used is necessary(according to me).
If any mistakes are found I'll change and make the PR again. Thanks for the review! :D

reficul31 · 2017-04-03T16:45:03Z

@Treora @obsidianart It recently came to my notice that this PR was never merged(Sorry). I have made the PR merge ready again. We can either close it and go with Oliver's approach or I can change the PR again. Thanks.

blackforestboi · 2017-04-03T19:58:17Z

@reficul31 the main changes I (wanted to make) were regarding the font-size of the different lines, the spaces between elements and some other cleaning up of CSS.
See the screenshot.

Treora · 2017-04-04T16:28:59Z

I think Oliver's approach is just this PR plus some changes to the design, but he did not continue from this branch so @reficul31's commits disappeared from the history.

I'd take this branch as it was, rebase onto master (rebasing is cleaner than merging), then apply Olivers changes to it (again a rebase), and end up with a single PR with all your edits combined and attributed to the right authors.

reficul31 · 2017-04-04T18:37:19Z

I have rebased the master on this branch as per @Treora advice. I have implemented the design by @oliversauter on this branch as well. Please tell me any further changes are required.
@oliversauter thanks for the design input. It looks much cleaner now. Although I have left the background as is due to the earlier conversations on this thread. Here is how the final design looks like.

edit: removed the merge conflicts. PR is merge ready. :)
Please tell me if any more changes are required in the code or the design.

Treora · 2017-04-06T13:07:09Z

Rebased and merged (de16361).

@reficul31: One thing to I would like to check still: are the icons you used in the public domain, not copyrighted? Also, are you okay with waiving your copyrights on your contributions? I try to make&keep this repo completely copyright-free.

reficul31 · 2017-04-06T13:14:49Z

Also, are you okay with waiving your copyrights on your contributions? I try to make&keep this repo completely copyright-free.

Yes, I willingly waive my copyrights on my contributions.

One thing to I would like to check still: are the icons you used in the public domain, not copyrighted?

Yes, they were as far as I remember. The empty screenshot icon was give to me by @oliversauter. I'll do a check on it once.

obsidianart reviewed Mar 10, 2017

View reviewed changes

reficul31 closed this Mar 10, 2017

reficul31 reopened this Mar 10, 2017

obsidianart reviewed Mar 14, 2017

View reviewed changes

reficul31 added 2 commits April 5, 2017 22:06

Issue #40 -- Overhaul overview (search results)

5bc0a95

Refactoring the component styling

7cbe679

Treora mentioned this pull request Apr 6, 2017

Overhaul overview (search results) #40

Closed

Treora added a commit that referenced this pull request Apr 6, 2017

Merge branch 'overhaul' (see issue #40, PR #55 & #82)

de16361

Treora closed this Apr 6, 2017

Treora mentioned this pull request Apr 6, 2017

build on @reficul31's work a clean overhaul of the overview page. #82

Closed

This was referenced Apr 19, 2017

Forget individual pages #21

Closed

Implement editable blacklist / forgetlist -- work in progress #84

Closed

reficul31 deleted the issue_40 branch July 15, 2017 06:34

Issue #40 -- Overhaul overview (search results) #55

Issue #40 -- Overhaul overview (search results) #55

reficul31 commented Mar 6, 2017 •

edited

Treora commented Mar 8, 2017

reficul31 commented Mar 8, 2017 •

edited

reficul31 commented Mar 8, 2017

Treora commented Mar 8, 2017

reficul31 commented Mar 9, 2017 •

edited

Chaitya62 commented Mar 10, 2017

obsidianart Mar 10, 2017

obsidianart Mar 10, 2017

obsidianart Mar 10, 2017

obsidianart Mar 10, 2017

obsidianart Mar 10, 2017

obsidianart Mar 10, 2017

obsidianart Mar 10, 2017

obsidianart commented Mar 10, 2017

reficul31 commented Mar 10, 2017

reficul31 commented Mar 13, 2017

obsidianart Mar 14, 2017

reficul31 Mar 14, 2017

obsidianart commented Mar 14, 2017

reficul31 commented Mar 14, 2017

reficul31 commented Apr 3, 2017

blackforestboi commented Apr 3, 2017 •

edited

Treora commented Apr 4, 2017 •

edited

reficul31 commented Apr 4, 2017 •

edited

Treora commented Apr 6, 2017

reficul31 commented Apr 6, 2017

Issue #40 -- Overhaul overview (search results) #55

Issue #40 -- Overhaul overview (search results) #55

Conversation

reficul31 commented Mar 6, 2017 • edited

Treora commented Mar 8, 2017

reficul31 commented Mar 8, 2017 • edited

reficul31 commented Mar 8, 2017

Treora commented Mar 8, 2017

reficul31 commented Mar 9, 2017 • edited

Chaitya62 commented Mar 10, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

obsidianart commented Mar 10, 2017

reficul31 commented Mar 10, 2017

reficul31 commented Mar 13, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

obsidianart commented Mar 14, 2017

reficul31 commented Mar 14, 2017

reficul31 commented Apr 3, 2017

blackforestboi commented Apr 3, 2017 • edited

Treora commented Apr 4, 2017 • edited

reficul31 commented Apr 4, 2017 • edited

Treora commented Apr 6, 2017

reficul31 commented Apr 6, 2017

reficul31 commented Mar 6, 2017 •

edited

reficul31 commented Mar 8, 2017 •

edited

reficul31 commented Mar 9, 2017 •

edited

blackforestboi commented Apr 3, 2017 •

edited

Treora commented Apr 4, 2017 •

edited

reficul31 commented Apr 4, 2017 •

edited