Improve the interview page #888

Merged
eal merged 7 commits from fix/supporter-page into master 4 years ago
Collaborator

Here is my proposal for the interview page layout tweaking:

  • Moved styles to the interview.less file
    • Makes them re-usable
  • Fixed the portrait image
    • I don't know how it should like; but the kind of crashed circle doesn't look well
  • Fixed images/videos in general
    • Now using the brand new "figure" thing
  • The "star dividers" are now horizontal
    • IMHO it fits better into the flow
  • I played around with the "supporter footer" (image of community meeting and supporter button)

Have a look at the screenshots attached.

Not done, yet: Mobile layout. I'll do that in the next days.

Here is my proposal for the interview page layout tweaking: * Moved styles to the `interview.less` file * Makes them re-usable * Fixed the portrait image * I don't know how it should like; but the kind of crashed circle doesn't look well * Fixed images/videos in general * Now using the brand new "figure" thing * The "star dividers" are now horizontal * IMHO it fits better into the flow * I played around with the "supporter footer" (image of community meeting and supporter button) Have a look at the screenshots attached. Not done, yet: Mobile layout. I'll do that in the next days.
max.mehl was assigned by mweimann 4 years ago
eal was assigned by mweimann 4 years ago
reinhard was assigned by mweimann 4 years ago
mweimann added the
design
label 4 years ago
Collaborator

It looks to me as if some of the styles in the new less file are not actually used.

Also there are some styles defined which are not actually specific to interviews: For example, we want videos inside a <figure> to be 100% in width so the shadow looks good, that's not related to the fact whether the video is on an interview page or on a different page. There might be other cases where something similar holds.

For the image in the top quote box, I wonder whether we couldn't reuse the class="with-image-right" used in the testimonials page.

It looks to me as if some of the styles in the new less file are not actually used. Also there are some styles defined which are not actually specific to interviews: For example, we want videos inside a `<figure>` to be 100% in width so the shadow looks good, that's not related to the fact whether the video is on an interview page or on a different page. There might be other cases where something similar holds. For the image in the top quote box, I wonder whether we couldn't reuse the class="with-image-right" used in the testimonials page.
Poster
Collaborator

It looks to me as if some of the styles in the new less file are not actually used.

I've cleaned that up. Thanks.

Also there are some styles defined which are not actually specific to interviews: For example, we want videos inside a

to be 100% in width ...

I've moved that to the figure styles

For the image in the top quote box, I wonder whether we couldn’t reuse the class=“with-image-right” used in the testimonials page.

I tried that (see screenshot). Somehow we have the quote box here. So I tried to integrate the image to the box. Otherwise it looks a bit "unfinished".

With the last commit I also added some mobile optimizations.

> It looks to me as if some of the styles in the new less file are not actually used. I've cleaned that up. Thanks. > Also there are some styles defined which are not actually specific to interviews: For example, we want videos inside a <figure> to be 100% in width ... I've moved that to the figure styles > For the image in the top quote box, I wonder whether we couldn’t reuse the class=“with-image-right” used in the testimonials page. I tried that (see screenshot). Somehow we have the quote box here. So I tried to integrate the image to the box. Otherwise it looks a bit "unfinished". With the last commit I also added some mobile optimizations.
Collaborator

thank you very much @mweimann for the work and the screenshots, they are very useful here. The mobile version looks really good with Crptie's picture squared and 100% width, thank you!

Some comments:

  • the sidebar should be the same sidebar as in /testimonials.html and not only the supporter button.
  • I think we can remove the links bewlow the quote-box (to the video and to the interview) as they are anyway following directly after. If we decide to keep them I would let them look in the same style as on the testimonials-page
  • our fsfe-logo is rotated 90 degrees clockwise
  • in the desktop-version the picture of cryptie looks a bit weired and misplaced. In the best case it could be included into the grey box, I guess.

thank you!

thank you very much @mweimann for the work and the screenshots, they are very useful here. The mobile version looks really good with Crptie's picture squared and 100% width, thank you! Some comments: * the sidebar should be the same sidebar as in /testimonials.html and not only the supporter button. * I think we can remove the links bewlow the quote-box (to the video and to the interview) as they are anyway following directly after. If we decide to keep them I would let them look in the same style as on the testimonials-page * our fsfe-logo is rotated 90 degrees clockwise * in the desktop-version the picture of cryptie looks a bit weired and misplaced. In the best case it could be included into the grey box, I guess. thank you!
Collaborator

@mweimann thank you for the update! About using with-image-right for the picture, I think I wasn't clear enough. What I meant is like this:

<blockquote>
  <div class="with-image-right">
    <img class="img-circle" src="/picturebase/people/2018-cryptie-300px.jpg" alt="Cryptie"/>
    <p>
      “I am Cryptie, ...”
    </p>
  </div>
</blockquote>

This way we could make the picture round like we have it at other places, and would be integrated into the grey area of the blockquote, the mobile version would also look good (I think), and we would not need any new classes for that.

