search

karakanb / devo

A Chrome and Firefox extension that displays GitHub Trending, Hacker News, Product Hunt and Designer News on every new tab.
https://burakkarakan.com/devo/
MIT License
401 stars 46 forks source link

Enhancement: window customizations #11

Closed krishnasajja closed 5 years ago

krishnasajja commented 5 years ago

Hi, First of all, Thank you for this plugin. This is very simple and useful.

I was wondering if we can add some simple window customizations. Like if I want to see 'Hacker News' in the bigger window instead of Github.

Thanks!

karakanb commented 5 years ago

Hey, thanks for using it and providing feedback.

The next plan is to allow that, but I couldn't figure out a good way to implement that. As soon as I find out and make the time, I'll start working on it. For the time being, I am also very open to PRs that implement this functionality in any way.

hipstersmoothie commented 5 years ago

It would be cool if you could make it arbitrary somehow and have thing like a twitter feed in there too

karakanb commented 5 years ago

Making it arbitrary seems to be a bold decision, it may increase the cognitive load for everyone, especially since this is a screen we see on every new page. The most primitive option is to treat the card titles as a dropdown menu and let the user select the content to be displayed there; the cards' placements will be considered fixed while the content itself can be updated.

yochrepi commented 5 years ago

Hi, First of all, Thank you for this plugin. This is very simple and useful.

I was wondering if we can add some simple window customizations. Like if I want to see 'Hacker News' in the bigger window instead of Github.

Thanks!

For example I wanted to see:

  1. Product hunt feed in the largest card on the left
  2. HN in the smaller card on right
  3. Github in the smaller card on right

In src/App.vue I changed the order of components:

from:

<div class="row cards-wrapper">
          <div class="col-lg-6 col-xs-10 col-xs-offset-1 col-lg-offset-0 left-pane">
            <git-hub></git-hub>
          </div>
          <div class="col-lg-6 col-xs-10 col-xs-offset-1 col-lg-offset-0">
            <div class="row" style="height: 39vh; margin-bottom: 1vh;">
              <hacker-news></hacker-news>
            </div>
            <div class="row" style="height: 40vh;">
              <product-hunt></product-hunt>
            </div>
          </div>
        </div>

to:

        <div class="row cards-wrapper">
          <div class="col-lg-6 col-xs-10 col-xs-offset-1 col-lg-offset-0 left-pane">
           <product-hunt></product-hunt>
          </div>
          <div class="col-lg-6 col-xs-10 col-xs-offset-1 col-lg-offset-0">
            <div class="row" style="height: 39vh; margin-bottom: 1vh;">
              <hacker-news></hacker-news>
            </div>
            <div class="row" style="height: 40vh;">
              <git-hub></git-hub>
            </div>
          </div>
        </div>

save, build and deploy :)

karakanb commented 5 years ago

Hey guys, I have built and published this functionality as v1.2.0. I have uploaded the release to Chrome Store which is already available right now, and I have also submitted the release for Firefox Add-Ons store. You can find detailed explanation in #19 which I have recently merged. I have implemented a dropdown in cards' titles in order to be able to change the platform shown in that card, and I have also introduced a couple of improvements to make adding new platforms easier in the future. Thanks for bearing with me, please let me know if there is anything I can do, I'll be closing the issue for now.