git.cweiske.de / anoweco.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: e876f47)
a little bit layout for the identity selector
authorChristian Weiske <cweiske@cweiske.de>
Thu, 4 Aug 2016 21:17:50 +0000 (23:17 +0200)
committerChristian Weiske <cweiske@cweiske.de>
Thu, 4 Aug 2016 21:17:50 +0000 (23:17 +0200)
data/templates/auth-choose.htm patch | blob | history
www/css/auth-choose.css [new file with mode: 0644] patch | blob

diff --git a/data/templates/auth-choose.htm b/data/templates/auth-choose.htm
index baf44e765e9cfc9659371b589a99d757ab2293f1..efbc45a93cd00cb1cbb3742d2e0cee44c59ce16a 100644 (file)
--- a/data/templates/auth-choose.htm
+++ b/data/templates/auth-choose.htm
@@ -2,6 +2,7 @@
  <head>
   <meta charset="utf-8"/>
   <title>Select your identity</title>
  <head>
   <meta charset="utf-8"/>
   <title>Select your identity</title>
+  <link rel="stylesheet" type="text/css" href="css/auth-choose.css"/>
  </head>
  <body>
   <h1>Select your identity</h1>
  </head>
  <body>
   <h1>Select your identity</h1>
@@ -14,44 +15,39 @@
    <input type="hidden" name="auth[{{key}}]" value="{{value}}"/>
    {% endfor %}
 
    <input type="hidden" name="auth[{{key}}]" value="{{value}}"/>
    {% endfor %}
 
-   <ul>
-    <li>
-     <label>
-      <input type="radio" name="id[mode]" value="anonymous"
-             {%if id.mode=="anonymous"%}checked="checked"{%endif%}/>
-      Anonymous
-     </label>
-    </li>
-    <li>
-     <label>
-      <input type="radio" name="id[mode]" value="data"
-             {%if id.mode=="data"%}checked="checked"{%endif%}/>
-      With a name
-     </label>
-     <ul>
-      <li>
-       <label for="id-name">Name:</label>
-       <input type="text" name="id[name]" id="id-name" value="{{id.name}}"/>
-      </li>
-      <li>
-       {% if id.imageurl %}
-       <img src="{{id.imageurl}}" width="32" height="32" alt="Avatar image"/>
-       {% endif %}
-       <label for="id-imageurl">Avatar image URL:</label>
-       <input type="url" name="id[imageurl]" id="id-imageurl"
-              value="{{id.imageurl}}" size="60"/>
-       <br/>
-       alternatively, provide an email so we can autodetect its avatar:
-       <input type="email" name="id[email]" id="id-email"/>
-       (will not be stored.)
-      </li>      
-     </ul>
-     <p>
-      All values are optional.
-     </p>
-    </li>
-   </ul>
+   <label class="mode">
+    <input type="radio" name="id[mode]" value="anonymous"
+           {%if id.mode=="anonymous"%}checked="checked"{%endif%}/>
+    Anonymous
+   </label>
+
+   <label class="mode">
+    <input type="radio" name="id[mode]" value="data"
+           {%if id.mode=="data"%}checked="checked"{%endif%}/>
+    With a name
+   </label>
+   <div class="data-mode">
+    <div>
+     <label for="id-name">Name:</label>
+     <input type="text" name="id[name]" id="id-name" value="{{id.name}}"/>
+    </div>
+    <div>
+     <label for="id-imageurl">Avatar image URL:</label>
+     <input type="url" name="id[imageurl]" id="id-imageurl"
+            value="{{id.imageurl}}"/>
+    </div>
+    <div>
+     .. or use this email's avatar image:
+    </div>
+    <div>
+     <label for="id-email">E-Mail:</label>
+     <input type="email" name="id[email]" id="id-email"/>
+    </div>
+   </div>
    <button type="submit">Login</button>
    <button type="submit">Login</button>
+   <p class="note">
+    The e-mail address will not be stored.
+   </p>
   </form>
  </body>
 </html>
   </form>
  </body>
 </html>
diff --git a/www/css/auth-choose.css b/www/css/auth-choose.css
new file mode 100644 (file)
index 0000000..adc107a
--- /dev/null
+++ b/www/css/auth-choose.css
@@ -0,0 +1,40 @@
+body {
+    max-width: 60ex;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: #EEE;
+}
+
+label.mode {
+    display: block;
+    padding: 2ex;
+    background-color: #DDD;
+    border-top: 1px solid #EEE;
+}
+div.data-mode {
+    margin-left: 5ex;
+    background-color: #DDD;
+}
+div.data-mode label {
+    display: inline-block;
+    width: 20ex;
+}
+div.data-mode div {
+    padding: 2ex 2ex;
+    border-top: 1px solid #EEE;
+}
+div.data-mode input {
+    width: 34ex;
+}
+button {
+    margin: 2ex;
+    width: 20ex;
+    height: 5ex;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+p.note {
+    text-align: center;
+    color: #444;
+}
\ No newline at end of file
Anonymous web comments for the indieweb