accordion variant on the profile page TODO make it look better (register still...

accordion variant on the profile page TODO make it look better (register still has the grey/red/white paper style which looks nicer)

static/css/comex_user.css

@@ -19,11 +19,20 @@ body {
 }
 
 
-/* reg, profile, login, etc.... */
+/* main content for all new pages */
+div.my-box {
+}
+
+/* form content for reg, profile, login, etc.... */
 div.uform {
+  padding: 15px 30px 53px 30px;
+  margin: 38px 38px 8px 38px;
   background-color: #ddd;
-  padding: 20px 40px 70px 40px;
-  margin: 50px 50px 10px 50px;
+}
+
+/* same but to put a panel-body inside */
+div.uform-nobg {
+  margin: 38px 38px 8px 38px;
 }
 
 p#doors_ret_msg {
@@ -144,8 +153,14 @@ input#my-captcha{
 /* like a dialog icon */
 .glyphicon-float-left {
   float: left ;
+  display: block;
   font-size: 150% ;
-  vertical-align:text-top;
+  margin-top: -.2em;
+}
+.glyphicon-float-right {
+  float: right ;
+  font-size: 80% ;
+  margin-top: -.5em;
 }
 
 /* page sections: style snippets from old bootstrap h2 */
@@ -154,6 +169,13 @@ h2.oldstyle {
   font-weight: bold;
   /*font-size: 2.5em;*/
 }
+/* collapsible sections */
+h2.ccsection {
+  padding-top: 1em;
+  font-size: 1.5em;
+  font-family: "Droid Sans", Calibri, Ubuntu, sans-serif;
+  font-weight: bold;
+}
 
 /* big categories: like form sections etc. */
 h3.formcat {
@@ -161,7 +183,6 @@ h3.formcat {
   padding-top: 1em;
   font-weight: bold;
   color: #910;
-  /*TODO accordeon*/
 }
 
 h3.formcatfirst {
@@ -181,6 +202,48 @@ h3.formcatfirst {
 }
 
 
+/* "accordeon": collapsible formcats */
+div.ccsection-wrap {
+    margin: 0 ;
+    padding: 0 ;
+    background-color: transparent;
+}
+a.ccsection-toggle  {
+    margin: 0 ;
+    padding: 0 ;
+}
+a.ccsection-toggle:hover, a.ccsection-toggle:focus {
+    text-decoration: none;
+}
+.ccsection-toggle h2.ccsection, .ccsection-toggle:focus h2.ccsection {
+    color: #333 ; /* passive: like normal body color */
+}
+.ccsection-heading:hover h2.ccsection {
+    color: #23A ; /* active: like heading color */
+    text-decoration: none;
+}
+div.ccsection-heading {
+    padding: 0 1.5em .3em 1.5em ;
+    /*width: 25em;*/
+    text-align: left;
+
+    /*background-color: transparent;*/
+    background-color: #ddd;
+    border-radius: .8em .8em 0 0;
+}
+
+div.ccsection-uform-body {
+    background-color: #ddd;
+    border-radius: 0 ;
+    padding: 15px 30px 53px 30px;
+}
+
+div.ccsection-footer {
+    background-color: #ddd;
+    border-radius: 0 0 .8em .8em ;
+    padding: 0 ;
+}
+
 /**/
 ul.minilabels {
   padding-top: .5em;
@@ -207,6 +270,12 @@ li.minilabel {
 }
 
 
+/**/
+.our-vcard {
+    line-height: 110%;
+}
+
+
 /**/
 .smallspacerrow {
   height: 2em;
@@ -223,15 +292,16 @@ li.minilabel {
 
 /* the main validation message (a special legend) */
 #main_message {
-  color: white ;
+  /*color: white ;*/
   font-size: 140%;
   text-align:center;
   line-height: 1.5em;
 
-  background-color: #988 ;
-  border-radius: 2em;
-  padding: 1em 3em;
+  /*background-color: #988 ;
+  border-radius: 2em;*/
+  padding: 3em 3em 1em 3em;
   margin-bottom: 2em;
+  border: none;
 }
 
 

static/js/comex_page_profile_controllers.js

@@ -38,8 +38,11 @@ function completionAsYouGo() {
     cmxClt.uform.mainMessage.style.display = 'block'
     cmxClt.uform.mainMessage.innerHTML = "Checking the answers..."
 
+    var diagnosticParams = {'fixResidue': true,
+                            'ignore': ['email']}
+
     var diagnostic = cmxClt.uform.testFillField(cmxClt.uform.theForm,
-                                                {'fixResidue': true})
+                                                diagnosticParams)
 
     var valid = diagnostic[0]
     var mandatoryMissingFields = diagnostic[1]

static/js/comex_user_shared.js

@@ -107,6 +107,13 @@ var cmxClt = (function() {
       if (elt.value != "")   elt.style.fontWeight = "bold"
     }
 
+    // insert after
+    // cf. stackoverflow.com/questions/4793604
+    function insertAfter(referenceNode, newNode) {
+        referenceNode.parentNode.insertBefore(
+            newNode, referenceNode.nextSibling
+        )
+    }
 
     // ===============================
     // common vars to all user forms
@@ -120,6 +127,8 @@ var cmxClt = (function() {
     cC.uform.initialize
     cC.uform.testFillField
     cC.uform.stampTime
+    cC.uform.anchorLabels
+    cC.uform.multiSelect
     cC.uform.mainMessage = document.getElementById('main_message')
     cC.uform.submitButton = document.getElementById('form_submit')
     cC.uform.timestamp = document.getElementById('last_modified_date')
@@ -131,6 +140,22 @@ var cmxClt = (function() {
     // function definitions
     // =====================
 
+
+    // stub for multiple textinput like keywords
+    //   => UX shows newInput where user enters words one by one
+    //   => validate words become removable "pills"
+    //   => result is concatenated texts in hidden input.#fName
+    // TODO finalize and add to initialize
+    cC.uform.multiTextinput = function (fName) {
+        var normalInput = document.getElementById(fName)
+        normalInput.hidden = true
+
+        var newTextArrayInput = document.createElement('input');
+        newTextArrayInput.class = "form-control autocomp"  // TODO use autocomp
+        cC.insertAfter(normalInput, newTextArrayInput)
+    }
+
+
     // replace(fname =~ /<label for="([^"]+)"/,
     //                  `<label for="${fname}" id="${fname}_lbl"`)
     // use at init
@@ -183,6 +208,7 @@ var cmxClt = (function() {
         if (!params)                           params = {}
         if (params.doHighlight == undefined)   params.doHighlight = true
         if (params.fixResidue == undefined)    params.fixResidue = false
+        if (params.ignore == undefined)        params.ignore = []
 
         // let's go
         for (var i in cC.COLS) {
@@ -215,8 +241,16 @@ var cmxClt = (function() {
 
           // filled/not filled validation
           // ----------------------------
-          // skip non-plsfill elements
-          if (fieldGroup != 'plsfill') continue ;
+
+          // skipping params.ignore and non-plsfill elements
+          var ignoreFlag = false
+          for (var j in params.ignore) {
+            if (params.ignore[j] == fieldName) {
+                ignoreFlag = true
+                break
+            }
+          }
+          if (ignoreFlag || fieldGroup != 'plsfill') continue ;
 
           // get a human-readable label
           var labelElt = document.querySelector('label[for='+fieldName+']')
@@ -252,7 +286,7 @@ var cmxClt = (function() {
             //   console.log("otherMissingField", fieldName)
           }
 
-          else if (params.doHighlight) {
+          else if (params.doHighlight && labelElt) {
               labelElt.style.backgroundColor = ""
           }
         } // end for val in cC.COLS