PR#260: Make frontend consistent with rest of Fedora Applications - fedora-commops/fedora-happiness-packets

fedora-commops / fedora-happiness-packets

#260 Make frontend consistent with rest of Fedora Applications

Opened 4 years ago by alishapapun. Modified 4 years ago

fedora-commops/ alishapapun/fedora-happiness-packets fhp/frontend into master

Make frontend consistent with rest of Fedora Applications

Alisha Mohanty • 4 years ago

0bc1a19

assets/css/bundle.css

file added

+3689

The added file is too large to be shown here, see it at: assets/css/bundle.css

assets/css/custom.css

file modified

+327 -243

		`@@ -1,421 +1,505 @@`
		`- :root{`
		`- --primary-color: #3c6eb4;`
		`- --secondary-color: #294172;`
		`+ :root {`
		`+ --primary-color: #3c6eb4;`
		`+ --secondary-color: #294172;`
		`}`

		`- *{`
		`- box-sizing: border-box;`
		`+ * {`
		`+ box-sizing: border-box;`
		`}`

		`- :before, :after{`
		`- box-sizing: border-box;`
		`+ *:before,`
		`+ *:after {`
		`+ box-sizing: border-box;`
		`}`

		`- html{`
		`- height: 100%;`
		`+ html {`
		`+ height: 100%;`
		`}`

		`body {`
		`- font-family: 'Open Sans';`
		`- line-height: 1.8em;`
		`- font-size: 9px;`
		`- height: 100%;`
		`- position: relative;`
		`- margin: 0;`
		`+ font-family: "Open Sans";`
		`+ line-height: 1.8em;`
		`+ font-size: 9px;`
		`+ height: 100%;`
		`+ position: relative;`
		`+ margin: 0;`
		`}`

		`- h1, h2, h3, h4, h5, h6 {`
		`- font-family: 'Montserrat';`
		`- margin-top: 1.4em;`
		`+ h1,`
		`+ h2,`
		`+ h3,`
		`+ h4,`
		`+ h5,`
		`+ h6 {`
		`+ font-family: "Montserrat";`
		`+ margin-top: 1.4em;`
		`}`

		`- main{`
		`- min-height: 100vh;`
		`- display: block;`
		`- overflow: hidden;`
		`- position: relative;`
		`- padding-bottom: 300px;`
		`- width: 100%;`
		`+ main {`
		`+ min-height: 100vh;`
		`+ display: block;`
		`+ overflow: hidden;`
		`+ position: relative;`
		`+ padding-bottom: 300px;`
		`+ width: 100%;`
		`}`

		`- a, a:hover {`
		`- color: var(--secondary-color);`
		`+ a,`
		`+ a:hover {`
		`+ color: var(--secondary-color);`
		`}`

		`aside {`
		`- background: var(--primary-color);`
		`- margin: -20px 0 0 0;`
		`+ background: var(--primary-color);`
		`+ margin: -20px 0 0 0;`
		`}`

		`aside .sidebar {`
		`- padding: 30px 15px;`
		`- text-align: center;`
		`- color: white;`
		`+ padding: 30px 15px;`
		`+ text-align: center;`
		`+ color: white;`
		`}`

		`aside .sidebar a {`
		`- color: white;`
		`- font-family: Montserrat;`
		`- font-size: 18px;`
		`- cursor: pointer;`
		`+ color: white;`
		`+ font-family: Montserrat;`
		`+ font-size: 18px;`
		`+ cursor: pointer;`
		`}`

		`.total-packets {`
		`- cursor: default;`
		`+ cursor: default;`
		`+ white-space: nowrap;`
		`}`
		`- .total-packets:hover{`
		`+ .total-packets:hover {`
		`text-decoration: none;`
		`}`

		`aside .sidebar a:hover,`
		`aside .sidebar a:focus {`
		`- text-decoration: underline;`
		`- background: none;`
		`+ text-decoration: underline;`
		`+ background: none;`
		`}`

		`aside .sidebar .logo {`
		`- max-height: 140px;`
		`- margin: 30px 0;`
		`+ max-height: 140px;`
		`+ margin: 30px 0;`
		`}`

		`- li.active[role="presentation"] a{`
		`- background: #fff;`
		`- color: var(--primary-color);`
		`- font-weight: bold;`
		`- border-radius: 2em;`
		`- margin-right: -100%;`
		`- padding-right: calc(100% + 10px);`
		`+ li.active[role="presentation"] a {`
		`+ background: #fff;`
		`+ color: var(--primary-color);`
		`+ font-weight: bold;`
		`+ border-radius: 2em;`
		`+ margin-right: -100%;`
		`+ padding-right: calc(100% + 10px);`
		`}`

		`footer {`
		`- text-align: center;`
		`- padding:0 7vw;`
		`- background-color: #3c6eb421;`
		`- position: absolute;`
		`- bottom: 0;`
		`- width: 100%;`
		`+ text-align: center;`
		`+ padding: 0 7vw;`
		`+ background-color: #3c6eb421;`
		`+ position: absolute;`
		`+ bottom: 0;`
		`+ width: 100%;`
		`}`

		`fieldset {`
		`- margin-top: 1em;`
		`+ margin-top: 1em;`
		`}`

		`- fieldset .form-group{`
		`- font-size: 1.7em;`
		`+ fieldset .form-group {`
		`+ font-size: 1.7em;`
		`}`

		`fieldset legend {`
		`- font-family: 'Montserrat';`
		`- font-style: italic;`
		`- border-bottom: 0px;`
		`+ font-family: initial;`
		`+ font-style: italic;`
		`+ border-bottom: 0px;`
		`}`

		`blockquote {`
		`- border-left: 0px;`
		`- 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;`
		`+ border-left: 0px;`
		`+ 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 {`
		`- margin-left: auto;`
		`- margin-right: auto;`
		`- display: block;`
		`+ margin-left: auto;`
		`+ margin-right: auto;`
		`+ display: block;`
		`}`

		`.btn {`
		`- background: white;`
		`- color: var(--secondary-color);`
		`- padding: 0.9em 1.3em;`
		`- margin: 2em;`
		`- border: 2px solid var(--secondary-color);`
		`- border-radius: 2em;`
		`- text-transform: uppercase;`
		`+ background: white;`
		`+ color: var(--secondary-color);`
		`+ padding: 0.9em 1.3em;`
		`+ margin: 2em;`
		`+ border: 2px solid var(--secondary-color);`
		`+ border-radius: 2em;`
		`+ text-transform: uppercase;`
		`}`

		`.btn:hover {`
		`- background: var(--secondary-color);`
		`- color: white;`
		`- font-weight: bold;`
		`+ background: var(--secondary-color);`
		`+ color: white;`
		`+ font-weight: bold;`
		`}`

		`.btn:focus {`
		`- color: white;`
		`+ color: white;`
		`}`

		`- .btn-primary:hover{`
		`- font-weight: normal;`
		`- border-color: var(--secondary-color);`
		`+ .btn-primary:hover {`
		`+ font-weight: normal;`
		`+ border-color: var(--secondary-color);`
		`}`

		`- .btn-primary:hover img.emoji{`
		`- transition: 0.6s ease-in;`
		`- transform: scale(1.08) rotate(360deg);`
		`+ .btn-primary:hover img.emoji {`
		`+ transition: 0.6s ease-in;`
		`+ transform: scale(1.08) rotate(360deg);`
		`}`

		`- .btn-login, .btn-logout {`
		`+ .btn-login,`
		`+ .btn-logout {`
		`background: none;`
		`color: white;`
		`border-color: #fff;`
		`padding: 14px 20px 12px 20px;`
		`}`

		`- .btn-login:hover, .btn-logout:hover{`
		`- background: #fff;`
		`- color: var(--primary-color);`
		`- border-color: #fff;`
		`+ .btn-login:hover,`
		`+ .btn-logout:hover {`
		`+ background: #fff;`
		`+ color: var(--primary-color);`
		`+ border-color: #fff;`
		`}`

		`- .dropdown-menu.show{`
		`- background: var(--primary-color);`
		`- width: 100%;`
		`- box-shadow: 0 5px 10px var(--primary-color);`
		`- border: 2px solid #fff;`
		`- border-top-color: var(--primary-color);`
		`- border-radius: 0 0 2em 2em;`
		`+ .dropdown-menu.show {`
		`+ background: var(--primary-color);`
		`+ width: 100%;`
		`+ box-shadow: 0 5px 10px var(--primary-color);`
		`+ border-top-color: var(--primary-color);`
		`}`

		`- .dropdown-menu.show a,`
		`- .dropdown-menu.show a:hover{`
		`- padding: 5px 20px;`
		`- color: #fff;`
		`+ .dropdown-menu.show a {`
		`+ color: #fff;`
		`+ }`
		`+ .dropdown-menu.show a:hover {`
		`+ padding: 5px 20px;`
		`}`

		`- .arrow-expanding{`
		`- width: 20px;`
		`- transition-duration: 0.3s;`
		`- margin-bottom: 2px;`
		`+ .arrow-expanding {`
		`+ width: 20px;`
		`+ transition-duration: 0.3s;`
		`+ margin-bottom: 2px;`
		`}`

		`- .username{`
		`- cursor: pointer;`
		`+ .username {`
		`+ cursor: pointer;`
		`}`

		`- .username.dropdown-toggle[aria-expanded=false] .arrow-expanding{`
		`- transform: rotate(0);`
		`+ .username.dropdown-toggle[aria-expanded="false"] .arrow-expanding {`
		`+ transform: rotate(0);`
		`}`

		`- .username.dropdown-toggle[aria-expanded=true] .arrow-expanding{`
		`- transform: rotate(-180deg);`
		`+ .username.dropdown-toggle[aria-expanded="true"] .arrow-expanding {`
		`+ transform: rotate(-180deg);`
		`}`

		`.row.content {`
		`- min-height: 200px;`
		`+ min-height: 200px;`
		`+ font-family: initial;`
		`}`

		`.lead {`
		`- line-height: 1.8em;`
		`+ line-height: 1.8em;`
		`}`

		`.asteriskField {`
		`- display: none;`
		`+ display: none;`
		`}`

		`#div_id_hp {`
		`- display: none;`
		`+ display: none;`
		`}`

		`#faq h3 {`
		`- margin-top: 2em;`
		`+ margin-top: 2em;`
		`}`

		`@media (min-width: 992px) {`
		`- aside {`
		`- width: 25%;`
		`- height: calc(100% + 20px);`
		`- position: fixed;`
		`- display: flex;`
		`- justify-content: center;`
		`- background: -moz-linear-gradient(top, var(--primary-color) 0%, var(--primary-color) 27%, var(--primary-color) 27%, var(--primary-color) 100%);`
		`- background: -webkit-linear-gradient(top, var(--primary-color) 0%, var(--primary-color) 27%, var(--primary-color) 27%, var(--primary-color) 100%);`
		`- background: linear-gradient(to bottom, var(--primary-color) 0%, var(--primary-color) 27%, var(--primary-color) 27%, var(--primary-color) 100%);`
		`- }`
		`+ aside {`
		`+ width: 25%;`
		`+ height: calc(100% + 20px);`
		`+ position: fixed;`
		`+ display: flex;`
		`+ justify-content: center;`
		`+ background: -moz-linear-gradient(`
		`+ top,`
		`+ var(--primary-color) 0%,`
		`+ var(--primary-color) 27%,`
		`+ var(--primary-color) 27%,`
		`+ var(--primary-color) 100%`
		`+ );`
		`+ background: -webkit-linear-gradient(`
		`+ top,`
		`+ var(--primary-color) 0%,`
		`+ var(--primary-color) 27%,`
		`+ var(--primary-color) 27%,`
		`+ var(--primary-color) 100%`
		`+ );`
		`+ background: linear-gradient(`
		`+ to bottom,`
		`+ var(--primary-color) 0%,`
		`+ var(--primary-color) 27%,`
		`+ var(--primary-color) 27%,`
		`+ var(--primary-color) 100%`
		`+ );`
		`+ }`

		`- aside .sidebar {`
		`- max-width: 300px;`
		`- float: right;`
		`- }`
		`+ aside .sidebar {`
		`+ max-width: 300px;`
		`+ float: right;`
		`+ }`

		`- aside .sidebar .logo {`
		`- max-width: 90%;`
		`- max-height: 300px;`
		`- }`
		`+ aside .sidebar .logo {`
		`+ max-width: 90%;`
		`+ max-height: 300px;`
		`+ }`

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

		`- main .container {`
		`- padding: 0px 50px;`
		`- }`
		`+ main .container {`
		`+ padding: 0px 50px;`
		`+ }`

		`- blockquote {`
		`- min-height: 130px;`
		`- }`
		`+ blockquote {`
		`+ min-height: 130px;`
		`+ }`

		`- .row.content {`
		`- min-height: 500px;`
		`- }`
		`+ .row.content {`
		`+ min-height: 500px;`
		`+ }`
		`}`

		`- @media (max-width: 975px){`
		`- li.active[role="presentation"] a{`
		`- background: #fff;`
		`- color: var(--primary-color);`
		`- font-weight: bold;`
		`- border-radius: 2em;`
		`- margin-right: 0;`
		`- padding-right: 15px;`
		`- }`
		`+ @media (max-width: 975px) {`
		`+ li.active[role="presentation"] a {`
		`+ background: #fff;`
		`+ color: var(--primary-color);`
		`+ font-weight: bold;`
		`+ border-radius: 2em;`
		`+ margin-right: 0;`
		`+ padding-right: 15px;`
		`+ }`
		`}`

		`@media (min-width: 1530px) {`
		`- blockquote {`
		`- min-height: 170px;`
		`- }`
		`+ blockquote {`
		`+ min-height: 170px;`
		`+ }`

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

		`.emoji {`
		`- vertical-align: initial;`
		`+ vertical-align: initial;`
		`}`

		`.sharebutton {`
		`- position: relative;`
		`- height: 28px;`
		`- box-sizing: border-box;`
		`- background-color: #3B5998;`
		`- padding: 1px 10px 1px 9px;`
		`- color: #fff;`
		`- font-weight: 500;`
		`- cursor: pointer;`
		`- inherit: none;`
		`- display: inline-block;`
		`- vertical-align: top;`
		`- font: normal normal normal 11px/18px 'Helvetica Neue',Arial,sans-serif;`
		`- font-size: 0.6em;`
		`- line-height: 26px;`
		`- border-radius: 4px;`
		`+ position: relative;`
		`+ height: 28px;`
		`+ box-sizing: border-box;`
		`+ background-color: #3b5998;`
		`+ padding: 1px 10px 1px 9px;`
		`+ color: #fff;`
		`+ font-weight: 500;`
		`+ cursor: pointer;`
		`+ display: inline-block;`
		`+ vertical-align: top;`
		`+ font: normal normal normal 11px/18px "Helvetica Neue", Arial, sans-serif;`
		`+ font-size: 0.6em;`
		`+ line-height: 26px;`
		`+ border-radius: 4px;`
		`}`

		`.sharebutton:hover {`
		`- text-decoration: none;`
		`- color: #fff;`
		`- background-color: #2f4779;`
		`+ text-decoration: none;`
		`+ color: #fff;`
		`+ background-color: #2f4779;`
		`}`

		`- .google{`
		`- background-color: #d34836;`
		`+ .google {`
		`+ background-color: #d34836;`
		`}`

		`- .google:hover{`
		`- background-color: #b72213;`
		`+ .google:hover {`
		`+ background-color: #b72213;`
		`}`

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

		`- main .container{`
		`- margin-bottom: 19em;`
		`- }`
		`+ main .container {`
		`+ margin-bottom: 19em;`
		`+ }`
		`}`

		`.twitter {`
		`- background-color: #00aced;`
		`+ background-color: #00aced;`
		`}`

		`.twitter:hover {`
		`- background-color: #0084b4;`
		`+ background-color: #0084b4;`
		`}`
		`@media (max-width: 450px) {`
		`- aside .sidebar .logo {`
		`- width: 100%;`
		`- }`
		`+ aside .sidebar .logo {`
		`+ width: 100%;`
		`+ }`
		`}`
		`.wearefedora {`
		`- color: var(--primary-color);`
		`- font-weight: 600;`
		`- font-size:2.3rem;`
		`+ color: var(--primary-color);`
		`+ font-weight: 600;`
		`+ font-size: 2.3rem;`
		`}`
		`.footer-msg {`
		`- padding-bottom: 1rem;`
		`- font-size: 16px;`
		`- line-height: 1.8em;`
		`+ padding-bottom: 1rem;`
		`+ font-size: 16px;`
		`+ line-height: 1.8em;`
		`}`
		`.footer-msg p {`
		`font-size: 2rem;`
		`}`
		`.footer-msg a {`
		`- font-weight: 600;`
		`+ font-weight: 600;`
		`}`
		`.row p {`
		`- font-size: 2rem;`
		`- line-height: 1.8em;`
		`+ font-size: 2rem;`
		`+ line-height: 1.8em;`
		`}`
		`- .footer-share p{`
		`- font-size: 2rem;`
		`+ .footer-share p {`
		`+ font-size: 2rem;`
		`}`
		`.socio-buttons {`
		`- padding: 1rem;`
		`- font-size: 2rem;`
		`- padding-bottom: 0.5em;`
		`+ padding: 1rem;`
		`+ font-size: 2rem;`
		`+ padding-bottom: 0.5em;`
		`}`
		`.socio-buttons a {`
		`- padding: 0.9rem;`
		`+ padding: 0.9rem;`
		`}`
		`- .row .error{`
		`+ .row .error {`
		`color: red;`
		`font-size: 1.4rem;`
		`text-align: center;`
		`}`
		`- .row .searching-text{`
		`+ .row .searching-text {`
		`text-align: center;`
		`- font-size:1.4rem;`
		`+ font-size: 1.4rem;`
		`}`
		`.search {`
		`- background-color: white;`
		`- padding: 0.5rem 1em;`
		`- color: var(--secondary-color);`
		`- font-weight: 500;`
		`- cursor: pointer;`
		`- font-size: 18px;`
		`- border-radius: 2rem;`
		`- border: 2px solid var(--secondary-color);`
		`- }`
		`+ background-color: white;`
		`+ padding: 0.5rem 1em;`
		`+ color: var(--secondary-color);`
		`+ font-weight: 500;`
		`+ cursor: pointer;`
		`+ font-size: 18px;`
		`+ border-radius: 2rem;`
		`+ border: 2px solid var(--secondary-color);`
		`+ }`
		`#div_id_fasid .controls {`
		`- display: inline-flex;`
		`+ display: inline-flex;`
		`}`
		`.alert-danger {`
		`- font-size:1.4rem;`
		`- text-align: center;`
		`+ font-size: 1.4rem;`
		`+ text-align: center;`
		`}`
		`.alert-danger ul {`
		`- list-style: none;`
		`+ list-style: none;`
		`}`
		`.fedmenu-content {`
		`- position: absolute !important;`
		`+ position: absolute !important;`
		`}`
		`- .total_happiness_sent{`
		`- text-align: center;`
		`- font-size: 3rem;`
		`- padding: 2rem;`
		`- font-family: 'Montserrat';`
		`+ .total_happiness_sent {`
		`+ text-align: center;`
		`+ font-size: 3rem;`
		`+ padding: 2rem;`
		`+ font-family: "Montserrat";`
		`}`
		`#id_q {`
		`- height: 3.2rem;`
		`- padding: 0 0.8rem;`
		`- border-radius: 2rem;`
		`+ height: 3.2rem;`
		`+ padding: 0 0.8rem;`
		`+ border-radius: 2rem;`
		`+ }`
		`+ .logo {`
		`+ height: 50px;`
		`+ width: 175px;`
		`+ margin-bottom: 30px;`
		`+ margin-top: 32px;`
		`+ }`
		`+ .row {`
		`+ justify-content: center;`
		`+ }`
		`+ .row .content {`
		`+ font-family: initial;`
		`+ }`
		`+`
		`+ .footer a {`
		`+ color: white;`
		`+ }`
		`+ .dropdown-header {`
		`+ color: white;`
		`+ text-align: center;`
		`+ }`
		`+ .dropdown-item {`
		`+ color: white;`
		`+ text-align: center;`
		`+ }`
		`+ .dropdown-item:hover {`
		`+ background-color: rgba(78, 126, 194, 0.582);`
		`+ }`
		`+ .messagelist {`
		`+ font-weight: bold;`
		`+ }`
		`+ .login-logout-design {`
		`+ background: none;`
		`+ color: inherit;`
		`+ border: none;`
		`+ text-decoration: none;`
		`+ font-weight: 700;`
		`+ font-size: 16px;`
		`+ outline: inherit;`
		`+ }`
		`+ .navbar-dark .navbar-nav .nav-link {`
		`+ color: rgba(255, 255, 255);`
		`+ }`
		`+`
		`+ @media (min-width: 450px) {`
		`+ .navbar {`
		`+ height: 50px;`
		`+ font-size: 16px;`
		`+ }`
		`+ }`
		`+ @media (max-width: 450px) {`
		`+ .total-packets {`
		`+ font-size: 20px;`
		`+ }`
		`+ }`
		`+ .bodycontent p {`
		`+ font-size: 20px;`
		`}`

