Changeset 741 in t29-www


Ignore:
Timestamp:
Mar 8, 2015, 7:16:55 PM (4 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:
1 added
6 edited

Legend:

Unmodified
Added
Removed
  • de/index.php

    r729 r741  
    99    <div class="cols clear-after startseiten-boxen">
    1010       <div class="leftcol">
    11              <a href="#Termine" class="smooth-scroll div left clear-after termine oben">
     11             <a href="#Termine" class="smooth-scroll div left mobile clear-after termine oben">
    1212                   <img src="/shared/img-v6/date.png" class="kalender">
    1313                   <span class="h2">Termine <br> Führungen <br> Events</span>
     
    7878               
    7979               
    80                 <div class="flyer left">
     80                <div class="flyer left mobile">
    8181                        <a href="/shared/flyer/august2013.pdf"><img src="/shared/photos/start/flyer.jpg" width="120" height="210" alt="Photografie des Flyers" /></a>
    8282                        <h2>Flyer-Download</h2>
  • shared/css-v6/modules/13-footer.css

    r580 r741  
    359359footer.in-sheet div.bigfooter a.block:focus u {
    360360        color: #882224;
     361}
     362
     363/* By means of javascript, the in-sheet footer is cloned to the original position
     364   for the mobile viewports. Disable the this clone view generally
     365   (this is reversed again in mobile.css). */
     366footer.attached.for-mobile {
     367        display: none;
    361368}
    362369
  • shared/css-v6/modules/31-mobile.css

    r659 r741  
    2525                height: 2px; /* Nur Linie anzeigen, keine weisse Flaeche */
    2626        }
    27 
    28         /*
    29         footer.attached {
    30                 background: #F4F4F4;
    31                 color: #777;
    32         }
    33        
    34         footer.attached a:link, footer.attached a:visited {
    35                 color: #777;
    36         }
    37         */
     27       
     28        /* If we have a Javascript capable browser, display the cloned footer as the
     29           in-sheet footer looks ugly. */
     30        html.js footer.in-sheet div.bigfooter {
     31                display: none;
     32        }
     33        html.js footer.attached.for-mobile {
     34                display: block;
     35        }
     36
     37        /* mache Eintraege schmaler. Das hier sollte eigentlich gemeinsam bei footer.css stehen... */
     38        footer div.bigfooter li.haus {
     39                width: 300px;
     40        }
     41        footer div.bigfooter li.copy {
     42                width: 290px;
     43        }
     44        footer div.bigfooter li.logo {
     45                width: 240px;
     46        }
     47
     48        footer div.bigfooter li.haus img {
     49                width: 100px;
     50        }
     51        footer div.bigfooter li.haus span.p {
     52                margin-left: 118px;
     53        }
    3854}
    3955
     
    5369                height: auto;
    5470                background: none;
     71                text-align: left;
    5572        }
    5673
     
    5875                position: relative;
    5976                top: auto; bottom: auto;
    60                 margin: 108px 0 0 0;
     77                margin: 105px 0 0 0;
    6178                text-align: center;
    6279
     
    107124        }
    108125       
    109         footer.in-sheet.empty-footer { display: none; }
     126        /* ist nicht mehr empty wg bigfooter */
     127        /* footer.in-sheet.empty-footer { display: none; } */
    110128}
    111129
     
    125143        }
    126144
     145        #container h1 {
     146                display: block;
     147                position: absolute;
     148                top: 0; left: 0; width: 100%;
     149        }
     150
    127151        #container h1 a {
    128152                /* Banner in der Mitte anzeigen */
    129                 left: 0; width: 100%;
     153                display: block;
     154                position: relative; top: 0; left: 0;
     155                width: 80%; max-width: 310px;
    130156                background-repeat: no-repeat;
    131157                background-position: center center;
     158                background-size: 100% auto;
     159                margin: 0 auto;
     160        }
     161
     162        nav.horizontal {
     163                /* Less distance to logo */
     164                margin: 90px 0 0 0;
     165                border-bottom: none;
     166        }
     167
     168        nav.top {
     169                position: relative;
     170                margin: 0; padding: .5em 0;
     171                border-bottom: 2px solid #d2d2d2;
     172                background-color: #ebebeb;
     173                text-align: center;
    132174        }
    133175
     
    141183        }
    142184
     185        footer.in-sheet {
     186                height: auto;
     187                min-height: 100px; /* wenn Vorherige/Nächste umbricht */
     188        }
     189
    143190        footer.attached div.bigfooter ul,
    144191        footer div.bigfooter li {
     
    146193                width: 100% !important;
    147194        }
     195
     196        footer.in-sheet div.bigfooter {
     197                padding-left: .4em;
     198        }
     199
    148200
    149201        /* Mehrspaltige Contents. Overwrite dank #container */
     
    162214        }
    163215
    164         /* Box-System einspaltig machen */
    165         #content .auto-bildbreite img,
    166         #content .center img,
    167         #content .left img,
    168         #content .right img,
    169         #content div.desc-left img,
    170         #content div.desc-right img {
     216        /* Box-System einspaltig machen, aber NUR wo
     217           nicht "mobile-keep" steht! */
     218        #content .auto-bildbreite:not(.mobile) img,
     219        #content .center:not(.mobile) img,
     220        #content .left:not(.mobile) img,
     221        #content .right:not(.mobile) img,
     222        #content div.desc-left:not(.mobile) img,
     223        #content div.desc-right:not(.mobile) img {
    171224                float: none;
    172225                display: block; margin: 0 auto; /* for small images */
  • shared/css-v6/pagestyles/news.css

    r601 r741  
    5858}
    5959
     60@media all and (max-width: 600px) {
     61        /* Mobile fixes, einspaltiger Inhalt: Kein Floating! */
     62        ul.news-ng li { float: none; }
     63        ul.news-feed li { width: 100%; }
     64}
     65
    6066ul.news-feed li > a {
    6167        display: block;
  • shared/css-v6/pagestyles/startseite.css

    r537 r741  
    249249        box-shadow: 0 1px 2px rgba(0,0,0,.2);
    250250}
     251
  • shared/js-v6/modules/startup.js

    r357 r741  
    2424        'lightbox',
    2525        'log',
     26        'mobile',
    2627
    2728        // ganz am anfang
Note: See TracChangeset for help on using the changeset viewer.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License