Skip to content

Commit

Permalink
Add changes to styling and template according to new spec
Browse files Browse the repository at this point in the history
  • Loading branch information
“OMosimege” committed Jul 3, 2024
1 parent b9830d5 commit 5b768b5
Show file tree
Hide file tree
Showing 6 changed files with 223 additions and 174 deletions.
8 changes: 4 additions & 4 deletions app/app/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ def projects(request):
projects = (
Project.objects.select_related("institution")
.prefetch_related("subjects", "languages")
.all()
.order_by("name")
)

if subject_id:
Expand All @@ -71,9 +71,9 @@ def projects(request):
if institution_id:
projects = projects.filter(institution__id=institution_id)

subjects = Subject.objects.all()
languages = Language.objects.all()
institutions = Institution.objects.all()
subjects = Subject.objects.order_by("name")
languages = Language.objects.order_by("name")
institutions = Institution.objects.order_by("name")

project_data = []
for project in projects:
Expand Down
163 changes: 103 additions & 60 deletions app/static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,127 +33,100 @@ html {
position: absolute;
bottom: 0;
}

.header-container {
display: inline-block;
}

.nav-menu {
float: left;
padding: 5px;
margin: 10px 10px 10px 10px;
}

.nav-logo {
margin: 3px 10px 10px 10px;
float: left;
}

.nav {
background: var(--primary-fg);
width: 100%;
}

.nav > li > a{
margin-top: 15px;
color: var(--text-color);
}

.nav > li > .active{
margin-top: 15px;
background-color: var(--primary) !important;
color: var(--primary-fg);
}

.nav > li > a:hover{
margin-top: 15px;
background-color: var(--body-quiet-color);
color: var(--primary-fg);
}

.nav > li > a:active{
margin-top: 15px;
background-color: var(--primary);
color: var(--primary-fg);
}

.btn-primary{
margin-top:20px;
outline-color: var(--primary);
background-color: var(--primary);
border-color: var(--primary);
}

.btn-outline-primary{
margin-top:20px;
background: #2D4481;
outline-color: var(--primary);
}

.btn-primary:hover{
margin-top:20px;
background: var(--body-quiet-color);
outline-color: var(--primary);
}

.app-footer .footer-title {
color: var(--primary);
}

.footer > a {
color: var(--primary-fg);
}

.section{
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}

.main-logo {
width: 140px;
height: 75px;
margin: 20px 10px 10px 10px;
}

.page-link {
background-color: var(--primary) !important;
color: var(--primary-fg) !important;
}

.page-link:hover{
background-color: var(--body-quiet-color) !important;
color: var(--primary-fg) !important;
}

.row {
margin: 10px;
padding: 10px;
}

.footer-class {
display: flex;
justify-content: center;
align-items: center;
position: relative;
flex-direction: column;
}

.language-toggle {
margin-top: 1rem;
}

.language-toggle form {
display: flex;
flex-direction: column;
align-items: center;
}

.language-toggle select,
.language-toggle .btn-language {
margin-top: 0.5rem;
}

.btn-language{
color: var(--text-color);
outline-color: var(--primary-fg);
Expand All @@ -172,17 +145,33 @@ html {
border-color: var(--primary-red);
margin: 0 10px 0 10px;
}

.uni-logo {
width: auto;
height: 75px;
margin: 10px 0 10px 0;
padding: 0 10px 10px 0;
}
.institution-row {
margin: 10px;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.left-col, .right-col {
flex: 1;
min-width: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}

/*Projects page*/
.filter-class label {
font-size: 1.15rem;
}
.filter-form {
display: flex;
margin: 30px;
font-size: 0.875rem;
}
Expand All @@ -199,12 +188,21 @@ html {
padding: 0 10px;
width: 230px;
}
.form-group-name {
margin-bottom: 15px;
}
.button-group {
display: flex;
align-items: center;
}
.btn-apply, .btn-reset{
color: var(--primary-fg);
outline-color: var(--primary);
background-color: var(--primary);
border-color: var(--primary);
padding: 10px 20px;
margin-right: 10px;
white-space: nowrap;
}
.btn-apply:hover, .btn-reset:hover{
color: var(--primary-fg);
Expand Down Expand Up @@ -242,15 +240,6 @@ html {
padding: 0 5px 0 0;
word-wrap: break-word;
}
.project-left-col {
width: 70%;
}
.project-right-col {
width: 30%;
flex: 0 0 auto;
display: flex;
justify-content: flex-end;
}
.project-header {
display: flex;
justify-content: space-between;
Expand All @@ -269,8 +258,6 @@ html {
margin: 3px 0 3px 0;
}
.project-row {
display: flex;
justify-content: space-between;
width: 100%;
}
.project-text {
Expand All @@ -280,7 +267,7 @@ html {
font-size: 0.95rem;
}

/*Project & Institution detail*/
/*Projects & Institution detail pages*/
.detail {
width: 80%;
margin: 0 auto;
Expand All @@ -304,8 +291,7 @@ html {
}

.detail-row {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 20px;
}

Expand All @@ -321,7 +307,6 @@ html {
}

.detail-col {
flex: 1;
border-radius: 5px;
}

Expand All @@ -343,19 +328,7 @@ html {
text-decoration: none;
color: var(--link-text);
}

.detail-left-col {
width: 50%;
}

.detail-right-col {
width: 50%;
flex: 0 0 auto;
display: flex;
justify-content: left;
}
.project-date-row {
display: flex;
font-size: 0.875rem;
}

Expand Down Expand Up @@ -396,9 +369,14 @@ html {
width: 98%;
padding-right: 30px;
}
.col-sm-6 {
width: 50%;
.institution-row {
flex-direction: column;
align-items: flex-start;
}
.left-col, .right-col {
width: 100%;
}

/*Home page*/
.content-card {
font-size: smaller;
Expand All @@ -409,7 +387,13 @@ html {
/*Projects page*/
.filter-form select {
padding: 0 10px;
width: 100px;
width: 250px;
}
.project-row {
justify-content: space-between;
}
.form-group {
margin-bottom: 20px
}
}

Expand Down Expand Up @@ -448,7 +432,13 @@ html {
/*Projects page*/
.filter-form select {
padding: 0 10px;
width: 150px;
width: 400px;
}
.project-row {
justify-content: space-between;
}
.form-group {
margin-bottom: 20px
}
}

Expand Down Expand Up @@ -507,6 +497,32 @@ html {
padding: 0 10px;
width: 200px;
}
.project-row {
display: flex;
justify-content: space-between;
}
.project-left-col {
width: 70%;
}
.project-right-col {
width: 30%;
flex: 0 0 auto;
display: flex;
justify-content: flex-end;
}

/*Projects & Institution detail pages*/
.detail-left-col, .detail-right-col {
flex: 1;
padding: 10px;
}
.project-date-row {
display: flex;
font-size: 0.875rem;
}
.filter-form {
display: flex;
}
}

/*Larger screens (desktops, 1001px and up)*/
Expand Down Expand Up @@ -565,4 +581,31 @@ html {
padding: 0 10px;
width: 230px;
}
.project-row {
display: flex;
justify-content: space-between;
}
.project-left-col {
width: 70%;
}
.project-right-col {
width: 30%;
flex: 0 0 auto;
display: flex;
justify-content: flex-end;
}

/*Projects & Institution detail pages*/
.detail-right-col {
flex: 0 0 auto;
display: flex;
justify-content: left;
}
.project-date-row {
display: flex;
font-size: 0.875rem;
}
.filter-form {
display: flex;
}
}
Loading

0 comments on commit 5b768b5

Please sign in to comment.