simplify css

relay/dev.py

@@ -145,7 +145,6 @@ class WatchHandler(PatternMatchingEventHandler):
 		if event.event_type not in ['modified', 'created', 'deleted']:
 			return
 
-		print(event.src_path)
 		self.run_proc(restart = True)
 
 

relay/frontend/base.haml

@@ -11,7 +11,7 @@
 		%title << {{config.name}}: {{page}}
 		%meta(charset="UTF-8")
 		%meta(name="viewport" content="width=device-width, initial-scale=1")
-		%link(rel="stylesheet" type="text/css" href="/style.css?page={{page}}")
+		%link(rel="stylesheet" type="text/css" href="/style.css")
 		-block head
 
 	%body
@@ -51,7 +51,7 @@
 			-if message
 				.message.section -> =message
 
-			#content
+			#content(class="page-{{page.lower().replace(' ', '_')}}")
 				-block content
 
 			#footer.section

relay/frontend/page/admin-config.haml

@@ -2,7 +2,7 @@
 -set page="Config"
 -block content
 	%form.section(action="/admin/config" method="POST")
-		#config-options
+		.grid-2col
 			%label(for="name") << Name
 			%input(id = "name" name="name" placeholder="Relay Name" value="{{config.name or ''}}")
 

relay/frontend/page/admin-domain_bans.haml

@@ -4,7 +4,7 @@
 	%details.section
 		%summary << Ban Domain
 		%form(action="/admin/domain_bans" method="POST")
-			#add-domain
+			#add-item
 				%label(for="domain") << Domain
 				%input(type="domain" id="domain" name="domain" placeholder="Domain")
 
@@ -16,7 +16,7 @@
 
 			%input(type="submit" value="Ban Domain")
 
-	#domains.section
+	#data-table.section
 		%table
 			%thead
 				%tr
@@ -31,7 +31,7 @@
 							%details
 								%summary -> =ban.domain
 								%form(action="/admin/domain_bans" method="POST")
-									.items
+									.grid-2col
 										.reason << Reason
 										%textarea.reason(id="reason" name="reason") << {{ban.reason or ""}}
 

relay/frontend/page/admin-instances.haml

@@ -4,7 +4,7 @@
 	%details.section
 		%summary << Add Instance
 		%form(target="/admin/instances" method="POST")
-			#add-instance
+			#add-item
 				%label(for="domain") << Domain
 				%input(type="domain" id="domain" name="domain" placeholder="Domain")
 
@@ -19,7 +19,7 @@
 
 			%input(type="submit" value="Add Instance")
 
-	#instances.section
+	#data-table.section
 		%table
 			%thead
 				%tr

relay/frontend/page/admin-software_bans.haml

@@ -4,7 +4,7 @@
 	%details.section
 		%summary << Ban Software
 		%form(action="/admin/software_bans" method="POST")
-			#add-software
+			#add-item
 				%label(for="name") << Name
 				%input(id="name" name="name" placeholder="Name")
 
@@ -16,7 +16,7 @@
 
 			%input(type="submit" value="Ban Software")
 
-	#software.section
+	#data-table.section
 		%table
 			%thead
 				%tr
@@ -31,7 +31,7 @@
 							%details
 								%summary -> =ban.name
 								%form(action="/admin/software_bans" method="POST")
-									.items
+									.grid-2col
 										.reason << Reason
 										%textarea.reason(id="reason" name="reason") << {{ban.reason or ""}}
 

relay/frontend/page/admin-users.haml

@@ -4,7 +4,7 @@
 	%details.section
 		%summary << Add User
 		%form(target="/admin/users", method="POST")
-			#add-user
+			#add-item
 				%label(for="username") << Username
 				%input(id="username" name="username" placeholder="Username")
 
@@ -19,7 +19,7 @@
 
 			%input(type="submit" value="Add User")
 
-	#users.section
+	#data-table.section
 		%table
 			%thead
 				%tr

relay/frontend/page/admin-whitelist.haml

@@ -4,13 +4,13 @@
 	%details.section
 		%summary << Add Domain
 		%form(target="/admin/whitelist" method="POST")
-			#add-domain
+			#add-item
 				%label(for="domain") << Domain
 				%input(type="domain" id="domain" name="domain" placeholder="Domain")
 
 			%input(type="submit" value="Add Domain")
 
-	#whitelist.section
+	#data-table.section
 		%table
 			%thead
 				%tr

