Skip to content

Commit 8576cdc

Browse files
ekonstantinidisekonstantinidis
committed
Merge pull request #6 from ekonstantinidis/style-endpoints
Style Endpoints
2 parents 44580bd + 62a508e commit 8576cdc

File tree

5 files changed

+185
-117
lines changed

5 files changed

+185
-117
lines changed

‎drfdocs/api_endpoint.py

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ class ApiEndpoint(object):
66
def __init__(self, pattern, parent_pattern=None):
77
self.pattern = pattern
88
self.callback = pattern.callback
9-
self.name = pattern.name
9+
# self.name = pattern.name
1010
self.name_parent = simplify_regex(parent_pattern.regex.pattern).replace('/', '') if parent_pattern else None
1111
self.path = self.__get_path__(parent_pattern)
1212
self.allowed_methods = self.__get_allowed_methods__()
13-
self.view_name = pattern.callback.__name__
13+
# self.view_name = pattern.callback.__name__
1414
self.fields = self.__get_serializer_fields__()
1515

1616
def __get_path__(self, parent_pattern):

‎drfdocs/static/css/style.css

Lines changed: 0 additions & 98 deletions
This file was deleted.

‎drfdocs/static/less/style.less

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
/* @group Colours */
2+
3+
@BgColor: #FEFEFE;
4+
5+
@GetColor: #18bc9c;
6+
@PostColor: #f39c12;
7+
@PutColor: #028d94;
8+
@PatchColor: #028d94;
9+
@DeleteColor: #e74c3c;
10+
@OptionsColor: #3498db;
11+
12+
/* @end Colours */
13+
14+
15+
/* @group Misc */
16+
17+
body {
18+
background-color: @BgColor;
19+
}
20+
21+
.navbar {
22+
margin-top: 20px;
23+
}
24+
25+
.jumbotron {
26+
margin: 50px 0 40px;
27+
text-align: center;
28+
}
29+
30+
/* @end Misc */
31+
32+
33+
/* @group Endpoint */
34+
35+
.endpoint {
36+
padding: 5px 20px;
37+
margin: 20px 0;
38+
background-color: #ecf0f1;
39+
40+
.title {
41+
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
42+
word-wrap: break-word;
43+
}
44+
45+
.methods {
46+
margin-bottom: 0;
47+
48+
.method {
49+
padding: 4px 8px;
50+
margin-top: 10.5px;
51+
color: #FFF;
52+
53+
&.get { background-color: @GetColor; }
54+
&.post { background-color: @PostColor; }
55+
&.patch { background-color: @PutColor; }
56+
&.put { background-color: @PatchColor; }
57+
&.delete { background-color: @DeleteColor; }
58+
&.options { background-color: @OptionsColor; }
59+
}
60+
}
61+
}
62+
63+
/* @end Endpoint */
64+
65+
66+
/* @group Footer */
67+
68+
.footer {
69+
text-align: center;
70+
padding: 20px;
71+
margin-bottom: 20px;
72+
73+
.links {
74+
padding: 20px 0;
75+
76+
.fa {
77+
margin: 0 10px;
78+
font-size: 22px;
79+
}
80+
}
81+
}
82+
83+
/* @end Footer */
84+
85+
86+
/* @group Github Ribbon - SVG */
87+
88+
.github-corner:hover .octo-arm {
89+
animation: octocat-wave 560ms ease-in-out;
90+
}
91+
92+
@keyframes octocat-wave {
93+
0% { transform: rotate(0deg); }
94+
20% { transform: rotate(-25deg); }
95+
40% { transform: rotate(10deg); }
96+
60% { transform: rotate(-25deg); }
97+
80% { transform: rotate(10deg); }
98+
100% { transform: rotate(0deg); }
99+
}
100+
101+
@media (max-width: 768px) {
102+
.github-corner {
103+
display: none;
104+
}
105+
106+
.github-corner:hover .octo-arm {
107+
animation: none;
108+
}
109+
110+
.github-corner .octo-arm {
111+
animation: octocat-wave 560ms ease-in-out;
112+
}
113+
}
114+
115+
/* @end Github Ribbon - SVG */

‎drfdocs/templates/drfdocs/base.html

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@
99

1010
<title>DRF Docs</title>
1111

12-
<!-- Bootstrap -->
13-
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
14-
<!-- Flatly -->
12+
<!-- Bootstrap & Flatly -->
1513
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/flatly/bootstrap.min.css" rel="stylesheet">
1614
<!-- Font Awesome -->
1715
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
1816
<!-- Custom Style -->
19-
<link href="{% static "css/style.css" %}" rel="stylesheet">
17+
<link rel="stylesheet/less" type="text/css" href="{% static "less/style.less" %}" />
18+
19+
<!-- LESS CSS -->
20+
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
2021
</head>
2122

