frontend changes

This commit is contained in:
buenosairesam
2025-12-19 23:22:42 -03:00
parent 23b4341842
commit a1ef79ad05
6 changed files with 281 additions and 40 deletions

View File

@@ -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 %}

View File

@@ -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>

View File

@@ -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' %}

View File

@@ -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 %}

View File

@@ -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">