PR#48: Fixing: #47 Making the webpage responsive - fedora-commops/fedora-happiness-packets

fedora-commops / fedora-happiness-packets

#48 Fixing: #47 Making the webpage responsive

Closed 5 years ago by jflory7. Opened 5 years ago by harshitmodi.

fedora-commops/ harshitmodi/fedora-happiness-packets master into master

adding hamburger menu for top navigation links

harshitmodi • 5 years ago

565e058

assets/css/custom.css

file modified

+97

		`@@ -200,3 +200,100 @@`
		`.google:hover{`
		`background-color: #b72213;`
		`}`
		`+`
		`+ .sidebar {`
		`+ position: relative;`
		`+ }`
		`+`
		`+ .sidebar .slide-modal {`
		`+ display: block;`
		`+ position: static;`
		`+ opacity: 1;`
		`+ overflow: auto;`
		`+ }`
		`+`
		`+ .sidebar .slide-modal .close {`
		`+ display: none;`
		`+ }`
		`+`
		`+ .sidebar .toggle-btn {`
		`+ text-decoration: none;`
		`+ display: none;`
		`+ position: absolute;`
		`+ left: 15px;`
		`+ top: 50%;`
		`+ transform: translateY(-50%);`
		`+ }`
		`+`
		`+ .sidebar .toggle-btn img {`
		`+ max-width: 20px;`
		`+ max-height: 25px;`
		`+ }`
		`+`
		`+ @media (max-width: 767px) {`
		`+ .sidebar .toggle-btn {`
		`+ display: inline;`
		`+ }`
		`+`
		`+ aside {`
		`+ margin: 0;`
		`+ }`
		`+`
		`+ aside .sidebar {`
		`+ padding: 15px;`
		`+ }`
		`+`
		`+ aside .sidebar .logo {`
		`+ max-height: 50px;`
		`+ margin: 0;`
		`+ }`
		`+`
		`+ .sidebar .slide-modal {`
		`+ animation: slideout .3s forwards;`
		`+ background: white;`
		`+ padding-top: 30px;`
		`+ overflow-y: scroll;`
		`+ position: fixed;`
		`+ display: block;`
		`+ opacity: 0;`
		`+ z-index: -1;`
		`+ }`
		`+`
		`+ .sidebar .slide-modal .close {`
		`+ display: inline;`
		`+ position: absolute;`
		`+ right: 15px;`
		`+ top: 10px;`
		`+ font-family: sans-serif;`
		`+ font-size: 26px;`
		`+ font-weight: 200;`
		`+ }`
		`+`
		`+ .sidebar .slide-modal.in {`
		`+ opacity: 1;`
		`+ z-index: 1050;`
		`+ animation: slidein .3s forwards;`
		`+ }`
		`+`
		`+ .sidebar .slide-modal a {`
		`+ color: black;`
		`+ }`
		`+ }`
		`+`
		`+ @keyframes slidein {`
		`+ 0% {`
		`+ left: -100%;`
		`+ }`
		`+ 100% {`
		`+ left: 0;`
		`+ }`
		`+ }`
		`+`
		`+ @keyframes slideout {`
		`+ 0% {`
		`+ left: 0%;`
		`+ }`
		`+ 100% {`
		`+ left: -100%;`
		`+ }`
		`+ }`

assets/images/menu.svg

file added

+49

		`@@ -0,0 +1,49 @@`
		`+ <?xml version="1.0" encoding="iso-8859-1"?>`
		`+ <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->`
		`+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px">`
		`+ <g>`
		`+ <g>`
		`+ <path d="M491.318,235.318H20.682C9.26,235.318,0,244.577,0,256s9.26,20.682,20.682,20.682h470.636 c11.423,0,20.682-9.259,20.682-20.682C512,244.578,502.741,235.318,491.318,235.318z" fill="#FFFFFF"/>`
		`+ </g>`
		`+ </g>`
		`+ <g>`
		`+ <g>`
		`+ <path d="M491.318,78.439H20.682C9.26,78.439,0,87.699,0,99.121c0,11.422,9.26,20.682,20.682,20.682h470.636 c11.423,0,20.682-9.26,20.682-20.682C512,87.699,502.741,78.439,491.318,78.439z" fill="#FFFFFF"/>`
		`+ </g>`
		`+ </g>`
		`+ <g>`
		`+ <g>`
		`+ <path d="M491.318,392.197H20.682C9.26,392.197,0,401.456,0,412.879s9.26,20.682,20.682,20.682h470.636 c11.423,0,20.682-9.259,20.682-20.682S502.741,392.197,491.318,392.197z" fill="#FFFFFF"/>`
		`+ </g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ <g>`
		`+ </g>`
		`+ </svg>`

templates/base.html

file modified

+10 -2

		`@@ -5,7 +5,7 @@`
		`<title>Open-source Happiness Packets</title>`
		`<meta http-equiv="Content-Type" content="text/html; charset=utf-8">`

		`- <meta name="viewport" content="width=device-width, initial-scale=1.0">`
		`+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">`
		`<link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">`
		`<link href="{% static 'css/all.css' %}" rel="stylesheet">`
		`<link href="{% static 'css/datepicker.css' %}" rel="stylesheet">`
		`@@ -24,8 +24,12 @@`
		`<aside>`
		`<div class="sidebar">`
		`{% url 'messaging:start' as url %}`
		`+ <a data-toggle="modal" href="#mobile_slide_menu" class="toggle-btn">`
		`+ <img src="{% static 'images/menu.svg' %}" alt="">`
		`+ </a>`
		`<a href="{{ url }}"><img src="{% static 'images/logo.png' %}" alt="Open-Source Happiness Packets" class="logo"/></a>`
		`- <ul class="nav nav-stacked">`
		`+ <ul class="nav nav-stacked modal slide-modal" id="mobile_slide_menu">`
		`+ <button type="button" class="close" data-dismiss="modal">x</button>`
		`{% url 'messaging:send' as url %}`
		`<li role="presentation" {% if url in request.path %}class="active"{% endif %}><a href="{{ url }}">Send some happiness!</a></li>`
		`{% url 'messaging:start' as url %}`
		`@@ -89,5 +93,9 @@`
		`</small></footer>`
		`</div>`
		`</main>`
		`+`
		`+ <script type="text/javascript" src="{% static 'js/vendor/jquery-1.10.1.min.js' %}"></script>`
		`+`
		`+ <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.js' %}"></script>`
		`</body>`
		`</html>`

harshitmodi commented 5 years ago

Added side togglebar using bootstrap framework. (I have also added missing bootstrap js dependency to work with bootstrap)

algogator commented 5 years ago

Hey @harshitmodi thanks for the PR

I will look into this ASAP

Metadata Update from @jflory7:
- Pull-request tagged with: improvement, needs info, type - frontend
- Request assigned

5 years ago

jflory7 commented 5 years ago

@harshitmodi Thanks for the PR; can you upload a screenshot of how your changes appear on a desktop browser and maybe two or three mobile devices? This will make the PR easier to review. We can merge it once we see how it looks.

Metadata Update from @jflory7:
- Request reset

5 years ago

Metadata Update from @jflory7:
- Pull-request tagged with: type - summer coding, type - upstream

5 years ago

jflory7 commented 5 years ago

New changes were introduced since this pull request was opened. I tried to rebase this pull request against master but it was not a clean rebase. For now, I think it's best to close this pull request.

@harshitmodi If you have time later to submit this pull request again, the changes are still welcome. You are welcome to push up a new pull request again. Sorry for the delayed time to get feedback to you in the first place.

Pull-Request has been closed by jflory7

5 years ago