Move CSS to LESS

Emmanouil Konstantinidis · Emmanouil Konstantinidis · commit fb117e299252 · 2015-12-13T14:44:58.000Z
diff --git a/drfdocs/api_endpoint.py b/drfdocs/api_endpoint.py
@@ -6,11 +6,11 @@ class ApiEndpoint(object):
     def __init__(self, pattern, parent_pattern=None):
         self.pattern = pattern
         self.callback = pattern.callback
-        self.name = pattern.name
+        # self.name = pattern.name
         self.name_parent = simplify_regex(parent_pattern.regex.pattern).replace('/', '') if parent_pattern else None
         self.path = self.__get_path__(parent_pattern)
         self.allowed_methods = self.__get_allowed_methods__()
-        self.view_name = pattern.callback.__name__
+        # self.view_name = pattern.callback.__name__
         self.fields = self.__get_serializer_fields__()
 
     def __get_path__(self, parent_pattern):
diff --git a/drfdocs/static/less/style.less b/drfdocs/static/less/style.less
@@ -25,11 +25,23 @@ body {
   word-wrap: break-word;
 }
 
+.endpoint .methods {
+  margin-bottom: 0;
+}
+
 .endpoint .methods .method {
-  border: 1px solid #2c3e50;
-  padding: 3px 8px;
+  padding: 4px 8px;
+  margin-top: 10.5px;
+  color: #FFF;
 }
 
+.endpoint .methods .method.get { background-color: #18bc9c; }
+.endpoint .methods .method.post { background-color: #f39c12; }
+.endpoint .methods .method.put { background-color: #028d94; }
+.endpoint .methods .method.patch { background-color: #028d94; }
+.endpoint .methods .method.delete { background-color: #e74c3c; }
+.endpoint .methods .method.options { background-color: #3498db; }
+
 /* @end Endpoint */
 
 
diff --git a/drfdocs/templates/drfdocs/base.html b/drfdocs/templates/drfdocs/base.html
@@ -16,7 +16,10 @@
     <!-- Font Awesome -->
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
     <!-- Custom Style -->
-    <link href="{% static "css/style.css" %}" rel="stylesheet">
+    <link rel="stylesheet/less" type="text/css" href="{% static "less/style.less" %}" />
+
+    <!-- LESS CSS -->
+     <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
   </head>
 
   <body>
diff --git a/drfdocs/templates/drfdocs/home.html b/drfdocs/templates/drfdocs/home.html
@@ -10,16 +10,18 @@ <h1>{{group.grouper}}</h1>
 
     {% for endpoint in group.list %}
       <div class="endpoint">
-        <h4 class="title">{{ endpoint.path }}</h4>
-
-        <ul class="list-inline methods">
-          {% for method in endpoint.allowed_methods %}
-            <li class="method">{{ method }}</li>
-          {% endfor %}
-        </ul>
-
-        <p>View Name: {{ endpoint.view_name }}</p>
-        <p>URL Name: {{ endpoint.name }}</p>
+        <div class="row">
+          <div class="col-md-7">
+            <h4 class="title">{{ endpoint.path }}</h4>
+          </div>
+          <div class="col-md-5 text-right">
+            <ul class="list-inline methods">
+              {% for method in endpoint.allowed_methods %}
+                <li class="method {{ method|lower }}">{{ method }}</li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
 
         {% if endpoint.fields %}
         <p>Fields:</p>
