From 189513e4ffd50e7247f25ea87f91ffa42f5a253c Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@gmail.com>
Date: Thu, 16 Nov 2017 13:26:56 +0200
Subject: [PATCH 1/2] Add styles to make login page resemble mastodon's
---
lib/pleroma/web/templates/layout/app.html.eex | 66 ++++++++++++++++++-
.../mastodon_api/mastodon/login.html.eex | 8 +--
2 files changed, 67 insertions(+), 7 deletions(-)
diff --git a/lib/pleroma/web/templates/layout/app.html.eex b/lib/pleroma/web/templates/layout/app.html.eex
index 6cc3b7ac5..ebb574ad6 100644
--- a/lib/pleroma/web/templates/layout/app.html.eex
+++ b/lib/pleroma/web/templates/layout/app.html.eex
@@ -3,9 +3,71 @@
<head>
<meta charset=utf-8 />
<title>Pleroma</title>
+ <style>
+ body {
+ background-color: #282c37;
+ font-family: sans-serif;
+ color:white;
+ }
+
+ .container {
+ margin: 50px auto;
+ max-width: 320px;
+ padding: 0;
+ padding: 40px 40px 40px 40px;
+ background-color: #313543;
+ border-radius: 4px;
+ }
+
+ h1 {
+ margin: 0;
+ }
+
+ h2 {
+ color: #9baec8;
+ font-weight: normal;
+ font-size: 20px;
+ margin-bottom: 40px;
+ }
+
+ form {
+ width: 100%;
+ }
+
+ input {
+ box-sizing: padding-box;
+ width: 100%;
+ padding: 10px;
+ margin-top: 20px;
+ background-color: rgba(0,0,0,.1);
+ color: white;
+ border: 0;
+ border-bottom: 2px solid #9baec8;
+ font-size: 14px;
+ }
+
+ input:focus {
+ border-bottom: 2px solid #4b8ed8;
+ }
+
+ button {
+ width: 100%;
+ color: white;
+ background-color: #419bdd;
+ border-radius: 4px;
+ border: none;
+ padding: 10px;
+ margin-top: 30px;
+ text-transform: uppercase;
+ font-weight: 500;
+ font-size: 16px;
+ }
+ </style>
</head>
<body>
- <h1>Welcome to Pleroma</h1>
- <%= render @view_module, @view_template, assigns %>
+ <div class="container">
+ <h1>Pleroma</h1>
+ <%= render @view_module, @view_template, assigns %>
+ </div>
</body>
</html>
diff --git a/lib/pleroma/web/templates/mastodon_api/mastodon/login.html.eex b/lib/pleroma/web/templates/mastodon_api/mastodon/login.html.eex
index 6db4b05dc..89d97561b 100644
--- a/lib/pleroma/web/templates/mastodon_api/mastodon/login.html.eex
+++ b/lib/pleroma/web/templates/mastodon_api/mastodon/login.html.eex
@@ -1,10 +1,8 @@
<h2>Login in to Mastodon Frontend</h2>
<%= form_for @conn, mastodon_api_path(@conn, :login), [as: "authorization"], fn f -> %>
-<%= label f, :name, "Name" %>
-<%= text_input f, :name %>
+<%= text_input f, :name, placeholder: "Username" %>
<br>
-<%= label f, :password, "Password" %>
-<%= password_input f, :password %>
+<%= password_input f, :password, placeholder: "Password" %>
<br>
-<%= submit "Authorize" %>
+<%= submit "Log in" %>
<% end %>
From 43499848d06348b24620f470d187847db5931bc7 Mon Sep 17 00:00:00 2001
From: Roger Braun <rbraun@Bobble.local>
Date: Thu, 16 Nov 2017 12:58:33 +0100
Subject: [PATCH 2/2] Small css fix.
---
lib/pleroma/web/templates/layout/app.html.eex | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/lib/pleroma/web/templates/layout/app.html.eex b/lib/pleroma/web/templates/layout/app.html.eex
index ebb574ad6..2a8dede80 100644
--- a/lib/pleroma/web/templates/layout/app.html.eex
+++ b/lib/pleroma/web/templates/layout/app.html.eex
@@ -8,6 +8,7 @@
background-color: #282c37;
font-family: sans-serif;
color:white;
+ text-align: center;
}
.container {
@@ -35,7 +36,7 @@
}
input {
- box-sizing: padding-box;
+ box-sizing: border-box;
width: 100%;
padding: 10px;
margin-top: 20px;
@@ -51,6 +52,7 @@
}
button {
+ box-sizing: border-box;
width: 100%;
color: white;
background-color: #419bdd;