DEV Community

loading...

I need advice for UI improvement.

itachiuchiha profile image Itachi Uchiha ใƒป1 min read

Hi everyone.

I created a basic Vue project. It fetches pulls requests and issues of the current week from dev.to' GitHub repository.

Website Here: https://aligoren.github.io/dev-recap/

GitHub Repo Here: https://github.com/aligoren/dev-recap

I know, it really looks bad. Because I just spent only 10 minutes. So, I didn't have time to think about UI. Now, what should I do to more beautify it?

What is your advice?

Discussion (10)

pic
Editor guide
Collapse
mkrl profile image
Mikhail Korolev

Nice job! This definitely comes in handy.

I did a very brief restyle to match the original dev.to design.

  • Swapped a full-screen container-fluid with the regular container for better readability. This may be against the idea of a "dashboard", but I personally think that it's way easier to read through this way.
  • Added extra margin to "Pull Requests" and "Issues" headers by replacing "text-primary" with "mb-4" class.
  • Removed an exclamation mark inside jumbotron and bumped the header up to h2

/* dev.to-colors and a small bottom margin for better readability */
body {
    background-color: #F9F9FA;
    margin-bottom: 3rem;
}

/* cards and link colors mimic the site style */

.card {
    box-shadow: 3px 3px 0px #bababa;
}

.text-primary, a {
    color: #6A6EED!important;
}

/* shrink jumbotron to a header-sensible size, 
   base64 dev logo that is hidden on small screens 
   slightly mimic the site top bar
   user bio-styled timestamps
*/

.jumbotron {
    background-color: #FDF9F3;
    border-bottom: 1px solid rgba(0,0,0,0.33);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.13);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIyMCUiIGhlaWdodD0iMjAlIiB2aWV3Qm94PSIwIDAgMTMyLjAwMDAwMCA2NS4wMDAwMDAiIGNsYXNzPSJsb2dvIj48cGF0aCBkPSJNMCAzM3YzMmgxMS4zYzEyLjUgMCAxNy43LTEuNiAyMS41LTYuNSAzLjgtNC44IDQuNC05IDQtMjgtLjMtMTYuOC0uNS0xOC4yLTIuNy0yMS44QzMwLjMgMi41IDI2LjEgMSAxMiAxSDB2MzJ6bTIzLjEtMTkuMWMyLjMgMS45IDIuNCAyLjMgMi40IDE4LjUgMCAxNS43LS4xIDE2LjctMi4yIDE4LjgtMS43IDEuNi0zLjUgMi4yLTcgMi4ybC00LjguMS0uMy0yMC44TDExIDEyaDQuOWMzLjMgMCA1LjYuNiA3LjIgMS45ek00Ni4xIDMuNmMtMiAyLjYtMi4xIDMuOS0yLjEgMjkuNnYyNi45bDIuNSAyLjRjMi4zIDIuNCAyLjkgMi41IDE2IDIuNUg3NlY1NC4xbC0xMC4yLS4zLTEwLjMtLjN2LTE1bDYuMy0uMyA2LjItLjNWMjdINTVWMTJoMjFWMUg2Mi4xYy0xMy45IDAtMTQgMC0xNiAyLjZ6TTg3IDE1LjJjMi4xIDcuOSA1LjUgMjAuOCA3LjYgMjguOCAzLjIgMTIuMyA0LjMgMTUgNyAxNy43IDEuOSAyIDQuMiAzLjMgNS43IDMuMyAzLjEgMCA3LjEtMy4xIDguNS02LjcgMS0yLjYgMTUuMi01NS42IDE1LjItNTYuOCAwLS4zLTIuOC0uNS02LjItLjNsLTYuMy4zLTUuNiAyMS41Yy0zLjUgMTMuNi01LjggMjAuOC02LjIgMTkuNUMxMDUuOSA0MCA5NiAxLjkgOTYgMS40YzAtLjItMi45LS40LTYuNC0uNGgtNi40TDg3IDE1LjJ6Ij48L3BhdGg+PC9zdmc+);
    background-repeat: no-repeat;
    background-position:right;
    color: black;
    background-size: 24%;
    background-position-x: 97%;
    padding: 3rem;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.jumbotron p {
    font-weight: 400;
    color: #666666;
    font-style: italic;
    font-size: 0.88em;
}

.jumbotron h2 {
    text-transform: uppercase;
}

@media (max-width: 768px) {
.jumbotron {
    background-image: none;
}
}
Collapse
itachiuchiha profile image
Itachi Uchiha Author

Yeah. It looks amazing. <3 Thanks. If you have some information about Vue, you can open PR or I can do.

Thanks a lot :)

Collapse
mkrl profile image
Mikhail Korolev

Sure thing, I can come up with a PR later today!

Thread Thread
itachiuchiha profile image
Thread Thread
mkrl profile image
Mikhail Korolev

The PR should be out now. I've added a simple background to code blocks as suggested below, but that lacks syntax highlighting.

Thread Thread
itachiuchiha profile image
Itachi Uchiha Author

I merged it. But there should be a joke. I'm getting "Page not found"

github.com/aligoren/dev-recap/tree...

But files under the gh-pages branch looks normal.

Update:

I pushed again. It works now :)

Collapse
glennmen profile image
Glenn Carremans

It seems to also show Pull Requests in the Issues column. This might explain why, from the Github API docs:

Note: GitHub's REST API v3 considers every pull request an issue, but not every issue is a pull request. For this reason, "Issues" endpoints may return both issues and pull requests in the response. You can identify pull requests by the pull_request key.

Be aware that the id of a pull request returned from "Issues" endpoints will be an issue id. To find out the pull request id, use the "List pull requests" endpoint.

Collapse
niorad profile image
Antonio Radovcic

It doesn't look bad at all! It's not a lifestyle-blog, it's a dev-tool.

Right now the left row is empty, which makes it look a bit broken. You could add a light-gray message like "no pull-requests pending" or something.

You could also add a bg-color to the code-snippets, to make them more discernable.

Collapse
itachiuchiha profile image
Itachi Uchiha Author

Thanks :) I'll add a simple syntax highlighter. This could be good.

Collapse
glennmen profile image
Glenn Carremans

I see my previous comment has been added already ๐Ÿ˜‰

Added check for issues to see if they are pull requests #1

flouou avatar
flouou commented on Feb 12, 2019

Github api provides pull requests even though it's the issue endpoint. Pull requests can be identified by the existence of the property "pull_request"

Another suggestion would be to add author info, there is user info (name, avatar, profile link, ...) available in the API response.