Make file modale chooser and complete user profile

core/static/core/form.css

@@ -2,6 +2,11 @@
 Super Form Reset
 ----------------------------------------------------------------------------------------------------*/
 
+form {
+    margin: 0px auto;
+    width: 60%;
+}
+
 input,
 label,
 select,
@@ -22,6 +27,10 @@ textarea
     font-family: Arial;
 }
 
+label {
+    min-width: 50%;
+}
+
 /* Remove the stupid outer glow in Webkit */
 input:focus
 {
@@ -70,7 +79,8 @@ input[type=tel],
 input[type=text],
 input[type=time],
 input[type=url],
-input[type=week]
+input[type=week],
+textarea
 {
     background-color: white;
     border: 1px solid black;

core/static/core/js/script.js

@@ -1,11 +1,29 @@
 console.log('Guy');
 
 $( function() {
-    dialog = $( ".choose_file_widget" ).dialog({
+    buttons = $(".choose_file_button");
+    popups = $(".choose_file_widget");
+    popups.dialog({
         autoOpen: false,
         modal: true,
+        width: "80%",
+        minHeight: "300",
+        buttons: {
+            "Choose": function() {
+                console.log($("#file_id"));
+                $("input[name="+$(this).attr('name')+"]").attr('value', $("#file_id").attr('value'));
+                $( this ).dialog( "close" );
+            }
+        }
+    });
+    $('.select_date').datepicker({
+        changeMonth: true,
+        changeYear: true
     });
     $( ".choose_file_button" ).button().on( "click", function() {
-        dialog.dialog( "open" );
+        popup = popups.filter("[name="+$(this).attr('name')+"]");
+        console.log(popup);
+        popup.html('<iframe src="/file/popup" width="95%"></iframe><span id="file_id" value="null" />');
+        popup.dialog({title: $(this).attr('name')}).dialog( "open" );
     });
 } );

core/static/core/style.css

@@ -118,12 +118,16 @@ ul, ol {
 }
 table {
     width: 100%;
+    font-size: 0.90em;
 }
 td {
     padding: 4px;
     border: solid 1px black;
     border-collapse: collapse;
     vertical-align: top;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 0;
 }
 td>ul {
     margin-top: 0px;
@@ -152,7 +156,27 @@ tbody>tr:hover {
 }
 
 /*-----------------------------USER PROFILE----------------------------*/
-.user_profile {
+#user_profile {
+    width: 80%;
+    margin: 0px auto;
+    padding: 10px;
+    overflow: auto;
+}
+#user_profile h4 { border-bottom: 1px solid grey; max-width: 60%; }
+#user_profile #pictures {
+   width: 30%;
+   float: right;
+   font-style: italic;
+}
+#user_profile #nickname {
+   font-style: italic;
+}
+#user_profile #pictures img {
+   max-width: 96%;
+   max-height: 96%;
+}
+#user_profile .promo_pict {
+   height: 45px;
 }
 /*---------------------------------PAGE--------------------------------*/
 .page_content {