Merge pull request #3380 from fabrixxm/feature/frio/fixedaside2

Frio: better UX for aside bar

diff --combined view/theme/frio/css/style.css
index 01cab105bc4602d610923f2f6bffeede36188b1f,e787384eda6448b7a9d5fc11712467a3d427126e..8cc8997930ed7792b179cd26536b89fea4f1ba34
--- 1/view/theme/frio/css/style.css
--- 2/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@@ -98,8 -98,38 +98,38 @@@ blockquote 
  code {
      white-space: pre-wrap;
  }
 -.help-content-wrapper code {display: inline}
 +.help-content-wrapper code, .help-aside-wrapper code {display: inline}
  
+ /**
+  * mobile aside
+  */
+ @media screen and (max-width: 990px) {
+     aside{
+         position: fixed!important;
+         top: 0!important;
+         background-color: #fff;
+         width: 100%;
+         max-width: 300px;
+         height: 100%;
+         padding-top: 100px;
+         z-index: 10;
+     }
+     aside::before {
+         content: " ";
+         position: fixed;
+         display: block;
+         top: 0; left: 300px; right: 0; bottom: 0;
+         background-color: rgba(0,0,0,0.4);
+         opacity: 0;
+         transition: opacity 0.5s;
+     }
+     aside.canvas-slid::before {
+         opacity: 1;
+     }
+ 
+     /* prevent page scroll when the aside is opened **/
+     body.aside-out { overflow: hidden; }
+ }
  /*
  * standard page elements
  */
@@@ -164,9 -194,6 +194,9 @@@
      padding: 8px 16px;
      color: inherit;
  }
 +a.btn:hover {
 +    color: #333;
 +}
  
  .btn-default {
      background: #ededed;
@@@ -214,12 -241,6 +244,12 @@@
      padding-left: 0;
      padding-right: 0;
  }
 +.btn-clear,
 +.btn-clear:active {
 +    border: 0;
 +    background: transparent;
 +    box-shadow: none;
 +}
  .btn-eventnav, btn-eventnav:hover {
      font-size: 16px;
      background: none;
@@@ -1403,12 -1424,6 +1433,12 @@@ section #jotOpen 
      border-radius: 4px;
      position: relative;
  }
 +.panel.panel-inline {
 +    margin-left: -15px;
 +    margin-right: -15px;
 +    margin-top: 15px;
 +    padding: 15px;
 +}
  .panel .panel-body {
      padding: 15px;
      font-size: 14px;
@@@ -1942,8 -1957,7 +1972,8 @@@ ul.dropdown-menu li:hover 
      font-size: 12px;
  }
  .media-list > li:hover,
 -.media-list > li.selected {
 +.media-list > li.selected,
 +.media-list > li.active {
      border-left: 3px solid $link_color;
      background-color: rgba(247, 247, 247, $contentbg_transp);
  }
@@@ -2031,9 -2045,9 +2061,9 @@@
  .allfriends-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper,
  .directory-content-wrapper, .manage-content-wrapper, .notes-content-wrapper,
  .message-content-wrapper, .apps-content-wrapper, .photos-content-wrapper,
 -.admin-content-wrapper, .group-content-wrapper, .viewcontacts-content-wrapper,
 -.dfrn_request-content-wrapper, .friendica-content-wrapper, .credits-content-wrapper,
 -.nogroup-content-wrapper, .profperm-content-wrapper {
 +.admin-content-wrapper, .viewcontacts-content-wrapper, .dfrn_request-content-wrapper,
 +.friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper,
 +.profperm-content-wrapper {
      min-height: calc(100vh - 150px);
      padding: 15px;
      padding-bottom: 20px;
@@@ -2080,9 -2094,6 +2110,9 @@@ ul.viewcontact_wrapper > li 
      position: relative;*/
      /*border-left: 3px solid white;*/
  }
 +.contact-wrapper .contact-photo-wrapper button {
 +    padding: 0;
 +}
  .contact-wrapper.media {
      overflow: visible;
      word-wrap: break-word;
@@@ -2113,9 -2124,6 +2143,9 @@@
  .contact-wrapper .contact-photo-overlay-content.xl {
      font-size: 48px;
  }
 +.contact-wrapper .contact-photo-menu {
 +    top: auto;
 +}
  
  .contact-entry-desc {
      color: #555;
@@@ -2189,61 -2197,6 +2219,61 @@@ ul li:hover .contact-wrapper .contact-a
      padding-top: 10px;
  }
  
 +/* group edit page */
 +.group-actions {
 +    margin-top: 20px;
 +    margin-bottom: 10px;
 +    font-size: 30px;
 +}
 +.group-actions button,
 +.group-actions a {
 +    font-size: 18px;
 +}
 +#group-edit-wrapper {
 +    display: none;
 +}
 +#group-update-wrapper .contact-photo-overlay {
 +    display: none;
 +}
 +#group-update-wrapper .viewcontact_wrapper .contact-group-actions {
 +    height: 100%;
 +    margin-top: -10px;
 +    display: flex;
 +}
 +#group-update-wrapper .viewcontact_wrapper .contact-action-link {
 +    opacity: 0.8;
 +    font-size: 20px;
 +    line-height: 50px;
 +}
 +#group-update-wrapper .viewcontact_wrapper .contact-action-link:hover {
 +    opacity: 1;
 +}
 +#group-update-wrapper .shortmode {
 +    height: 53px;
 +    overflow: hidden;
 +}
 +#group-update-wrapper .shortmode .contact-photo {
 +    height: 32px;
 +    width: 32px;
 +}
 +#group-update-wrapper .shortmode .media {
 +    overflow: hidden;
 +}
 +#group-update-wrapper .shortmode .contact-entry-desc {
 +    font-size: 12px !important;
 +}
 +#group-update-wrapper .shortmode .contact-entry-desc h4.media-heading {
 +    margin: 0;
 +}
 +#group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a {
 +    font-size: 13px !important;
 +    white-space: nowrap;
 +}
 +#group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel,
 +#group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network {
 +    display: none;
 +}
 +
  /* private mail */
  .message-content-wrapper > li {
  /* we need this overwriting because we have no template file