From a6ef13bb8ae6924a2f8a7301f1a38f36c19b4417 Mon Sep 17 00:00:00 2001
From: girst <tobi@isticktoit.net>
Date: Sun, 3 Apr 2022 17:46:36 +0200
Subject: [PATCH] move inline styles to blueprint sheet

---
 app/browse/static/style.css          | 26 ++++++++++++++++++++++++++
 app/browse/templates/channel.html.j2 | 18 ++++++++++++------
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/app/browse/static/style.css b/app/browse/static/style.css
index 376eef0..0650871 100644
--- a/app/browse/static/style.css
+++ b/app/browse/static/style.css
@@ -1,3 +1,4 @@
+/* search */
 #search {
   width:60em;
   max-width:100%;
@@ -34,3 +35,28 @@
 #search #filters select {
   flex: 1;
 }
+
+/* channel */
+#subpages {
+  display: flex;
+  margin: 1em;
+}
+#subpages .subpages {
+  flex: 1;
+}
+#subpages .subpages form {
+  display: inline;
+}
+#subpages .subpages .search-channel {
+  background:0;
+  color:#eee;
+  border:0;
+}
+#subpages .subpages .search-channel:hover,
+#subpages .subpages .search-channel:active {
+  outline: 1px solid grey;
+}
+#subpages .sort-order {
+  flex: 1;
+  text-align: right;
+}
diff --git a/app/browse/templates/channel.html.j2 b/app/browse/templates/channel.html.j2
index 25e0c5b..11531dd 100644
--- a/app/browse/templates/channel.html.j2
+++ b/app/browse/templates/channel.html.j2
@@ -1,5 +1,11 @@
 {% extends "base.html.j2" %}
 {% import 'macros.imp.j2' as macros %}
+
+{% block favicon %}
+{{ super() }}
+<link rel="stylesheet" href="{{ url_for('browse.static', filename="style.css") }}">
+{% endblock %}
+
 {% block title %}{{ title | e }}{% endblock %}
 
 {% block content %}
@@ -9,17 +15,17 @@
 <h1>{{ title | e }} <small>{{ macros.emoji_button("subscribe", channel_id, is_subscribed) if channel_id }}</small></h1>
 <details><summary>About</summary><p style="white-space: pre-wrap">{{ channel_desc }}</details>
 <div style=clear:both></div>
-<div id="subpages" style="display:flex;margin:1em">
-	<div style="flex:1">
+<div id="subpages">
+	<div class="subpages">
 		<a href="{{ url_for('browse.channel', channel_id=channel_id, subpage='videos') }}">videos</a> |
 		<a href="{{ url_for('browse.channel', channel_id=channel_id, subpage='playlists') }}">playlists</a> |
-		<form method=get style="display:inline" action="{{ url_for('browse.channel', channel_id=channel_id, subpage='search')}}">
-			<input style="background:0;color:#eee;border:0" type=text name=q value="{{ request.args.get('q', '')}}" placeholder="search channel">
+		<form method=get action="{{ url_for('browse.channel', channel_id=channel_id, subpage='search')}}">
+			<input class="search-channel" type=text name=q value="{{ request.args.get('q', '')}}" placeholder="search channel">
 			<!-- <input type="submit" value=">"> -->
 		</form>
 	</div>
 	{% if subpage != "search" %}
-	<form method=get style="flex:1;text-align:right" class="more-actions">
+	<div class="sort-order">
 		{% if subpage == "videos" %}
 		<a href="?sort=newest" {{ 'selected' if sort == 'newest' }}>newest first</a> |
 		<a href="?sort=oldest" {{ 'selected' if sort == 'oldest' }}>oldest first</a> |
@@ -28,7 +34,7 @@
 		<a href="?sort=newest" {{ 'selected' if sort == 'newest' }}>last created</a> |
 		<a href="?sort=modified" {{ 'selected' if sort == 'modified' }}>last modified</a>
 		{% endif %}
-	</form>
+	</div>
 	{% endif %}
 </div>
 <div class="cards">
-- 
2.39.3