include onelab_marko in all views
authorThierry Parmentelat <thierry.parmentelat@inria.fr>
Mon, 4 Nov 2013 14:23:53 +0000 (15:23 +0100)
committerThierry Parmentelat <thierry.parmentelat@inria.fr>
Mon, 4 Nov 2013 14:23:53 +0000 (15:23 +0100)
harmonize 3 form views (register, slice request, and support) in terms of style, and avoid blinking hints as far as possible

portal/forms.py
portal/static/css/registration.css
portal/templates/contact.html
portal/templates/registration_view.html
portal/templates/slice-request-view.html
ui/templates/base.html
unfold/page.py
unfold/static/css/onelab_marko.css

index 6a23e78..9bcf8fa 100644 (file)
@@ -64,27 +64,27 @@ class SliceRequestForm(forms.Form):
 
     slice_name = forms.CharField(
         widget=forms.TextInput(attrs={'class':'form-control'}), 
-        help_text="Enter a name for the slice you wish to create")
+        help_text="The name for the slice you wish to create")
     authority_hrn = forms.ChoiceField(
         widget    = forms.Select(attrs={'class':'form-control'}),
         choices   = [],
-        help_text = "Please select an authority responsible for vetting your slice")
+        help_text = "An authority responsible for vetting your slice")
     number_of_nodes = forms.DecimalField(
         widget    = forms.TextInput(attrs={'class':'form-control'}),
-        help_text = "Enter the number of nodes you expect to request (informative only)")
+        help_text = "The number of nodes you expect to request (informative)")
     type_of_nodes = forms.CharField(
         widget    = forms.TextInput(attrs={'class':'form-control'}),
-        help_text = "Enter the type of nodes you expect to request (informative only)")
+        help_text = "The type of nodes you expect to request (informative)")
     purpose = forms.CharField(
         widget    = forms.Textarea(attrs={'class':'form-control'}),
-        help_text = "Enter the purpose of your experiment (informative only)")
+        help_text = "The purpose of your experiment (informative)")
     email = forms.EmailField(
         widget    = forms.TextInput(attrs={'class':'form-control'}),
-        help_text = "Enter your email address")
+        help_text = "Your email address")
     cc_myself = forms.BooleanField(
         widget    = forms.CheckboxInput(attrs={'class':'form-control'}),
         required  = False,
-        help_text = "Please indicate whether you would like to be CC'ed to the request email")
+        help_text = "If you'd like to be cc'ed on the request email")
 
     def __init__(self, *args, **kwargs):
         initial =  kwargs.get('initial', {})
@@ -106,5 +106,5 @@ class SliceRequestForm(forms.Form):
             self.fields['authority_hrn'] = forms.ChoiceField(
                 widget    = forms.Select(attrs={'class':'form-control'}),
                 choices   = authority_hrn,
-                help_text = "Please select an authority responsible for vetting your slice")
+                help_text = "An authority responsible for vetting your slice")
     
index 1a274a2..5fe8321 100644 (file)
@@ -29,3 +29,8 @@ div.form-group:hover p.form-hint {
     -webkit-border-radius: 7px;
     border-radius: 7px;
 }
+
+/* avoid blinking effect with the rhs hints */
+select#auth_list {
+    height: 34px;
+}
index 2652647..43adfa5 100644 (file)
   or <a href="http://trac.myslice.info/" >visit us</a></h4>
 </div>
 
+<!-- no hint for this form, moreover we need more space to write stuff down
+     so we use a 3-6-3 layout -->
 <div class='well'>
   <form class="cmxform form-horizontal" id="commentForm" action="#" method="post" role="form">{% csrf_token %}
   <fieldset>
     {% for field in form %}
     <div class="form-group">
-      <label for="{{ field.html_name }}" class="col-xs-4 control-label">{{ field.label }}</label>
-      <div class="col-xs-4"> {{ field.errors }} {{ field }} <p class="form-hint">{{ field.help_text }}</p> </div>
+      <label for="{{ field.html_name }}" class="col-xs-3 control-label">{{ field.label }}</label>
+      <div class="col-xs-6"> {{ field.errors }} {{ field }} <p class="form-hint">{{ field.help_text }}</p> </div>
     </div>
     {% endfor %}
