PR#200: Updated issue 134: Made the footer consistent across all pages and stick to the bottom regardless of the length of the page's content - fedora-commops/fedora-happiness-packets

fedora-commops / fedora-happiness-packets

#200 Updated issue 134: Made the footer consistent across all pages and stick to the bottom regardless of the length of the page's content

Merged 5 years ago by jflory7. Opened 5 years ago by anhpham.

fedora-commops/ anhpham/fedora-happiness-packets updated-issue-134-resolve-bug-in-footer into master

Updated issue 134: Made the footer consistent across all pages and stick to the bottom regardless of the length of the page's content

Anh Pham • 5 years ago

d6b6443

assets/css/custom.css

file modified

+34 -3

		`@@ -3,10 +3,25 @@`
		`--secondary-color: #294172;`
		`}`

		`+ *{`
		`+ box-sizing: border-box;`
		`+ }`
		`+`
		`+ :before, :after{`
		`+ box-sizing: border-box;`
		`+ }`
		`+`
		`+ html{`
		`+ height: 100%;`
		`+ }`
		`+`
		`body {`
		`font-family: 'Open Sans';`
		`line-height: 1.8em;`
		`font-size: 16px;`
		`+ height: 100%;`
		`+ position: relative;`
		`+ margin: 0;`
		`}`

		`h1, h2, h3, h4, h5, h6 {`
		`@@ -14,6 +29,15 @@`
		`margin-top: 1.4em;`
		`}`

		`+ main{`
		`+ min-height: 100vh;`
		`+ display: block;`
		`+ overflow: hidden;`
		`+ position: relative;`
		`+ padding-bottom: 300px;`
		`+ width: 100%;`
		`+ }`
		`+`
		`a, a:hover {`
		`color: var(--secondary-color);`
		`}`
		`@@ -66,7 +90,9 @@`
		`text-align: center;`
		`padding:0 7vw;`
		`background-color: #3c6eb421;`
		`- position: relative;`
		`+ position: absolute;`
		`+ bottom: 0;`
		`+ width: 100%;`
		`}`

		`fieldset {`
		`@@ -178,12 +204,12 @@`
		`}`

		`main {`
		`- margin-left: 25%;`
		`+ margin-left: 350px;`
		`+ width: 75%;`
		`}`

		`main .container {`
		`padding: 0px 50px;`
		`- width: 100%;`
		`}`

		`blockquote {`
		`@@ -210,6 +236,11 @@`
		`blockquote {`
		`min-height: 170px;`
		`}`
		`+`
		`+ main{`
		`+ margin-left: 450px;`
		`+ width: 75%;`
		`+ }`
		`}`

		`.emoji {`

templates/messaging/message_sender_confirmation_sent.html

file modified

+4 -1

		`@@ -15,6 +15,9 @@`
		`<script>document.getElementById('fb').onclick = function() {FB.ui({method: 'share', mobile_iframe: true, hashtag: '#WeAreFedora', href: 'https://happinesspackets.fedorainfracloud.org/',}, function(response){});}</script>`
		`<a href="https://twitter.com/intent/tweet?button_hashtag=WeAreFedora&text=I%20just%20sent%20a%20happiness%20packet%20to%20thank%20a%20@fedora%20community%20member" class="twitter-hashtag-button" data-size="large" data-dnt="true">Tweet #WeAreFedora</a>`
		`<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>`
		`- {% block footer %}{% endblock %}`

		`{% endblock content %}`
		`+`
		`+ {% block footer %}`
		`+ {% include "follow.html" %}`
		`+ {% endblock %}`
		`\ No newline at end of file`

anhpham commented 5 years ago

My second pull Request is fixing the bugs in footer implementation.
This updated commit includes:
1. Added the social buttons to the footer in Sender Confirmation page to make the footer look consistent across all pages.
2. Made the footer fixed to the bottom of the page no matter how long the page's content is.
3. Edited the file custom.css in order to make the footer not only consistent across all pages and fixed to bottom but also large and small screen view.

As per issue 134: https://pagure.io/fedora-commops/fedora-happiness-packets/issue/134

Please let me know if there's anything that needs changing :)

anhpham commented 5 years ago

@jflory7 If you have time can you please check my PR? Thank you so much!
My git rebase process has some problems so I have to close the old PR make this new updated one!

Edited 5 years ago by anhpham

Metadata Update from @jflory7:
- Pull-request tagged with: PASSED, improvement, needs testing, type - frontend, type - summer coding
- Request assigned

5 years ago

jflory7 commented 5 years ago

Hi @anhpham, your changes look good. :thumbsup: There are still some bugs with certain dimensions, but I think we can address them in a follow-up PR later. I'll post screenshots in #134. For now, I'm merging this one! :clapper:

Thanks for working on this.

Metadata Update from @jflory7:
- Pull-request untagged with: needs testing

5 years ago

Pull-Request has been merged by jflory7

5 years ago

anhpham commented 5 years ago

@jflory7 sorry for this! I thought I had tested pretty much all devices thoroughly (I used Mozilla Developer Tools), but there are still bugs in certain dimensions as you said.
If you allow, could I take up fixing these bugs to smooth out the #134 ticket?