a bug after 3.3.3.4

Sciter Forums Bug reports a bug after 3.3.3.4

This topic contains 2 replies, has 2 voices, and was last updated by  gxlmyacc 6 months, 3 weeks ago.

  • Author
    Posts
  • #49157

    gxlmyacc
    Participant

    Hi, Andrew:
    see this demo:

    <html>
    <head>
    	<style>
    			html, body, div, span, ol, ul, li caption {
    				margin: 0;
    				padding: 0;
    				border: 0;
    				outline: 0;
    				vertical-align: baseline;
    				background: transparent;
    			}
    			body { line-height: 1; }
    			ol, ul { list-style: none; }
    
          @const BUSMENU_WIDTH_EXPAND: 193px; 
          @const BUSMENU_WIDTH_CLLOPSE: 40px; 
          @const BUSMENU_ITEMCAPTION_WIDTH_CLLOPSE: 30px; 
    
          .busMenu {
            width: 40px;
            height: 100%;
            background: #F3F3F3;
            border-right: 1px solid #8E8E8E;
            transition: width(linear, 300ms);
          }
    
          .busMenu[state=expand] {
            width: @BUSMENU_WIDTH_EXPAND;
          }
    
          .busMenu[state=cllopse] {
            width: @BUSMENU_WIDTH_CLLOPSE;
          }
    
          .busMenu > div.busMenuCaption {
            height: 44px;
            width: 1*;
            background-color: #E4EBF5;
          }
    
          .busMenu > div.busMenuCaption .busMenuCaptionTop {
            background-color: #ACBAC3;
            height: 35px;
            vertical-align: middle;
            padding-left: 4px;
            flow: horizontal;
          }
    
          .busMenu > div.busMenuCaption .busMenuCaptionTop span {
            display: block;
            width: 1*;
            height: 1*;
            color: white;
            font-weight: bold;
            font-size: 16px;
            text-align: center;
            vertical-align: middle;
            position:relative;
            left:-20px;
          }
    
          .busMenu .busMenuContainer {
            width:  1*;
            height: 1*;
            overflow-y: scroll-indicator;
          }
    
          .busMenu .busMenuContainer > ul {
            width: 1*;
            overflow-y: scroll-indicator;
          }
    
          .busMenu[state=cllopse] .busMenuContainer > ul {
            width: @BUSMENU_WIDTH_CLLOPSE;
          }
    
          .busMenu .busMenuContainer > ul li.busMenuItem > caption {
            height: 38px;  
            background-color: #F5F5F5;
            border-bottom: 1px solid #E5E5E5;
            flow: horizontal;
            padding-left: 10px;
          }
    
          .busMenu[state=cllopse] .busMenuContainer > ul li.busMenuItem > caption {
            width: @BUSMENU_ITEMCAPTION_WIDTH_CLLOPSE;
          }
    
          .busMenu .busMenuContainer > ul li.busMenuItem > caption:hover {
            color: #3D8BBC;
          }
    
          .busMenu .busMenuContainer > ul li.busMenuItem > caption img {
            display: block;
            margin-top: 1*;
            margin-bottom: 1*;
            margin-right: 10px;
          }
    
          .busMenu .busMenuContainer > ul li.busMenuItem > caption span {
            display: block;
            margin-top: 1*;
            margin-bottom: 1*;
          }
    
          .busMenu  .MenuSplt {
            height: 25px;
            vertical-align: middle;
            cursor: pointer;
            prototype: MenuSplit;
            border: 1px solid red;
          }
    
          .busMenu  .MenuSplt > .MenuSpltLine {
            border-bottom: 1px solid #E5E5E5;
            height: 1px;
          }
    
          .busMenu[state=cllopse] .busMenuItem[state] > caption { 
            background: none;
          }
    
          .busMenu[state=cllopse] span.caption,
          .busMenu[state=cllopse] .busMenuItemDetails,
          .busMenu:animating span.caption
          {
            visibility: none;
          }
    	</style>
      <script type="text/tiscript">
        class MenuSplit: Element {
          function onMouse(event) {
            if( event.type == Event.MOUSE_CLICK ) { 
              var busMenu = $(.busMenu);
              if (busMenu) {
              if (busMenu.@#state == "expand")
                busMenu.@#state = "cllopse"
              else
                busMenu.@#state = "expand"
              }
              return true;
            }
          }
        }
      </script>
    </head>
    <body>
      <div class="busMenu" state="expand">
        <div class="busMenuCaption">
    	  <div class="busMenuCaptionTop">
    		<span.caption>Top Caption</span>
    	  </div>
    	</div>
    	<div class="busMenuContainer">
        <ul>
    	  <li id="busmenu01" class="busMenuItem">
    	    <caption.icon>
    		  <span.caption>Menu 1</span>
    	  	</caption>
    	  </li>
    	  <li id="busmenu02" class="busMenuItem">
    	    <caption.icon title>
    		    <span.caption>Menu2</span>
    	     </caption>
    	  </li>
    	</ul>
    	<div class="MenuSplt">
    	 <div class="MenuSpltLine"></div>
    	</div>
        </div>
      </div>
    </body>
    </html>

    and here was open in V4.0.0.1:
    https://p1.bpimg.com/567571/a4aa0c1737ea5568.gif
    and here was open in V3.3.3.4:
    https://p1.bpimg.com/567571/c3aac172934d47fc.gif

  • #49164

    Andrew
    Keymaster

    I’ve fixed that here.

    But the whole design is quite ugly to be honest. And on high-resolution monitor it looks pretty bad due to used px units.

    Yet, if you want animated side bar menu then usually it is done other way.

    Check sdk/samples/animated-effects/hamburger-test.htm

You must be logged in to reply to this topic.