Optimized mobile appearance

tkrebs · Jun 3, 2018 · 5325334 · 5325334
1 parent 61340e4
commit 5325334
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git a/module/Base/view/layout/layout.phtml b/module/Base/view/layout/layout.phtml
@@ -3,6 +3,7 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="format-detection" content="telephone=no">
         <meta name="generator" content="<?= $this->option('service.branding.name') ?>">
         <meta name="publisher" content="<?= $this->option('client.name.full') ?>">
         <meta name="description" content="<?= $this->option('service.meta.description') ?>">
@@ -59,15 +60,21 @@
                     <p>
                         <span class="light-gray"><?= $this->t('Information about') ?></span><br>
                         <span class="large-text">
-                            <a href="<?= $this->url('service/info') ?>" class="unlined white"><?= $this->option('subject.type') ?></a>
+                            <a href="<?= $this->url('service/info') ?>" class="unlined white">
+                                <?= $this->option('subject.type') ?>
+                            </a>
                         </span>
                     </p>
                 </div>
 
                 <div id="topbar-phone" class="responsive-pass-4">
                     <p>
                         <span class="light-gray"><?= $this->t('Book by phone') ?></span><br>
-                        <span class="large-text"><?= $this->option('client.contact.phone') ?></span>
+                        <span class="large-text">
+                            <a href="tel:<?= $this->option('client.contact.phone') ?>" class="unlined white">
+                                <?= $this->option('client.contact.phone') ?>
+                            </a>
+                        </span>
                     </p>
                 </div>
 

diff --git a/public/css/default.css b/public/css/default.css
@@ -74,6 +74,13 @@ code {
     border-bottom: solid 1px #666;
 }
 
+@media (max-width: 1024px) {
+    #header {
+        height: auto;
+        min-height: 75px;
+    }
+}
+
 #label {
     position: absolute;
     left: 0; top: 0;
@@ -145,6 +152,42 @@ a#logo:active { top: 1px; }
     border-radius: 3px;
 }
 
+@media (max-width: 1024px) {
+    #topbar {
+        margin-top: 90px;
+        position: relative;
+        height: auto;
+        white-space: normal;
+    }
+
+    #topbar > div:not(#topbar-contact):not(#topbar-separator) {
+        display: inline-block !important;
+        margin: 16px 16px 0 24px;
+        float: none;
+    }
+
+    #topbar-separator {
+        display: none;
+    }
+}
+
+@media (max-width: 512px) {
+    #topbar {
+        margin-top: 0;
+        text-align: center;
+    }
+
+    #topbar > div {
+        padding: 0 32px;
+        background: none;
+    }
+
+    #topbar-i18n {
+        position: absolute;
+        left: 0; top: 0;
+    }
+}
+
 #content {
     position: relative;
     padding: 64px;