popin-refactor

gistfile1.haml

  - # dont think to much :-) keep it simple and embrace jQuery UI component lib
  %li
    %ul#c_evt_popin
      %li.author= "event creator: #{@event.owner.email}"
      %li.created_at= "created on: #{@event.created_at}"
      %li.nbpict= "event photos: "
      %li.nbpict= "event date: "
      %li.nbpict= "contributors: #{@event.sources.size}"

-content_for :additional_bottom_js do
  - # 1 modification, : let title bar be..
  :javascript                                                                                                                                                
    sharypic.jq.popin_event_dialog = $("#c_evt_popin").dialog({                                                                                              
      modal: false,                                                                                                                                          
      resizable: false,                                                                                                                                      
      draggable: false,   
      position: ['top', $("#header_evt").height() + 10], /*dont know how to set this with css..*/
      width: 252,                                                                                                            
      dialogClass: 'evt_popin',                                                                                                                              
      autoOpen: false,                                                                                                                                       
      show: 'blind'                                                                                                                                          
    });

gistfile2.sass

      /*use nesting instead of chained. 
       * dialog theming based on jquery ui theming
       * see: http://jqueryui.com/demos/dialog/
       */
      /* don't use .ui-dialog cause we are planning to use others... */
      .sticked .evt_popin {
	margin: 0;
	border: none;
	background: none;

        /*use title bar as popin opener*/
	.ui-dialog-titlebar {
          background: transparent url(../../images/sacha/popin/popin_top.png) 0px 0px no-repeat;
          height: 59px;
          width: 100%;
          padding: 0; margin: 0;
          border: none;
	  visibility: visible;
	}
        
        /*hide few jqueryui things cause title bar is now fully displayed*/
	.ui-corner-all {
	  -moz-border-radius: 0;
          -webkit-border-radius: 0;
	  border-radius: 0;
        }
        .ui-dialog-titlebar-close {
          display: none;
      }
      /*tricky tips, use #c_evt_popin with padding-bottom to theme the bottom of the popin*/
      #c_evt_popin {
        display:none;
        border: none;
        width: 252px;
        margin: 0;
        padding: 0 0 29px; /*height of the popin's bottom, followed by it's image*/
        background: transparent url(../../images/sacha/popin/popin_bottom.png) bottom left no-repeat;
        list-style-type: none; /*list style type is applied to UL, not LI*/
      }
        /* theme the middle of the popin, with it's natural content*/
        #c_evt_popin li{
          background: transparent url(../../images/sacha/popin/popin_middle.png) 0px 0px repeat-y;
          padding: 0 10px;
        }