Changeset 741 in t29-www

Timestamp:

Mar 8, 2015, 7:16:55 PM (8 years ago)

Author:

sven

Message:

Darstellung bei schmalen Bildschirmen und Mobilgeräten erheblich
verbessert (viele kleine Detailverbesserungen bei Header und
Footer sowie der Startseite). Es fehlt noch ein ordentliches
Aufklappmenü, was nur im Deutschen testweise eingebunden wurde.

Da bei schmalen Monitoren nicht das Hauptmenü und das Seitenmenü
angezeigt werden können, sollte das verbleibende Menü (=Hauptmenü)
die wichtigen Links beinhalten. Das ist derzeit nicht der Fall,
sodass man auf Mobilgeräten kaum die Seiten erreicht, die man
sehen will. Um das zu korrigieren, sollte die relationale und
hierarchische Navigation erleichtert werden, also mittels
Breadcrumbs sowie dem Anzeigen der Vor/Zurück-Buttons ganz oben.

Files:

• de/index.php (modified) (2 diffs)
• shared/css-v6/modules/13-footer.css (modified) (1 diff)
• shared/css-v6/modules/31-mobile.css (modified) (8 diffs)
• shared/css-v6/pagestyles/news.css (modified) (1 diff)
• shared/css-v6/pagestyles/startseite.css (modified) (1 diff)
• shared/js-v6/modules/mobile.js (added)
• shared/js-v6/modules/startup.js (modified) (1 diff)

de/index.php

@@ -9 +9 @@
     <div class="cols clear-after startseiten-boxen">
        <div class="leftcol">
-             <a href="#Termine" class="smooth-scroll div left clear-after termine oben">
+             <a href="#Termine" class="smooth-scroll div left mobile clear-after termine oben">
                    <img src="/shared/img-v6/date.png" class="kalender">
                    <span class="h2">Termine <br> Führungen <br> Events</span>
@@ -78 +78 @@
                 
                 
-                <div class="flyer left">
+                <div class="flyer left mobile">
                         <a href="/shared/flyer/august2013.pdf"><img src="/shared/photos/start/flyer.jpg" width="120" height="210" alt="Photografie des Flyers" /></a>
                         <h2>Flyer-Download</h2>

shared/css-v6/modules/13-footer.css

@@ -359 +359 @@
 footer.in-sheet div.bigfooter a.block:focus u {
         color: #882224;
+}
+
+/* By means of javascript, the in-sheet footer is cloned to the original position
+   for the mobile viewports. Disable the this clone view generally
+   (this is reversed again in mobile.css). */
+footer.attached.for-mobile {
+        display: none;
 }
 

shared/css-v6/modules/31-mobile.css

@@ -25 +25 @@
                 height: 2px; /* Nur Linie anzeigen, keine weisse Flaeche */
         }
-
-        /*
-        footer.attached {
-                background: #F4F4F4;
-                color: #777;
-        }
-        
-        footer.attached a:link, footer.attached a:visited {
-                color: #777;
-        }
-        */
+        
+        /* If we have a Javascript capable browser, display the cloned footer as the
+           in-sheet footer looks ugly. */
+        html.js footer.in-sheet div.bigfooter {
+                display: none;
+        }
+        html.js footer.attached.for-mobile {
+                display: block;
+        }
+
+        /* mache Eintraege schmaler. Das hier sollte eigentlich gemeinsam bei footer.css stehen... */
+        footer div.bigfooter li.haus {
+                width: 300px;
+        }
+        footer div.bigfooter li.copy {
+                width: 290px;
+        }
+        footer div.bigfooter li.logo {
+                width: 240px;
+        }
+
+        footer div.bigfooter li.haus img {
+                width: 100px;
+        }
+        footer div.bigfooter li.haus span.p {
+                margin-left: 118px;
+        }
 }
 
@@ -53 +69 @@
                 height: auto;
                 background: none;
+                text-align: left;
         }
 
@@ -58 +75 @@
                 position: relative;
                 top: auto; bottom: auto;
-                margin: 108px 0 0 0;
+                margin: 105px 0 0 0;
                 text-align: center;
 
@@ -107 +124 @@
         }
         
-        footer.in-sheet.empty-footer { display: none; }
+        /* ist nicht mehr empty wg bigfooter */
+        /* footer.in-sheet.empty-footer { display: none; } */
 }
 
@@ -125 +143 @@
         }
 
+        #container h1 {
+                display: block;
+                position: absolute;
+                top: 0; left: 0; width: 100%;
+        }
+
         #container h1 a {
                 /* Banner in der Mitte anzeigen */
-                left: 0; width: 100%;
+                display: block;
+                position: relative; top: 0; left: 0;
+                width: 80%; max-width: 310px;
                 background-repeat: no-repeat;
                 background-position: center center;
+                background-size: 100% auto;
+                margin: 0 auto;
+        }
+
+        nav.horizontal {
+                /* Less distance to logo */
+                margin: 90px 0 0 0;
+                border-bottom: none;
+        }
+
+        nav.top {
+                position: relative;
+                margin: 0; padding: .5em 0;
+                border-bottom: 2px solid #d2d2d2;
+                background-color: #ebebeb;
+                text-align: center;
         }
 
@@ -141 +183 @@
         }
 
+        footer.in-sheet {
+                height: auto;
+                min-height: 100px; /* wenn Vorherige/Nächste umbricht */
+        }
+
         footer.attached div.bigfooter ul,
         footer div.bigfooter li {
@@ -146 +193 @@
                 width: 100% !important;
         }
+
+        footer.in-sheet div.bigfooter {
+                padding-left: .4em;
+        }
+
 
         /* Mehrspaltige Contents. Overwrite dank #container */
@@ -162 +214 @@
         }
 
-        /* Box-System einspaltig machen */
-        #content .auto-bildbreite img,
-        #content .center img,
-        #content .left img,
-        #content .right img,
-        #content div.desc-left img,
-        #content div.desc-right img {
+        /* Box-System einspaltig machen, aber NUR wo
+           nicht "mobile-keep" steht! */
+        #content .auto-bildbreite:not(.mobile) img,
+        #content .center:not(.mobile) img,
+        #content .left:not(.mobile) img,
+        #content .right:not(.mobile) img,
+        #content div.desc-left:not(.mobile) img,
+        #content div.desc-right:not(.mobile) img {
                 float: none;
                 display: block; margin: 0 auto; /* for small images */

shared/css-v6/pagestyles/news.css

@@ -58 +58 @@
 }
 
+@media all and (max-width: 600px) {
+        /* Mobile fixes, einspaltiger Inhalt: Kein Floating! */
+        ul.news-ng li { float: none; }
+        ul.news-feed li { width: 100%; }
+}
+
 ul.news-feed li > a {
         display: block;

shared/css-v6/pagestyles/startseite.css

@@ -249 +249 @@
         box-shadow: 0 1px 2px rgba(0,0,0,.2);
 }
+

shared/js-v6/modules/startup.js

@@ -24 +24 @@
         'lightbox',
         'log',
+        'mobile',
 
         // ganz am anfang