2223
<body>
@@ -29,9 +30,37 @@
2930
</a>
3031

3132
<div class="container">
33+
34+
<nav class="navbar navbar-default">
35+
<div class="container-fluid">
36+
<!-- Brand and toggle get grouped for better mobile display -->
37+
<div class="navbar-header">
38+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#drfdoc-navbar" aria-expanded="false">
39+
<span class="sr-only">Toggle navigation</span>
40+
<span class="icon-bar"></span>
41+
<span class="icon-bar"></span>
42+
<span class="icon-bar"></span>
43+
</button>
44+
<a class="navbar-brand" href="#">DRF Docs</a>
45+
</div>
46+
47+
<!-- Collect the nav links, forms, and other content for toggling -->
48+
<div class="collapse navbar-collapse" id="drfdoc-navbar">
49+
<form class="navbar-form navbar-right" role="search">
50+
<div class="form-group">
51+
<input type="text" class="form-control" placeholder="Search">
52+
</div>
53+
</form>
54+
<ul class="nav navbar-nav navbar-right">
55+
{% block apps_menu %}{% endblock %}
56+
</ul>
57+
</div><!-- /.navbar-collapse -->
58+
</div><!-- /.container-fluid -->
59+
</nav>
60+
3261
<div class="jumbotron">
3362
<h1>DRF Docs</h1>
34-
<h3>Documentation for Web APIs made with <a href="http://www.django-rest-framework.org/" target="_blank">Django Rest Framework</a>.</h3>
63+
<h3>Document Web APIs made with <a href="http://www.django-rest-framework.org/" target="_blank">Django Rest Framework</a>.</h3>
3564
</div>
3665

3766
{% block content %}{% endblock %}
@@ -45,5 +74,10 @@ <h3>Documentation for Web APIs made with <a href="http://www.django-rest-framewo
4574
Copyright © 2015 Emmanouil Konstantinidis.
4675
</div>
4776
</div>
77+
78+
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
79+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
80+
81+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
4882
</body>
4983
</html>

‎drfdocs/templates/drfdocs/home.html

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,40 @@
11
{% extends "drfdocs/base.html" %}
22

3+
{% block apps_menu %}
4+
{% regroup endpoints by name_parent as endpoints_grouped %}
5+
<li class="dropdown">
6+
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Jump To <span class="caret"></span></a>
7+
<ul class="dropdown-menu">
8+
<!-- <li><a href="#dd">ddsf{{group.grouper}}</a></li> -->
9+
{% for group in endpoints_grouped %}
10+
<li><a href="#{{ group.grouper|lower }}">{{ group.grouper }}</a></li>
11+
{% endfor %}
12+
</ul>
13+
</li>
14+
{% endblock %}
15+
16+
317
{% block content %}
418

5-
<h1>API Endpoints</h1>
619
{% regroup endpoints by name_parent as endpoints_grouped %}
720

821
{% for group in endpoints_grouped %}
9-
<h1>{{group.grouper}}</h1>
22+
<h1 id="{{ group.grouper|lower }}">{{group.grouper}}</h1>
1023

1124
{% for endpoint in group.list %}
1225
<div class="endpoint">
13-
<h4 class="title">{{ endpoint.path }}</h4>
14-
15-
<ul class="list-inline methods">
16-
{% for method in endpoint.allowed_methods %}
17-
<li class="method">{{ method }}</li>
18-
{% endfor %}
19-
</ul>
20-
21-
<p>View Name: {{ endpoint.view_name }}</p>
22-
<p>URL Name: {{ endpoint.name }}</p>
26+
<div class="row">
27+
<div class="col-md-7">
28+
<h4 class="title">{{ endpoint.path }}</h4>
29+
</div>
30+
<div class="col-md-5 text-right">
31+
<ul class="list-inline methods">
32+
{% for method in endpoint.allowed_methods %}
33+
<li class="method {{ method|lower }}">{{ method }}</li>
34+
{% endfor %}
35+
</ul>
36+
</div>
37+
</div>
2338

2439
{% if endpoint.fields %}
2540
<p>Fields:</p>
@@ -28,6 +43,8 @@ <h4 class="title">{{ endpoint.path }}</h4>
2843
<li class="field">{{ field.name }}: {{ field.type }}</li>
2944
{% endfor %}
3045
</ul>
46+
{% else %}
47+
<p>No fields.</p>
3148
{% endif %}
3249

3350
</div>

0 commit comments

Comments
 (0)