Skip to content

C
coursework
Commit 69d44efd authored by Борис Ким's avatar Борис Ким
Browse files
Options

Сверстал приличное меню и сайдбар

parent 2a9d1e34
Show whitespace changes
Inline Side-by-side
Showing with 75 additions and 68 deletions
source/webapp/admin.py
View file @ 69d44efd
from django.contrib import admin from django.contrib import admin
from .models import Course, Group, Class, Specialization
# Register your models here.
models = [Course, Group, Class, Specialization]
for model in models:
admin.site.register(model)
\ No newline at end of file
source/webapp/models.py
View file @ 69d44efd
...@@ -49,6 +49,10 @@ class Class(models.Model): ...@@ -49,6 +49,10 @@ class Class(models.Model):
def __str__(self): def __str__(self):
return self.title return self.title
class Meta:
verbose_name = "Class"
verbose_name_plural = "Classes"
class Specialization(models.Model): class Specialization(models.Model):
spec_name = models.CharField(max_length=100, verbose_name='spec_name') spec_name = models.CharField(max_length=100, verbose_name='spec_name')
......
source/webapp/static/css/main.css
View file @ 69d44efd
body {
background-color: #81CAEA !important;
}
*{ *{
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
.sidebar {
position: fixed;
height: 110vh;
width: 220px;
z-index: 1;
top: 0;
background-color: #343a40;
overflow-x: hidden;
padding-top: 20px;
}
.sidebar a{
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
float: left;
}
.sidebar a:hover {
color: #f1f1f1;
}
.card { .card {
position: relative; position: relative;
...@@ -12,39 +37,24 @@ ...@@ -12,39 +37,24 @@
height: 100vh; height: 100vh;
overflow-x: auto; overflow-x: auto;
background-size: cover; background-size: cover;
} }
.sidebar { .content-wrapper {
position: fixed; width: 1000px;
background-color: #70BBD0; margin: 10px auto;
height: 100vh;
box-shadow: 0 0 6px;
}
.sidebar .menu {
position: absolute;
top: 80px;
padding: 14px 20px;
}
.sidebar .menu li{
margin-top: 6px;
padding: 14px 20px;
} }
.sidebar .menu i{ .content-course {
color: #fff; padding: 20px;
font-size: 20px;
padding-right: 8px;
} }
.sidebar .menu a{ .course-container {
color: #fff; margin-top: 50px;
font-size: 20px; margin-left: 50px;
text-decoration: none;
} }
.content-wrapper { .block-course {
background-color: #B3E1EE; background-color: white;
width: 310px;
height: 300px;
} }
\ No newline at end of file
source/webapp/templates/base.html
View file @ 69d44efd
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<title>{% block title %}{% endblock %}</title> <title>{% block title %}{% endblock %}</title>
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
...@@ -34,35 +34,19 @@ ...@@ -34,35 +34,19 @@
</ul> </ul>
</div> </div>
</nav> </nav>
{% block content %} <div class="row d-flex">
<div class="card"> <div class="sidebar col-2">
<div class="row d-flex"> <a href="#about">Dashboard</a>
<div class='sidebar col-md-2'> <a href="#services">Button 1</a>
<div class="menu"> <a href="#clients">Button 2</a>
<ul> <a href="#contact">Button 3</a>
<li><a href="#"><i class="fas fa-cloud"></i>
Dashboard </li>
<li><a href="#"><i class="fas fa-cloud"></i>
Dashboard </li>
<li><a href="#"><i class="fas fa-cloud"></i>
Dashboard </li>
<li><a href="#"><i class="fas fa-cloud"></i>
Dashboard </li>
<li><a href="#"><i class="fas fa-cloud"></i>
Dashboard </li>
<li><a href="#"><i class="fas fa-cloud"></i>
Dashboard </li>
<li><a href="#"><i class="fas fa-cloud"></i>
Dashboard </li>
</ul>
</div>
</div> </div>
<div class="content-wrapper col-md-10"> <div class="content-wrapper col-9">
sdfa {% block content %}
</div>
</div>
</div>
{% endblock %} {% endblock %}
</div>
</div>
</body> </body>
</html> </html>
\ No newline at end of file
source/webapp/templates/courses/courses_list.html
View file @ 69d44efd
{% extends 'base.html' %}
{% block title %} List {% endblock %} {% block title %} List {% endblock %}
{% block content %} {% block content %}
{% for course in courses %} <div class='course-container row d-flex flex-wrap justify-content-between'>
<div class="card"> {% for course in courses %}
<div class="content-course col-4" style="width: 300px;">
<div class="block-course">
<div class="card-header"> <div class="card-header">
Featured Course
</div> </div>
<div class="card-body"> <div class="card-body">
<h5 class="card-title"> {{course.title}} </h5> <h5 class="card-title"> {{course.title}} </h5>
<p class="card-text"> {{course.description}} </p> <p class="card-text"> {{course.description}} </p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
</div> </div>
{% endfor %} </div>
{% endfor %}
<div>
{% endblock %} {% endblock %}
\ No newline at end of file
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