NIHVIVO-556: Making name selectors and markup consistent (using dash in between words VS camel notation), adding more aria roles, shortening selector names, just continuing cleaning markup for templates and optimizing css files.

webapp/web/css/login.css

@@ -2,27 +2,27 @@
 
 /* styles for log in */
 
-#log-in-form label, 
+#login-form label, 
-#log-in-form input.text,
+#login-form input.text,
-#log-in-form  #password,
+#login-form #password,
-#log-in-form  #confirmPassword{
+#login-form #confirmPassword{
     display:block;  
 }
-#log-in-form label.label-remember-me{
+#login-form label.label-remember-me{
     display:block;
 }
-#log-in-form p.submit {
+#login-form p.submit {
     float:left;
     margin-bottom:0;
 }
-#log-in-form input.checkbox-remember-me {
+#login-form input.checkbox-remember-me {
     float:left;
     height:14px;
     padding:0;
     margin-top:13px;
     margin-left:20px;
 }
-#log-in-form .label-remember-me {
+#login-form .label-remember-me {
     display:block;
     float:left;
     width:100px;
@@ -40,24 +40,22 @@ p.request-account {
     width:219px;
     float:left;
 }
-
+#login-form p.external-auth {
-#log-in-form p.external-auth {
     margin-left: 36px;
 }
-
+#error-alert{
-#errorAlert {
     color:#900;
-    padding:0px;
+    padding:10px;
     margin-bottom:5px;
     height:30px;
 }
-#errorAlert img {
+#error-alert img {
     float:left;
     margin:0;
     padding:0;
     vertical-align:middle;  	
 }
-#errorAlert p {
+#error-alert p {
     padding-left:30px;
     font-size:0.9em;
     line-height:30px;
@@ -96,70 +94,4 @@ p.passwordNote {
 .or {
     display:inline;
     vertical-align:middle;
-}
+}
-
-/*
-#formLogin {
-    width:600px;
-    padding:0px;
-    margin:0px;
-    text-align:left;
-    border:1px solid red;
-}
-.noOuterBox {
-    width:340px;
-    padding:0px;
-    border: none;
-    margin:0px;
-}
-#formLogin h2 {
-    font-size:1.3em;
-    line-height:1em;
-    margin-top:0px;
-    margin-bottom:1em;
-    color:#111;
-}
-#formLogin h6 {
-    font-size:1.2em;
-    line-height:1em;
-    margin-top:0px;
-    margin-bottom:1em;
-    color:#111;
-}
-#formLogin form {
-    margin: 0;
-    padding: 0;
-}
-#formLogin label {
-    display:block;
-    margin-bottom:0.5em;
-    font-weight:bold;
-}
-#formLogin label span {
-    color:#900;
-}
-
-#formLogin input {
-    display:block;
-    margin-bottom:1.5em;
-    width: 200px;
-}
-#formLogin textarea {
-    width: 300px;
-    display:block;
-    margin-bottom:1.5em;
-}
-#formLogin .checkBox {
-    display:inline;
-    width:1em;
-    margin-bottom: 1em;
-}
-#formLogin p.small {
-    font-size: 0.8em;
-}
-#formLogin input.submit {
-    width: auto;
-    padding: 0 0.9em;
-    display:inline;
-}
-*/

webapp/web/css/revision.css

@@ -11,9 +11,7 @@
 }
 #revision-levels{
     width:375px;
-    float:left;
+    float:left; 
-
-   
 }
 #revision-levels caption{
     padding: 10px 0 12px 0;

webapp/web/js/login/loginUtils.js

@@ -9,8 +9,8 @@ $(document).ready(function(){
     $('.focus').focus();
     
     // fade out error alerts
-    //$('#errorAlert').css('display', 'none');
+    //$('#error-alert').css('display', 'none');
-    //$('#errorAlert').fadeIn(500);
+    //$('#error-alert).fadeIn(500);
 
 });
 

webapp/web/templates/freemarker/body/contactForm/contactForm-error.ftl

@@ -6,7 +6,7 @@
 
     <#if errorMessage?has_content>       
 
-        <div id="errorAlert"><img src="${urls.siteIcons}/iconAlert.png"/>
+        <div id="error-alert"><img src="${urls.siteIcons}/iconAlert.png"/>
                   <p>${errorMessage}</p>
            </div>
        

webapp/web/templates/freemarker/body/imageUpload/imageUpload-newImage.ftl

@@ -11,7 +11,7 @@ ${stylesheets.addFromTheme("/css/uploadImages.css")}
     <h2>Photo Upload</h2>
               
     <#if errorMessage??>
-        <div id="errorAlert"><img src="${urls.siteIcons}/iconAlert.png"/>
+        <div id="error-alert"><img src="${urls.siteIcons}/iconAlert.png"/>
             <p>${errorMessage}</p>
         </div>
     </#if>

webapp/web/templates/freemarker/body/imageUpload/imageUpload-replaceImage.ftl

@@ -10,7 +10,7 @@ ${stylesheets.addFromTheme("/css/uploadImages.css")}
 <div id="photoUploadContainer">
     <h2>Photo Upload</h2>
     <#if errorMessage??>
-        <div id="errorAlert"><img src="${urls.siteIcons}/iconAlert.png"/>
+        <div id="error-alert"><img src="${urls.siteIcons}/iconAlert.png"/>
             <p>${errorMessage}</p>
         </div>
     </#if>

webapp/web/templates/freemarker/body/login.ftl

@@ -2,7 +2,4 @@
 
 <#-- Main template for the login page -->
 
-<#-- Use this container to define styles that apply to the login widget only on the dedicated login page. -->
+<@widget name="login" />
-<section id="login-full-page">
-    <@widget name="login" />
-</section>

webapp/web/templates/freemarker/widgets/widget-login.ftl

@@ -14,7 +14,7 @@
 
 <#macro loginForm>
 
-    <section id="log-in">
+    <section id="login">
         <h2>Log in</h2>
 
         <noscript>
@@ -31,12 +31,12 @@
         </#if>
        
         <#if errorMessage??>
-            <div id="errorAlert"><img src="${urls.siteIcons}/iconAlert.png" alert="Error alert icon"/>
+            <div id="error-alert"><img src="${urls.siteIcons}/iconAlert.png" alert="Error alert icon"/>
                 <p>${errorMessage}</p>
             </div>
         </#if>
        
-        <form  role="form" id="log-in-form" action="${formAction}" method="post" name="log-in-form" />
+        <form  role="form" id="login-form" action="${formAction}" method="post" name="login-form" />
             <label for="email">Email</label>
             <input class="text-field" name="loginName" id="loginName" type="text" required />
 
@@ -61,16 +61,16 @@
 </#macro> 
 
 <#macro forcePasswordChange>
-    <section id="log-in">
+    <section id="login">
         <h2>Log in</h2>
            
             <#if errorMessage??>
-                <div id="errorAlert" role="alert"><img src="${urls.siteIcons}/iconAlert.png" width="24" height="24" alert="Error alert icon"/>
+                <div id="error-alert" role="alert"><img src="${urls.siteIcons}/iconAlert.png" width="24" height="24" alert="Error alert icon"/>
                     <p>${errorMessage}</p>
                 </div>
             </#if>
            
-            <form role="form" id="log-in-form" action="${formAction}" method="post" name="log-in-form" required />
+            <form role="form" id="login-form" action="${formAction}" method="post" name="login-form" required />
                 <label for="newPassword">New Password</label>
                 <input id="newPassword" class="focus text-field" type="password" name="newPassword"  required />