-    <button class="submit btn btn-default col-md-offset-4 col-xs-4" type="submit">Send to Support</button>
+    <button class="submit btn btn-default col-xs-12" type="submit">Send to Support</button>
   </fieldset>
   </form>
 </div>
index 3d1010c..2780d60 100644 (file)
     <fieldset>
     {% csrf_token %}
     <div class="form-group">
-      <label for="firstname" class="col-xs-4 control-label">First Name</label>
+      <label for="firstname" class="col-xs-2 control-label">First Name</label>
       <div class="col-xs-4">
        <input type="text" name="firstname" class="form-control" minlength="2" value="{{ firstname }}" placeholder="First Name" required />
       </div>
-      <div class="col-xs-4"> <p class="form-hint">Enter your first name</p> </div>
+      <div class="col-xs-6"> <p class="form-hint">Enter your first name</p> </div>
     </div>
     <div class="form-group">
-      <label for="lastname" class="col-xs-4 control-label">Last Name</label>
+      <label for="lastname" class="col-xs-2 control-label">Last Name</label>
       <div class="col-xs-4">
        <input type="text" name="lastname" size="25" class="form-control" minlength="2" value="{{ lastname }}" placeholder="Last Name" required />
       </div>
-      <div class="col-xs-4"><p class="form-hint">Enter your last name</p></div>
+      <div class="col-xs-6"><p class="form-hint">Enter your last name</p></div>
     </div>
     <div class="form-group">
-      <label for="auth_list" class="col-xs-4 control-label">Authority</label>
+      <label for="auth_list" class="col-xs-2 control-label">Authority</label>
       <div class="col-xs-4">
        <select id="auth_list" name="authority_hrn" size="1" class="form-control" required>
          {% if authorities %}
@@ -47,7 +47,7 @@
          {% endif %}
        </select>
       </div>
-      <div class="col-xs-4"><p class="form-hint">Please select an authority responsible for vetting your account</p></div>
+      <div class="col-xs-6"><p class="form-hint">An authority responsible for vetting your account</p></div>
     </div>
 
        <!-- LOGIN
        user.
        -->
     <div class="form-group">
-      <label for="login" class="col-xs-4 control-label">Login</label>
+      <label for="login" class="col-xs-2 control-label">Login</label>
       <div class="col-xs-4">
          <input type="text" name="login" size="25" class="form-control" minlength="2" value="{{ login }}" placeholder="Login" required />
       </div>
-      <div class="col-xs-4"><p class="form-hint">Enter your login</p></div>
+      <div class="col-xs-6"><p class="form-hint">Enter your login</p></div>
     </div>
     
     <div class="form-group">
-      <label for="email" class="col-xs-4 control-label">Email</label>
+      <label for="email" class="col-xs-2 control-label">Email</label>
       <div class="col-xs-4">
        <input type="email" name="email" size="25"  class="form-control" value="{{ email }}" required/> 
       </div>
-      <div class="col-xs-4"><p class="form-hint">Enter a valid email address</p></div>
+      <div class="col-xs-6"><p class="form-hint">Enter a valid email address</p></div>
     </div>
     <div class="form-group">
-      <label for="password" class="col-xs-4 control-label">Password</label>
+      <label for="password" class="col-xs-2 control-label">Password</label>
       <div class="col-xs-4">
        <input type="password"  id="password" name="password"   class="form-control" minlength="4" value="{{ password }}" required/> 
       </div>
-      <div class="col-xs-4"><p class="form-hint">Enter password</p></div>
+      <div class="col-xs-6"><p class="form-hint">Enter password</p></div>
     </div>
     <div class="form-group">
-      <label for="password" class="col-xs-4 control-label">Confirm Password</label>
+      <label for="password" class="col-xs-2 control-label">Confirm Password</label>
       <div class="col-xs-4">
        <input type="password"  id="confirmpassword" name="confirmpassword"   minlength="4" class="form-control" 
               value="" placeholder="Confirm Password" required/>
       </div>
-      <div class="col-xs-4"><p class="form-hint">Retype the password</p></div>
+      <div class="col-xs-6"><p class="form-hint">Retype the password</p></div>
     </div>
     <div class="form-group">
