Reworked year buttons into arrows

faerun_calendar/static/faerun_calendar/css/main.css

@@ -5,40 +5,21 @@ div.calendarpage {
     border-radius: 20px;
 }
 
-a.previous_year,
+div.current-year {
-a.next_year {
+    display: flex;
-    margin-top: 0px;
+    justify-content: space-between;
-    margin-bottom: 20px;
-    max-width: 300px;
 }
 
-a.previous_year:hover,
+div.calendarpage hr {
-a.next_year:hover {
+    border: 0;
-    background: #00a0e0;
+    border-top: 1px solid #000000;
-    margin-top: 1px;
+    opacity: 1;
-    margin-bottom: 19px;
+    margin: 30px 0px 10px;
 }
 
-a.previous_year:active,
+hr {
-a.next_year:active {
+  border: 10px solid green;
-    background: #0080c0;
+  border-radius: 5px;
-    margin-top: 3px;
-    margin-bottom: 17px;
-}
-
-a.previous_year {
-    float: left;
-}
-
-a.next_year {
-    float: right;
-}
-
-h2.year {
-    text-align: center;
-    padding-bottom: 10px;
-    border-bottom: 1px solid #000000;
-    margin-bottom: 20px;
 }
 
 table.month, table.month th, table.month td {

faerun_calendar/templates/faerun_calendar/index.html

@@ -15,15 +15,24 @@
     {% if type == 'year' %}
         <h1 class="title">Календарь</h1>
 
-        {% if root == 'calendar' %}
+        <div class="current-year">
-            {% if year_data.previous_year %} <a draggable="false" class="button previous_year" href="{{year_data.previous_year.number}}">Предыдущий год ({{year_data.previous_year.number}}-й)</a> {% endif %}
+        {% if year_data.previous_year %}
-            {% if year_data.next_year %} <a draggable="false" class="button next_year" href="{{year_data.next_year.number}}">Следующий год ({{year_data.next_year.number}}-й)</a> {% endif %}
+            <a draggable="false" class="arrow left" href="{{root}}{{year_data.previous_year.number}}"></a>
-        {% elif root == 'year' %}
+        {% else %}
-            {% if year_data.previous_year %} <a draggable="false" class="button previous_year" href="../{{year_data.previous_year.number}}">Предыдущий год ({{year_data.previous_year.number}}-й)</a> {% endif %}
+            <a draggable="false" class="arrow left" disabled></a>
-            {% if year_data.next_year %} <a draggable="false" class="button next_year" href="../{{year_data.next_year.number}}">Следующий год ({{year_data.next_year.number}}-й)</a> {% endif %}
         {% endif %}
+
         <h2 class="year">Год {{year_data.number}}-й</h2>
 
+        {% if year_data.next_year %}
+            <a draggable="false" class="arrow right" href="{{root}}{{year_data.next_year.number}}"></a>
+        {% else %}
+            <a draggable="false" class="arrow right" disabled></a>
+        {% endif %}
+        </div>
+
+        <hr>
+
         <div class="calendar">
             {% for month in months %}
                 {% include 'faerun_calendar/month.html' with month=month %}

faerun_calendar/templates/faerun_calendar/month.html

@@ -25,21 +25,9 @@
                     <td>
                 {% endif %}
                 {% if day.number == calendar_data.current_day and month.id == calendar_data.current_month.id and year_data.id == calendar_data.current_year.id %}
-                    {% if root == 'calendar' %}
+                    <a class="current_day" href="{{root}}{{year_data.number}}/{{month.number}}/{{day.number}}">{{day.number}}</a>
-                        <a class="current_day" href="{{year_data.number}}/{{month.number}}/{{day.number}}">{{day.number}}</a>
-                    {% elif root == 'year' %}
-                        <a class="current_day" href="{{month.number}}/{{day.number}}">{{day.number}}</a>
-                    {% elif root == 'month' %}
-                        <a class="current_day" href="{{day.number}}">{{day.number}}</a>
-                    {% endif %}
                 {% else %}
-                    {% if root == 'calendar' %}
+                    <a href="{{root}}{{year_data.number}}/{{month.number}}/{{day.number}}">{{day.number}}</a>
-                        <a href="{{year_data.number}}/{{month.number}}/{{day.number}}">{{day.number}}</a>
-                    {% elif root == 'year' %}
-                        <a href="{{month.number}}/{{day.number}}">{{day.number}}</a>
-                    {% elif root == 'month' %}
-                        <a href="{{day.number}}">{{day.number}}</a>
-                    {% endif %}
                 {% endif %}
 
                 </td>

faerun_calendar/views.py

@@ -1,5 +1,5 @@
 from django.shortcuts import render
-from django.http import HttpResponseNotFound
+from django.http import HttpResponseRedirect
 
 from .models import YearData
 from .models import MonthData
@@ -71,7 +71,7 @@ def day_page(request, year: int, month: int, day: int):
     if not params:
         params = {
             'type': 'day',
-            'root': 'calendar',
+            'root': '',
             'year_data': year_data,
             'month_data': month_data,
             'day': day,
@@ -81,10 +81,7 @@ def day_page(request, year: int, month: int, day: int):
     return render(request, 'faerun_calendar/index.html', params)
 
 
-def year_page(request, year: int, root: str = None):
+def year_page(request, year: int):
-    if not root:
-        root = 'year'
-
     params = None
 
     try:
@@ -125,7 +122,7 @@ def year_page(request, year: int, root: str = None):
 
             params = {
                 'type': 'year',
-                'root': root,
+                'root': '../',
                 'calendar_data': calendar_data,
                 'year_data': year_data,
                 'months': months,
@@ -142,5 +139,4 @@ def index(request):
     except AttributeError:
         current_year = 0
 
-    return year_page(request, current_year, root='calendar')
+    return HttpResponseRedirect(f'{current_year}')
-

main/static/main/css/main.css

@@ -71,3 +71,78 @@ body > div > * {
     background: #fefefe;
 }
 
+.arrow {
+    display: block;
+    position: relative;
+    color: #00bfff;
+    font-family: Arial sans-serif;
+    font-size: 2em;
+    text-decoration: none;
+    margin: 3px 0px;
+}
+
+.arrow:before, .arrow:after {
+    content:"";
+    background: #00bfff;
+    -webkit-border-radius: 0.2em;
+    border-radius: 0.2em;
+    display: block;
+    height: 0.5em;
+    position: absolute;
+    right: 0;
+    width: 1em;
+}
+
+.arrow.left:before, .arrow.left:after {
+    left: 0;
+}
+
+.arrow.left:before, .arrow.right:after {
+    top: 1em;
+}
+
+.arrow.left:after, .arrow.left:before,.arrow.right:before {
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.arrow.right:before, .arrow.left:after {
+    top: 0.66em;
+}
+
+.arrow.left:after, .arrow.right:after {
+    bottom: 0.66em;
+    -webkit-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}
+
+.arrow:hover, #arrow:focus {
+    color: #00a0e0;
+    margin-top: 4px;
+    margin-bottom: 2px;
+}
+.arrow:hover:before, .arrow:hover:after,  .arrow:focus:before, .arrow:focus:after {
+    background: #00a0e0;
+}
+
+.arrow:active {
+    color: #0080c0;
+    margin-top: 6px;
+    margin-bottom: 0px;
+}
+.arrow:active:before, .arrow:active:after {
+    background: #0080c0;
+}
+
+.arrow[disabled] {
+    color: #dcdcdc;
+}
+
+.arrow[disabled]:before, .arrow[disabled]:after {
+    background: #dcdcdc;
+}
+
+
+
+
+