Merge pull request #2303 from rabuzarus/2901-vier-mobile

[friendica.git] / view / theme / vier / mobile.css

diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index 3defddac3891009f856a797b9b1b9c2c4cf5c07e..f6ec2b8ccbd89a6167561a17426a1e04c175e536 100644 (file)
--- a/view/theme/vier/mobile.css
+++ b/view/theme/vier/mobile.css
@@ -60,14 +60,30 @@ nav ul {
   .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
     max-width: 350px;
   }
+  a.desktop-view { display: none; }
+  a.mobile-view { display: initial; }
+  #nav-apps-link { display: none; }
 }
 
 @media screen and (max-width: 480px) {
   .wall-item-container .wall-item-content img,
-  .children .wall-item-container .wall-item-item .wall-item-content img,
   .wall-item-container .wall-item-content .type-link img.attachment-image, .type-link img.attachment-image, .type-video img.attachment-image {
     max-width: 200px;
   }
+  /* fix img width in threaded view - maybe there exists a better possibility to do this 
+    maybe this needs also to be done for tablet view*/
+  .children .wall-item-container .wall-item-item .wall-item-content img {
+    max-width: 100%;
+  }
+  iframe {
+    max-width: 100%;
+  }
+
+  /* the top-nav notfication menu
+    Note: the device needs a min display width of 320px */
+  #nav-notifications-menu {
+    width: 270px;
+  }
 }
 
 .wall-item-container.thread_level_2,
@@ -104,11 +120,13 @@ nav ul {
 
 aside {
        display: block;
-       /* position: absolute; */
        position: fixed;
        max-width: 400px;
        width: 80%;
        left: -100%;
+       -webkit-transition: left 0.5s;
+       -moz-transition: left 0.5s;
+       -o-transition: left 0.5s;
        transition: left 0.5s;
 }
 
@@ -122,10 +140,13 @@ aside.show {
 .tabs .tab { display: none;}
 .tabs .tab.active { display: block; }
 .tabs::after {
-       content: " ";
+       font-family: FontAwesome;
+       text-align: right;
+       content: "\f13a";
        display: block;
        position: absolute;
        left: 0; right:0; top: 0; bottom: 0;
+       padding: 8px 2px 0 0;
 }
 
 .tabs.show {