patch: New right menu on mobile - default behavior fixed
This commit is contained in:
		
				
					committed by
					
						
						Jean-Baptiste Pasquier
					
				
			
			
				
	
			
			
			
						parent
						
							c4e3e6a2ce
						
					
				
				
					commit
					db3d158116
				
			@ -44,12 +44,12 @@ Array.from(buttons).forEach(button =>
 | 
			
		||||
    if (button.classList.contains('icon-close')) {
 | 
			
		||||
      button.classList.remove('icon-close');
 | 
			
		||||
      button.classList.add('icon-options-vertical');
 | 
			
		||||
      rightMenu.setAttribute('hidden', '');
 | 
			
		||||
      rightMenu.classList.add('sm-hidden');
 | 
			
		||||
    }
 | 
			
		||||
    else {
 | 
			
		||||
      button.classList.remove('icon-options-vertical');
 | 
			
		||||
      button.classList.add('icon-close');
 | 
			
		||||
      rightMenu.removeAttribute('hidden');
 | 
			
		||||
      rightMenu.classList.remove('sm-hidden');
 | 
			
		||||
    };
 | 
			
		||||
  })
 | 
			
		||||
)
 | 
			
		||||
@ -66,12 +66,12 @@ contentControls.forEach(
 | 
			
		||||
        if (contentButton.classList.contains('icon-close')) {
 | 
			
		||||
          contentButton.classList.remove('icon-close');
 | 
			
		||||
          contentButton.classList.add('icon-options-vertical');
 | 
			
		||||
          contentSidebar.setAttribute('hidden', '');
 | 
			
		||||
          contentSidebar.classList.add('sm-hidden');
 | 
			
		||||
        }
 | 
			
		||||
        else {
 | 
			
		||||
          contentButton.classList.remove('icon-options-vertical');
 | 
			
		||||
          contentButton.classList.add('icon-close');
 | 
			
		||||
          contentSidebar.removeAttribute('hidden');
 | 
			
		||||
          contentSidebar.classList.remove('sm-hidden');
 | 
			
		||||
        };
 | 
			
		||||
      })  
 | 
			
		||||
    )
 | 
			
		||||
 | 
			
		||||
@ -69,7 +69,9 @@ main {
 | 
			
		||||
 | 
			
		||||
    /* Styles use with JS to open/close the sidebar */
 | 
			
		||||
    &.jsRightMenu {
 | 
			
		||||
      display: block;
 | 
			
		||||
      @media (min-width: 768,01px) {
 | 
			
		||||
        display: block;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      @media (max-width: 768px) {
 | 
			
		||||
        position: fixed;
 | 
			
		||||
 | 
			
		||||
@ -57,7 +57,7 @@
 | 
			
		||||
          )
 | 
			
		||||
            include partials/admin/page-admin-chat-create.pug
 | 
			
		||||
 | 
			
		||||
  nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
 | 
			
		||||
  nav.jsRightMenu.segment.sm-hidden.text-disable-selection.sidebar.whitespace-normal(role='navigation')
 | 
			
		||||
    .segment.whitespace-normal.text-color-heading.text-bold
 | 
			
		||||
      ul
 | 
			
		||||
        li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
 | 
			
		||||
 | 
			
		||||
@ -41,7 +41,7 @@
 | 
			
		||||
          )
 | 
			
		||||
            include partials/circle/page-circle-polls.pug
 | 
			
		||||
 | 
			
		||||
nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
 | 
			
		||||
nav.jsRightMenu.segment.sm-hidden.text-disable-selection.sidebar.whitespace-normal(role='navigation')
 | 
			
		||||
  solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route=`${component.route}-chat`)
 | 
			
		||||
    ul
 | 
			
		||||
      li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
 | 
			
		||||
 | 
			
		||||
@ -22,7 +22,7 @@
 | 
			
		||||
    )
 | 
			
		||||
      include partials/project/page-project-picture.pug
 | 
			
		||||
 | 
			
		||||
nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
 | 
			
		||||