templates/base.html

file modified

+137 -109

		`@@ -1,127 +1,155 @@`
		`{% load static %}`
		`<!DOCTYPE html>`
		`<html lang="en">`
		`- <head>`
		`+ <head>`
		`<meta http-equiv="Content-Type" content="text/html; charset=utf-8">`
		`-`
		`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
		`<link href="https://fonts.googleapis.com/css?family=Montserrat\|Open+Sans" rel="stylesheet">`
		`- <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">`
		`+ <script src="https://apis.google.com/js/platform.js" async defer></script>`
		`+ <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}" async defer></script>`
		`<link href="{% static 'css/all.css' %}" rel="stylesheet">`
		`<link href="{% static 'css/datepicker.css' %}" rel="stylesheet">`
		`- <link href="{% static 'css/custom.css' %}" rel="stylesheet">`
		`<link href="{% static 'images/favicon.ico' %}" rel="icon" type="image/x-icon">`
		`- <script src="https://apis.google.com/js/platform.js" async defer></script>`
		`- <!-- <script src="http://code.jquery.com/jquery-latest.min.js"></script> -->`
		`<script src="{% static 'js/vendor/jquery-3.3.1.min.js' %}"></script>`
		`<script src="{% static 'js/fas_details.js' %}" type="text/javascript"></script>`
		`- <script src="{% static 'bootstrap/js/bootstrap.bundle.min.js' %}" async defer></script>`
		`-`
		`- <!--[if lt IE 8]>`
		`- <link href="{% static 'css/bootstrap-ie7.css' %}" rel="stylesheet">`
		`- <![endif]-->`
		`+ <link href="{% static 'css/bundle.css' %}" rel="stylesheet"> <!--derived from getfedora.org theme -->`
		`+ <link href="https://apps.fedoraproject.org/global/fedora-bootstrap-1.1.1/fedora-bootstrap.css" type="text/css" rel="stylesheet" />`
		`+ <link href="https://apps.fedoraproject.org/global/fedora-bootstrap-fonts/open-sans.css" type="text/css" rel="stylesheet" />`
		`+ <link href="https://apps.fedoraproject.org/global/fedora-bootstrap-fonts/font-awesome.css" type="text/css" rel="stylesheet" />`
		`+ <link href="{% static 'css/custom.css' %}" rel="stylesheet">`
		`{% block extra_head %}{% endblock %}`
		`- </head>`
		`-`
		`- <body>`
		`+ </head>`
		`+ <body>`
		`{% include "facebook.html" %}`
		`- <aside>`
		`- <div class="sidebar">`
		`- {% url 'messaging:start' as url %}`
		`- <a href="{{ url }}"><img src="{% static 'images/logo.png' %}" alt="Open-Source Happiness Packets" class="logo"/></a>`
		`- <ul class="nav nav-stacked">`
		`- {% if user.is_authenticated %}`
		`-`
		`- <li class="dropdown">`
		`- <h3 class="username dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">`
		`- {{ user.username }}`
		`- <img class="arrow-expanding" src="/static/images/arrow-white.png" alt="side menu expanding icon">`
		`- </h3>`
		`- <ul class="dropdown-menu">`
		`-`
		`- {% if user.is_superuser %}`
		`- {% url 'admin:index' as url %}`
		`- <li><a class="dropdown-item" href="{{ url }}">Admin Portal</a></li>`
		`- {% endif %}`
		`- {% url 'messaging:received_messages' as url %}`
		`- <li><a class="dropdown-item" href="{{ url }}">My Received Packets</a></li>`
		`- {% url 'messaging:sent_messages' as url %}`
		`- <li><a class="dropdown-item" href="{{ url }}">My Sent Packets</a></li>`
		`-`
		`- <form id="logout" action="{% url 'oidc_logout' %}" method="post">`
		`- {% csrf_token %}`
		`- <button type="submit" class="btn btn-logout">`
		`- <span class="glyphicon glyphicon-log-out"></span>`
		`- <span> Logout</span>`
		`- </button>`
		`- </form>`
		`- </ul>`
		`- </li>`
		`+ <div class="bg-fedora-blue border-bottom border-fedora-dark-blue border-width-2 navigation-bar">`
		`+ <div class="container">`
		`+ <nav class="navbar navbar-dark navbar-expand-sm bg-none p-0">`
		`+ {% url 'messaging:start' as url %}`
		`+ <a href="{{ url }}"><img src="{% static 'images/logo.png' %}" alt="Open-Source Happiness Packets" class="logo container-fluid"/></a>`
		`+ <button`
		`+ class="navbar-toggler collapsed"`
		`+ type="button"`
		`+ data-toggle="collapse"`
		`+ data-target="#navbarNavDropdown"`
		`+ aria-controls="navbarNavDropdown"`
		`+ aria-expanded="false"`
		`+ aria-label="Toggle navigation"`
		`+ >`
		`+ <span class="navbar-toggler-icon"></span>`
		`+ </button>`
		`+ <div class="navbar-collapse collapse" id="navbarNavDropdown" >`
		`+ <ul class="navbar-nav ml-auto font-size-90 font-weight-bold">`
		`+ {% url 'messaging:send' as url %}`
		`+ <li role="presentation" {% if url in request.path %}class="nav-item"{% endif %}>`
		`+ <a class="nav-link" href="{{ url }}">Send Happiness</a>`
		`+ </li>`
		`+ {% url 'messaging:archive' as url %}`
		`+ <li role="presentation" {% ifequal request.path url %}class="nav-item"{% endifequal %}>`
		`+ <a class="nav-link" href="{{ url }}">Happiness Archive</a>`
		`+ </li>`
		`+ {% url 'messaging:inspiration' as url %}`
		`+ <li role="presentation" {% ifequal request.path url %}class="nav-item"{% endifequal %}>`
		`+ <a class="nav-link" href="{{ url }}">Get inspired</a>`
		`+ </li>`
		`+ {% url 'messaging:faq' as url %}`
		`+ <li role="presentation" {% ifequal request.path url %}class="nav-item"{% endifequal %}>`
		`+ <a class="nav-link" href="{{ url }}">FAQ</a>`
		`+ </li>`
		`+ {% if user.is_authenticated %}`
		`+ <li class="nav-item dropdown">`
		`+ <a`
		`+ class="nav-link dropdown-toggle"`
		`+ href="#"`
		`+ id="navbarDropdownMenuLink"`
		`+ role="button"`
		`+ data-toggle="dropdown"`
		`+ aria-haspopup="true"`
		`+ aria-expanded="false"`
		`+ >`
		`+ {{ user.username }}`
		`+ </a>`
		`+ <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">`
		`+ {% if user.is_superuser %}`
		`+ <span class="dropdown-header">ADMIN</span>`
		`+ {% url 'admin:index' as url %}`
		`+ <a class="dropdown-item" href="{{ url }}">Admin Portal</a>`
		`+ {% endif %}`
		`+ {% url 'messaging:received_messages' as url %}`
		`+ <a class="dropdown-item" href="{{ url }}">Received Packets</a>`
		`+ {% url 'messaging:sent_messages' as url %}`
		`+ <a class="dropdown-item" href="{{ url }}">Sent Packets</a>`
		`+ <form id="logout" action="{% url 'oidc_logout' %}" method="post">`
		`+ {% csrf_token %}`
		`+ <button type="submit"class="dropdown-item ">Logout</button>`
		`+ </form>`
		`+ </div>`
		`{% else %}`
		`- <form id="login" action="{% url 'oidc_authentication_init' %}" method="get">`
		`- <button type="submit" class="btn btn-login">`
		`- <span class="glyphicon glyphicon-log-in"></span>`
		`- <span> Login</span>`
		`- </button>`
		`- </form>`
		`- {% endif %}`
		`- {% url 'messaging:start' as url %}`
		`- <li role="presentation" {% ifequal request.path url %}class="active"{% endifequal %}><a href="{{ url }}">Home</a></li>`
		`- {% url 'messaging:send' as url %}`
		`- <li role="presentation" {% if url in request.path %}class="active"{% endif %}><a href="{{ url }}">Send Happiness</a></li>`
		`- {% url 'messaging:archive' as url %}`
		`- <li role="presentation" {% ifequal request.path url %}class="active"{% endifequal %}><a href="{{ url }}">Happiness Archive</a></li>`
		`- {% url 'messaging:inspiration' as url %}`
		`- <li role="presentation" {% ifequal request.path url %}class="active"{% endifequal %}><a href="{{ url }}">Get inspired</a></li>`
		`- {% url 'messaging:faq' as url %}`
		`- <li role="presentation" {% ifequal request.path url %}class="active"{% endifequal %}><a href="{{ url }}">FAQ</a></li>`
		`- </ul>`
		`- </div>`
		`- </aside>`
		`- <main>`
		`+ <li class="nav-item">`
		`+ <form id="login" action="{% url 'oidc_authentication_init' %}" method="get">`
		`+ <button type="submit" class="nav-link login-logout-design logout">`
		`+ Login`
		`+ </button>`
		`+ </form>`
		`+ </li>`
		`+ {% endif %}`
		`+ </li>`
		`+ </ul>`
		`+ </div>`
		`+ </nav>`
		`+ </div>`
		`+ </div>`
		`+ <div class="bodycontent">`
		`+ <div class="container py-9">`
		`<div class="container">`
		`- <div class="row content">`
		`- <div class="col-md-10">`
		`- {% for django_message in messages %}`
		`- <br>`
		`- <div class="alert {% if django_message.tags %} alert-{{ django_message.tags }}{% endif %}">`
		`- {{ django_message }}`
		`- </div>`
		`- {% endfor %}`
		`- {% block content %}{% endblock %}`
		`- </div>`
		`+ <div class="row content">`
		`+ <div class="col-md-12">`
		`+ {% for django_message in messages %}`
		`+ <br>`
		`+ <div class="alert {% if django_message.tags %} alert-{{ django_message.tags }}{% endif %}">`
		`+ {{ django_message }}`
		`+ </div>`
		`+ {% endfor %}`
		`+ {% block content %}{% endblock %}`
		`</div>`
		`+ </div>`
		`</div>`
		`- <footer class="footer">`
		`- <small>`
		`- <hr>`
		`- {% block footer %}`
		`- {% 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>`
		`- Need help? Report an issue <a href="https://pagure.io/coc">here</a>.`
		`- <img class="emoji" src="{% static 'images/emoji/loveletter.png' %}" alt="💌" title="Love letter" aria-label="Emoji: Love letter" style="vertical-align: text-bottom">`
		`- <br>`
		`- Got feedback? File an issue <a href="https://pagure.io/fedora-commops/fedora-happiness-packets/new_issue">here</a>`
		`- </div>`
		`- <div class="socio-buttons">`
		`- <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>`
		`- </small>`
		`- </footer>`
		`- <script src="https://apps.fedoraproject.org/fedmenu/js/fedora-libravatar.js"></script>`
		`- <script src="https://apps.fedoraproject.org/fedmenu/js/fedmenu.js"></script>`
		`- <script>`
		`- fedmenu({`
		`- 'url': 'https://apps.fedoraproject.org/js/data.js',`
		`- 'mimeType': 'application/javascript',`
		`- 'position': 'bottom-right'`
		`- });`
		`- </script>`
		`- </main>`
		`- </body>`
		`+ </div>`
		`+ </div>`
		`+ <div class="footer py-3">`
		`+ <div class="container">`
		`+ <div class="text-center text-muted">`
		`+ <small>`
		`+ <hr>`
		`+ {% block footer %}`
		`+ {% 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>`
		`+ Need help? Report an issue <a href="https://pagure.io/coc">here</a>.`
		`+ <img class="emoji" src="{% static 'images/emoji/loveletter.png' %}" alt="💌" title="Love letter" aria-label="Emoji: Love letter" style="vertical-align: text-bottom">`
		`+ <br>`
		`+ Got feedback? File an issue <a href="https://pagure.io/fedora-commops/fedora-happiness-packets/new_issue">here</a>`
		`+ </div>`
		`+ <div class="socio-buttons">`
		`+ <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>`
		`+ </small>`
		`+ </div>`
		`+ </div>`
		`+ </div>`
		`+ <script src="https://apps.fedoraproject.org/fedmenu/js/fedora-libravatar.js"></script>`
		`+ <script src="https://apps.fedoraproject.org/fedmenu/js/fedmenu.js"></script>`
		`+ <script>`
		`+ fedmenu({`
		`+ 'url': 'https://apps.fedoraproject.org/js/data.js',`
		`+ 'mimeType': 'application/javascript',`
		`+ 'position': 'bottom-right'`
		`+ });`
		`+ </script>`
		`+ </body>`
		`</html>`
		`+`
		`+`

