X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Fvier%2Fmobile.css;h=66721a1b8891d2fad68de601feb90782b7581827;hb=c32b6000cb6def045f2491bbefa04ba86bf7dbd3;hp=0b158e50d3330e92afe087952e68a530d186b5e0;hpb=096cb917fc96c7ef0d4e79dc411300380e36a965;p=friendica.git

diff --git a/view/theme/vier/mobile.css b/view/theme/vier/mobile.css
index 0b158e50d3..66721a1b88 100644
--- a/view/theme/vier/mobile.css
+++ b/view/theme/vier/mobile.css
@@ -1,4 +1,4 @@
-aside, header, #nav-events-link, #search-box, #nav-admin-link, #activitiy-by-date-tab, #shared-links-tab,
+aside, header, #nav-events-link, #nav-search-box, #nav-admin-link, #activitiy-by-date-tab, #shared-links-tab,
 .wall-item-location {
   display: none;
 }
@@ -8,11 +8,11 @@ aside, header, #nav-events-link, #search-box, #nav-admin-link, #activitiy-by-dat
 }
 
 section {
-  /* left: calc((100% - (784px)) / 2); */
+  box-sizing: border-box;
   left: 0px;
-  width: calc(100% - 20px);
+  width: 100%;
   max-width: 100%;
-  padding: 10px;
+  padding: 5px;
 }
 
 body, section, nav .nav-menu, div.pager, ul.tabs {
@@ -60,14 +60,71 @@ 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; }
+
+  .wall-item-container .wall-item-info { width: auto; }
+  .contact-photo-wrapper { width: 55px; }
+  .wwto { left: 0px; }
+
+  .type-link > a { height: 120px; width: 100%; overflow: hidden; display: block; }
+  .type-link > a > img { display: block; max-width: 100%!important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
+
+    /** oembed **/
+  .embed_video {
+    float: none;
+    margin: 0px;
+    width: 100%;
+    overflow: hidden;
+    display: block;
+  }
+  .embed_video > img {
+    display: block;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    object-fit: cover !important;
+  }
+  .embed_video > div {
+    background-image: none !important; background-color: transparent !important;
+    width: 100% !important; height: 110px !important;
+  }
+
 }
 
 @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.embed_rich { width: 100% !important }
+    /* TODO: check if this is needed.
+   * oembedded iframe usually have "width" and "height" as attributes
+   * that override this rule */
+  iframe {
+    max-width: 100%;
+  }
+
+  
+  /* the top-nav notfication menu */
+  nav #nav-notifications-linkmenu .menu-popup {
+	position: fixed;
+	left: 10px;
+	right: 10px;
+	top: 44px;
+	bottom: 10px;
+	width: auto;
+	max-width: none;
+	max-height: none;
+  }
+  
+
 }
 
 .wall-item-container.thread_level_2,
@@ -76,8 +133,8 @@ nav ul {
 .wall-item-container.thread_level_5,
 .wall-item-container.thread_level_6,
 .wall-item-container.thread_level_7 {
-  margin-left: 60px;
-  width: calc(100% - 70px);
+  margin-left: 0;
+  width: calc(100% - 10px);
 }
 
 .wall-item-container.thread_level_2 .wall-item-content,
@@ -104,13 +161,136 @@ 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;
 }
 
 aside.show {
 	left: 0;
 }
+
+/* tabs */
+.tabs { position: relative; height: 25px!important; }
+.tabs li { width: 100%; }
+.tabs .tab { display: none;}
+.tabs .tab.active { display: block; }
+.tabs::after {
+	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 {
+	position: fixed;
+	z-index: 1000;
+	left: 10px;
+	right: 10px;
+	top: 0px;
+	bottom: 10px;
+	height: auto !important;
+	border: 1px solid #ccc;
+}
+.tabs.show::after { display: none; }
+.tabs.show .tab { display: block; }
+
+/* jot buttons */
+#profile-jot-submit,
+#jot-preview-link {
+    float: none;
+    display: block;
+    width: 100%;
+    margin: 0 0 1em 0;
+}
+#profile-jot-submit-wrapper > div {
+    margin: 0 1em 1em 0;
+}
+#profile-jot-submit-wrapper > div#profile-jot-perms { margin: 0; }
+ 
+/* ACL window */
+#profile-jot-acl-wrapper, #profile-jot-acl-wrapper * { box-sizing: border-box; }
+#acl-wrapper { width: 100%; float: none; }
+#acl-search { width: 100%; float: none; padding-right: 0px; margin-bottom: 1em; }
+#acl-showall { width: 100%; height: 48px; margin-bottom: 1em; }
+.acl-list-item { width: auto; float: none; height: auto; overflow: hidden; position: relative;}
+.acl-list-item img { width: 48px; height: 48px; }
+.acl-list-item p { height: auto; font-size: inherit; }
+.acl-list-item a {
+  float: none;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  height: 48px;
+  padding: 10px 2px 2px 2px;
+  font-size: 12px;
+  width: 20%;
+  text-align: center;
+  background-position: center 5px;
+}
+.acl-list-item a.acl-button-hide { right: 25%; }
+/* flexbox for ACL window */
+#cboxLoadedContent,
+#cboxLoadedContent > div,
+#acl-wrapper {
+  display: -ms-Flexbox !important;
+  -ms-box-orient: vertival;
+
+  display: -webkit-flex !important;
+  display: -moz-flex !important;
+  display: -ms-flex !important;
+  display: flex !important;
+
+  -webkit-flex-flow: column;
+  -moz-flex-flow: column;
+  -ms-flex-flow: column;
+  flex-flow: column;
+  
+  -webkit-flex: 1 100%;
+  -moz-flex: 1 100%;
+  -ms-flex: 1 100%;
+  flex: 1 100%;
+}
+#acl-list {
+  -webkit-flex: 1 1 auto;
+  -moz-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;  
+}
+
+/** input elements **/
+input,
+textarea,
+select {
+    font-size: 18px;
+    border: 1px solid #888;
+    padding: 0.2em;
+}
+input:focus,
+textarea:focus,
+select:focus {
+    box-shadow: 1px 1px 10px rgba(46, 151, 255, 0.62);
+}
+
+.field, .field > * {  box-sizing: border-box; }
+.field label { width: 100%; float: none; display: block; }
+.field input, .field textarea, .field select { max-width: 100%; width: 100%; }
+.field.yesno .onoff,
+.field.checkbox input { width: auto; float: right; }
+.field.yesno label,
+.field.checkbox label { width: 70%; float: left; }
+.field .field_help { margin: 0; }
+
+/** event **/
+.event-start, .event-end { width: auto; }
+.event-start .dtstart, .event-end .dtend { float: none; display: block; }
+
+