relay/frontend/page/home.haml

@@ -19,7 +19,7 @@
 			Note: The whitelist is enabled on this instance. Ask the admin to add your instance
 			before joining.
 
-	#instances.section
+	#data-table.section
 		%table
 			%thead
 				%tr
@@ -29,5 +29,8 @@
 			%tbody
 				-for instance in instances
 					%tr
-						%td.instance -> %a(href="https://{{instance.domain}}/" target="_new") -> =instance.domain
+						%td.instance -> %a(href="https://{{instance.domain}}/" target="_new")
-						%td.date -> =instance.created.strftime("%Y-%m-%d")
+							=instance.domain
+
+						%td.date
+							=instance.created.strftime("%Y-%m-%d")

relay/frontend/page/login.haml

@@ -2,8 +2,11 @@
 -set page="Login"
 -block content
 	%form.section(action="/login" method="post")
-		%label(for="username") << Username
+		.grid-2col
-		%input(id="username" name="username" placeholder="Username" value="{{username or ''}}")
+			%label(for="username") << Username
-		%label(for="password") << Password
+			%input(id="username" name="username" placeholder="Username" value="{{username or ''}}")
-		%input(id="password" name="password" placeholder="Password" type="password")
+
+			%label(for="password") << Password
+			%input(id="password" name="password" placeholder="Password" type="password")
+
 		%input(type="submit" value="Login")

relay/frontend/style.css

@@ -15,13 +15,6 @@
 	--spacing: 10px;
 }
 
-body {
-	color: var(--text);
-	background-color: #222;
-	margin: var(--spacing);
-	font-family: sans serif;
-}
-
 a {
 	color: var(--primary);
 	text-decoration: none;
@@ -32,10 +25,26 @@ a:hover {
 	text-decoration: underline;
 }
 
+body {
+	color: var(--text);
+	background-color: #222;
+	margin: var(--spacing);
+	font-family: sans serif;
+}
+
+details *:nth-child(2) {
+	margin-top: 5px;
+}
+
 details summary {
 	cursor: pointer;
 }
 
+form input[type="submit"] {
+	display: block;
+	margin: 0 auto;
+}
+
 p {
 	line-height: 1em;
 	margin: 0px;
@@ -90,6 +99,10 @@ table tbody td {
 	background-color: var(--table-background);
 }
 
+textarea {
+	height: calc(5em);
+}
+
 #container {
 	width: 1024px;
 	margin: 0px auto;
@@ -190,6 +203,23 @@ table tbody td {
 	text-align: right
 }
 
+#add-item {
+	display: grid;
+	grid-template-columns: max-content auto;
+	grid-gap: var(--spacing);
+	margin-top: var(--spacing);
+	margin-bottom: var(--spacing);
+	align-items: center;
+}
+
+#data-table td:first-child {
+	width: 100%;
+}
+
+#data-table .date {
+	width: max-content;
+	text-align: right;
+}
 
 .button {
 	background-color: var(--primary);
@@ -219,6 +249,15 @@ table tbody td {
 	border: 1px solid var(--error-border) !important;
 }
 
+.grid-2col {
+	display: grid;
+	grid-template-columns: max-content auto;
+	grid-gap: var(--spacing);
+	margin-bottom: var(--spacing);
+	align-items: center;
+	
+}
+
 .message {
 	color: var(--message-text) !important;
 	background-color: var(--message-background) !important;
@@ -241,9 +280,10 @@ table tbody td {
 }
 
 
-{% if page %}
+/* config */
-	{% include "style/" + page.lower().replace(" ", "_") + ".css" %}
+#content.page-config input[type="checkbox"] {
-{% endif %}
+	justify-self: left;
+}
 
 
 @media (max-width: 1026px) {
@@ -273,7 +313,8 @@ table tbody td {
 	}
 
 	.section {
-		border-width: 0px;
+		border-left-width: 0px;
+		border-right-width: 0px;
 		border-radius: 0px;
 	}
 }

relay/frontend/style/config.css

@@ -1,20 +0,0 @@
-#config-options {
-	display: grid;
-	grid-template-columns: max-content auto;
-	grid-gap: var(--spacing);
-	margin-bottom: var(--spacing);
-	align-items: center;
-}
-
-form input[type="submit"] {
-	display: block;
-	margin: 0 auto;
-}
-
-form input[type="checkbox"] {
-	justify-self: left;
-}
-
-textarea {
-	height: 4em;
-}

