feat(template): add base template

base for site layout

!1
This commit is contained in:
2024-05-06 15:41:41 +09:30
parent 81b170cabf
commit 1a8861846b
8 changed files with 247 additions and 0 deletions

View File

@ -118,6 +118,12 @@ USE_TZ = True
# https://docs.djangoproject.com/en/5.0/howto/static-files/
STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [
BASE_DIR / "project-static",
]
# Default primary key field type
# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field

View File

@ -20,5 +20,6 @@ from django.urls import include, path
from .views import HomeView
urlpatterns = [
path('', HomeView.as_view(), name='home'),
path('admin/', admin.site.urls),
]

View File

@ -0,0 +1 @@
from .home import *

15
itsm/itsm/views/home.py Normal file
View File

@ -0,0 +1,15 @@
import requests
from django.shortcuts import render
from django.views.generic import View
class HomeView(View):
template_name = 'home.html'
def get(self, request):
context = {}
return render(request, self.template_name, context)

View File

@ -0,0 +1,155 @@
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
background: #f0f0f0;
}
h1 {
width: 275px;
height: 76px;
line-height: 76px;
vertical-align: middle;
padding: 0%;
margin: 0%;
}
h2 {
width: 100%;
background-color: aqua;
height: 80px;
line-height: 80px;
text-align: center;
vertical-align: middle;
margin: 0px;
}
header {
display: flex;
flex-direction: row;
position: fixed;
top: 0px;
width: 100%;
background-color: #151515;
text-align: center;
color: white;
height: 76px;
/* line-height: 76px; */
vertical-align: middle;
}
nav {
display: flex;
flex-direction: column;
background: #212427;
padding: 20px;
width: 275px;
height: 100%;
position: fixed;
top: 76px;
bottom: 4rem;
left: 0;
overflow-y: auto;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
padding: 10px;
}
nav ul li:hover {
border-left-color: #73bcf7;
border-left: 3px solid #73bcf7;
background-color: #666;
}
section {
display: flexbox;
width: 100%;
padding-top: 76px;
padding-left: 275px;
}
article {
background-color: #fff;
padding: 10px;
margin: 20px;
border: 1px solid #e6dcdc;
}
footer {
background-color: cadetblue;
width: 100%;
height: 76px;
line-height:76px;
text-align: center;
vertical-align: middle;
padding: 0%;
margin: 0%;
}
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
}
header .dropdown {
padding-top: 19px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
/* position: fixed; */
/* display: inline-block; */
display:inline-flexbox;
/* left: 300px; */
/* position: relative; */
/* vertical-align: middle; */
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #b4adad}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}

62
itsm/templates/base.html Normal file
View File

@ -0,0 +1,62 @@
<html>
<head>
{% load static %}
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{% static 'base.css' %}">
</head>
<body>
<header>
<h1>Site Title</h1>
<div class="dropdown">
<button class="dropbtn">{% block org_name %}Organization{% endblock %}</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown", style="right: 0px; position: fixed; padding-right: 50px;">
<button class="dropbtn">{% block user_name %}My Account{% endblock %}</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</header>
<main>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
<section>
<h2>{% block title %}Page Title{% endblock %}</h2>
<article>
{% block body%}{% endblock %}
</article>
<footer>
Footer
</footer>
</section>
</main>
</body>
</html>

6
itsm/templates/home.html Normal file
View File

@ -0,0 +1,6 @@
{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block body%}
{% endblock %}

View File

@ -5,5 +5,6 @@ Django==5.0.4
django-extensions==3.2.3
django-organizations==2.4.1
idna==3.7
requests==2.31.0
sqlparse==0.5.0
urllib3==2.2.1