Icons erst ab bestimmter Seitengröße darstellen = möglich ?

[Mike01]

Hallo,

Gibt es eine möglichkeit, einige Icons in der Menüzeile erst ab einer bestimmten Seitenbreite anzuzeigen ?
Würde gerne 3 iFrame Seiten von anderen Geräten in meinem Netzwerk in die Visu integrieren.
Diese Seiten würde ich aber nur auf dem PC bzw Tablet sehen wollen, auf dem Handy nützen mir die Seiten wegen der kleinen Bildgröße nichts, deshalb würde ich diese gerne ausblenden lassen. Durch die Icons wird nämlich auch das Bild falsch dargestellt.

Ich denke mal es geht irgendwie mit der CSS Funktion @media, allerdings hab ich von den CSS Funktionen noch nicht viel ahnung,
und wäre dankbar, wenn mir da jemand einen Tipp geben würde, wie ich das realisieren könnte.
Hier mal ein versuch, der allerdings nicht funktioniert. Die 3 Icons werden in dem fall garnicht angezeigt.

<div id="menu" class="menu">

  <a id="menu-reload" href="javascript: window.location.reload()">
    <img class="icon" src="icons/ws/audio_repeat.svg" /></a>
    
  <a id="menu-rooms" data-ajax="false" href="index.php">
    <img class="icon {{ page starts with 'index' or page starts with 'room' ? 'icon1' }}" src="{{ icon0 }}control_building_empty.svg"/></a>
        
    {{ basic.switch('Tasterbeleuchtung', 'env.location.night', 'status_night.svg', 'status_comfort.svg') }}
 
  <a id="menu-weather" data-ajax="false" href="index.php?page=weather.current">
    <img class="icon {{ page starts with 'weather' ? 'icon1'}}" src="{{ icon0 }}weather_cloudy.svg"/></a>

  <a id="menu-rooms" href="index.php?page=PlotHeizung">
     <img class="icon {{ page == 'PlotHeizung' or page == 'PlotStrom' or page == 'PlotTemperaturen' ? 'icon1' }}" src="{{ icon0 }}time_graph.svg"/></a>

    {% if min-width > '768px' %}
  <a id="menu-rooms" href="index.php?page=Heizung">
     <img class="icon {{ page == 'Heizung' ? 'icon1' }}" src="{{ icon0 }}sani_boiler_temp.svg"/></a>

  <a id="menu-rooms" href="index.php?page=Musik">
     <img class="icon {{ page == 'Musik' ? 'icon1' }}" src="{{ icon0 }}audio_headphone.svg"/></a>  

  <a id="menu-rooms" href="index.php?page=OSCam">
     <img class="icon {{ page == 'OSCam' ? 'icon1' }}" src="{{ icon0 }}it_satellite_dish.svg"/></a>  
  {% endif %}

  <a id="menu-system" data-ajax="false" href="index.php?page=config">
     <img class="icon {{ page == 'config' or page == 'team' or page == 'credits' or page == 'copyright' or page == 'smarthome.py' ? 'icon1' }}" src="{{ icon0 }}message_service.svg"/></a>
      
</div>

Danke und Gruß,
Mike

Anhänge:
Bild 1= Zustand mit der if Anweisung auf allen Desktops
Bild 2= Zustand ohne if Anweisung auf PC Desktop
Bild 3= Zustand ohne if Anweisung auf Handy

[Shai]

Hey,

versuchs mal mit der CSS Klasse "minimum-tablet" auf deinem "<a>".

Bsp:

 <a id="menu-rooms" href="index.php?page=Heizung" class="minimum-tablet">      <img class="icon {{ page == 'Heizung' ? 'icon1' }}" src="{{ icon0 }}sani_boiler_temp.svg"/></a>

Laut der base.css sollte das dann nur sichtbar sein wenn du mindestens 768px Breite hast.
Es gibt auch noch "minimum-desktop", das sollte dann ab 980px Breite greifen.

Das kann dann auf jedes Icon, oder du packst ggfs. noch n "<span class="minimum-tablet"></span>" um alle auszublendenden rum.


