Rooms-Menu -> Raumliste (Listview) halbe Breite

[Bigsonic1]

Hallo,
ich würde gerne, das auf der Indexseite die Raumliste nur die halbe breite hat, damit ich was anderes zwischen Wetter und Raumliste einsetzen kann.
Wäre das möglich, wenn ja wie?
Vllt. ist die Lösung ja ganz simpel, aber bin absoluter Anfänger...
Vielen Dank schon mal.
Unbenannt.png

[patrickgoll]

Das sollte meiner Meinung nach nur ein kleiner css Eingriff sein. Ich schau mal ob ich das für dich heute oder morgen mal ausprobieren kann und melde mich hier dann wieder .
Grüße Patrick .

[patrickgoll]

Also erste Erkenntnis. Gehts du in deine index.html und fügst den Style Part im Content Block ein, halbiert sich deine Menüleiste auf der Startseite. Blöderweise halbiert sich hier auch der Content Block aller Unterseiten solange, bis du einen Pagerefresh machst. Warum das so ist kann ich dir nicht sagen. Sollte normalerweise nicht so sein.

{% block content %}


<style>
.base .primary {
    float: right;
    margin-right: 1%;
    padding-right: 1%;
    width: 30%;
}
</style>


        {% include 'rooms_menu.html' %}

{% endblock %}

[patrickgoll]

Und um das endgültige Ziel zu erreichen musst du folgendes tun:

- du kopierst aus dem Verzeichnis /pages/base/ die Datei base.html in dein Projektverzeichnis. Dann fügst du folgendes hinzu:

 <div class="zentral">
                                {% block zentral %}{% endblock %}
 </div>

und zwar genau nach dem div block mit der Klasse "primary". Sieht also so aus:

/**
* -----------------------------------------------------------------------------
* @package     smartVISU
* @author      Martin Gleiß
* @copyright   2012 - 2015
* @license     GPL [http://www.gnu.de]
* -----------------------------------------------------------------------------
*/

{% extends "root.html" %}

{% block body %}

        <div data-role="page" id="{{ page }}" class="base" data-theme="a">
                <div data-role="header" data-position="fixed" data-tap-toggle="false">
                        <div class="ui-left">
                                {% include 'menu.html' %}
                        </div>
                        <div class="ui-right">
                                <a href="javascript:window.location.href=window.location.href" style="t$
                                        {{ lib.smartvisu() }}
                                        <div class="mini">
                                                <span id="miniclock" class="miniclock" data-widget="clo$
                                </a>
                        </div>
                        <div class="signal hide" onClick="$('.ui-page-active .alert').popup('open');"><$
                        <div class="alert" data-role="popup" data-overlay-theme="a">
                                <div data-role="header" data-theme="c"><h1></h1></div>
                                <p></p>

                                <div class="control">
                                        <span class="stamp"></span>
                                        <a onClick="notify.remove();" class="ui-mini" data-icon="check"$
                                        <a onClick="$('.alert').popup('close');" class="ui-mini" data-i$
                                </div>
                        </div>
                </div>

                <div data-role="content" class="page-bg">
                        <div class="primary" style="background-image: none;">
                                {% block content %}{% endblock %}
                        </div>

                        <div class="zentral">
                                {% block zentral %}{% endblock %}
                        </div>

                        <div class="secondary minimum-tablet">
                                {% block sidebar %}{% endblock %}
                        </div>
                </div>
                {% block footer %}{% endblock %}
        </div>

{% endblock %}

Deine index.html musst du dann auch anpassen und den Zentral Block hinzufügen. Du kannst sehen dass ich an der richtigen Stelle "Test" geschrieben habe. Dort kommt dann dein Content für die Zentrale Spalte rein.

{% block zentral %}


<style>
.base .zentral {
    display: inline-block;
    width: 30%;
}
</style>

<div>
Test
</div>

{% endblock %}

{% block content %}


<style>
.base .primary {
    float: right;
    margin-right: 1%;
    padding-right: 1%;
    width: 30%;
}
</style>



        {% include 'rooms_menu.html' %}

{% endblock %}

