From a54e512669bef0e8bd0260869553cec4f0d714d8 Mon Sep 17 00:00:00 2001 From: Beanow Date: Sat, 21 Feb 2015 23:20:23 +0100 Subject: [PATCH] Responsive mobile theme + public server listing. --- assets/style.css | 194 ++++++++++++++++++++++++++- mod/servers.php | 126 +++++++++++++++++ src/templates/layout/_navigation.php | 18 ++- src/templates/layout/_topBar.php | 3 +- src/templates/layout/minimal.php | 4 +- src/templates/view/_site.php | 37 +++++ src/templates/view/servers.php | 24 ++++ 7 files changed, 396 insertions(+), 10 deletions(-) create mode 100644 mod/servers.php create mode 100644 src/templates/view/_site.php create mode 100644 src/templates/view/servers.php diff --git a/assets/style.css b/assets/style.css index bbcc8252..53da80ca 100644 --- a/assets/style.css +++ b/assets/style.css @@ -23,18 +23,27 @@ html{ font-size:100%; } -a{ - text-decoration:none; - color:inherit; +a{color:inherit;} + +.mobile{ + display:none !important; } #top-bar{ background:#f5f5f5; padding:8px 14px; + position:fixed; + z-index:1; + top:0; height:55px; + width:100%; text-align:center; - position:relative; font-weight:300; + border-bottom:1px solid #ddd; +} +#top-bar-spacer{ + width:100%; + height:55px; } #top-bar .header{ @@ -75,7 +84,6 @@ nav#links a{ background:#eee; line-height:45px; height:45px; - border-top:1px solid #ddd; border-bottom:1px solid #ddd; } .sub-menu-outer .sub-menu-inner{ @@ -124,6 +132,16 @@ nav#links a{ margin-top:3em; } +nav#links a, +.profiles a{ + text-decoration:none; +} + +.search-results .intro{ + text-align:justify; +} + +.site, .profile{ display:table; width:100%; @@ -131,6 +149,13 @@ nav#links a{ color:#000; padding:2px; outline:none; + margin:10px 0; +} + +.site{ + padding:14px 2px; + margin:20px 0; + border-bottom:1px dashed #ccc; } .profile.selected, @@ -140,29 +165,39 @@ nav#links a{ border:1px solid #ccc; } +.site .site-info, +.site .site-supports, .profile .profile-photo, .profile .profile-info{ display:table-cell; vertical-align:top; text-align:left; } +.site .site-supports{ + text-align:right; + padding:8px; +} .profile .profile-photo{ margin:8px; border-radius:15px; border:1px solid #ddd; } +.site .site-info, .profile .profile-info{ padding:8px; width:100%; } +.site .site-info strong, .profile .profile-info strong{ font-weight:600; } +.site .site-info .fa, .profile .profile-info .fa{ line-height:1.1em; color:#999; } +.site .site-info .url, .profile .profile-info .url{ font-size:80%; margin-bottom:3px; @@ -218,3 +253,152 @@ nav#links a{ width:65px; border-radius:0 8px 8px 0; } + +.health{font-size:120%; vertical-align:bottom;} +.health.very-bad{ color:#f99; } +.health.bad{ color:#f1ba7a; } +.health.neutral{ color:#e6e782; } +.health.ok{ color:#bef273; } +.health.good{ color:#7cf273; } +.health.perfect{ color:#33ff80; } + +.btn{ + border:1px solid #ddd; + color:#555; + background:#eee; + border-radius:8px 8px; + height:36px; + line-height:34px; + min-width:80px; + padding:0 10px; + text-decoration:none; + display:inline-block; +} + +/* smaller than tablet in portrait */ +@media screen and (max-width: 880px){ + + body{ + overflow-x:hidden; + } + + .mobile{ + display:inherit !important; + } + + #top-bar .header{ + overflow:hidden; + width:0px; + padding-left:28px; + height:28px; + background-size:28px; + } + + #top-bar .search-form{ + display:block; + width:100%; + padding:0 35px; + margin:0; + } + + .homepage-wrapper, + .search-wrapper{ + width:95%; + max-width:500px; + } + .homepage-wrapper .search-wrapper{ + width:100%; + } + + .homepage-wrapper{ + margin:90px auto; + } + + .search-results, + .sub-menu-outer .sub-menu-inner{ + width:95%; + max-width:500px; + } + + .hamburger{ + position:absolute; + top:0px; + right:0px; + padding:14px; + font-size:22px; + line-height:22px; + cursor:pointer; + } + + nav#links{ + position:absolute; + width:100%; + top:54px; + right:0; + padding-bottom:5px; + } + nav#links .viewport{ + position:absolute; + z-index:1; + left:100%; + width:100%; + transition:left ease 200ms; + background:#fff; + padding:20px 0; + box-shadow:1px 3px 3px rgba(0,0,0,0.2); + font-size:150%; + text-align:center; + } + nav#links.open .viewport{ + left:0%; + } + #top-bar nav#links .viewport{ + background:#f5f5f5; + } + nav#links h3{ + margin:0; + display:block; + line-height:2em; + } + nav#links a{ + display:block; + line-height:2.5em; + margin:4px 0; + } + + .profile, + .profile .profile-info{ + overflow-wrap:break-word; + word-wrap:break-word; + overflow:hidden; + } + +} + +/* The moment the header starts getting squashed */ +@media screen and (max-width: 520px){ + .homepage-wrapper{ + margin:30px auto; + } + .homepage-wrapper .header{ + font-size:40px; + background-size:36px; + display:inline-block; + margin-left:18px; + width:275px; + } +} + +/* close to mobile in portrait */ +@media screen and (max-width: 400px){ + + .profile .profile-photo{ + width:60px; + border-radius:11.25px; + margin:8px 4px; + } + .profile .profile-info .url{ + display:none; + } + +} \ No newline at end of file diff --git a/mod/servers.php b/mod/servers.php new file mode 100644 index 00000000..e857615b --- /dev/null +++ b/mod/servers.php @@ -0,0 +1,126 @@ + $v) + { + + //Stop at unhealthy sites. + $site = $site_healths[$k]; + if($site['health_score'] <= 20) break; + + //Skip small sites. + $users = $sites[$k]; + if($users < 5) continue; + + //Add health score name and user count. + $site['health_score_name'] = health_score_to_name($site['health_score']); + $site['users'] = $users; + + //Figure out what this server supports. + $plugins = explode("\r\n", $site['plugins']); + $site['plugins'] = $plugins; + $hasPlugin = function(array $input)use($plugins){ + return !!count(array_intersect($input, $plugins)); + }; + + $site['supports'] = array( + 'HTTPS' => $site['ssl_state'] == 1, + 'Twitter' => $hasPlugin(array('buffer', 'twitter')), + 'Facebook' => $hasPlugin(array('buffer', 'facebook', 'fbpost', 'fbsync')), + 'Google+' => $hasPlugin(array('buffer', 'gpluspost')), + 'RSS/Atom' => true, //Built-in. + 'App.net' => $hasPlugin(array('appnet', 'appnetpost')), + 'Diaspora*' => $hasPlugin(array('diaspora')), + 'pump.io' => $hasPlugin(array('pumpio')), + 'StatusNet' => $hasPlugin(array('statusnet')), + 'Tumblr' => $hasPlugin(array('tumblr')), + 'Blogger' => $hasPlugin(array('blogger')), + 'Dreamwidth' => $hasPlugin(array('dwpost')), + 'Wordpress' => $hasPlugin(array('wppost')), + 'LiveJournal' => $hasPlugin(array('ljpost')), + 'Insanejournal' => $hasPlugin(array('ijpost')), + 'Libertree' => $hasPlugin(array('libertree')) + ); + + //Subset of the full support list, to show popular items. + $site['popular_supports'] = array( + 'HTTPS' => $site['supports']['HTTPS'], + 'Twitter' => $site['supports']['Twitter'], + 'Facebook' => $site['supports']['Facebook'], + 'Google+' => $site['supports']['Google+'], + 'Wordpress' => $site['supports']['Wordpress'] + ); + + //For practical usage. + $site['less_popular_supports'] = array_diff_assoc($site['supports'], $site['popular_supports']); + + //Get the difference. + $site['supports_more'] = 0; + foreach ($site['supports'] as $key => $value){ + if($value && !array_key_exists($key, $site['popular_supports'])){ + $site['supports_more']++; + } + } + + //Push to results. + $public_sites[] = $site; + + //Count the result. + $total ++; + + } + + //In case we asked for a surprise, pick a random one from the top 10! :D + if($a->argv[1] == 'surprise'){ + $max = min(count($public_sites), 10); + $i = mt_rand(0, $max-1); + $surpriseSite = $public_sites[$i]; + header('Location:'.$surpriseSite['base_url'].'/register'); + exit; + } + + + //Show results. + $view = new View('servers'); + + $view->output(array( + 'total' => number_format($total), + 'sites' => $public_sites + )); + +} diff --git a/src/templates/layout/_navigation.php b/src/templates/layout/_navigation.php index e971c99a..60aee53d 100644 --- a/src/templates/layout/_navigation.php +++ b/src/templates/layout/_navigation.php @@ -1,4 +1,16 @@ + \ No newline at end of file +
+ Home + Servers + Stats + Help +
+ + + \ No newline at end of file diff --git a/src/templates/layout/_topBar.php b/src/templates/layout/_topBar.php index cc822ce2..3c698849 100644 --- a/src/templates/layout/_topBar.php +++ b/src/templates/layout/_topBar.php @@ -10,4 +10,5 @@ layout('_navigation'); ?> - \ No newline at end of file + +
\ No newline at end of file diff --git a/src/templates/layout/minimal.php b/src/templates/layout/minimal.php index 7ae05dc9..647ab1ef 100644 --- a/src/templates/layout/minimal.php +++ b/src/templates/layout/minimal.php @@ -2,7 +2,7 @@ - + Friendica Directory @@ -12,6 +12,8 @@ + + diff --git a/src/templates/view/_site.php b/src/templates/view/_site.php new file mode 100644 index 00000000..09f1c5ac --- /dev/null +++ b/src/templates/view/_site.php @@ -0,0 +1,37 @@ +
+
+ + ♥ + + +
+ +   + + +
+
+ users, + admin: +
+

+
+
+ Features + $value): if(!$value) continue; ?> +
  √
+ + 0): ?> + + $value){ + if(!$value) continue; + $more .= $key.PHP_EOL; + } + ?> + + more + +
+
diff --git a/src/templates/view/servers.php b/src/templates/view/servers.php new file mode 100644 index 00000000..aa2a44a4 --- /dev/null +++ b/src/templates/view/servers.php @@ -0,0 +1,24 @@ +
+
+

Public servers

+

+ If you are not interested in hosting your own server, you can still use Friendica. + Here are some public server run by enthousiasts that you can join. + We recommend these based on their health. +

+

+ Keep in mind that different servers may support different networks besides Friendica. + It's best to pick the one that best suits your needs. +

+ +
+ Surprise me » +
+ +

Recommending public servers

+ view('_site', array('site'=>$site)); + ?> +
+
\ No newline at end of file