@mweimann thank you for the update! About using with-image-right for the picture, I think I wasn't clear enough. What I meant is like this: ```html <blockquote> <div class="with-image-right"> <img class="img-circle" src="/picturebase/people/2018-cryptie-300px.jpg" alt="Cryptie"/> <p> “I am Cryptie, ...” </p> </div> </blockquote> ``` This way we could make the picture round like we have it at other places, and would be integrated into the grey area of the blockquote, the mobile version would also look good (I think), and we would not need any new classes for that.
Poster
Collaborator

@eal please see the list discussions as well.

the sidebar should be the same sidebar as in /testimonials.html and not only the supporter button.

I think we can remove the links bewlow the quote-box (to the video and to the interview) as they are anyway following directly after. If we decide to keep them I would let them look in the same style as on the testimonials-page

I'll update that later

our fsfe-logo is rotated 90 degrees clockwise

Jep. It looks out of place if it's not rotated. It's now horizontally. From the design point of view I agree with Reinhard about the logo. For me the rotatet version is a compromise. In my opinion there are only two options for the dividers: horizontal version or no divider icon. If we should not use the logo as divider I would add some more spacing to the headings and remove the logo completely.

in the desktop-version the picture of cryptie looks a bit weired and misplaced. In the best case it could be included into the grey box, I guess.

It is like in the first screenshot at the top of this ticket. The other screenshot was only for Reinhards point about trying to use the CSS class from the testimonials page.

@eal please see the list discussions as well. > the sidebar should be the same sidebar as in /testimonials.html and not only the supporter button. > I think we can remove the links bewlow the quote-box (to the video and to the interview) as they are anyway following directly after. If we decide to keep them I would let them look in the same style as on the testimonials-page I'll update that later > our fsfe-logo is rotated 90 degrees clockwise Jep. It looks out of place if it's not rotated. It's now horizontally. From the design point of view I agree with Reinhard about the logo. For me the rotatet version is a compromise. In my opinion there are only two options for the dividers: horizontal version or no divider icon. If we should not use the logo as divider I would add some more spacing to the headings and remove the logo completely. > in the desktop-version the picture of cryptie looks a bit weired and misplaced. In the best case it could be included into the grey box, I guess. It is like in the first screenshot at the top of this ticket. The other screenshot was only for Reinhards point about trying to use the CSS class from the testimonials page.
Collaborator

I am fine with removing the logo as a separater at all

regarding the first screenshot, that looks fine to me as well.

I am fine with removing the logo as a separater at all regarding the first screenshot, that looks fine to me as well.
Poster
Collaborator

Next try. @eal @reinhard

See screenshots from the desktop/mobile version.

Next try. @eal @reinhard See screenshots from the desktop/mobile version.
Collaborator

If @eal agrees with this design, I absolutely do so as well!

If @eal agrees with this design, I absolutely do so as well!
Collaborator

Hi @mweimann, thanks for the proposal, that looks pretty great to me. Only one thing: Is it possible to have cryptie's picture squared in the mobile-version like proposed here:
#888

while have the rounded-picture for the desktop version like now in your latest proposal here?
#888

That would be amazing!

Hi @mweimann, thanks for the proposal, that looks pretty great to me. Only one thing: Is it possible to have cryptie's picture squared in the mobile-version like proposed here: https://git.fsfe.org/FSFE/fsfe-website/pulls/888#issuecomment-5288 while have the rounded-picture for the desktop version like now in your latest proposal here? https://git.fsfe.org/FSFE/fsfe-website/pulls/888#issuecomment-5356 That would be amazing!
Collaborator

Just some input on this:

@eal I would be worried that it doesn't look good on larger mobile devices like tables. Please you look at the current testimonials page and make the browser window smaller until the display switches to picture above text. Now imagine the picture would be full width and sqare. I think it would be way too big. However, if the picture is not full width, I think it looks better rounded than sqared.

Just some input on this: @eal I would be worried that it doesn't look good on larger mobile devices like tables. Please you look at [the current testimonials page](https://fsfe.org/about/people/testimonials.en.html) and make the browser window smaller until the display switches to picture above text. Now imagine the picture would be full width and sqare. I think it would be way too big. However, if the picture is not full width, I think it looks better rounded than sqared.
Owner

I also very much like the current proposal of @mweimann! ❤️

I also very much like the current proposal of @mweimann! :heart:
Collaborator

@reinhard I see your point and I think you are right. Maybe we could have something like:
small screesn: square
medium sized and bigger screens rounded?

@reinhard I see your point and I think you are right. Maybe we could have something like: small screesn: square medium sized and bigger screens rounded?
Collaborator

ok, thanks all for the fruitful discussion, I am merging now!

ok, thanks all for the fruitful discussion, I am merging now!
eal closed this pull request 4 years ago
the build was successful
The pull request has been merged as 0deae91de1.
Sign in to join this conversation.
Loading…
There is no content yet.