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

69d44efd · Борис Ким · 2a9d1e34 · 69d44efd · 69d44efd · 69d44efd
Commit 69d44efd authored Nov 01, 2021 by Борис Ким
5 changed files
--- a/source/webapp/admin.py
+++ b/source/webapp/admin.py
 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
--- a/source/webapp/models.py
+++ b/source/webapp/models.py
@@ -49,6 +49,10 @@ class Class(models.Model):
    def __str__(self):
        return self.title

+    class Meta:
+        verbose_name = "Class"
+        verbose_name_plural = "Classes"
+

 class Specialization(models.Model):
    spec_name = models.CharField(max_length=100, verbose_name='spec_name')

--- a/source/webapp/static/css/main.css
+++ b/source/webapp/static/css/main.css
+body {
+    background-color: #81CAEA !important;
+}
+
 *{
    margin: 0;
    padding: 0;
    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 {
    position: relative;
@@ -12,39 +37,24 @@
    height: 100vh;
    overflow-x: auto;
    background-size: cover;
-
 }

-.sidebar {
-    position: fixed;
-    background-color: #70BBD0;
-    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;
+.content-wrapper {
+    width: 1000px;
+    margin: 10px auto;
 }

-.sidebar .menu i{
-    color: #fff;
-    font-size: 20px;
-    padding-right: 8px;
+.content-course {
+    padding: 20px;
 }

-.sidebar .menu a{
-    color: #fff;
-    font-size: 20px;
-    text-decoration: none;
+.course-container {
+    margin-top: 50px;
+    margin-left: 50px;
 }

-.content-wrapper {
-    background-color: #B3E1EE;
+.block-course {
+    background-color: white;
+    width: 310px;
+    height: 300px;
 }
\ No newline at end of file
--- a/source/webapp/templates/base.html
+++ b/source/webapp/templates/base.html
@@ -12,7 +12,7 @@
    <title>{% block title %}{% endblock %}</title>
 </head>
 <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>
  <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>
@@ -34,35 +34,19 @@
    </ul>
  </div>
 </nav>
+<div class="row d-flex">
+  <div class="sidebar col-2">
+    <a href="#about">Dashboard</a>
+    <a href="#services">Button 1</a>
+    <a href="#clients">Button 2</a>
+    <a href="#contact">Button 3</a>
+  </div>
+
+  <div class="content-wrapper col-9"> 
    {% block content %}
-        <div class="card">
-            <div class="row d-flex">
-                <div class='sidebar col-md-2'>
-                    <div class="menu">
-                        <ul>
-                            <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 class="content-wrapper col-md-10"> 
-                    sdfa
-                </div>
-            </div>
-        </div>
    {% endblock %}
+  </div>
+</div>
 </body>
 </html>
\ No newline at end of file
--- a/source/webapp/templates/courses/courses_list.html
+++ b/source/webapp/templates/courses/courses_list.html
+{% extends 'base.html' %}
+
 {% block title %} List {% endblock %}

 {% block content %}
-{% for course in courses %}
-<div class="card">
-    <div class="card-header">
-        Featured
-    </div>
-    <div class="card-body">
-        <h5 class="card-title"> {{course.title}} </h5>
-        <p class="card-text"> {{course.description}} </p>
-        <a href="#" class="btn btn-primary">Go somewhere</a>
-    </div>
-</div>
-{% endfor %}
+<div class='course-container row d-flex flex-wrap justify-content-between'>
+    {% for course in courses %}
+        <div class="content-course col-4" style="width: 300px;">
+            <div class="block-course"> 
+                <div class="card-header">
+                    Course
+                </div>
+                <div class="card-body">
+                    <h5 class="card-title"> {{course.title}} </h5>
+                    <p class="card-text"> {{course.description}} </p>
+                </div>
+            </div>
+        </div>
+    {% endfor %}
+<div>
 {% endblock %}
\ No newline at end of file