Major frontend overhaul. Added tailwindcss.
This commit is contained in:
@@ -3,91 +3,125 @@
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="image-container">
|
||||
<header>
|
||||
<div class="title-block">
|
||||
<h1>Reddit Ticker Mentions</h1>
|
||||
<h2>{{ subtitle }}</h2>
|
||||
<div class="flex flex-col items-center">
|
||||
<div
|
||||
class="w-full max-w-3xl bg-gradient-to-br from-slate-800 to-slate-900 ring-1 ring-slate-700 rounded-2xl p-6 sm:p-8 shadow-2xl">
|
||||
<header class="flex flex-col sm:flex-row justify-between sm:items-start mb-8">
|
||||
<div class="text-left">
|
||||
<h1 class="text-2xl sm:text-4xl font-extrabold tracking-tight text-white">Reddit Ticker Mentions</h1>
|
||||
<h2 class="text-lg sm:text-xl font-semibold mt-1 text-slate-400">{{ subtitle }}</h2>
|
||||
</div>
|
||||
<div class="text-left sm:text-right mt-2 sm:mt-0 flex-shrink-0">
|
||||
<div class="text-md font-semibold text-slate-400 whitespace-nowrap">{{ date_string }}</div>
|
||||
{% if not is_image_mode %}
|
||||
<a href="{{ base_url }}?view={{ view_type }}&image=true" class="inline-block mt-2 sm:float-right"
|
||||
title="View as Shareable Image">
|
||||
<svg class="text-slate-400 hover:text-white transition-colors" xmlns="http://www.w3.org/2000/svg"
|
||||
width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
||||
stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z">
|
||||
</path>
|
||||
<circle cx="12" cy="13" r="4"></circle>
|
||||
</svg>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% set ticker_colors = {
|
||||
1: 'text-violet-400', 2: 'text-lime-400', 3: 'text-cyan-400',
|
||||
4: 'text-yellow-400', 5: 'text-red-400', 6: 'text-orange-400',
|
||||
7: 'text-emerald-400', 8: 'text-blue-400', 9: 'text-gray-300',
|
||||
10: 'text-pink-400'
|
||||
} %}
|
||||
|
||||
<!-- Ticker List -->
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- 1. The Desktop Header Row (hidden on mobile) -->
|
||||
<div
|
||||
class="hidden sm:flex items-center text-xs font-bold text-slate-500 uppercase tracking-wider px-4 py-3 border-b border-slate-700">
|
||||
<div class="w-1/4 flex items-center gap-4 text-left">
|
||||
<span class="w-6 text-center">#</span>
|
||||
<span>Ticker</span>
|
||||
</div>
|
||||
<div class="w-3/4 grid grid-cols-4 gap-4 text-right">
|
||||
<div class="text-center">Mentions</div>
|
||||
<div class="text-center">Sentiment</div>
|
||||
<div>Mkt Cap</div>
|
||||
<div>Close Price</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Ticker Rows -->
|
||||
<div class="divide-y divide-slate-800">
|
||||
{% for ticker in tickers %}
|
||||
<!-- THIS IS THE UPDATED LINE -->
|
||||
<div
|
||||
class="p-4 flex flex-col sm:flex-row sm:items-center sm:gap-4 hover:bg-slate-800/50 transition-colors duration-150">
|
||||
<!-- Rank & Ticker Symbol -->
|
||||
<div class="flex items-center gap-4 w-full sm:w-1/4 text-left mb-4 sm:mb-0">
|
||||
<span class="text-lg font-bold text-slate-500 w-6 text-center">{{ loop.index }}</span>
|
||||
<div class="text-xl font-bold">
|
||||
<span class="{{ ticker_colors.get(loop.index, 'text-slate-200') }}">
|
||||
{% if is_image_mode %}
|
||||
{{ ticker.symbol }}
|
||||
{% else %}
|
||||
<a href="/deep-dive/{{ ticker.symbol }}">{{ ticker.symbol }}</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Financial Data Points -->
|
||||
<div class="w-full grid grid-cols-2 sm:grid-cols-4 gap-4 text-right">
|
||||
<div class="text-center sm:text-center">
|
||||
<div class="sm:hidden text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">
|
||||
Mentions</div>
|
||||
<div class="text-lg font-semibold text-white">{{ ticker.total_mentions }}</div>
|
||||
</div>
|
||||
<div class="text-center sm:text-center">
|
||||
<div class="sm:hidden text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">
|
||||
Sentiment</div>
|
||||
<div class="text-lg font-semibold">
|
||||
{% if ticker.bullish_mentions > ticker.bearish_mentions %}<span
|
||||
class="text-green-400">Bullish</span>
|
||||
{% elif ticker.bearish_mentions > ticker.bullish_mentions %}<span
|
||||
class="text-red-400">Bearish</span>
|
||||
{% else %}<span class="text-slate-400">Neutral</span>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sm:hidden text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">Mkt
|
||||
Cap</div>
|
||||
<div class="text-lg font-semibold text-white">{{ ticker.market_cap | format_mc }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="sm:hidden text-xs font-bold text-slate-500 uppercase tracking-wider mb-1">Close
|
||||
Price</div>
|
||||
<div class="text-lg font-semibold text-white">
|
||||
{% if ticker.closing_price %}<a
|
||||
href="https://finance.yahoo.com/quote/{{ ticker.symbol }}" target="_blank"
|
||||
class="hover:text-blue-400 transition-colors">${{
|
||||
"%.2f"|format(ticker.closing_price) }}</a>
|
||||
{% else %}N/A{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center text-slate-500 p-8">No ticker data found for this period.</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="header-action">
|
||||
<div class="date">{{ date_string }}</div>
|
||||
|
||||
<!-- Only show the icon if we are NOT already in image mode -->
|
||||
{% if not is_image_mode %}
|
||||
<a href="{{ base_url }}?view={{ view_type }}&image=true" class="icon-link" title="View as Shareable Image">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
|
||||
<circle cx="12" cy="13" r="4"></circle>
|
||||
</svg>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="rank">Rank</th>
|
||||
<th class="ticker">Ticker</th>
|
||||
<th class="mentions">Mentions</th>
|
||||
<th class="sentiment">Sentiment</th>
|
||||
<th class="financials">Mkt Cap</th>
|
||||
<th class="financials">Close Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for ticker in tickers %}
|
||||
<tr>
|
||||
<td data-label="Rank" class="rank">{{ loop.index }}</td>
|
||||
<td data-label="Ticker" class="ticker">
|
||||
<strong>
|
||||
{% if is_image_mode %}
|
||||
{{ ticker.symbol }}
|
||||
{% else %}
|
||||
<a href="/deep-dive/{{ ticker.symbol }}">{{ ticker.symbol }}</a>
|
||||
{% endif %}
|
||||
</strong>
|
||||
</td>
|
||||
<td data-label="Mentions" class="mentions">{{ ticker.total_mentions }}</td>
|
||||
<td data-label="Sentiment" class="sentiment">
|
||||
{% if ticker.bullish_mentions > ticker.bearish_mentions %}
|
||||
<span class="sentiment-bullish">Bullish</span>
|
||||
{% elif ticker.bearish_mentions > ticker.bearish_mentions %}
|
||||
<span class="sentiment-bearish">Bearish</span>
|
||||
{% else %}
|
||||
<span class="sentiment-neutral">Neutral</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td data-label="Mkt Cap" class="financials">{{ ticker.market_cap | format_mc }}</td>
|
||||
<td data-label="Close Price" class="financials">
|
||||
{% if ticker.closing_price %}
|
||||
<a href="https://finance.yahoo.com/quote/{{ ticker.symbol }}" target="_blank" title="View on Yahoo Finance">
|
||||
${{ "%.2f"|format(ticker.closing_price) }}
|
||||
</a>
|
||||
{% else %}
|
||||
N/A
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="6" style="text-align: center; padding: 2rem;">No ticker data found for this period.</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<footer style="margin-top: 3rem; text-align: center;">
|
||||
<div class="brand-name">
|
||||
<a href="https://www.reddit.com/r/rstat/" target="_blank">
|
||||
r/rstat
|
||||
</a>
|
||||
</div>
|
||||
<div class="brand-subtitle">
|
||||
<a href="https://www.reddit.com/r/rstat/" target="_blank">
|
||||
visit us for more.
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
<footer class="mt-8 text-center">
|
||||
<div class="text-xl font-extrabold tracking-tight text-white">r/rstat</div>
|
||||
<div class="text-sm text-slate-400">
|
||||
<a href="https://www.reddit.com/r/rstat/" target="_blank"
|
||||
class="hover:text-white transition-colors">visit us for more.</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user