relay/frontend/style/domain_bans.css

@@ -1,32 +0,0 @@
-form input[type="submit"] {
-	display: block;
-	margin: 0 auto;
-}
-
-textarea {
-	height: calc(5em);
-}
-
-table .items {
-	display: grid;
-	grid-template-columns: max-content auto;
-	grid-gap: var(--spacing);
-	margin-top: var(--spacing);
-}
-
-#domains .domain {
-	width: 100%;
-}
-
-#domains .date {
-	width: max-content;
-	text-align: right;
-}
-
-#add-domain {
-	display: grid;
-	grid-template-columns: max-content auto;
-	grid-gap: var(--spacing);
-	margin-top: var(--spacing);
-	margin-bottom: var(--spacing);
-}

relay/frontend/style/home.css

@@ -1,16 +0,0 @@
-#instances table {
-	width: 100%;
-}
-
-#instances .instance {
-	width: 100%;
-}
-
-#instances .date {
-	width: max-content;
-	text-align: right;
-}
-
-#instances thead td {
-	text-align: center !important;
-}

relay/frontend/style/instances.css

@@ -1,25 +0,0 @@
-form input[type="submit"] {
-	display: block;
-	margin: 0 auto;
-}
-
-#instances .instance {
-	width: 100%;
-}
-
-#instances .software {
-	text-align: center;
-}
-
-#instances .date {
-	width: max-content;
-	text-align: right;
-}
-
-#add-instance {
-	display: grid;
-	grid-template-columns: max-content auto;
-	grid-gap: var(--spacing);
-	margin-top: var(--spacing);
-	margin-bottom: var(--spacing);
-}

relay/frontend/style/login.css

@@ -1,18 +0,0 @@
-label, input {
-	margin: 0 auto;
-	display: block;
-}
-
-label, input:not([type="submit"]) {
-	width: 50%;
-}
-
-input:not([type="submit"]) {
-	margin-bottom: var(--spacing);
-}
-
-@media (max-width: 1026px) {
-	label, input:not([type="submit"]) {
-		width: 75%;
-	}
-}

relay/frontend/style/software_bans.css

@@ -1,32 +0,0 @@
-form input[type="submit"] {
-	display: block;
-	margin: 0 auto;
-}
-
-textarea {
-	height: calc(5em);
-}
-
-table .items {
-	display: grid;
-	grid-template-columns: max-content auto;
-	grid-gap: var(--spacing);
-	margin-top: var(--spacing);
-}
-
-#software .name{
-	width: 100%;
-}
-
-#software .date {
-	width: max-content;
-	text-align: right;
-}
-
-#add-software {
-	display: grid;
-	grid-template-columns: max-content auto;
-	grid-gap: var(--spacing);
-	margin-top: var(--spacing);
-	margin-bottom: var(--spacing);
-}

relay/frontend/style/users.css

@@ -1,25 +0,0 @@
-form input[type="submit"] {
-	display: block;
-	margin: 0 auto;
-}
-
-#users .username {
-	width: 100%;
-}
-
-#users .handle {
-	text-align: center;
-}
-
-#users .date {
-	width: max-content;
-	text-align: right;
-}
-
-#add-user {
-	display: grid;
-	grid-template-columns: max-content auto;
-	grid-gap: var(--spacing);
-	margin-top: var(--spacing);
-	margin-bottom: var(--spacing);
-}

relay/frontend/style/whitelist.css

@@ -1,21 +0,0 @@
-form input[type="submit"] {
-	display: block;
-	margin: 0 auto;
-}
-
-#whitelist .domain{
-	width: 100%;
-}
-
-#whitelist .date {
-	width: max-content;
-	text-align: right;
-}
-
-#add-domain {
-	display: grid;
-	grid-template-columns: max-content auto;
-	grid-gap: var(--spacing);
-	margin-top: var(--spacing);
-	margin-bottom: var(--spacing);
-}

relay/views/frontend.py

@@ -440,5 +440,5 @@ class AdminConfig(View):
 @register_route('/style.css')
 class StyleCss(View):
 	async def get(self, request: Request) -> Response:
-		data = self.template.render('style.css', self, page = request.query.getone('page', ""))
+		data = self.template.render('style.css', self)
 		return Response.new(data, ctype = 'css')