PR#205: Solved the sidebar scrolling by making text size smaller and editing footer and other pages accordingly, fixed more mobile view problem - fedora-commops/fedora-happiness-packets

fedora-commops / fedora-happiness-packets

#205 Solved the sidebar scrolling by making text size smaller and editing footer and other pages accordingly, fixed more mobile view problem

Closed 5 years ago by anhpham. Opened 5 years ago by anhpham.

fedora-commops/ anhpham/fedora-happiness-packets issue-201-sidebar-large-dimensions into master

Solved the sidebar scrolling by making text size smaller and editing footer and other pages accordingly, fixed more mobile view problem

Anh Pham • 5 years ago

c1ea398

assets/css/custom.css

file modified

+20 -7

		`@@ -18,7 +18,7 @@`
		`body {`
		`font-family: 'Open Sans';`
		`line-height: 1.8em;`
		`- font-size: 16px;`
		`+ font-size: 9px;`
		`height: 100%;`
		`position: relative;`
		`margin: 0;`
		`@@ -62,6 +62,7 @@`

		`aside .sidebar .total-packets {`
		`cursor: default;`
		`+ padding: 0;`
		`}`
		`aside .sidebar .total-packets:hover{`
		`text-decoration: none;`
		`@@ -99,6 +100,10 @@`
		`margin-top: 1em;`
		`}`

		`+ fieldset .form-group{`
		`+ font-size: 1.7em;`
		`+ }`
		`+`
		`fieldset legend {`
		`font-family: 'Montserrat';`
		`font-style: italic;`
		`@@ -107,13 +112,14 @@`

		`blockquote {`
		`border-left: 0px;`
		`- font-size: 16px;`
		`+ font-size: 2rem;`
		`color: rgba(0, 0, 0, 0.7);`
		`background: url(/static/images/loveletter.png) no-repeat;`
		`background-size: 20%;`
		`background-position: 0 20px;`
		`padding-left: calc(20% + 20px);`
		`min-height: 120px;`
		`+ line-height: 1.8em;`
		`}`

		`.centered {`
		`@@ -260,7 +266,7 @@`
		`display: inline-block;`
		`vertical-align: top;`
		`font: normal normal normal 11px/18px 'Helvetica Neue',Arial,sans-serif;`
		`- font-size: 0.6em;`
		`+ font-size: 1.8em;`
		`line-height: 26px;`
		`border-radius: 4px;`
		`}`
		`@@ -281,10 +287,14 @@`

		`@media (max-width: 360px) {`
		`.btn-responsive {`
		`- font-size: 15px;`
		`+ font-size: 12.5px;`
		`+ margin: 2em 0;`
		`}`
		`- }`

		`+ main .container{`
		`+ margin-bottom: 19em;`
		`+ }`
		`+ }`
		`.twitter {`
		`background-color: #00aced;`
		`}`
		`@@ -303,7 +313,9 @@`
		`font-size:2.3rem;`
		`}`
		`.footer-msg {`
		`- padding-top: 0.5rem;`
		`+ padding-bottom: 1rem;`
		`+ font-size: 16px;`
		`+ line-height: 1.8em;`
		`}`
		`.footer-msg p {`
		`font-size: 2rem;`
		`@@ -313,12 +325,13 @@`
		`}`
		`.row p {`
		`font-size: 2rem;`
		`+ line-height: 1.8em;`
		`}`
		`.footer-share p{`
		`font-size: 2rem;`
		`}`
		`.socio-buttons {`
		`- padding: 1rem;`
		`+ padding-bottom: 0.5em;`
		`font-size: 2rem;`
		`}`
		`.socio-buttons a {`

templates/base.html

file modified

+3 -3

		`@@ -92,8 +92,8 @@`
		`<small>`
		`<hr>`
		`{% block footer %}`
		`- {% include "follow.html" %}`
		`- <div class="footer-msg">`
		`+ {% include "follow.html" %}`
		`+ <div class="footer-msg" style="padding-top: 1rem;">`
		`{% endblock %}`
		`Fedora Happiness Packets is a fork of <a href="https://github.com/mxsasha/happinesspackets/">Happiness Packets</a> and part of GSoC 2018.`
		`<br>`
		`@@ -106,7 +106,7 @@`
		`<a href="https://www.facebook.com/TheFedoraProject"><i class="fab fa-facebook-f fa-lg"></i></a>`
		`<a href="https://twitter.com/fedora"><i class="fab fa-twitter fa-lg"></i></a>`
		`<a href="https://plus.google.com/112917221531140868607"><i class="fab fa-google-plus-g fa-lg"></i></a>`
		`- </div>`
		`+ </div>`
		`</small>`
		`</footer>`
		`</main>`

templates/messaging/inspiration.html

file modified

+1 -1

		`@@ -6,7 +6,7 @@`
		`<h2>Get inspired!</h2>`
		`</div>`

		`- <em>`
		`+ <em style="font-size: 1.5em; line-height: 1.8em;">`
		`Want to send some happiness but having a writer's block? Check out some of these sample messages`
		`for inspiration. These are not actual messages that were sent with the system, just some ideas that`
		`you can use. Our <a href="{% url 'messaging:archive' %}">Happiness Archive</a> contains more messages from`

templates/messaging/message_sender_confirmation_sent.html

file modified

-4

		`@@ -17,7 +17,3 @@`
		`<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>`

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

templates/search/search.html

file modified

+1 -1

		`@@ -4,7 +4,7 @@`
		`<h2>Search</h2>`
		`<form method="get" class="form-inline">`
		`{% for field in form %}`
		`- <div class="form-group">`
		`+ <div class="form-group" style="font-size: 1.7em;">`
		`{{ field.errors }}`
		`{{ field.label_tag }} {{ field }}`
		`</div>`

anhpham commented 5 years ago

My third pull request is to fixing the sidebar scrolling bug in large dimensions.
This commit includes:
1. Changing the body text size from 16px to 9px to solve the scrolling problem in large dimension.
2. Due to the fact that text size was changed, a couple of text blocks in other pages looked out of place. So I adjusted their font-size and line-height accordingly.
3. The footer's mobile view bug that was mentioned in the discussion of issue 134 also got solved by changing the margin of the main block.
4. Testing all these changes on all devices and views: Looks pretty good so far!

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

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

anhpham commented 5 years ago

@jflory7 Here's my pull request! If you have time, please kindly check it and let me know what else I could change 👍👍

rebased onto c1ea398

5 years ago

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, this looks great. It seems to have solved the issue I had.

I have one change request: could you add more spacing between Total Happiness Spread and What are Happiness Packets? They look too close together in my current view:

Otherwise, everything else looks good! If you can fix up this last part, we can merge the PR. :thumbsup:

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

5 years ago

anhpham commented 5 years ago

Hi @anhpham, this looks great. It seems to have solved the issue I had.
I have one change request: could you add more spacing between Total Happiness Spread and What are Happiness Packets? They look too close together in my current view:

Otherwise, everything else looks good! If you can fix up this last part, we can merge the PR. 👍

Sure, I'll be making the change asap! Thank you!
(Also, if you have time, could you please also check your email as well?)

Pull-Request has been closed by anhpham

5 years ago