nav.jsRightMenu.segment.sm-hidden.text-disable-selection.sidebar.whitespace-normal(role='navigation')
 | 
			
		||||
  solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route=`${component.route}-chat`)
 | 
			
		||||
    ul
 | 
			
		||||
      li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
 | 
			
		||||
  div.segment.half.sm-hidden.text-right
 | 
			
		||||
    solid-link(class="backlink", next=`admin-${getRoute('chat', true)}` data-trans='circle.create.backlink')
 | 
			
		||||
  div.segment.lg-hidden.sm-quarter.text-right
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
 | 
			
		||||
 | 
			
		||||
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
 | 
			
		||||
  div#loader-users-title.loader.loader
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
 | 
			
		||||
  div.segment.full.sm-three-quarter
 | 
			
		||||
    h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
 | 
			
		||||
  div.segment.lg-hidden.sm-quarter.text-right
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
 | 
			
		||||
 | 
			
		||||
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
 | 
			
		||||
  div.segment.half.sm-hidden.text-right
 | 
			
		||||
    solid-link(class="backlink", next=`admin-${getRoute('circles', true)}` data-trans='circle.create.backlink')
 | 
			
		||||
  div.segment.lg-hidden.sm-quarter.text-right
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
 | 
			
		||||
 | 
			
		||||
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
 | 
			
		||||
  div.loader.loader-top(id=`loader-admin-${getComponent('circles').uniq}`)
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
 | 
			
		||||
  div.segment.full.sm-three-quarter
 | 
			
		||||
    h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
 | 
			
		||||
  div.segment.lg-hidden.sm-quarter.text-right
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
 | 
			
		||||
 | 
			
		||||
div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-padding-xsmall.sm-padding-top-xxsmall.whitespace-normal
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -4,7 +4,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
 | 
			
		||||
  div.segment.half.sm-hidden.text-right
 | 
			
		||||
    solid-link(class="backlink", next=`admin-${getRoute('projects', true)}` data-trans='project.create.backlink')
 | 
			
		||||
  div.segment.lg-hidden.sm-quarter.text-right
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
 | 
			
		||||
 | 
			
		||||
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
 | 
			
		||||
  div.loader.loader-top(id=`loader-admin-${getComponent('projects').uniq}`)
 | 
			
		||||
 | 
			
		||||
@ -2,7 +2,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
 | 
			
		||||
  div.segment.full.sm-three-quarter
 | 
			
		||||
    h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
 | 
			
		||||
  div.segment.lg-hidden.sm-quarter.text-right
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
 | 
			
		||||
 | 
			
		||||
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -10,7 +10,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
 | 
			
		||||
      class-dash='text-color-heading text-bold'          
 | 
			
		||||
    )
 | 
			
		||||
  div.segment.lg-hidden.sm-quarter.text-right
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
 | 
			
		||||
 | 
			
		||||
.chat-view.segment.full.whitespace-normal
 | 
			
		||||
  solid-xmpp-chat(
 | 
			
		||||
 | 
			
		||||
@ -13,7 +13,7 @@ solid-ac-checker(permission='acl:Read', bind-resources)
 | 
			
		||||
    div.segment.half.sm-hidden.text-right
 | 
			
		||||
      solid-link(class="backlink", bind-resources, next=`${component.route}-profile` data-trans='circle.edit.backlink')
 | 
			
		||||
    div.segment.lg-hidden.sm-quarter.text-right
 | 
			
		||||
        div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 | 
			
		||||
        div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
 | 
			
		||||
 | 
			
		||||
div.segment.full.padding-large.whitespace-normal
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -20,7 +20,7 @@ div(
 | 
			
		||||
          class-dash='text-color-heading text-bold'          
 | 
			
		||||
        )
 | 
			
		||||
      div.segment.lg-hidden.sm-quarter.text-right
 | 
			
		||||
        div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 | 
			
		||||
        div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
 | 
			
		||||
 | 
			
		||||
  div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
 | 
			
		||||
    div.loader(id=`loader-${component.route}-profile-1`)
 | 
			
		||||
 | 
			
		||||
@ -14,7 +14,7 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
 | 
			
		||||
      value-dash=' - '
 | 
			
		||||
    )
 | 
			
		||||
  div.segment.lg-hidden.sm-quarter.text-right
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 | 
			
		||||
    div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
 | 
			
		||||
 | 
			
		||||
.chat-view.segment.full.whitespace-normal
 | 
			
		||||
  solid-xmpp-chat(
 | 
			
		||||
 | 
			
		||||
@ -17,7 +17,7 @@ solid-ac-checker(permission='acl:Read', bind-resources)
 | 
			
		||||
    div.segment.half.sm-hidden.text-right
 | 
			
		||||
      solid-link(class='backlink', bind-resources, next=`${component.route}-profile` data-trans='project.edit.backlink')
 | 
			
		||||
    div.segment.lg-hidden.sm-quarter.text-right
 | 
			
		||||
      div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 | 
			
		||||
      div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
 | 
			
		||||
 | 
			
		||||
div.segment.full.padding-large.whitespace-normal
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -24,7 +24,7 @@ div(
 | 
			
		||||
          value-dash=' - '
 | 
			
		||||
        )
 | 
			
		||||
      div.segment.lg-hidden.sm-quarter.text-right
 | 
			
		||||
        div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 | 
			
		||||
        div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
 | 
			
		||||
 | 
			
		||||
  div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
 | 
			
		||||
    div.loader(id=`loader-${component.route}-profile`)
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user