Fixes: #2409 Some responsive design

html/themes/default/login.css

@@ -44,3 +44,11 @@ display:inline-block;
 div#login_container {
 text-align:center;
 }
+
+/* On small screens */
+@media (max-width: 640px) {
+  div#login_window {
+  margin-top:10px;
+  }
+}
+

html/themes/default/menu.css

@@ -106,6 +106,7 @@ cursor:pointer;
 display:inline-block;
 float:left;
 width:18%;
+min-width:80px;
 margin:3px;
 padding:3px;
 }
@@ -127,3 +128,27 @@ text-decoration:none;
 div.iconmenu:hover {
 background-color:#F0F0F0;
 }
+
+#menucell {
+background-color:white;
+vertical-align:top;
+}
+
+/* On small screens */
+@media (max-width: 640px) {
+  .iconmenu {
+  text-align:center;
+  }
+  .iconmenu img
+  {
+  margin:auto;
+  display:block;
+  float:none;
+  }
+  h1.menuheader {
+  display:block;
+  float:none;
+  padding:5px;
+  text-align:center;
+  }
+}

html/themes/default/plugin.css

@@ -155,3 +155,13 @@ color:#D00;
 .plugin_section.critical > div {
 background-color:#DFEFFF;
 }
+
+/* On small screens */
+@media (max-width: 640px) {
+  table.plugin_window {
+  margin-top:3px;
+  margin-left:0;
+  border:none;
+  width:100%;
+  }
+}

html/themes/default/setup.css

@@ -22,14 +22,6 @@ background-color:#FFF;
 text-align:left;
 }
 
-/* Header col */
-div.setup_header {
-background-color:#bbcc99;
-padding:4px 5px 2px;
-border-bottom:1px solid #999;
-color:#000;
-}
-
 div.setup_menu {
 background-color:#F8F8F8;
 padding:4px 5px;

html/themes/default/style.css

@@ -250,6 +250,7 @@ border:0;
 border-spacing:0;
 padding:0;
 margin-left:3px;
+margin-top:7px;
 vertical-align:top;
 }
 
@@ -523,3 +524,91 @@ border:2px solid #DDDDDD;
 margin:.2em;
 padding:.3em;
 }
+
+/* Header */
+
+div#header_left {
+float:left;
+}
+
+div#header_left .plugtop {
+margin-left:35px;
+}
+
+div#header_left img {
+vertical-align:middle;
+}
+
+div#header_left img#fd_logo {
+padding-left:2px;
+padding-right:25px;
+}
+
+div#header_left .logout {
+margin-left:35px;
+}
+
+div#header_right {
+padding-top:8px;
+text-align:right;
+height:38px;
+color:black;
+}
+
+/* Header col */
+div.setup_header {
+background-color:#bbcc99;
+padding:4px 5px 2px;
+border-bottom:1px solid #999;
+color:#000;
+}
+
+/* On small screens */
+@media (max-width: 640px) {
+  div.setup_header {
+  padding:2px;
+  }
+  a.maintitlebar {
+  width:22px;
+  height:22px;
+  overflow:hidden;
+  margin:5px;
+  display:inline-block;
+  float:left;
+  padding:0;
+  }
+  div#header_left .logout {
+  margin-left:5px;
+  float:right;
+  }
+  div#header_left img#fd_logo {
+  padding-left:2px;
+  padding-right:2px;
+  }
+  div#header_right {
+  height:26px;
+  }
+  .optional {
+  display:none;
+  }
+  div#header_left .plugtop {
+  display:inline-block;
+  hyphens:none;
+  overflow:hidden;
+  white-space: nowrap;
+  margin:0px;
+  padding-top:0;
+  padding-bottom:0;
+  padding-left:0;
+  padding-right:5px;
+  font-size:1em;
+  }
+  div.logout-label {
+  display:inline-block;
+  vertical-align:middle;
+  }
+  table.framework {
+  margin:0;
+  border:none;
+  }
+}

ihtml/themes/default/framework.tpl

@@ -3,23 +3,23 @@
 {$game_screen}
 {$php_errors}
 <form action='main.php{$plug}' name='mainform' id='mainform' method='post' enctype='multipart/form-data'>
