Browse Source

Merge pull request #2009 from annando/1511-vier-mobile2

Vier: Mobile mode should be better now
pull/2010/head
Tobias Diekershoff 6 years ago
parent
commit
1075fa2c38
2 changed files with 51 additions and 12 deletions
  1. +45
    -8
      view/theme/vier/mobile.css
  2. +6
    -4
      view/theme/vier/theme.php

+ 45
- 8
view/theme/vier/mobile.css View File

@ -1,4 +1,5 @@
aside, header, #nav-events-link, #search-box, #nav-admin-link, #activitiy-by-date-tab, #shared-links-tab {
aside, header, #nav-events-link, #search-box, #nav-admin-link, #activitiy-by-date-tab, #shared-links-tab,
.wall-item-location {
display: none;
}
@ -14,30 +15,57 @@ section {
padding: 10px;
}
body, section, nav .nav-menu, div.pager, ul.tabs, .wall-item-container .wall-item-ago, .wall-item-network,
.type-link blockquote, .type-video blockquote {
body, section, nav .nav-menu, div.pager, ul.tabs {
font-size: 16px;
}
.wall-item-container .wall-item-ago, .wall-item-network,.type-link blockquote, .type-video blockquote {
font-size: 13px;
}
nav {
min-width: 480px;
}
.wall-item-container .wall-item-content {
max-width: 100%;
/* margin-left: -70px;
padding-top: 25px; */
}
.wall-item-container .wall-item-content img {
max-width: 400px;
}
nav ul {
margin-left: 0px;
}
.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: 400px;
max-width: 650px;
}
@media screen and (max-width: 800px) {
.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: 450px;
}
}
@media screen and (max-width: 600px) {
.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: 350px;
}
}
@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;
}
}
.wall-item-container.thread_level_2,
@ -49,3 +77,12 @@ nav ul {
margin-left: 60px;
width: calc(100% - 70px);
}
.wall-item-container.thread_level_2 .wall-item-content,
.wall-item-container.thread_level_3 .wall-item-content,
.wall-item-container.thread_level_4 .wall-item-content,
.wall-item-container.thread_level_5 .wall-item-content,
.wall-item-container.thread_level_6 .wall-item-content,
.wall-item-container.thread_level_7 .wall-item-content {
max-width: 100%;
}

+ 6
- 4
view/theme/vier/theme.php View File

@ -26,15 +26,17 @@ function vier_init(&$a) {
if ($a->argv[0].$a->argv[1] === "profile".$a->user['nickname'] or $a->argv[0] === "network" && local_user()) {
vier_community_info();
$a->page['htmlhead'] .= "<link rel='stylesheet' media='screen and (min-width: 1300px)' href='view/theme/vier/wide.css' />\n";
$a->page['htmlhead'] .= "<link rel='stylesheet' type='text/css' href='view/theme/vier/wide.css' media='screen and (min-width: 1300px)'/>\n";
}
if ($a->is_mobile || $a->is_tablet)
if ($a->is_mobile || $a->is_tablet) {
$a->page['htmlhead'] .= '<meta name=viewport content="width=device-width, initial-scale=1">'."\n";
$a->page['htmlhead'] .= '<link rel="stylesheet" type="text/css" href="view/theme/vier/mobile.css" media="screen"/>'."\n";
}
$a->page['htmlhead'] .= '<link rel="stylesheet" type="text/css" href="view/theme/vier/mobile.css" media="screen and (max-width: 1000px)"/>'."\n";
$a->page['htmlhead'] .= <<< EOT
<link rel='stylesheet' media='(max-width: 1010px)' href='view/theme/vier/mobile.css' />
<link rel='stylesheet' media='screen and (max-width: 1100px)' href='view/theme/vier/narrow.css' />
<link rel='stylesheet' type='text/css' href='view/theme/vier/narrow.css' media='screen and (max-width: 1100px)' />
<script type="text/javascript">
function insertFormatting(comment,BBcode,id) {


Loading…
Cancel
Save