More responsive CSS

[JohnnyKing94]

I propose to add these insertions in the standard css to have Pootle more responsive for other devices

NOTE: the CSS has been edited, read the comment below. The image in this post might not be the same of this CSS code

@media only screen and (max-width: 700px) {
    ul[class="top-scorers"] {
        display: none;
    }

    .path-summary-collapsed label {
        display: none;
    }

    a.review-suggestions > span.caption,
    a.continue-translation > span.caption,
    a.translation-complete > span.caption {
        display: none;
    }
}

@media only screen and (max-width: 480px) {
    .path-summary-expanded > .summary-1-col {
        width: 100%;
    }

    .path-summary-expanded > .summary-2-col {
        width: 100%;
        margin: 0px;
    }

    .path-summary-expanded > .summary-3-col {
        width: 100%;
    }

}

The result of these insertions is this

You can even test my site with any device here: http://translate.tamrielunlimited.it/projects

[phlax]

@JohnnyKing94 we can do it for you - but if you PR these changes you would get the credit

[JohnnyKing94]

@phlax I never done that... i'll try

[JohnnyKing94]

I did some edits... now i don't hide anymore the columns of summary tab in the css, but i override some css lines... Beside the addition above, there is the need to edit translate-actions li, remove margin-left: 2em; and add any margin-right you want (i set 15px) and line-height: 40px;, in this way you want have anymore this blank space at the beginning on small devices

BEFORE

AFTER I remove the captions under 700px, cause the texts break the page and under 400px, the counter goes on the next line perfectly

< 700px

< 400px

[JohnnyKing94]

If you like the new edits, i can make a PR... your decision :smile:

[unho]

@iafan This is something you might want to check.

[iafan]

Thanks for experimenting with responsive layout, @JohnnyKing94, but I don't think we want to go that route. Let me explain:

The way Pootle currently renders itself in a "mobile" layout is already pretty bad. In fact, it makes mobile experience worse, because it only takes care of the header, and does that poorly. I personally regret the fact that I and @julen introduced this "mobile layout" and would rather prefer to undo this entirely until we properly design the mobile experience. Without any mobile-specific CSS, I could at least see our translation server as if it was on a desktop, could easily pinch-zoom, pan and see the stats and navigate. Now we have a pretty ugly experience, and crippling it down by hiding valuable statistics won't improve the UX.

What I want is a more systematic approach:

1. Define how people would be using the mobile version of the app
2. Design the UI around mobile-specific use cases
3. Leave the opportunity for people to switch between mobile version of the site and the full "desktop" version, and remember their preference in the cookies.
4. Make sure the "desktop" version works on a mobile device with zooming-panning.

I'd personally start with item (3) and (4) first to fix what is broken before moving into mobile redesign.

I would suggest keeping your CSS as an override, and experimenting with it further. We can definitely borrow some ideas from you if we find them appropriate. If you want to share your ideas on who and how will use the mobile version, you're more than welcome to share. I hope this won't detract you from further contributions.

[JohnnyKing94]

@iafan i do not hide anymore valuable information on the project list table, but i made it responsive for horizontal scrolling, you can check it on my site: http://translate.tamrielunlimited.it/projects/ (do not look anymore the image above, it was before of this)

I'm happy to share any improvements (for how small it might be) and it won't me detract at all... for the moment i just focused to render better the project page with the summary tab and the table list... i do know you have other agenda atm, but for the moment i wanted only to repair the layout of my site and share the results with you. So it's like a temporary solution.

this is a raw code (that can be improved) but it does the job about the table

.responsive-table {
  /*!
  // IE optimization, use inline-block or:
  // display: block;
  // max-width: min-content;
  */
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

.responsive-table {
  -webkit-overflow-scrolling: touch;
  background-size: 10px 100%, 10px 100%;
  background-attachment: scroll, scroll;
  background-repeat: no-repeat;
}

.responsive-table td:first-child {
  background-repeat: no-repeat;
  background-size: 20px 100%;
}

.responsive-table td:last-child {
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 20px 100%;
}

.responsive-table th {
  font-size: 11px;
  text-align: left;
  text-transform: uppercase;
  background: #f2f0e6;
}

.responsive-table th,
.responsive-table td {
  padding: 6px 12px;
  border: 1px solid #d9d7ce;
}

Feel free to borrow it, use it... i would love to reskin with you Pootle... just tag me when you start the project... i'll be happy to help