Added login form
diff --git a/dev/demo/all.html b/dev/demo/all.html
index a18b287..1d26423 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -18,7 +18,9 @@
<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">
@@ -62,13 +64,24 @@
</form>
</header>
- <aside tabindex="0">
+ <aside tabindex="0" class="active">
+ <div>
+ <fieldset>
+ <form>
+ <legend><span>Login</span></legend>
+ <input type="text" name="handle_or_email" placeholder="Benutzername" />
+ <div>
+ <input type="password" name="pwd" placeholder="Passwort" />
+ <button type="submit"><span>Go</span></button>
+ </div>
+ </form>
+ </fieldset>
+ </div>
+
+<!--
<h2>Einstellungen</h2>
- <p>Anzahl Treffer pro Seite</p>
- <p>Kontext:</p>
- <p>200 Zeichen/Token - 200 Zeichen/Token</p>
- <p>1 Satz 1 Paragraph</p>
<a>Deutsch|Englisch</a>
+-->
</aside>
<main>
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 2fe143d..1dabd82 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -1,6 +1,8 @@
@charset "utf-8";
@import "util";
+$border-size: 2px;
+
/**
* Basic global CSS rules for Kalamar
*/
@@ -30,6 +32,8 @@
position: relative;
min-height: 100%;
font-size: 12pt;
+ margin: 0;
+ padding: 0;
}
@@ -73,3 +77,50 @@
}
}
}
+
+button[type=submit] {
+ font-weight: normal;
+ @include choose-item;
+ padding: 0;
+ height: 100%;
+ top: 0;
+ width: $button-width;
+ cursor:pointer;
+ > span:nth-of-type(1) {
+ @include blind;
+ }
+ &::after {
+ font-family: "FontAwesome";
+ }
+ border: {
+ width: $border-size;
+ style: solid;
+ color: $nearly-white;
+ }
+ &:hover, &:focus {
+ @include choose-hover;
+ }
+ &::-moz-focus-inner {
+ border: none;
+ }
+ &:active {
+ @include choose-active;
+ }
+ /**
+ * This is just for styling the last button,
+ * in case there are more than one buttons.
+ */
+ &:last-of-type {
+ // @include box-sizing-box();
+ border: {
+ right-width: $border-size;
+ right-style: solid;
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ }
+ }
+}
+
+button + button {
+ right: 0;
+}
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index b2b9d6c..9e9f89e 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -11,7 +11,7 @@
background-color: $light-green;
// @include light-noise;
@include box-sizing-box();
- padding: 8px;
+ padding: $base-padding;
padding-bottom: 0;
font-size: 10pt;
color: $nearly-white;
@@ -76,6 +76,10 @@
background-color: $dark-green;
text-align: center;
height: 100%;
+ z-index: 20;
+ > a:hover {
+ color: $nearly-white
+ }
}
color: $nearly-white;
line-height: 2em;
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index 4fee390..37d7d69 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -16,10 +16,7 @@
}
header input {
- outline: none;
- font-size: 11pt;
- border: $border-size solid $nearly-white;
- padding: 2px;
+ @include input-field;
}
#searchbar {
@@ -28,52 +25,10 @@
padding-right: $right-padding;
button[type=submit] {
position: absolute;
- font-weight: normal;
- @include choose-item;
- padding: 0;
- height: 100%;
- top: 0;
right: $right-distance;
- width: 30px;
- cursor:pointer;
- > span:nth-of-type(1) {
- @include blind;
- }
&::after {
- font-family: "FontAwesome";
content: $fa-search;
}
- border: {
- width: $border-size;
- style: solid;
- color: $nearly-white;
- }
- &:hover, &:focus {
- @include choose-hover;
- }
- &::-moz-focus-inner {
- border: none;
- }
- &:active {
- @include choose-active;
- }
-
- /**
- * This is just for styling the last button,
- * in case there are more than one buttons.
- */
- &:last-of-type {
- @include box-sizing-box();
- border: {
- right-width: $border-size;
- right-style: solid;
- top-right-radius: $standard-border-radius;
- bottom-right-radius: $standard-border-radius;
- }
- }
- }
- button + button {
- right: 0;
}
}
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
index 18da240..d8a9272 100644
--- a/dev/scss/kalamar.scss
+++ b/dev/scss/kalamar.scss
@@ -5,9 +5,10 @@
*/
// Global variables and mixins
-@import "fonts"; // Font families
-@import "base"; // Base styles
-@import "main/main"; // Main frame styles
-@import "header/header"; // Top frame styles
-@import "footer/footer"; // Bottom frame styles
-@import "media"; // Media queries
+@import "fonts"; // Font families
+@import "base"; // Base styles
+@import "main/main"; // Main frame styles
+@import "header/header"; // Top frame styles
+@import "footer/footer"; // Bottom frame styles
+@import "sidebar/sidebar"; // Left frame styles
+@import "media"; // Media queries
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 8702e9d..9010c45 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -5,14 +5,12 @@
@import "pagination"; // Pagination
@import "query"; // View query
@import "resultinfo"; // Information on results
-@import "sidebar"; // Navigation on the left side
@import "tutorial"; // Embedded and non-embedded tutorial
@import "koralquery"; // KoralQuery
@import "tagger"; // Tagger
@import "alertify";
div.intro {
- width: 70%;
min-width: 600px;
// Visited links
@@ -21,6 +19,9 @@
}
}
+aside.active + main div.intro {
+ margin-left: $logo-left-distance - $standard-margin + $base-padding;
+}
main {
margin: {
diff --git a/dev/scss/main/sidebar.scss b/dev/scss/sidebar/sidebar.scss
similarity index 85%
rename from dev/scss/main/sidebar.scss
rename to dev/scss/sidebar/sidebar.scss
index ce267fa..ddcf811 100644
--- a/dev/scss/main/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -2,9 +2,11 @@
@import "../util";
$border-size: 2px;
+$right-padding: 60px;
aside {
outline: none;
+ font-size: 10pt;
display: block;
background-color: $dark-green;
position: fixed;
@@ -40,7 +42,7 @@
padding: 6pt;
border-top-right-radius: $standard-border-radius;
}
- h2 {
+ h2, legend {
font: {
size: 100%;
weight: bold;
@@ -129,6 +131,31 @@
nav > ul > li > a {
font-weight: bold;
}
+
+ fieldset {
+ position: relative;
+ border-width: 0;
+ input[type=text], input[type=password] {
+ @include input-field;
+ width: 100%;
+ }
+ > form > div {
+ position: relative;
+ width: 100%;
+ margin-top: 4px;
+ padding-right: $button-width
+ }
+
+ button {
+ position: absolute;
+ // height: 100%;
+ top: 0;
+ right: 0;
+ &::after {
+ content: $fa-login;
+ }
+ }
+ }
}
aside:focus {
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index b129e2e..4fdc06a 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -87,6 +87,8 @@
$choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
$standard-border-radius: 6px;
$item-padding: 3pt 6pt;
+$button-width: 30px;
+$base-padding: 8px;
$total-results: $light-green;
@@ -171,6 +173,14 @@
transition: color 0.3s ease 0s;
}
+@mixin input-field {
+ outline: none;
+ font-size: 11pt;
+ border: $border-size solid $nearly-white;
+ padding: 2px;
+ margin: 0;
+}
+
/**
* Mixing for basic text padding
*/