-      <label for="question" class="col-xs-4 control-label">My Keys</label>
+      <label for="question" class="col-xs-2 control-label">My Keys</label>
       <div class="col-xs-4">
        <select name="question" class="form-control" id="key-policy" required>        
          <option value="generate">Generate key pairs for me </option>
          <option value="upload">Upload my public key </option>
        </select>
       </div>
-      <div class="col-xs-4"><p class="form-hint">Genkey: Account Delegation Automatic (Recommended)</p> </div>
+      <div class="col-xs-6"><p class="form-hint">Genkey: Account Delegation Automatic (Recommended)</p> </div>
     </div>
     <div class="form-group" style="display:none;" id="upload_key">
-      <label for="file" class="col-xs-4 control-label">Upload public key</label>
+      <label for="file" class="col-xs-2 control-label">Upload public key</label>
       <div class="col-xs-4">
        <input type="file" name="user_public_key" class="form-control" id="user_public_key" required/>
        <p class="warning" id="pkey_del_msg">Once your account is validated, you will have to delegate your credentials manually using SFA [Advanced users only]</p>
       </div>
-      <div class="col-xs-4"><p class="form-hint">Account Delegation: Manual (Advanced Users)</p></div>
+      <div class="col-xs-6"><p class="form-hint">Account Delegation: Manual (Advanced Users)</p></div>
     </div>
     <div class="form-group" id="register">
-      <button class="submit btn btn-default col-md-offset-4 col-xs-4" type="submit">Register</button>
+      <button class="submit btn btn-default col-xs-12" type="submit">Register</button>
     </div>
     </div>
   </fieldset>
index 6aede04..502e380 100644 (file)
   <fieldset>
     {% for field in form %}
     <div class="form-group">
-      <label for="{{ field.html_name }}" class="col-xs-4 control-label">{{ field.label }}</label>
+      <label for="{{ field.html_name }}" class="col-xs-2 control-label">{{ field.label }}</label>
       <div class="col-xs-4"> {{ field.errors }} {{ field }} </div>
-      <div class="col-xs-4"> <p class="form-hint">{{ field.help_text }}</p> </div>
+      <div class="col-xs-6"> <p class="form-hint">{{ field.help_text }}</p> </div>
     </div>
     {% endfor %}
-    <button class="submit btn btn-default col-md-offset-4 col-xs-4" type="submit">Request Slice</button>
+    <button class="submit btn btn-default col-xs-12" type="submit">Request Slice</button>
   </fieldset>
   </form>
 </div>
index 8c49b4a..2cf0b0a 100644 (file)
@@ -10,7 +10,6 @@
 {{ header_prelude }}
 {% block head %} {% endblock head %}
 </head>{# let's add these ones no matter what #}
-{% insert_str prelude "css/layout-unfold2.css" %}
 {% insert_str prelude "js/jquery.min.js" %}
 {% insert_str prelude "js/jquery.html5storage.min.js" %}
 {% insert_str prelude "js/messages-runtime.js" %}
 {% insert_str prelude "js/plugin.js" %}
 {% insert_str prelude "js/manifold.js" %}
 {% insert_str prelude "js/topmenu.js" %}
+{% insert_str prelude "css/layout-unfold2.css" %}
 {% insert_str prelude "css/manifold.css" %}
+{% insert_str prelude "css/plugin.css" %}
+{% insert_str prelude "css/onelab_marko.css" %}
 <body>
 {% block container %}
   {% block topmenu %}
index 034b33b..bc44cd1 100644 (file)
@@ -33,8 +33,8 @@ class Page:
         # queue of queries with maybe a domid, see enqueue_query
         self._queue=[]
         # global prelude object
-        self.prelude=Prelude(css_files=[
-                'css/plugin.css','css/onelab_marko.css',])
+#        self.prelude=Prelude(css_files=['css/plugin.css','css/onelab_marko.css',])
+        self.prelude=Prelude()
 
     # record known plugins hashed on their domid
     def record_plugin (self, plugin):
index 8fa53dd..39ce57f 100644 (file)
@@ -6,7 +6,7 @@
 
 .container {
     padding: 0 !important;
-    color: #fff;
+/*    color: #fff; */
 }
 
 .container h1 {