I need advice for UI improvement.

・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?

DISCUSS (10)
 

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;
}
}
 

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

Thanks a lot :)

 

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

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

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 :)

 

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.

 

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.

 

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

 

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.

Classic DEV Post from Sep 27 '18

Some tips to improve your life

For some time now I've been looking for and researching ways to improve my life...

I'm a front-end developer. I'm living in Turkey. I started my professional career in 2016. I also interest in Backend, SQL technologies.