Make tag header images scale smoothly in mobile/desktop #6799

jywarren · 2019-11-18T17:43:36Z

We have these nice image headings for tag pages:

They're based on this Froala design block pattern:

However, ours aren't built the same way and don't smoothly/responsively transition between full-width and mobile sizes. There are some where the image is cut off, or messed up. Let's look back at the original design and code to try to standardize and fix this!

Code for the original Froala block was:

<section class="fdb-block pb-0" style="background-image: url(imgs/hero/purple.svg);">
  <div class="container">
    <div class="row text-left justify-content-end">
      <div class="col-12 col-md-6 col-xl-5">
        <div class="fdb-box rounded-bottom-0">
          <h2><strong>Design Blocks</strong></h2>
          <p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>

          <p class="lead mt-4"><a class="btn btn-outline-primary" href="https://www.froala.com">Read More</a></p>
        </div>
      </div>
    </div>
  </div>
</section>

I believe the full code can be found somewhere here:

https://github.com/froala/design-blocks/tree/dev/dist

Our code is here:

We'd love help fixing this!

jywarren · 2019-11-18T17:44:25Z

Example - this looks nice!

But this doesn't! the image disappears!

jywarren · 2019-11-20T17:26:05Z

See a lot of background work and documentation on this in #6054 !

jywarren · 2019-11-20T18:58:07Z

I was able to get that type of header to work using this CSS: <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-design-blocks/2.0.1/css/froala_blocks.min.css">

However, it messes up the fonts! Trying to figure that out now.

jywarren · 2019-11-20T19:30:49Z

OK - I am able to get this work by re-including the main stylesheet like this:

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-design-blocks/2.0.1/css/froala_blocks.min.css">
<link rel="stylesheet" media="all" href="/assets/application-08768cdbfbde532afe88f0b458bc1767de7799ff598f2d54f6b0229e2f76e703.css" />

Obviously this isn't great. If we can confirm that the froala css doesn't break things all over the site, we could add it to the <head> and not have to re-include the main stylesheet... but we'll have to be really thorough to check the screenshots at different sizes and all!

NitinBhasneria · 2020-01-16T19:40:53Z

hey @jywarren I would like to take this issue! Can I?

jywarren · 2020-01-16T19:49:51Z

Oh goodness, we'd LOVE that. This area of code can be much simpler and more consistent!

…

On Thu, Jan 16, 2020 at 2:40 PM Nitin Bhasneria ***@***.***> wrote: hey @jywarren <https://github.com/jywarren> I would like to take this issue! Can I? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6799?email_source=notifications&email_token=AAAF6J3FNJ4SGKDI6EUOZWTQ6CZ4LA5CNFSM4JOXLG52YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJFJCKQ#issuecomment-575312170>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J6B2PE632KZP4G6KALQ6CZ4LANCNFSM4JOXLG5Q> .

NitinBhasneria · 2020-01-17T17:21:33Z

@jywarren I think that the water quality box also needs to be fixed with responsiveness. What are your views? Also, we can cover more screen width as this is not looking nice to only cover the center part. Thank u

NitinBhasneria · 2020-01-17T17:27:17Z

Example - this looks nice!

But this doesn't! the image disappears!

This is what I mean .... that it is looking nice when image cover whole backgound rather than only center part as this... given below

NitinBhasneria · 2020-01-17T17:27:41Z

jywarren · 2020-01-17T18:51:28Z

Hi, well, did you see my link to how the front page at https://publiclab.org works (when you're not logged in)? It uses Froala Design Blocks. Theirs scales smoothly and super nicely at every size, and our design was based on it. I would really hope we can just use their standard code instead of reinventing the wheel, what do you think?

…

On Fri, Jan 17, 2020 at 12:32 PM Nitin Bhasneria ***@***.***> wrote: [image: Screenshot from 2020-01-17 22-57-26] <https://user-images.githubusercontent.com/44112080/72632664-c0b47000-397c-11ea-8776-e5ba8b71276d.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6799?email_source=notifications&email_token=AAAF6J2Z545OFPZJSNC6OY3Q6HTA5A5CNFSM4JOXLG52YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEJIMW3Y#issuecomment-575720303>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF6J2RSPFPBTQ4QFJ7IE3Q6HTA5ANCNFSM4JOXLG5Q> .

jywarren · 2020-01-22T15:16:21Z

Yes, i wanted to agree also that we want the background image to be edge-to-edge the whole time. The Froala code achieves this, as shown on our front page!

In the meantime, our pages are degrading a bit, some change must have affected the styling and now they are pretty bad!

https://publiclab.org/tag/annual-report

@NitinBhasneria would you be willing to give this a try? I think the first step is to try to use the code from our front page, which I'll excerpt here:

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-design-blocks/2.0.1/css/froala_blocks.min.css">
<link rel="stylesheet" media="all" href="/assets/application-08768cdbfbde532afe88f0b458bc1767de7799ff598f2d54f6b0229e2f76e703.css" />
    
   <section class="fdb-block pb-0" style="background-image: url(/system/images/photos/000/024/688/original/gowanus.jpg);position:absolute;left:0;width:100%;margin-top:-21px;height:360px;padding-top:3rem;">
   <div class="container">
   <div class="row text-left justify-content-start">
   <div class="col-12 col-md-6 col-xl-5">
   <div class="fdb-box rounded-bottom-0" style="padding:2.8rem 2.5rem 1.2rem;">
   <h1>Public Lab</h1>
   <p class="lead" style="font-size: 1rem;">Public Lab is a community and a non-profit, dmocratizing science to address environmental issues that affect people.</p>
   <p class="lead mt-4"><a class="btn btn-lg btn-primary front-page-join-btn" hef="/signup">Join &raquo;</a></p>
   </div>
   </div>
   </div>
   </div>
   </section>