Grüße,

Lars

[Mike01]

Hallo Lars,

Danke für den Tipp, grundsätzlich funktioniert es, die Icons werden auf dem Handy nicht angezeigt,
allerdings werden die Icons auf dem Desktop und Tablet jetzt untereinander dargestellt. (siehe Bilder)

Bild 1 = wenn ich class="minimum_tablet" eingebe,
Bild 2 = span class="minimum_tablet"

Hast du ne Idee, was da falsch läuft ?

Gruß, Mike

[Shai]

Hey, das wird am "display: block" liegen was die CSS Klasse mitbringt. Dann müsste man doch neue CSS Klassen machen und statt display: block ein display: inline verwenden. Nennst du dann halt irgendwie minimum-tablet-inline oder so. Grüße, Lars

[Mike01]

Danke, du glaubst garnicht was ich die letzten Tage alles versucht habe, ich hab auch die abenteuerlichsten Design hervorgezaubert aber nicht das was ich wollte.
Nämlich dass die Icons alle in einer Reihe angezeigt werden. css ist echt nicht mein fall.
Das mit der neuen css Klasse hab ich auch nicht hinbekommen, hab zwar eine neue class erstellt, die ist dann auch berücksichtigt worden, so dass alle Icons in einer Reihe sind aber auf dem Handy wurden sie nicht ausgeblendet.

Hab dann in der css Datei bei den einträgen mit "minimum-tablet" einfach das display: block durch display:inlay ersetzt.
Bis jetzt sieht der Rest der Visu nicht anders aus wie bisher und die Icons werden so angezeigt wie ich es mir vorgestellt hab.
Somit passt es.

/* Large desktop */
@media all and (min-width: 980px) {
    .minimum-tablet, .minimum-desktop, .visible-desktop {
        display: inline;
    }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .minimum-tablet, .visible-tablet {
        display: inline;
    }
}

Danke und Gruß,
Mike

[Shai]

Hey Mike,

genau die CSS Klassen meinte ich. Ich hätte jetzt nur nicht verändert sondern kopiert und angepasst.
Dafür kann man dann ja sogar seine "visu.css" in seinem pages Ordner verwenden.

[FONT=Courier][SIZE=12px]/* Large desktop */[/SIZE][/FONT]  
 @media all and (min-width: 980px) {
    .minimum-tablet-inline, .minimum-desktop-inline, .visible-desktop-inline {      
        display: inline;    
    }
}  
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .minimum-tablet-inline, .visible-tablet-inline {
        display: inline;    
    }
}

Und dann natürlich auf dem "span" bzw. "a" class="minimum-tablet-inline".



Grüße,

Lars

[hhhc]

[FONT=Courier][SIZE=12px]/* Large desktop */[/SIZE][/FONT]
@media all and (min-width: 980px) {
.minimum-tablet-inline, .minimum-desktop-inline, .visible-desktop-inline {
display: inline;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
.minimum-tablet-inline, .visible-tablet-inline {
display: inline;
}
}

Und dann natürlich auf dem "span" bzw. "a" class="minimum-tablet-inline".

Das war ein guter Tip. Allerdings musste ich noch eine weitere Zeile in meine visu.css übernehmen.

.minimum-tablet-inline, .minimum-desktop-inline, .visible-desktop-inline, .visible-tablet-inline, .visible-phone-inline {
    display: none;
}

Gesamt sieht das dann so aus und ich kann mit "visible-phone-inline" steuern, was ich im portrait modus meines iPhones nicht sehe.

.minimum-tablet-inline, .minimum-desktop-inline, .visible-desktop-inline, .visible-tablet-inline, .visible-phone-inline {
    display: none;
}

/* Large desktop */  
 @media all and (min-width: 980px) {
    .minimum-tablet-inline, .minimum-desktop-inline, .visible-desktop-inline {      
        display: inline;    
    }
}  
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .minimum-tablet-inline, .visible-tablet-inline {
        display: inline;    
    }
}

/* Landscape phone to desktop */
@media all and (min-width: 450px) {
    .visible-phone-inline {
        display: inline;
    }
}