frontend changes
This commit is contained in:
@@ -1,32 +1,67 @@
|
||||
{% extends 'layout.html' %}
|
||||
|
||||
{% block head %}
|
||||
|
||||
{% block head %}
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body {
|
||||
background-color: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
margin: 20px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid #444;
|
||||
}
|
||||
|
||||
.nav-bar a {
|
||||
text-decoration: none;
|
||||
color: #6b9bd1;
|
||||
font-size: 12pt;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.nav-bar a:hover {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
td > * {
|
||||
|
||||
|
||||
}
|
||||
|
||||
td {
|
||||
vertical-align : top;
|
||||
vertical-align: top;
|
||||
height: 25px;
|
||||
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border: 1px solid black;
|
||||
}
|
||||
border: 1px solid #444;
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
{% endblock head %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
{% block content %}
|
||||
|
||||
{{ content | safe }}
|
||||
<div class="nav-bar">
|
||||
<a href="/">Today</a>
|
||||
<a href="/calendar/daily">Calendar</a>
|
||||
<a href="/switches/daily">Switches</a>
|
||||
<a href="/work">Work</a>
|
||||
<a href="/totals">All Time</a>
|
||||
</div>
|
||||
|
||||
{{ content | safe }}
|
||||
|
||||
{% endblock content %}
|
||||
@@ -9,6 +9,23 @@
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.nav-bar a {
|
||||
text-decoration: none;
|
||||
color: #6b9bd1;
|
||||
font-size: 12pt;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.nav-bar a:hover {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
@@ -169,6 +186,13 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="nav-bar" style="margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #444; font-size: 12pt;">
|
||||
<a href="/">Today</a>
|
||||
<a href="/switches/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}">Switches</a>
|
||||
<a href="/work">Work</a>
|
||||
<a href="/totals">All Time</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-tabs">
|
||||
<a href="/calendar/daily/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}?grid={{ grid }}"
|
||||
class="{% if scope == 'daily' %}active{% endif %}">Daily</a>
|
||||
@@ -184,7 +208,6 @@
|
||||
class="{% if grid == 3 %}active{% endif %}" style="font-size: 11pt;">3h</a>
|
||||
<a href="/calendar/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}?grid=6"
|
||||
class="{% if grid == 6 %}active{% endif %}" style="font-size: 11pt;">6h</a>
|
||||
<a href="/switches/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}">View Switches</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -17,6 +17,27 @@
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.nav-bar a {
|
||||
text-decoration: none;
|
||||
color: #6b9bd1;
|
||||
font-size: 11pt;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.nav-bar a:hover {
|
||||
background-color: #3a3a3a;
|
||||
}
|
||||
|
||||
.grey {
|
||||
color: #888;
|
||||
}
|
||||
@@ -57,6 +78,14 @@
|
||||
<!-- agregar función que me diga cuanto tiempo hace que esta activo el escritorio
|
||||
(calcular el delta con el ultimo switch y pasarlo a mm:ss) -->
|
||||
|
||||
<div class="nav-bar">
|
||||
<a href="/">Today</a>
|
||||
<a href="/calendar/daily">Calendar</a>
|
||||
<a href="/switches/daily">Switches</a>
|
||||
<a href="/work">Work</a>
|
||||
<a href="/totals">All Time</a>
|
||||
</div>
|
||||
|
||||
<div id="content-container">
|
||||
{% block content %}
|
||||
{% include 'main_content.html' %}
|
||||
|
||||
@@ -1,16 +1,81 @@
|
||||
{% extends 'layout.html' %}
|
||||
|
||||
{% block content %}
|
||||
{% block head %}
|
||||
<style>
|
||||
body {
|
||||
background-color: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
margin: 20px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid #444;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav-bar a {
|
||||
text-decoration: none;
|
||||
color: #6b9bd1;
|
||||
font-size: 12pt;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.nav-bar a:hover {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 24pt;
|
||||
border-collapse: collapse;
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px 40px 10px 0;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.grey {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #6b9bd1;
|
||||
}
|
||||
</style>
|
||||
{% endblock head %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="nav-bar">
|
||||
<a href="/">Today</a>
|
||||
<a href="/calendar/daily">Calendar</a>
|
||||
<a href="/switches/daily">Switches</a>
|
||||
<a href="/work">Work</a>
|
||||
<a href="/totals">All Time</a>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
{% for row in rows %}
|
||||
{% for row in rows %}
|
||||
{% if row["ws"] in ['Away', 'Other'] %}
|
||||
{% set my_class = 'grey' %}
|
||||
{% elif row["ws"] in ['Active', 'Idle'] %}
|
||||
{% set my_class = 'blue' %}
|
||||
{% else %}
|
||||
{% set my_class = '' %}
|
||||
{% endif %}
|
||||
<tr>
|
||||
<td>{{ row["ws"] }}</td>
|
||||
<td>{{ row["total"] }}</td>
|
||||
<td class="{{ my_class }}">{{ row["ws"] }}</td>
|
||||
<td class="{{ my_class }}">{{ row["total"] }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</table>
|
||||
|
||||
|
||||
|
||||
{% endblock content %}
|
||||
@@ -9,6 +9,23 @@
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.nav-bar a {
|
||||
text-decoration: none;
|
||||
color: #6b9bd1;
|
||||
font-size: 12pt;
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.nav-bar a:hover {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
@@ -122,6 +139,13 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="nav-bar" style="margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #444;">
|
||||
<a href="/">Today</a>
|
||||
<a href="/calendar/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}">Calendar</a>
|
||||
<a href="/work">Work</a>
|
||||
<a href="/totals">All Time</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-tabs">
|
||||
<a href="/switches/daily/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}"
|
||||
class="{% if scope == 'daily' %}active{% endif %}">Daily</a>
|
||||
@@ -129,9 +153,6 @@
|
||||
class="{% if scope == 'weekly' %}active{% endif %}">Weekly</a>
|
||||
<a href="/switches/monthly/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}"
|
||||
class="{% if scope == 'monthly' %}active{% endif %}">Monthly</a>
|
||||
<span style="margin-left: auto;">
|
||||
<a href="/calendar/{{ scope }}/{{ base_date.year }}/{{ base_date.month }}/{{ base_date.day }}">View Calendar</a>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="date-nav">
|
||||
|
||||
Reference in New Issue
Block a user