NitinBhasneria · 2020-01-22T20:31:53Z

Yea I will give it a try

NitinBhasneria · 2020-01-24T19:15:39Z

@jywarren I have found the solution of the edge-to-edge background image. I first tried the Froala design as on the front page. But using this will disturb many CSS classes and the given Froala design is also little unuseful of these tag pages, as this has extra buttons and all the things and many errors are coming. Instead of this we can change some little CSS and page can be made like front page.
So, please tell what to do. Whether the Froala design is necessary or should we do with CSS. As doing with CSS will be better from my side.

jywarren · 2020-01-27T17:18:35Z

Hi, thanks so much! Can you open a PR with this so I can take a look at your changes? I think a non-Froala design is OK, but one reason I also liked Froala is that the HTML code was much simpler too.

Thank you!

NitinBhasneria · 2020-01-28T17:29:00Z

@jywarren kindly review this, by this the image now edge to edge.
The disappearance of the image will be fixed in other PR.
Thanks

* image disappearance improved * changes improved * Css improved * css improved * css improved

* tag page image header fix #6799 * Update show.html.erb * Update show.html.erb * Update tags_controller_test.rb * Update tag_controller_test.rb * Update tag_controller_test.rb * Update show.html.erb * Update tag_controller_test.rb * Update show.html.erb

* tag page image header fix publiclab#6799 * Update show.html.erb * Update show.html.erb * Update tags_controller_test.rb * Update tag_controller_test.rb * Update tag_controller_test.rb * Update show.html.erb * Update tag_controller_test.rb * Update show.html.erb

jywarren added help wanted requires help by anyone willing to contribute design issue requires more design work and discussion (i.e. mockups and sketches) labels Nov 18, 2019

jywarren added this to the User interface (UI) milestone Nov 18, 2019

jywarren mentioned this issue Nov 20, 2019

Tag page heading card not rendering well in mobile screens #6054

Closed

jywarren added the gci-candidate label Jan 3, 2020

jywarren added the high-priority label Jan 22, 2020

SidharthBansal removed the gci-candidate label Jan 24, 2020

NitinBhasneria mentioned this issue Jan 28, 2020

Image is now edge to edge alligned #7374

Closed

5 tasks

NitinBhasneria mentioned this issue Jan 30, 2020

Added dropdown for order by in /tag route #7379

Merged

5 tasks

NitinBhasneria mentioned this issue Feb 7, 2020

image disappearance improved #6799 #7447

Merged

5 tasks

jywarren closed this as completed in #7447 Feb 11, 2020

jywarren pushed a commit that referenced this issue Feb 11, 2020

image disappearance improved #6799 (#7447)

b648a8b

* image disappearance improved * changes improved * Css improved * css improved * css improved

jywarren reopened this Jun 12, 2020

jywarren added a commit to jywarren/plots2 that referenced this issue Jul 14, 2020

tag page image header fix publiclab#6799

bce0bad

jywarren added a commit to jywarren/plots2 that referenced this issue Jul 14, 2020

tag page image header fix publiclab#6799

0e92045

jywarren mentioned this issue Jul 14, 2020

tag page image header fix #6799 #8144

Merged

jywarren closed this as completed in #8144 Jul 14, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make tag header images scale smoothly in mobile/desktop #6799

Make tag header images scale smoothly in mobile/desktop #6799

jywarren commented Nov 18, 2019

jywarren commented Nov 18, 2019

jywarren commented Nov 20, 2019

jywarren commented Nov 20, 2019

jywarren commented Nov 20, 2019

NitinBhasneria commented Jan 16, 2020

jywarren commented Jan 16, 2020 via email

NitinBhasneria commented Jan 17, 2020

NitinBhasneria commented Jan 17, 2020

NitinBhasneria commented Jan 17, 2020

jywarren commented Jan 17, 2020 via email

jywarren commented Jan 22, 2020

NitinBhasneria commented Jan 22, 2020

NitinBhasneria commented Jan 24, 2020

jywarren commented Jan 27, 2020

NitinBhasneria commented Jan 28, 2020

Make tag header images scale smoothly in mobile/desktop #6799

Make tag header images scale smoothly in mobile/desktop #6799

Comments

jywarren commented Nov 18, 2019

jywarren commented Nov 18, 2019

jywarren commented Nov 20, 2019

jywarren commented Nov 20, 2019

jywarren commented Nov 20, 2019

NitinBhasneria commented Jan 16, 2020

jywarren commented Jan 16, 2020 via email

NitinBhasneria commented Jan 17, 2020

NitinBhasneria commented Jan 17, 2020

NitinBhasneria commented Jan 17, 2020

jywarren commented Jan 17, 2020 via email

jywarren commented Jan 22, 2020

NitinBhasneria commented Jan 22, 2020

NitinBhasneria commented Jan 24, 2020

jywarren commented Jan 27, 2020

NitinBhasneria commented Jan 28, 2020