{% load static %}
{% load avatar_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=no"
/>
<meta
name="description"
content="CyberSicko.net"
/>
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
<meta name="keywords" content="Semantic-UI, Theme, Design, Template"/>
<meta name="author" content="CyberSicko"/>
<meta name="theme-color" content="#ffffff"/>
<title>Dashboard Template for Semantic-UI</title>
<link
rel="stylesheet"
href="{% static 'semantic.css' %}"
type="text/css"
/>
{% block link %}{% endblock %}
<style type="text/css">
body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: grayscale;
}
#sidebar {
position: fixed;
height: 100vh;
background-color: #f5f5f5;
padding-top: 40px;
padding-left: 0;
padding-right: 0;
}
#sidebar .ui.menu > a.item {
padding: 10px 20px;
line-height: 20px;
color: #337ab7;
border-radius: 0 !important;
margin-top: 0;
margin-bottom: 0;
}
#sidebar .ui.menu > a.item.active {
background-color: #337ab7;
color: white;
border: none !important;
}
#sidebar .ui.menu > a.item.active:hover {
background-color: #337ab7;
color: white;
border: none !important;
}
#sidebar .ui.menu > a.item:hover {
background-color: #eee;
color: #23527c;
}
#content {
padding-top: 56px;
padding-left: 20px;
padding-right: 20px;
}
#content h1 {
font-size: 36px;
}
#content .ui.dividing.header {
width: 100%;
}
.ui.centered.small.circular.image {
margin-top: 14px;
margin-bottom: 14px;
}
.ui.borderless.menu {
box-shadow: none;
flex-wrap: wrap;
border: none;
padding-left: 0;
padding-right: 0;
}
.ui.mobile.only.grid .ui.menu .ui.vertical.menu {
display: none;
}
</style>
</head>
<body id="root">
<div class="ui tablet computer only padded grid">
<div class="ui inverted borderless top fixed fluid menu">
<a href="/" class="header item">CyberSicko.net</a>
<div class="right menu">
<a class="item" href="/admin">切换</a>
<a class="item" href="/logout">logout</a>
</div>
</div>
</div>
<div class="ui mobile only padded grid">
<div class="ui top fixed borderless fluid inverted menu">
<a href="/" class="header item">CyberSicko.net</a>
<div class="right menu">
<div class="item">
<button class="ui icon toggle basic inverted button">
<i class="content icon"></i>
</button>
</div>
</div>
<div class="ui vertical borderless inverted fluid menu">
<a class="item" href="/admin">切换</a>
<a class="item" href="/logout">logout</a>
</div>
</div>
</div>
<div class="ui padded grid">
<div
class="three wide tablet only three wide computer only column"
id="sidebar"
>
<div class="ui vertical borderless fluid text menu">
<a href="{% url '' %}" class="item"><i class="home icon"></i>Dashboard</a>
<a href="{% url 'article_new' %}" class="item"><i class="pencil icon"></i>新建文章</a>
<a href="{% url 'admin_article' %}" class="item"><i class="file alternate icon"></i>文章管理</a>
<a href="{% url 'admin_category' %}" class="item"><i class="th list icon"></i>分类管理</a>
<a href="{% url 'admin_tags' %}" class="item"><i class="linkify icon"></i>标签管理</a>
<a href="{% url 'admin_files' %}" class="item"><i class="file icon"></i>文件管理</a>
{# <a class="item">标签</a>#}
{# <a class="item">分类</a>#}
</div>
</div>
<div
class="sixteen wide mobile thirteen wide tablet thirteen wide computer right floated column"
id="content"
>
<div class="ui padded grid">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<script type="application/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script type="application/javascript" src="{% static 'semantic.js' %}"></script>
<script>
$("#sidebar a").each(function () {
if (location.href.split('?')[0] == this.href) {
$(this).addClass('active')
}
})
$(document).ready(function () {
$(".ui.toggle.button").click(function () {
$(".mobile.only.grid .ui.vertical.menu").toggle(100);
});
});
</script>
{% block js %}
{% endblock %}
</body>
</html>