Commit f7b9ad7a authored by Ciella Francisco's avatar Ciella Francisco 😵

Front-end formatting for event management

Co-authored-by: 's avatarJV888 <JV888@users.noreply.github.com>
parent 54fa57bf
{% extends 'base.html' %}
{% load static %}
{% block title %}Widget's Forum{% endblock %}
{% block content %} {% block content %}
<img src="{{ object.event_header.url }}" width = '300'/> <img src="{{ object.event_header.url }}" width = '300'/>
<p><a href='{{ object.get_absolute_url }}'>{{ object }}</a></p> <p><a href='{{ object.get_absolute_url }}'>{{ object }}</a></p>
......
{% extends 'base.html' %}
{% load static %}
{% block title %}Widget's Forum{% endblock %}
{% block content %} {% block content %}
<ul> <ul>
{% for event in object_list %} {% for event in object_list %}
......
This diff is collapsed.
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
font-size: 1rem; font-size: 1rem;
} }
.blue-text { /* .blue-text {
color: var(--theme-prusian-blue); color: var(--theme-prusian-blue);
} }
...@@ -22,9 +22,10 @@ ...@@ -22,9 +22,10 @@
font-family: 'Inria Sans'; font-family: 'Inria Sans';
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} } */
body { body {
font-family: "Inter";
background-color: var(--theme-dutch-white); background-color: var(--theme-dutch-white);
background-image: url("/static/images/Continuous Background.png"); background-image: url("/static/images/Continuous Background.png");
background-position: left top; background-position: left top;
...@@ -32,7 +33,49 @@ body { ...@@ -32,7 +33,49 @@ body {
background-size: 80%; background-size: 80%;
} }
.btn-red { .navbar-brand {
display: contents;
}
.nav-link {
color: var(--theme-orange);
}
.nav-item {
#add-event-btn {
background-color: var(--theme-prusian-blue);
}
#log-out-btn {
background-color: var(--theme-bright-red);
}
.btn {
color: white;
&:hover {
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
}
}
}
@media (max-width: 576px) {
.logo {
width:100px;
height:auto;
}
}
@media (min-width: 577px) {
.logo {
width:20%;
max-width:200px;
height:auto;
}
}
/* .btn-red {
transition: all 0.3s ease-in; transition: all 0.3s ease-in;
font-size: 1.5vw; font-size: 1.5vw;
background-color: var(--theme-bright-red); background-color: var(--theme-bright-red);
...@@ -47,8 +90,8 @@ body { ...@@ -47,8 +90,8 @@ body {
background-color: var(--theme-prusian-blue); background-color: var(--theme-prusian-blue);
color: #fff; color: #fff;
border-color: var(--theme-prusian-blue); border-color: var(--theme-prusian-blue);
} } */
/*
@media (max-width: 950px) { @media (max-width: 950px) {
.navbar-brand { .navbar-brand {
width: 90%; width: 90%;
...@@ -86,7 +129,7 @@ body { ...@@ -86,7 +129,7 @@ body {
font-size: 1.55vw; font-size: 1.55vw;
color: var(--theme-prusian-blue) !important; color: var(--theme-prusian-blue) !important;
text-decoration: underline; text-decoration: underline;
} } */
#trial { #trial {
align-items: center; align-items: center;
......
...@@ -17,7 +17,36 @@ ...@@ -17,7 +17,36 @@
</head> </head>
<body> <body>
<nav class="px-5 navbar navbar-expand-lg navbar-light bg-light"> <nav class="navbar navbar-expand-md navbar-light bg-light px-5">
<div class="container-fluid">
<a class="navbar-brand" href="#"> <!--link to about page/section-->
<img src="{% static '/images/Logo with Name.png' %}" alt="Red Brick Board" class="logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav" aria-controls="nav" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end align-items-center" id="nav">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link mt-1">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link mt-1">Catalog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link me-4 mt-1">Profile</a>
</li>
<li class="nav-item">
<a href="#" class="btn me-3 mt-1" id="add-event-btn">Add Event</a>
</li>
<li class="nav-item">
<a href="#" class="btn mt-1" id="log-out-btn">Log Out</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- <nav class="px-5 navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid justify-content-end"> <div class="container-fluid justify-content-end">
<a class="navbar-brand" href="/"> <a class="navbar-brand" href="/">
<img src="{% static '/images/Logo with Name.png' %}" alt="Red Brick Board" style="width:30%; height:auto;"> <img src="{% static '/images/Logo with Name.png' %}" alt="Red Brick Board" style="width:30%; height:auto;">
...@@ -45,7 +74,7 @@ ...@@ -45,7 +74,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</nav> </nav> -->
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment