ridzimeko/CostaCoffe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update navbar style

Browse Source
This commit is contained in:
Amro Alfien 2024-11-15 15:02:52 +07:00
parent 02096d66a4
commit ec51d488ed
9 changed files with 100 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
config/directory.py
View File

@ -8,6 +8,11 @@ static = [
{ {
"route" :"/css/<filepath:re:.*\.(css|sass|css.map)>", "route" :"/css/<filepath:re:.*\.(css|sass|css.map)>",
"root" :"./static/css" "root" :"./static/css"
},
# add javascript route
{
"route" :"/js/<filepath:re:.*\.(js)>",
"root" :"./static/js"
} }
] ]
template.add(static, "templates") template.add(static, "templates")

24
config/globalvar.py
View File

@ -1,4 +1,4 @@
title = "CostaPy" title = "CostaCoffe"
menu = { menu = {
"public": { "public": {
@ -10,19 +10,31 @@ menu = {
"roles":["guest"] "roles":["guest"]
}, },
{ {
"name":"Our Product",
"target":"_self",
"href":"/product",
"roles":["guest"]
},
{
"name":"Blog",
"target":"_self",
"href":"/blog",
"roles":["guest"]
},
{
"name":"About", "name":"About",
"target":"_self", "target":"_self",
"href":"/about", "href":"/about",
"roles":["guest"] "roles":["guest"]
}, },
{ {
"name":"Docs", "name":"Contact",
"target":"_blank", "target":"_self",
"href":"https://costapy.ditaajipratama.net", "href":"/contact",
"roles":["guest"] "roles":["guest"]
} }
] ]
} }
} }
copyright = "Copyright (C) 2022 Dita Aji Pratama" copyright = "Copyright (C) 2024 Amro Alfien S.N"

4
config/server.py
View File

@ -1,8 +1,8 @@
host = "localhost" host = "localhost"
port = 11000 port = 11000
reloader = False reloader = True
debug = False debug = False
server = 'gunicorn' # default = 'wsgiref' server = 'wsgiref' # default = 'wsgiref'
session_opts = { session_opts = {
'session.type': 'file', 'session.type': 'file',

4
modules/public/home.py
View File

@ -9,8 +9,10 @@ class main:
def html(self, params): def html(self, params):
return Template(params["mako"]["website"]['index']).render( return Template(params["mako"]["website"]['index']).render(
title = globalvar.title, title = globalvar.title,
header = "Welcome to CostaPy", header = "Welcome to CostaCoffe",
sub_header = "Best Place To Buy Coffe",
navbar = Template(params["mako"]["website"]['navbar']).render( navbar = Template(params["mako"]["website"]['navbar']).render(
title = globalvar.title,
menu = globalvar.menu['public']['navbar'], menu = globalvar.menu['public']['navbar'],
user_roles = ["guest"], user_roles = ["guest"],
active_page = "Home" active_page = "Home"

1
static/css/style.css
View File

@ -1 +0,0 @@
/* your style here */

13
static/js/feather.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

26
templates/plain/html/index.html
View File

@ -1,20 +1,30 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>${title}</title> <title>${title}</title>
<link rel="stylesheet" href="/templates/plain/css/style.css"> <link rel="stylesheet" href="/templates/plain/css/style.css">
</head> <!-- <link rel="stylesheet" href="/css/index.sass"> -->
<body> <script src="/js/feather.min.js"></script>
<header>
<h1>${header}</h1> </head>
</header>
<body>
${navbar} ${navbar}
<header>
<h1>${header}</h1>
</header>
<main> <main>
${container} ${container}
</main> </main>
${footer} ${footer}
</body> </body>
</html> </html>
<script>
feather.replace();
</script>

22
templates/plain/html/navbar.html
View File

@ -1,9 +1,15 @@
<nav class="navbar"> <nav class="navbar">
% for item in menu: <h2>${title}</h2>
% if any(role in item['roles'] for role in user_roles): <div class="nav-links">
<a class="${'active' if item['name'] == active_page else ''}" href="${item['href']}" target="${item['target']}"> % for item in menu:
${item['name']} % if any(role in item['roles'] for role in user_roles):
</a> <a class="${'active' if item['name'] == active_page else ''}" href="${item['href']}" target="${item['target']}">
% endif ${item['name']}
% endfor </a>
</nav> % endif
% endfor
</div>
<div class="nav-menu-icons">
<i data-feather="shopping-cart"></i>
</div>
</nav>

42
templates/plain/static/css/style.css
View File

@ -2,8 +2,6 @@ body {
font-family: "Arial", sans-serif; font-family: "Arial", sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: #333;
background-color: #f4f4f4;
} }
header { header {
@ -15,26 +13,40 @@ header {
.navbar { .navbar {
display: flex; display: flex;
background-color: #333; justify-content: space-between;
justify-content: center; align-items: center;
padding: 10px; padding: 1rem 3.2rem;
} }
.navbar a { .navbar .nav-links {
color: #fff; display: flex;
padding: 14px 20px; gap: 32px;
text-decoration: none;
text-align: center;
} }
.navbar a:hover { .navbar .nav-links a {
background-color: #ddd; display: inline-block;
position: relative;
padding: 0.4rem;
font-size: 1.1rem;
color: #000; color: #000;
text-decoration: none;
} }
.navbar a.active { .navbar .nav-links a::after {
background-color: #4CAF50; content: "";
color: #fff; position: absolute;
bottom: -5px;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 2px;
background-color: black;
transition: all 0.3s ease-in-out;
}
.navbar .nav-links a:is(:hover, .active)::after {
width: 40%;
} }
main { main {