Den Block fügst du am besten direkt vor dem Block "Content" ein. So nun hast du ein 3 Spalten Layout auf dem Index. Blöderweise hast du dann halt noch immer den Bug, dass eine aufgerufene Seite bis zum Page Refresh auch 3 Spalten hat. Probier einfach mal aus, ob dir das so passt. Ich forsche weiter nach dem Bug.

[patrickgoll]

Okay es sieht so aus, dass alle Pages nunmal auf rooms.html beruhen. Die rooms.html beruht aber auf base.html. Somit wird die css Anpassung auch auf alle Unterräume angezogen. Die Seite braucht also einen Reload um zu merken, dass sie gar keinen div Container mit der Klasse zentral hat. Das bedeutet dass man einen riesen Eingriff in die hier schon vorgegebene Struktur machen muss, damit dein Layout auch gut funktioniert. Ich rate dir das Layout zu vermeiden, wenn es geht. Lager das, was du in die zentrale Spalte machen willst am besten auf eine Extra Seite aus, wenn es geht. Alternativ les dich etwas ein in HTML und CSS und bau das um. Es ist nicht unschaffbar nur etwas aufwändig.

Ich hoffe ich konnte einigermaßen weiterhelfen.

Grüße,
Patrick

[smai]

Der Page Refresh ist notwendig, weil beim Navigieren kein voller Page Load gemacht wird sondern nur per Ajax der Inhalt reingeladen.
Ein css auf einer bestimmten Seite gilt also für alle danach aufgerufenen.

Jede Page hat aber ihre ID, für die Startseite ist dies index.
Ein Element nur auf der Startseite ansprechen kann man also in CSS per
#index .base .primary

[patrickgoll]

Perfekt, dann haben wir eine runde Lösung. Schön

[Bigsonic1]

Vielen lieben Dank für die ausführliche Beschreibung , hat soweit geklappt, aber wie funktioniert das jetzt mit: #index .base .primary?
Wo muss ich diese Regel festlegen?

[patrickgoll]

Ich vermute anstatt dem part mit dem .base .primary solltest du den # davor setzen. Vielleicht kann smai das besser sagen.

[smai]

Du kannst dies im Beispiel aus Beitrag #3 machen:

{% block content %}


<style>
#index .base .primary {
    float: right;
    margin-right: 1%;
    padding-right: 1%;
    width: 30%;
}
</style>


        {% include 'rooms_menu.html' %}

{% endblock %}

Sauberer wäre es allerdings, eine eigene visu.css in deinen Pages zu erstellen mit untenstehendem Inhalt.
Dann musst du an der index.html gar keine Änderungen machen.

#index .base .primary {
    float: right;
    margin-right: 1%;
    padding-right: 1%;
    width: 30%;
}

Allerdings willst du ja eh "etwas anderes" zwischen Wetter und Raumliste einfügen. Was soll das denn sein bzw. wo willst du das einbauen und wie gros soll es sein?

[Bigsonic1]

Ich möchte den Müll Kalender, aktuelle Fahrzeiten(stau).... da einfügen.
Das #index funktioniert leider nicht.. wenn ich das einfüge ist die listview wieder auf Normalgröße.

[smai]

Entschuldige, das .base ist zuviel. Korrekt wäre #index .primary {

[Sprocky]

Ich habe es jetzt auch hin bekommen das Menü schmaler zu machen. Aber wie bekomme ich den Rest der Seite breiter bzw. ein zwei Spalten Layout hin?

[patrickgoll]

Du musst die unterschiedlichen width attribute der unterschiedlichen Seitenteile anpasse. 3 x 30 % ergibt 90 %. 10% gehen drauf für die Randbereiche links und rechts.
Du könntest also hergehen und das ungleich verteilen, z.B. 2x 40% und 1x 10%. Teste einfach mal, was dir am meisten zusagt.

[smai]

Frag doch gleich nach 2 Spalten.
Vergiss das CSS von oben und füg in der Index.html bei {% block content %} folgendes ein:

{% block content %}
    <div style="float: left; width: 48%; margin-right: 2%; padding-right: 2%;">
        Hier kommt dein Inhalt
    </div>
    <div style="float: left; width: 48%;">
        {% include 'rooms_menu.html' %}
    </div>
{% endblock %}