templates/messaging/_message_list.html

file modified

+1 -1

		`@@ -1,7 +1,7 @@`
		`{% for message in message_list %}`
		`<h4>`
		`{% if message.sender_approved_public_named and message.recipient_approved_public_named %}`
		`- From {{ message.sender_name }} to {{ message.recipient_name }}`
		`+ From <span class="messagelist">{{ message.sender_name }}</span> to <span class="messagelist">{{ message.recipient_name }}</span>`
		`{% else %}`
		`Anonymous message`
		`{% endif %}`

templates/search/search.html

file modified

+1 -1

		`@@ -19,7 +19,7 @@`
		`{% for result in object_list %}`
		`<h4>`
		`{% if result.object.sender_approved_public_named and result.object.recipient_approved_public_named %}`
		`- From {{ result.object.sender_name }} to {{ result.object.recipient_name }}`
		`+ From <span class="messagelist">{{ result.object.sender_name }}</span> to <span class="messagelist">{{ result.object.recipient_name }}</span>`
		`{% else %}`
		`Anonymous message`
		`{% endif %}`

alishapapun commented 4 years ago

This PR aims to change the frontend of Fedora Happiness Packets. It does
1. Add Fedora Bootstrap
2. Shift sidebar to top navigation bar
3. Change the color theme of the website
4. Change the design of footer

I planned to change the logo to the new logo but it did not fit the overall design of the web application, so kept did not switch the logo design. The overall design of the FHP is inspired by getfedora.org. Lemme know if any prior changes are required to make the overall design better.
The new UI looks something like this.
(bundle.css is added to make the whole theme)

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

4 years ago

jflory7 commented 4 years ago

Hey @alishapapun! I know it is super late to follow up here, but this PR has a merge conflict. Could you please rebase onto the latest master branch and we can work on getting this merged after so long? Thanks! :pray:

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

4 years ago