Improve login on mobile
Change-Id: I9ae2047af086292381a08d12197e1160f3575c21
diff --git a/dev/demo/sidebar-login.html b/dev/demo/sidebar-login.html
new file mode 100644
index 0000000..cf36d7a
--- /dev/null
+++ b/dev/demo/sidebar-login.html
@@ -0,0 +1,97 @@
+ <!DOCTYPE html>
+<html>
+ <head>
+ <title>Complete Demo</title>
+ <meta charset="utf-8" />
+ <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+ <link type="text/css" rel="stylesheet" href="../css/kwic.css" />
+ <script>//<![CDATA[
+
+ window.KorAP = window.KorAP || {};
+ KorAP.URL = '';
+
+ //]]></script>
+ <script data-main="alldemo.js" src="../js/lib/require.js" async="async"></script>
+ </head>
+ <body>
+ <div id="kalamar-bg"></div>
+
+ <aside tabindex="0" class="active">
+ <div>
+ <fieldset>
+ <form action="/user/login" method="POST">
+ <legend><span>Anmelden</span></legend>
+ <input name="handle_or_email" placeholder="Benutzername oder Email" type="text">
+ <div>
+ <input name="pwd" placeholder="Passwort" type="password">
+ <button type="submit"><span>Los!</span></button>
+ </div>
+</form> <p>Anmeldung mit einem registrierten Cosmas-II-Konto</p>
+</fieldset>
+
+ </div>
+ </aside>
+
+
+ <header>
+ <a href="/" class="logo" tabindex="-1"><h1><span>KorAP - Corpus Analysis Platform</span></h1></a>
+
+ <div class="button top">
+<!--
+ <a href="#" class="login" tabindex="-1"><span>Login</span></a>
+-->
+ </div>
+
+ <form autocomplete="off" action="/kalamar" id="searchform">
+ <div id="searchbar">
+ <input type="search"
+ placeholder="Find ..."
+ name="q"
+ id="q-field"
+ value="abcdefghijklmnopqrstuvwxyz"
+ autofocus="autofocus" />
+ <button type="submit"><span>Go</span></button>
+ <!-- <i class="fa fa-arrow-circle-down show-hint" onclick="hint.popUp()"></i> -->
+ </div>
+
+ <!-- Search in the following virtual collection -->
+ <div id="vc-view"></div>
+ in
+ <input id="show" name="show" type="hidden" />
+ <input id="collection-name" name="collection-name" type="hidden">
+ <input id="collection" name="collection" type="text" value="">
+ with <span class="menu select">
+ <select name="ql" id="ql-field">
+ <option value="poliqarp">Poliqarp</option>
+ <option value="cosmas2">Cosmas II</option>
+ <option value="annis">Annis</option>
+ <option value="cql">CQL v1.2</option>
+ </select>
+ </span>
+ <div class="button right">
+ <input type="checkbox"
+ value="1"
+ name="cutoff"
+ class="checkbox"
+ id="q-cutoff-field" />
+ <label for="q-cutoff-field"><span></span>Glimpse</label>
+
+ <!-- Todo: open tutorial - like openTutorial() -->
+ <a href="doc/faq" tabindex="-1" class="question"><span>Question</span></a>
+ <a href="tutorial.html" title="Tutorial" class="tutorial" id="view-tutorial"><span>Tutorial</span></a>
+ </div>
+ </form>
+ </header>
+
+
+
+ <main>
+ </main>
+
+ <footer>
+ <a href="/doc/KorAP">About</a>
+ <a href="http://korap.ids-mannheim.de/">About</a>
+ <a href="#">V 0.14</a>
+ </footer>
+ </body>
+</html>
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index 45304d1..ddd26fa 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -130,6 +130,24 @@
&.active + main div.intro {
margin-left: $standard-margin !important;
}
+
+ &.active {
+ position: relative;
+ display: block;
+ padding-top: 0;
+ width: 100%;
+ top: 0;
+ border-width: 0;
+ fieldset input {
+ font-size: 9pt;
+ }
+ &::after {
+ display: none;
+ }
+ p {
+ display: none;
+ }
+ }
}
#tutorial {
diff --git a/templates/layouts/main.html.ep b/templates/layouts/main.html.ep
index 469c4ef..f887155 100644
--- a/templates/layouts/main.html.ep
+++ b/templates/layouts/main.html.ep
@@ -19,10 +19,6 @@
<body<% if ($embedded) { %> class="embedded"<% } %>>
<div id="kalamar-bg"></div>
- % unless ($embedded) {
- %= include 'partial/header'
- % }
-
% if (!user_auth && stash('auth_support')) { # user not logged in
% content_for 'sidebar', begin
% if (flash('handle_or_email') && !param('handle_or_email')) {
@@ -53,6 +49,10 @@
</div>
</aside>
+ % unless ($embedded) {
+ %= include 'partial/header'
+ % }
+
<main<% if (stash 'main_class') { %> class="<%= stash 'main_class' %>"<% } %>>
%= content
</main>