Mercurial > rsstweet

diff app/views/tweets/index.html.erb @ 114:394235fd42d2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Fancy index page
author nanaya <me@myconan.net>
date Sun, 12 Feb 2017 16:45:55 +0900
parents 54aac458e979
children 32c8c150cd80
line wrap: on
line diff
--- a/app/views/tweets/index.html.erb	Thu Jan 12 21:21:20 2017 +0900
+++ b/app/views/tweets/index.html.erb	Sun Feb 12 16:45:55 2017 +0900
@@ -2,20 +2,85 @@
 <head>
   <title>rsstweet</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <style type="text/css">
-    body {
-      font-family: sans-serif;
-      font-size: 12px;
+    *, *::before, *::after {
+      box-sizing: border-box;
+    }
+
+    html {
+      line-height: 1.5;
+      font-family: Arial, sans-serif;
+      font-size: 14px;
+      height: 100%;
+    }
+
+    code {
+      font-family: "Courier New", monospace;
+    }
+
+    .main {
+      margin: auto;
+      max-width: 600px;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      padding: 0 10px;
+    }
+
+    .main__content {
+      flex: 1;
+    }
+
+    .main__footer {
+      padding-bottom: 10px;
+    }
+
+    .twitter-form {
+      width: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    .twitter-form__input {
+      flex: 1;
+      margin-right: 5px;
+      font-family: "Courier New", monospace;
+      font-size: 16px;
     }
   </style>
 </head>
-<body>
-  <h1>rsstweet</h1>
-  <p>Proxying any user's tweet for usage with RSS readers</p>
-  <ul>
-    <li>
-      Source: <a href="https://bitbucket.org/nanaya1/rsstweet">Bitbucket</a>
-    </li>
-  </ul>
+<body class="main">
+  <div class="main__content">
+    <h1>rsstweet</h1>
+    <p>
+      Proxying any user's tweet for usage with RSS readers.
+      Doesn't actually output <code>rss</code> but generates <code>atom</code> instead.
+      Not that it matters because either way it works with any RSS readers.
+    </p>
+
+    <form class="js-twitter--form twitter-form">
+      <input type="text" placeholder="Enter Username" class="js-twitter--input twitter-form__input" autofocus>
+      <button type="submit">
+        Go
+      </button>
+    </form>
+  </div>
+  <div class="main__footer">
+    <hr>
+    <a href="https://bitbucket.org/nanaya1/rsstweet">Source</a>
+  </div>
+
+  <script>
+    var form = document.getElementsByClassName('js-twitter--form')[0]
+    var input = document.getElementsByClassName('js-twitter--input')[0]
+    var doRedirect = function(e) {
+      e.preventDefault()
+      document.location = "/" + input.value
+    }
+
+    form.addEventListener('submit', doRedirect)
+  </script>
 </body>