Log-In Form responsiv machen

[theBastian]

Hallo allerseits,

ich versuche gerade die Standard Log-In Form responsiv zu machen (Anmeldung am iPhone) und wollte dabei nicht irgendwas mit Ajax oder so bauen sondern die Vorgaben nehmen.

Beim Suchen bin ich darauf gestoßen: http://xpagesbeast.com/uxdesign/customizing-the-html-log-in-form-with-bootstrap/

Das ist eigentlich genau das, was ich will. Einfache kleine Änderung, die an der Funktion nichts ändert aber schöner aussieht --- dachte ich mir.

Leider funktioniert die Sache nicht so wie gedacht. Ich habe alles genau so umgesetzt, die eingebundenen css-Libs werden gefunden, keine Fehler in der Konsole beim Aufruf aber leider werden die css-Eigenschaften nicht genutzt, sprich meine Eingabemaske sieht nicht so aus, wie sie mit Bootstrap aussehen sollte.

Weiß jemand, wo ich noch schauen könnte, warum das so ist?

Btw.ich habe hier mit Absicht nicht alle möglichen Informationen reinkopiert, da ich nicht weiß, was wichtig ist und was nicht (Web/css-Anfänger). Sagt bitte einfach, was ich zeigen soll.

FG
Sebastian

[HH]

Poste mal das Durchgangs-HTML aus der Maske und den Inhalt von HTML Head Content.

Gruß
Hubert

[theBastian]

Ich habe es mir ja einfach gemacht und von der Seite, die oben verlinkt ist kopiert.

Durchgangs-HTML

Code

<!-- $$HTMLFrontMatter hidden field up here to set DOCTYPE -->

</form>
    <div class="container">
      <form action="/names.nsf?Login" method="post">
        <h2>Please sign in.</h2>
        <input type="text" name="username" placeholder="Email address" autofocus>
        <input type="password" name="password" placeholder="Password">        
        <button type="submit">Sign in</button>
<!--- Notes Hidden fields go here -->

Hidden:  
RedirectTo html attribute type="hidden" but not hidden from the browser
$PublicAccess, ReasonType, $$HTMLTagAttributes 
      </form>
    </div> <!-- /container -->

HTML Head Content

Code

"    <meta charset=\"utf-8\">
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
    <meta name=\"description\" content=\"\">
    <meta name=\"author\" content=\"\">
    <link rel=\"shortcut icon\" href=\"/" + @WebDbName + "/favicon.ico\">

    <title>Sign in</title>

    <!-- Bootstrap core CSS -->
       <link href=\"/" + @WebDbName + "/bootstrap/css/bootstrap-signin.css\" rel=\"stylesheet\">

    <!-- Custom styles for this template -->
    <link href=\"/" + @WebDbName + "/bootstrap/css/signin.css\" rel=\"stylesheet\">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src=\"http://getbootstrap.com/assets/js/html5shiv.js\"></script>
      <script src=\"http://getbootstrap.com/assets/js/respond.min.js\"></script>
    <![endif]-->"

[HH]

Und die entsprechenden css Dateien sind auch im Web-Content-Folder vorhanden und es gibt keine Fehlermeldung im Netzwerk-Tab des Browsers?

Ich frage nach, weil du geschrieben hast "keine Fehler in der Konsole".

Gruß
Hubert

[theBastian]

Genau, Bootstrap und die css-Dateien sind im Web-Content-Folder und werden gefunden.

Keine Fehlermeldung in der Konsole.

Testweise habe ich eine css-Datei mal umbenannt, prompt ein Fehler in der Konsole - css nicht gefunden. Daher bin ich der Meinung, die css werden gefunden.

[HH]

Versuch mal:

Code

<div class="container">
<form action="/names.nsf?Login" method="post" class="form-signin">
<h3 class="form-signin-heading">Anmeldung</h3>
<label for="username" style="color:darkgrey;">Benutzername:</label>
<input type="text" name="Username" id="username" class="form-control" placeholder="Vorname Nachname" style="width:100%" autofocus>
<label for="password" style="margin-top:10px;color:darkgrey;">Kennwort:</label>
<input type="password" name="password" id="password" class="form-control" style="width:100%;margin-bottom:0px;" placeholder="Kennwort" autocomplete="off">        
<button type="submit" class="btn btn-primary btn-block">anmelden</button>

Gruß
Hubert

[theBastian]

Super. Geht. Leider verstehe ich nicht alles, meine css-Kenntnisse sind zu schlecht.

Es reicht also nicht, den Typ anzugeben?

[HH]

Es reicht nicht aus die css Dateien einzubinden. Sie müssen auch durch Nutzung der in den Dateien enthaltenen Klassen Anwendung finden. Also z.B. mit

Code

class="form-control"
class="btn btn-primary btn-block"

Dann fehlt aber in deiner Maske noch die Meldung die angezeigt wird, wenn ein Fehler auftritt:

Code

<h3 class="form-signin-heading">Anmeldung</h3>
<div class="alert alert-danger" role="alert" style="padding:0px;"><b><Computed Value></b></div>

Auch als Durchgangs-HTML. Zeile verbergen wenn:

Code

reasonType = "0" | reasonType = ""

<Computed Value> ist berechneter Text mit der Formel (aus der default Anmeldemaske):

Code

sDefault 		:= "";
sNotEnough	:= "%1, Sie haben keinen Zugriff auf %2." + @NewLine + @NewLine + "Melden Sie sich mit den erforderlichen Rechten an:";
sInvalid		:= "Benutzername oder Kennwort sind nicht korrekt." ;
sExpired		:= "Ihre Anmeldung ist abgelaufen. Melden Sie sich erneut an:";
sOutOfSync	:= "%1, your login has been invalidated due to a timing issue with the login servers." + @NewLine + @NewLine + "(The servers may need to have their clocks synchronized to resolve this.)" + @NewLine + @NewLine + "Melden Sie sich erneut an:";
sLockedOrInvalid	:= "Sie wurden abgemeldet, oder Sie haben einen falschen Benutzernamen bzw. ein falsches Kennwort eingegeben." + @NewLine + @NewLine + "Melden Sie sich erneut an:";

"---DNT---";

User	:= @ProperCase(@Name([CN]; @UserName));
URL	:= @Right(redirectTo; "/");
URL	:= @If(@Contains(URL; "?"); @Left(URL; "?"); URL);

List	:= User:URL;
@For(n:=1; n<=@Elements(List); n:=n+1;
 sNotEnough := @ReplaceSubstring(sNotEnough; "%" + @Text(n); List[n]);
 sOutOfSync := @ReplaceSubstring(sOutOfSync; "%" + @Text(n); List[n])
);

@If(	reasonType = "0"; sDefault;
	reasonType = "1"; sNotEnough;
	reasonType = "2"; sInvalid;
	reasonType = "3"; sExpired;
	reasonType = "4"; sOutOfSync;
	reasonType = "5"; sLockedOrInvalid;
	sDefault
)

Gruß
Hubert

[theBastian]

Vielen Dank, nach dem Vergleichen der beide Code-Snippets dachte ich, dass es was damit zu tun hat. Deine Erklärung ist natürlich noch besser und macht es mir einfacher.

Fehler habe ich noch nicht drin, ich wollte erst mal, dass das Design funktioniert, wie gewünscht. Den Rest kann ich ja dann von der $$LoginUserForm übernehmen.