-<div class='setup_header'>
-  <div style="float:left;"><img src='{filePath file="images/fd_logo.png"}' class='center' alt='FusionDirectory' style="padding-left:2px; padding-right:25px;">
-    <a class="maintitlebar" href='main.php?reset=1'>
-      <img src='{filePath file="images/home.png"}' class='center' border="0" alt="Main"/>&nbsp;{t}Main{/t}
+<div class="setup_header">
+  <div id="header_left">
+    <img id="fd_logo" class="optional" src='{filePath file="images/fd_logo.png"}' alt='FusionDirectory'/>
+    <a class="maintitlebar" href="main.php?reset=1">
+      <img src='{filePath file="images/home.png"}' border="0" alt="Main"/>&nbsp;{t}Main{/t}
     </a>
     &nbsp;
-    <a class="maintitlebar" href='logout.php?request' style="margin-left:35px;">
-      <img src='{filePath file="images/sign_out.png"}' class='center' border="0" alt="Sign out"/>&nbsp;{t}Sign out{/t}
+    <a class="maintitlebar logout" href="logout.php?request">
+      <img src='{filePath file="images/sign_out.png"}' border="0" alt="Sign out"/>&nbsp;{t}Sign out{/t}
     </a>
-    <a class="plugtop" style="margin-left:35px;">
-      <img src="{$headline_image}" class="center" align="middle" alt="{t}{$headline}{/t}"/>&nbsp;
-      {t}{$headline}{/t}
+    <a class="plugtop">
+      <img src="{$headline_image}" align="middle" alt="{t}{$headline}{/t}"/>{t}{$headline}{/t}
     </a>
   </div>
-  <div style="padding-top:8px;text-align:right;height:38px;color:black;">
-    <a>{t}Signed in:{/t} <b>{$username}</b></a>
-    <div class='logout-label'>
+  <div id="header_right">
+    <a><a class="optional">{t}Signed in:{/t} </a><b>{$username}</b></a>
+    <div class="logout-label">
       <canvas id="sTimeout" width="22" height="22" title="{$sessionLifetime}|{t}Session expires in %d!{/t}"></canvas>
     </div>
   </div>
@@ -30,11 +30,11 @@
 
 {if !$hideMenus}
 
-    <table summary="" class="framework" cellspacing="0" cellpadding="0" style='margin-top:7px'>
+    <table summary="" class="framework" cellspacing="0" cellpadding="0">
         <tr style="vertical-align:top;">
 
             <!-- Menu -->
-            <td style="background-color:white; vertical-align:top;" id="menucell">
+            <td class="optional" id="menucell">
                 {$menu}
                 <br />
                 <div style="height:1px; width:140px;"></div>

ihtml/themes/default/headers.tpl

@@ -8,6 +8,7 @@
   <meta name="generator" content="my hands">
   <meta name="description" content="FusionDirectory - Login">
   <meta name="author" lang="en" content="FusionDirectory Project">
+  <meta name="viewport" content="width=device-width">
 
   <meta http-equiv="Expires" content="Mon, 26 Jul 1997 05:00:00 GMT">
   <meta http-equiv="Last-Modified" content="{$date} GMT">

ihtml/themes/default/login.tpl

@@ -25,7 +25,7 @@
   </div>
   <div style='border-bottom:1px solid #AAAAAA'>
 
-      <div style='padding:12px;text-align:center;'>
+      <div class="optional" style='padding:12px;text-align:center;'>
     {t}Please use your username and your password to log into the site administration system.{/t}<br />
     {if $ssl}<b>{$ssl}</b>{/if}
     {if $lifetime}<b><font style="color:red";>{$lifetime}</font></b>{/if}

include/class_pluglist.inc

@@ -378,7 +378,7 @@ class pluglist {
           }
 
           $entries  .= '<div class="iconmenu" onClick=\'location.href="'.$href.'"\' title="'.$plDescription.'">';
-          $item     = "<img $isize src=\"$image\" alt=\"$plHeadline icon\">&nbsp;$plHeadline";
+          $item     = "<img $isize src=\"$image\" alt=\"$plHeadline icon\"><span>&nbsp;$plHeadline</span>";
           if (!session::global_get('js')) {
             $item = "<a href=\"".$href."\">$item</a>";
           }